/* Ciceroux brand theme - the one place for the design tokens (colours, type, radii, spacing).
   Source: the Ciceroux Corporate Identity manual (The Oaks Collective, version 01, June 2021).
   Theme.cs mirrors the colour tokens for MudBlazor, which needs literal values; change both together.
   Loaded after app.css, so it re-points the existing --gawie-* variables at the brand without touching app.css. */

/* Type. All UI text uses the platform's own font, Lato (app.css), as before the rebrand: Hein, 22 October 2026 - the
   brand lettering only in the Ciceroux wordmark in the top bar (an SVG, brand/ciceroux-wordmark*.svg).
   Open Sans (SIL OFL 1.1, licence in fonts/OFL-OpenSans.txt) is kept only for the small "Legal AI Workspace" descriptor
   that sits under the wordmark on the loading and sign-in screens. */
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  /* Primary colours (manual p.41) */
  --brand-denim: #4A5D85;      /* Optimum Denim Blue  RGB 74,93,133   CMYK 81,59,27,9   PMS 2374 C */
  --brand-midnight: #25344C;   /* Midnight Blue       RGB 37,52,76    CMYK 91,70,43,40  PMS 2380 C */
  --brand-latte: #D6C9B0;      /* Latte               RGB 214,201,176 CMYK 19,19,31,0   PMS 7528 C */
  /* Secondary colours - sparingly, backgrounds and highlights */
  --brand-periwinkle: #697CA6; /* Bluish Periwinkle   RGB 105,124,166 CMYK 67,45,18,1   PMS 2137 C */
  --brand-cream: #EEECE2;      /* Fresh Cream         RGB 238,236,226 CMYK 8,6,12,0     PMS Cool Gray 1 C */

  --brand-font-descriptor: "Open Sans", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif;

  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 12px;
  --brand-radius-pill: 999px;  /* buttons, as in the manual's website and newsletter */

  --brand-space-1: 4px; --brand-space-2: 8px; --brand-space-3: 12px; --brand-space-4: 16px;
  --brand-space-5: 20px;      /* the manual's email padding */
  --brand-space-6: 24px; --brand-space-8: 32px;
  --brand-logo-min: 35px;     /* digital minimum height of the brandmark and the iconised logo (manual p.67) */

  /* The app's own variables, re-pointed at the brand (light). */
  --gawie-focus: var(--brand-denim); --gawie-wordmark: var(--brand-midnight); --gawie-wordmark-accent: var(--brand-denim);
  --gawie-question: #F4F2EA; --gawie-line: #E2DED1; --gawie-paper: #ffffff;
  --gawie-toggle-bg: rgba(37,52,76,.07); --gawie-toggle-on: #ffffff; --gawie-toggle-fg: var(--brand-midnight);
  --brand-appbar-border: rgba(37,52,76,.12);
}
:root[data-theme="dark"] {
  --gawie-focus: #9AABCF; --gawie-wordmark: var(--brand-cream); --gawie-wordmark-accent: var(--brand-latte);
  --gawie-question: #232E40; --gawie-line: #2E3A4D; --gawie-paper: #18212F;
  --gawie-toggle-bg: rgba(238,236,226,.10); --gawie-toggle-on: rgba(238,236,226,.22); --gawie-toggle-fg: var(--brand-cream);
  --brand-appbar-border: #2e3a4d;
}

/* Headings: the UI font, sentence case, and every heading upright (Hein, 22 October 2026), including the display
   headings such as "Document Vault". Italics stay in body text (case names, quotations). */
h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5,
.mud-typography-h6, .gawie-display { font-style: normal !important; text-transform: none; }
.gawie-display { font-family: var(--mud-typography-default-family); font-weight: 900 !important; letter-spacing: -0.01em; }
.mud-button-root { border-radius: var(--brand-radius-pill); }

/* The top bar (see "The top bar in brand blue" below for its colours since 23 October 2026), with a subtle bottom border.
   Dark mode: a lifted midnight with the wordmark in Fresh Cream (manual p.43, case 3). */
.mud-appbar.border-b { border-bottom: 1px solid var(--brand-appbar-border) !important; }
.ciceroux-home { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.ciceroux-wordmark { height: var(--brand-logo-min); width: auto; display: block; }
.ciceroux-icon-only { display: none; }
.ciceroux-on-dark { display: none !important; }
:root[data-theme="dark"] .ciceroux-on-light { display: none !important; }
:root[data-theme="dark"] .ciceroux-wordmark.ciceroux-on-dark { display: block !important; }
.mud-appbar .gawie-install { background: var(--brand-denim); color: #ffffff; }
.mud-appbar .gawie-install:hover { background: var(--brand-midnight); }
:root[data-theme="dark"] .mud-appbar .gawie-install { background: var(--brand-latte); color: var(--brand-midnight); }
@media (max-width: 480px) {
  /* Phone: the iconised logo (C mark), allowed in minimised navigation bars, still 35px high. */
  .ciceroux-wordmark, :root[data-theme="dark"] .ciceroux-wordmark.ciceroux-on-dark { display: none !important; }
  .ciceroux-icon-only.ciceroux-on-light { display: block; height: var(--brand-logo-min); width: var(--brand-logo-min); }
  :root[data-theme="dark"] .ciceroux-icon-only.ciceroux-on-dark { display: block !important; height: var(--brand-logo-min); width: var(--brand-logo-min); }
}

/* GLR endorsement: small, monochrome, below everything else. The mark is a mask, so it takes the text colour
   in light and dark mode without recolouring the artwork. */
.glr-endorse { display: flex; align-items: center; gap: var(--brand-space-2); padding: var(--brand-space-2) var(--brand-space-4);
  color: var(--mud-palette-text-secondary); font-size: .6875rem; line-height: 1.3; letter-spacing: .01em; text-decoration: none; opacity: .85; }
.glr-endorse:hover { opacity: 1; }
/* The line may wrap onto two lines (narrow menu, 390px phone); balanced, with the mark centred beside it. */
.glr-endorse-text { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.glr-endorse-centre .glr-endorse-text { text-align: left; max-width: 22rem; }
.glr-endorse-mark { flex: none; width: 15px; height: 18px; background: currentColor;
  -webkit-mask: url("../brand/glr-mark.svg") no-repeat center / contain; mask: url("../brand/glr-mark.svg") no-repeat center / contain; }
.glr-endorse-centre { justify-content: center; padding: var(--brand-space-6) var(--brand-space-4); }
/* In the menu: less room above Firm settings, so the endorsement fits on a laptop screen without scrolling. */
.mud-drawer .gawie-nav-foot { padding-top: var(--brand-space-4); padding-bottom: 0; }
.mud-drawer .glr-endorse { border-top: 1px solid var(--mud-palette-lines-default); }

/* Loading and sign-in screens: the wordmark with its product descriptor, set small. */
.ciceroux-lockup { display: flex; flex-direction: column; align-items: center; gap: var(--brand-space-2); }
.ciceroux-descriptor { font-family: var(--brand-font-descriptor); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--brand-denim); }
:root[data-theme="dark"] .ciceroux-descriptor { color: var(--brand-latte); }
/* "Legal AI Workspace" beside the top-bar wordmark: UI font, small, after a hairline (hidden on phones). */
.ciceroux-bar-descriptor { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--brand-denim); white-space: nowrap;
  padding-inline-start: 12px; border-inline-start: 1px solid var(--mud-palette-lines-default); line-height: 1.4; }
:root[data-theme="dark"] .ciceroux-bar-descriptor { color: var(--brand-latte); }
.ciceroux-splash-mark { height: 72px; width: auto; max-width: 78vw; object-fit: contain; }
.gawie-loading { padding: 0 var(--brand-space-5); text-align: center; }
.gawie-loading .glr-endorse { position: fixed; bottom: 0; left: 0; right: 0; }
:root[data-theme="dark"] .ciceroux-splash-mark { content: url("../brand/ciceroux-wordmark-cream.svg"); }

/* Contrast and colour (Hein, 22 October 2026: "pop a little bit more"). WCAG AA: body and muted text at least 4.5:1,
   borders of controls and focus rings at least 3:1. Colours only from the manual's palette (Denim, Midnight, Latte, Cream).
   The text and line colours themselves are in Theme.cs (TextSecondary, LinesDefault, LinesInputs). */
:root { --gawie-line: #cfc8b6; --brand-accent-bar: #b8a57f; --brand-active-bg: rgba(74,93,133,.12); }
:root[data-theme="dark"] { --gawie-line: #3d4b62; --brand-accent-bar: var(--brand-latte); --brand-active-bg: rgba(154,171,207,.16); }

/* A little more room around the wordmark in the top bar, on a laptop and a phone (Hein, 22 October 2026). */
.ciceroux-home { margin-inline: 14px 14px; }
.mud-main-content > .mud-container.py-6 { padding-top: 36px !important; }

/* Focus: a clearer ring, 3px, with a light halo so it shows on cream, white and the dark surfaces alike. */
:focus-visible { outline: 3px solid var(--gawie-focus) !important; outline-offset: 2px; }

/* One field style (Hein, 26 October 2026: clicking into Summary, Notes, the Title or a matter showed "a block within the
   block"). A text field, select or matter search shows its focus with its own border, in the focus colour and 2px wide, so
   the input inside it draws no second, square ring. Every other control keeps the ring above. */
.mud-input-control .mud-input input:focus-visible,
.mud-input-control .mud-input textarea:focus-visible,
.mud-input-control .mud-input .mud-input-slot:focus-visible,
.mud-input-control .mud-input [tabindex]:focus-visible { outline: none !important; }
.mud-input-control .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--gawie-focus) !important; border-width: 2px !important; }
.mud-input-control .mud-input.mud-input-underline:focus-within::after { border-bottom-color: var(--gawie-focus) !important; transform: scaleX(1); }

/* The menu: the current page filled with a Denim tint, a Denim bar on the left, Denim text and icon. */
.mud-drawer .mud-nav-link { color: var(--mud-palette-text-primary); }
.mud-drawer .mud-nav-link.active { background: var(--brand-active-bg) !important; color: var(--mud-palette-primary) !important;
  font-weight: 700; border-inline-start: 4px solid var(--mud-palette-primary) !important; border-inline-end-width: 0 !important; }
.mud-drawer .mud-nav-link.active .mud-nav-link-text { color: var(--mud-palette-primary) !important; font-weight: 700; }
.mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary) !important; }
.mud-drawer .mud-nav-link:hover:not(.active) { background: var(--mud-palette-action-default-hover); }
.mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-text { font-weight: 700; }

/* Tabs along the top of a page (Dashboard, a matter, Calculators, Settings): the open tab in Denim, bold, with a
   3px underline; the others in the body text colour rather than faded. */
.mud-tabs .mud-tab { color: var(--mud-palette-text-primary); opacity: 1 !important; }
.mud-tabs .mud-tab.mud-tab-active { color: var(--mud-palette-primary) !important; font-weight: 700; }
.mud-tabs .mud-tab-slider { height: 3px !important; background: var(--mud-palette-primary) !important; }
.gawie-ws-tabs .mud-tab.mud-tab-active { border-bottom-width: 3px; }
.mud-tabs .mud-tab:hover:not(.mud-tab-active) { background: var(--brand-active-bg); }

/* Buttons: filled primary buttons in Denim, deepening to Midnight on hover (light); outlined buttons with a clear border. */
.mud-button-filled.mud-button-filled-primary:hover { background-color: var(--brand-midnight) !important; }
:root[data-theme="dark"] .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--brand-cream) !important; color: var(--brand-midnight) !important; }
.mud-button-outlined { border-width: 1.5px !important; }

/* Page titles: a short Latte accent bar under them. Card headers in Midnight (Cream in dark mode). */
.mud-main-content h1.mud-typography-h4::after, .mud-main-content h1.gawie-display::after { content: ""; display: block; width: 44px; height: 4px;
  margin-top: 8px; border-radius: 2px; background: var(--brand-accent-bar); }
.mud-card-header .mud-typography-h6, .mud-paper .gawie-section-title { color: var(--brand-midnight); }
:root[data-theme="dark"] .mud-card-header .mud-typography-h6 { color: var(--brand-cream); }

/* Cards: a firmer edge, and the Matters and Vault cards lift a little more on hover. */
.mud-paper-outlined, .mud-card.mud-paper-outlined { border-color: var(--gawie-line) !important; }
.gawie-matter-card, .gawie-vault-card { border-color: var(--gawie-line); }
.gawie-matter-card:hover, .gawie-vault-card:hover { box-shadow: 0 4px 14px rgba(37,52,76,.12); }

/* Status chips with real colour: open (green), on hold and legal hold (amber), closed (grey); text at least 4.5:1. */
.gawie-chip { color: var(--mud-palette-text-secondary); border-color: var(--gawie-line); }
.gawie-chip-open { color: #1f6b4b; background: #e5f2ec; border-color: #9fcab5; }
.gawie-chip-warn { color: #8a3f04; background: #fbefe2; border-color: #e3b583; }
.gawie-chip-closed { color: #4a5366; background: #eceef2; border-color: #c4c9d3; }
:root[data-theme="dark"] .gawie-chip-open { color: #8fdcb8; background: rgba(95,191,149,.14); border-color: rgba(95,191,149,.45); }
:root[data-theme="dark"] .gawie-chip-warn { color: #f0c08a; background: rgba(224,162,90,.14); border-color: rgba(224,162,90,.45); }
:root[data-theme="dark"] .gawie-chip-closed { color: #c3c9d4; background: rgba(195,201,212,.10); border-color: #4a5870; }

/* The top bar in brand blue (Hein, 23 October 2026: "a bit darker, in more of the blue colour"). Light: Midnight Blue;
   dark: a lifted midnight (#2A3A57) so it still stands apart from the page (#141c28). The bar colour itself is in Theme.cs
   (AppbarBackground / AppbarText); everything on it is Fresh Cream or Latte. WCAG AA on Midnight: cream text 10.6:1, Latte
   7.7:1, cream on the hover tint 7.1:1, Midnight on the cream active pill 10.6:1; on the dark-mode bar cream 9.6:1, Latte 7.0:1. */
:root, :root[data-theme="dark"] {
  --brand-appbar-fg: var(--brand-cream); --brand-appbar-muted: var(--brand-latte);
  --brand-appbar-hover: rgba(238,236,226,.14); --brand-appbar-rule: rgba(238,236,226,.32);
}
/* The menu (sidebar) takes the same blue as the top bar, so the two read as one frame around the white page. */
:root { --brand-frame-bg: #25344C; --brand-frame-active: rgba(105,124,166,.40); --brand-frame-hover: rgba(238,236,226,.10);
  --brand-frame-rule: rgba(238,236,226,.16); }
:root[data-theme="dark"] { --brand-frame-bg: #2A3A57; --brand-frame-active: rgba(105,124,166,.40); --brand-frame-hover: rgba(238,236,226,.10);
  --brand-frame-rule: rgba(238,236,226,.14); }
:root { --brand-appbar-border: #1b2638; }
:root[data-theme="dark"] { --brand-appbar-border: #3d4b62; }
/* The cream wordmark and C mark on the blue bar, in light and dark mode. */
.mud-appbar .ciceroux-on-light { display: none !important; }
.mud-appbar .ciceroux-wordmark.ciceroux-on-dark { display: block !important; }
@media (max-width: 480px) {
  .mud-appbar .ciceroux-wordmark.ciceroux-on-dark { display: none !important; }
  .mud-appbar .ciceroux-icon-only.ciceroux-on-dark { display: block !important; height: var(--brand-logo-min); width: var(--brand-logo-min); }
}
.mud-appbar .ciceroux-bar-descriptor { color: var(--brand-appbar-muted); border-inline-start-color: var(--brand-appbar-rule); }
/* Install App: a Latte pill (Midnight text 7.7:1), Fresh Cream on hover. */
.mud-appbar .gawie-install, :root[data-theme="dark"] .mud-appbar .gawie-install { background: var(--brand-latte); color: var(--brand-midnight); }
.mud-appbar .gawie-install:hover, :root[data-theme="dark"] .mud-appbar .gawie-install:hover { background: var(--brand-cream); }
/* Light/Dark switch: cream on a faint cream track; the chosen one is a solid cream pill with Midnight text. */
.mud-appbar .gawie-appearance { background: rgba(238,236,226,.12); }
.mud-appbar .gawie-appearance button { color: var(--brand-appbar-fg); opacity: 1; }
.mud-appbar .gawie-appearance button:not(.on):hover { background: var(--brand-appbar-hover); }
.mud-appbar .gawie-appearance button.on { background: var(--brand-cream); color: var(--brand-midnight); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
/* Menu, account and Sign out: cream (Color.Inherit), with a cream tint on hover. */
.mud-appbar .mud-icon-button:hover, .mud-appbar .mud-button-text:hover { background-color: var(--brand-appbar-hover); }
.mud-appbar :focus-visible { outline-color: var(--brand-latte) !important; }

/* The menu in brand blue (Hein, 23 October 2026: "a blue sidebar as well, with cream text"), on a laptop and in the phone's
   slide-out menu alike. Cream text and icons (10.6:1 on Midnight, 9.6:1 on the dark-mode blue); section labels bold cream;
   the current page a lighter blue fill (Periwinkle tint, cream text 6.7:1) with a 4px Latte bar; hover a faint cream tint
   (cream 8:1). Only the main menu: other drawers (a draft's versions) keep the page surface. */
.mud-drawer.gawie-nav-drawer { background-color: var(--brand-frame-bg) !important; color: var(--brand-cream);
  border-inline-end-color: var(--brand-frame-rule) !important; }
.gawie-nav-drawer .mud-navmenu, .gawie-nav-drawer .mud-nav-link, .gawie-nav-drawer .mud-nav-link-text,
.gawie-nav-drawer .mud-nav-link-icon, .gawie-nav-drawer .mud-nav-link-expand-icon { color: var(--brand-cream) !important; }
.gawie-nav-drawer .mud-nav-link:hover:not(.active) { background: var(--brand-frame-hover) !important; }
.gawie-nav-drawer .mud-nav-link.active { background: var(--brand-frame-active) !important; color: var(--brand-cream) !important;
  border-inline-start: 4px solid var(--brand-latte) !important; }
.gawie-nav-drawer .mud-nav-link.active .mud-nav-link-text, .gawie-nav-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--brand-cream) !important; }
.gawie-nav-drawer .gawie-nav-foot .mud-nav-link, .gawie-nav-drawer .glr-endorse { border-top-color: var(--brand-frame-rule); }
.gawie-nav-drawer .glr-endorse { color: var(--brand-cream); }
.gawie-nav-drawer :focus-visible { outline-color: var(--brand-latte) !important; }

/* The top-bar wordmark and phone C mark stay the cream on-dark files (Hein, 23 October 2026, 08:18: "Change the gold
   ciceroux back to white"). */
/* A little room between the top bar and the first menu item (Dashboard), on a laptop and in the phone's slide-out menu. */
.gawie-nav-drawer .mud-drawer-content > .mud-navmenu:first-child { padding-top: 10px; }