: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);

  /* Warning panel — surface, its softer wash, and the ink written on both (DOK-806).
     A token rather than the hex it replaces because the amber is the one warm surface in the system
     and it was written out five times across dok-cadastro.css: a badge, a blocked trigger path, an
     integration status pill and the two lines of prose under them. Those five stayed light while the
     page around them went dark — the light islands the issue is named after.

     It does NOT derive from --mud-palette-warning, and that is the point of stating it here. Warning
     is #F59E0B in the light palette (2.15:1 on white — DokTheme.cs records the measurement), so ink
     drawn with it would be unreadable on its own wash. The pair below is the one already shipping in
     light mode, kept exactly, with a dark counterpart that inverts the relationship instead of
     restating it: a translucent amber over the dark surface, and amber-300 ink on top of that. */
  --dok-warning-surface: #fff4e5;
  --dok-warning-surface-soft: #fffaf3;
  --dok-warning-ink: #9a4d00;

  /* Pass/fail ink for text that states a verdict — the password checklist is the one consumer today
     (DOK-806). Stated here for the same reason as the amber: --mud-palette-success is #16A34A, which
     is 3.1:1 on a near-white panel and fails AA for text, so the light values below are the darker
     pair the checklist already shipped. The dark pair is the same two hues lightened until they clear
     AA over a dark panel, so the meaning survives the theme and the contrast survives with it. */
  --dok-danger-ink: #dc2626;
  --dok-success-ink: #15803d;

  /* DOK-1435 — the ink of a value written on its own tone's wash: the pills of a dossier's state, of a
     document's status, of the listing's marks and of the Painel, keyed by WorkItemLifecyclePresentation.Tone.
     A tone's palette colour is a fill, not an ink. Written on its own 10-14% wash in the light theme it read
     at 1.9:1 (warning), 2.9:1 (success), 3.6:1 (info), 4.1:1 (error) and 4.25:1 (primary), against AA's
     4.5:1. So the ink is the same colour mixed with black, each tone by the least that clears about 5.2:1 on
     the DOK palette at a 14% wash — ContrastTokenTests computes it from these lines and from DokTheme.cs. A
     mix rather than a hex, so a tenant's own palette keeps its hue (DOK-328). The dark theme hands the colour
     back unmixed below: on the dark surface it already clears AA on its wash. */
  --dok-tone-default-ink: var(--mud-palette-text-secondary);
  --dok-tone-dark-ink: var(--mud-palette-text-primary);
  --dok-tone-primary-ink: color-mix(in srgb, var(--mud-palette-primary) 85%, #000);
  --dok-tone-secondary-ink: color-mix(in srgb, var(--mud-palette-secondary) 85%, #000);
  --dok-tone-tertiary-ink: color-mix(in srgb, var(--mud-palette-tertiary) 80%, #000);
  --dok-tone-info-ink: color-mix(in srgb, var(--mud-palette-info) 75%, #000);
  --dok-tone-success-ink: color-mix(in srgb, var(--mud-palette-success) 70%, #000);
  --dok-tone-warning-ink: color-mix(in srgb, var(--mud-palette-warning) 55%, #000);
  --dok-tone-error-ink: color-mix(in srgb, var(--mud-palette-error) 80%, #000);

  /* 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 <html> 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);

  /* The warning panel inverted rather than dimmed (DOK-806). A translucent amber lets the surface it
     sits on show through, so the panel reads as a tinted region of the dark page instead of a lit
     rectangle on it; the soft variant is the same wash at half strength, keeping the two apart the
     way #fff4e5 and #fffaf3 are apart in light mode. The ink is amber-300 — light enough to carry
     the text (well past 4.5:1 over the tinted dark surface) and still recognisably the warning
     colour. Alpha, so a tenant's darker or lighter surface both work underneath it. */
  --dok-warning-surface: rgba(251, 191, 36, 0.16);
  --dok-warning-surface-soft: rgba(251, 191, 36, 0.08);
  --dok-warning-ink: #fcd34d;

  /* red-400 and green-400: the light pair (#dc2626 / #15803d) was chosen to be dark enough for a
     near-white panel and is 2.7:1 on a dark one — a verdict nobody can read. */
  --dok-danger-ink: #f87171;
  --dok-success-ink: #4ade80;

  /* DOK-1435 — the tone inks unmixed: on the dark surface each palette colour clears AA on its own wash as it
     is (4.8:1 to 8:1 on the DOK palette), and the black the light theme mixes in would sink it into the page. */
  --dok-tone-primary-ink: var(--mud-palette-primary);
  --dok-tone-secondary-ink: var(--mud-palette-secondary);
  --dok-tone-tertiary-ink: var(--mud-palette-tertiary);
  --dok-tone-info-ink: var(--mud-palette-info);
  --dok-tone-success-ink: var(--mud-palette-success);
  --dok-tone-warning-ink: var(--mud-palette-warning);
  --dok-tone-error-ink: var(--mud-palette-error);
}

/* Whoever asks the operating system for more contrast gets a wider gap, in whichever theme they are
   in (DOK-806). One media query holding both halves, rather than a hex repeated inside each component
   that wants it — which is how the checklist's high-contrast pair came to exist only for light mode.
   Indented on purpose: DesignTokenTests reads the two unconditional blocks above by matching ':root'
   at the start of a line, and these overrides are not those blocks. */
@media (prefers-contrast: more) {
  :root {
    --dok-danger-ink: #a30d0d;
    --dok-success-ink: #0f5d2c;
    /* DOK-1435 — the tone inks take half black: 6.4:1 or more on their wash. */
    --dok-tone-primary-ink: color-mix(in srgb, var(--mud-palette-primary) 50%, #000);
    --dok-tone-secondary-ink: color-mix(in srgb, var(--mud-palette-secondary) 50%, #000);
    --dok-tone-tertiary-ink: color-mix(in srgb, var(--mud-palette-tertiary) 50%, #000);
    --dok-tone-info-ink: color-mix(in srgb, var(--mud-palette-info) 50%, #000);
    --dok-tone-success-ink: color-mix(in srgb, var(--mud-palette-success) 50%, #000);
    --dok-tone-warning-ink: color-mix(in srgb, var(--mud-palette-warning) 50%, #000);
    --dok-tone-error-ink: color-mix(in srgb, var(--mud-palette-error) 50%, #000);
  }

  :root[data-dok-theme="dark"] {
    --dok-danger-ink: #fca5a5;
    --dok-success-ink: #86efac;
    /* DOK-1435 — and in the dark theme they take white: 6.9:1 or more. */
    --dok-tone-primary-ink: color-mix(in srgb, var(--mud-palette-primary) 70%, #fff);
    --dok-tone-secondary-ink: color-mix(in srgb, var(--mud-palette-secondary) 70%, #fff);
    --dok-tone-tertiary-ink: color-mix(in srgb, var(--mud-palette-tertiary) 70%, #fff);
    --dok-tone-info-ink: color-mix(in srgb, var(--mud-palette-info) 70%, #fff);
    --dok-tone-success-ink: color-mix(in srgb, var(--mud-palette-success) 70%, #fff);
    --dok-tone-warning-ink: color-mix(in srgb, var(--mud-palette-warning) 70%, #fff);
    --dok-tone-error-ink: color-mix(in srgb, var(--mud-palette-error) 70%, #fff);
  }
}

.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;
}

/* ===== 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 {
  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 {
  border-color: rgba(var(--mud-palette-primary-rgb), 0.24);
  box-shadow: var(--dok-shadow-md);
}

/* ===== DokPageHeader Styles ===== */
/* DOK-1510 — in the component's own scoped stylesheet (DokPageHeader.razor.css), the only place they are. */

/* ===== 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: var(--dok-font-weight-bold);
}

.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 {
  background: rgba(var(--mud-palette-surface-rgb), 0.90);
}

.fw-600 {
  font-weight: var(--dok-font-weight-semibold);
}

.fw-700 {
  font-weight: var(--dok-font-weight-bold);
}

/* ===== 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: var(--dok-font-weight-semibold);
  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: var(--dok-font-weight-medium);
}

.dok-dialog-btn-confirm {
  font-weight: var(--dok-font-weight-semibold) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
}

@media (max-width: 720px) {
  .dok-premium-app__content {
    padding: 1rem;
  }

}

/* 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(--dok-tone-primary-ink);
  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--positive .dok-empty-state__icon {
  color: var(--dok-tone-success-ink);
  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: var(--dok-font-weight-semibold);
  line-height: 1.5;
}

.dok-empty-state__actions {
  margin-top: 0.5rem;
}

/* DOK-1511 — an editor's section with nothing in it yet: the dashed box the template rows used (.dok-tpl-empty), a
   smaller ring and one quiet line. */
.dok-empty-state--section {
  gap: 0.5rem;
  padding: 1.6rem 1rem;
  border: 1px dashed rgba(var(--mud-palette-lines-default-rgb), 0.6);
  border-radius: var(--dok-radius-lg);
}

.dok-empty-state--section .dok-empty-state__icon {
  width: 3rem;
  height: 3rem;
  box-shadow: none;
}

.dok-empty-state--section .dok-empty-state__title {
  font-size: var(--dok-font-size-sm);
}

.dok-empty-state--section .dok-empty-state__description {
  font-size: var(--dok-font-size-sm);
  font-weight: var(--dok-font-weight-medium);
}

/* DOK-1511 — the whole page has nothing to show: a card in the middle of it (.dok-empty--page). */
.dok-empty-state--page {
  max-width: 34rem;
  margin: 3rem auto;
  padding: 3rem 2rem;
  border: 1px solid var(--dok-border-subtle);
  border-radius: var(--dok-radius-lg);
  background: var(--mud-palette-surface);
}

/* ===== Progress bar (DokProgressBar, DOK-2196) =====
   The one determinate bar: a track and a fill. Global rather than scoped, because it is drawn inside MudTable rows and
   MudTooltip heads, where a page's scoped stylesheet never reaches. The track's grey is the lines' tone at a low alpha,
   so it sits on a surface in both modes; the fill is the tone's palette colour. No text here: the words stay with the
   component that owns the figure. */
.dok-progress {
  position: relative;
  display: block;
  width: 100%;
  min-width: 3rem;
  height: 0.4rem;
  border-radius: var(--dok-radius-full);
  background: rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), 0.18);
  overflow: hidden;
}

/* DOK-1524 — the thin bar the owner asked for in the listing: a row, a card's detail, a rail. */
.dok-progress--row {
  height: 0.25rem;
}

.dok-progress__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  border-radius: inherit;
  background: var(--mud-palette-primary);
  transition: width 0.25s ease;
}

.dok-progress--secondary .dok-progress__fill {
  background: var(--mud-palette-secondary);
}

.dok-progress--success .dok-progress__fill {
  background: var(--mud-palette-success);
}

.dok-progress--warning .dok-progress__fill {
  background: var(--mud-palette-warning);
}

.dok-progress--error .dok-progress__fill {
  background: var(--mud-palette-error);
}

.dok-progress--muted .dok-progress__fill {
  background: rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), 0.55);
}

/* Nothing to measure: a dashed track and no fill, so «there is no work here» cannot read as «no work was done». */
.dok-progress--empty {
  background: repeating-linear-gradient(90deg,
    rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), 0.22) 0,
    rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), 0.22) 0.22rem,
    transparent 0.22rem,
    transparent 0.4rem);
}

/* ===== Metric card (DokStatCard, DOK-1512) =====
   One card for a figure: a listing's row of counts (Stat) and an editor's review summary (Summary). The figure
   stays monochrome; only the glyph's tile takes a tone, because three coloured numbers in a row read as one alarm
   instead of three different asks. The row that lays the cards out is the page's (.dok-stats in the App). */
.dok-stat {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: var(--dok-space-md);
  border: 1px solid var(--dok-border-subtle);
  border-radius: 10px;
  background: var(--mud-palette-surface);
}

.dok-stat--no-icon {
  grid-template-columns: minmax(0, 1fr);
}

/* Monochrome glyph, adapting to light and dark through text-primary; colour is reserved for the tones below. */
.dok-stat__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--dok-radius-sm);
  background: rgba(148, 163, 184, 0.16);
  color: var(--mud-palette-text-primary);
}

.dok-stat__label {
  color: var(--mud-palette-text-secondary);
  font-size: 0.82rem;
  font-weight: var(--dok-font-weight-semibold);
}

.dok-stat__value {
  margin-top: 0.15rem;
  color: var(--mud-palette-text-primary);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.dok-stat__note {
  margin-top: 0.3rem;
  color: var(--mud-palette-text-secondary);
  font-size: var(--dok-font-size-xs);
  line-height: 1.3;
}

a.dok-stat {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

a.dok-stat:hover,
a.dok-stat:focus-visible {
  border-color: rgba(148, 163, 184, 0.5);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.dok-stat--selected {
  border-color: rgba(var(--mud-palette-primary-rgb), 0.55);
}

.dok-stat--warning .dok-stat__icon {
  background: rgba(var(--mud-palette-warning-rgb), 0.14);
  color: var(--dok-tone-warning-ink);
}

.dok-stat--error .dok-stat__icon {
  background: rgba(var(--mud-palette-error-rgb), 0.12);
  color: var(--dok-tone-error-ink);
}

/* A line of an editor's review step: the glyph, the label in small capitals, the figure on one line. */
.dok-stat--summary {
  display: block;
  padding: 0.85rem;
  border-radius: var(--dok-radius-sm);
}

.dok-stat--summary .dok-stat__icon {
  display: inline-flex;
  width: auto;
  height: auto;
  background: none;
  color: var(--mud-palette-text-secondary);
}

.dok-stat--summary .dok-stat__label,
.dok-stat--summary .dok-stat__value {
  display: block;
}

.dok-stat--summary .dok-stat__label {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dok-stat--summary .dok-stat__value {
  margin-top: 0.12rem;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: var(--dok-font-weight-bold);
  line-height: var(--dok-line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 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 <input>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 and buttons). 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-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 {
    transform: none !important;
  }
}

/* ===== MudBlazor's text colours (DOK-1437) =====
   MudBlazor writes Color.Warning, .Success, .Info and .Tertiary text in the palette colour itself: the .mud-x-text
   utility (MudText, MudIcon, MudLink), the text and outlined buttons and chips, the outlined avatars, the alerts'
   icons, and the rest below. On the light surface those colours read at 2.15:1, 3.30:1, 4.10:1 and 4.47:1. The
   same selectors, loaded after MudBlazor's sheet, take the tone's ink instead (DOK-1435); !important where
   MudBlazor's own rule has it. In the dark theme the ink is the palette colour, so nothing changes there.
   The list is MudBlazor 9.11.0's, and MudBlazorTextColourOverrideDok1437Tests (App.Tests) reads the package's
   sheet to keep it whole: a version that adds a selector fails there. */

.mud-warning-text {
  color: var(--dok-tone-warning-ink) !important;
}

.mud-alert-text-warning .mud-alert-icon,
.mud-alert-outlined-warning .mud-alert-icon,
.mud-avatar-outlined.mud-avatar-outlined-warning,
.mud-button-text.mud-button-text-warning,
.mud-button-outlined.mud-button-outlined-warning,
.mud-button-group-text.mud-button-group-override-styles.mud-button-group-text-warning .mud-button-root,
.mud-button-group-outlined.mud-button-group-override-styles.mud-button-group-outlined-warning .mud-button-root,
.mud-chip-outlined.mud-chip-color-warning,
.mud-chip-text.mud-chip-color-warning,
.mud-fab-text.mud-fab-text-warning,
.mud-fab-outlined.mud-fab-outlined-warning,
.mud-navmenu.mud-navmenu-warning .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-warning .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-treeview.mud-treeview-selected-warning .mud-treeview-item-content.mud-treeview-item-selected,
.mud-treeview.mud-treeview-checked-warning .mud-treeview-item-checkbox .mud-button-root.mud-icon-button {
  color: var(--dok-tone-warning-ink);
}

.mud-success-text {
  color: var(--dok-tone-success-ink) !important;
}

.mud-alert-text-success .mud-alert-icon,
.mud-alert-outlined-success .mud-alert-icon,
.mud-avatar-outlined.mud-avatar-outlined-success,
.mud-button-text.mud-button-text-success,
.mud-button-outlined.mud-button-outlined-success,
.mud-button-group-text.mud-button-group-override-styles.mud-button-group-text-success .mud-button-root,
.mud-button-group-outlined.mud-button-group-override-styles.mud-button-group-outlined-success .mud-button-root,
.mud-chip-outlined.mud-chip-color-success,
.mud-chip-text.mud-chip-color-success,
.mud-fab-text.mud-fab-text-success,
.mud-fab-outlined.mud-fab-outlined-success,
.mud-navmenu.mud-navmenu-success .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-success .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-treeview.mud-treeview-selected-success .mud-treeview-item-content.mud-treeview-item-selected,
.mud-treeview.mud-treeview-checked-success .mud-treeview-item-checkbox .mud-button-root.mud-icon-button,
.mud-data-grid .drop-allowed {
  color: var(--dok-tone-success-ink);
}

.mud-info-text {
  color: var(--dok-tone-info-ink) !important;
}

.mud-alert-text-info .mud-alert-icon,
.mud-alert-outlined-info .mud-alert-icon,
.mud-avatar-outlined.mud-avatar-outlined-info,
.mud-button-text.mud-button-text-info,
.mud-button-outlined.mud-button-outlined-info,
.mud-button-group-text.mud-button-group-override-styles.mud-button-group-text-info .mud-button-root,
.mud-button-group-outlined.mud-button-group-override-styles.mud-button-group-outlined-info .mud-button-root,
.mud-chip-outlined.mud-chip-color-info,
.mud-chip-text.mud-chip-color-info,
.mud-fab-text.mud-fab-text-info,
.mud-fab-outlined.mud-fab-outlined-info,
.mud-navmenu.mud-navmenu-info .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-info .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-treeview.mud-treeview-selected-info .mud-treeview-item-content.mud-treeview-item-selected,
.mud-treeview.mud-treeview-checked-info .mud-treeview-item-checkbox .mud-button-root.mud-icon-button {
  color: var(--dok-tone-info-ink);
}

.mud-tertiary-text {
  color: var(--dok-tone-tertiary-ink) !important;
}

.mud-alert-text-tertiary .mud-alert-icon,
.mud-alert-outlined-tertiary .mud-alert-icon,
.mud-avatar-outlined.mud-avatar-outlined-tertiary,
.mud-button-text.mud-button-text-tertiary,
.mud-button-outlined.mud-button-outlined-tertiary,
.mud-button-group-text.mud-button-group-override-styles.mud-button-group-text-tertiary .mud-button-root,
.mud-button-group-outlined.mud-button-group-override-styles.mud-button-group-outlined-tertiary .mud-button-root,
.mud-chip-outlined.mud-chip-color-tertiary,
.mud-chip-text.mud-chip-color-tertiary,
.mud-fab-text.mud-fab-text-tertiary,
.mud-fab-outlined.mud-fab-outlined-tertiary,
.mud-navmenu.mud-navmenu-tertiary .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-tertiary .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-treeview.mud-treeview-selected-tertiary .mud-treeview-item-content.mud-treeview-item-selected,
.mud-treeview.mud-treeview-checked-tertiary .mud-treeview-item-checkbox .mud-button-root.mud-icon-button {
  color: var(--dok-tone-tertiary-ink);
}