/* =====================================================================
   Driving Instructor Manager - "Midnight & Electric"

   Ported from the marketing website design system
   (DIManager_Website/DIManager.Website/wwwroot/css/theme.css), which in turn
   mirrors DIManager.ClientMaui/Resources/Styles/Colors.xaml, so the app reads
   as part of the same product family.

   Design intent: a quiet canvas (light surface, thin borders, restrained type)
   with navy + electric-blue chrome, so the content carries the visual weight.

   MudBlazor's palette, typography, radii and elevations are configured in
   App.razor. This file layers the remaining shape/detail work on top. Any
   colour that must follow the active light/dark palette is expressed with
   var(--mud-palette-*) so a single rule is correct in both themes.

   Loaded last (after MudBlazor, Syncfusion, app.css and the scoped-CSS bundle)
   so equal-specificity overrides win.

   Contents
     1. Tokens & base
     2. MudBlazor refinements (cards, buttons, inputs, tables, tabs, overlays)
     3. App shell (sidebar, mobile bar, main column)
     4. Page building blocks (page header, panels, stat cards, actions)
     5. Data display (avatars, pills, tables, toolbars, field lists, notes)
     6. Feature surfaces (promo card, profile, empty & centred states)
     7. Sign in / sign up
     8. Diary (Syncfusion scheduler)
   ===================================================================== */

/* =====================================================================
   1. Tokens & base
   ===================================================================== */

:root {
    /* Brand - kept in step with the app's Colors.xaml */
    --dm-navy-950: #070E24;
    --dm-navy-900: #0A1430;
    --dm-navy-800: #101F48;
    --dm-navy-700: #1A2F6B;
    --dm-primary: #3366FF;
    --dm-primary-strong: #2347D6;
    --dm-primary-soft: #4F86FF;
    --dm-primary-light: #EBF0FF;
    --dm-secondary: #14C8B0;
    --dm-accent: #FFB020;

    /* Neutrals (light theme) */
    --dm-ink: #0F172A;
    --dm-ink-2: #334155;
    --dm-ink-3: #64748B;
    --dm-ink-4: #94A3B8;
    --dm-line: #E4E8F0;
    --dm-line-soft: #EEF1F6;
    --dm-surface-muted: #F8FAFD;

    /* On-navy text */
    --dm-on-navy: #E2E8F5;
    --dm-on-navy-2: #A9B5D6;
    --dm-on-navy-3: #7E8BB0;
    --dm-on-navy-4: #5F6E99;

    /* App category colours (icon tiles) */
    --dm-cat-blue: #3366FF;
    --dm-cat-indigo: #6366F1;
    --dm-cat-violet: #8B5CF6;
    --dm-cat-teal: #14B8A6;
    --dm-cat-emerald: #10B981;
    --dm-cat-amber: #F59E0B;
    --dm-cat-orange: #F97316;
    --dm-cat-sky: #0EA5E9;
    --dm-cat-pink: #EC4899;
    --dm-cat-slate: #64748B;

    /* Status */
    --dm-success: #0F9F6E;
    --dm-danger: #E5484D;

    /* Shape & depth. --dm-depth-rgb is the single knob that tints every shadow. */
    --dm-radius-sm: 12px;
    --dm-radius: 16px;
    --dm-radius-lg: 22px;
    --dm-radius-xl: 34px;
    --dm-depth-rgb: 10, 20, 48;
    --dm-shadow-sm: 0 1px 2px rgba(var(--dm-depth-rgb), .05);
    --dm-shadow-2: 0 1px 2px rgba(var(--dm-depth-rgb), .05), 0 8px 20px -12px rgba(var(--dm-depth-rgb), .16);
    --dm-shadow: 0 1px 2px rgba(var(--dm-depth-rgb), .04), 0 14px 32px -14px rgba(var(--dm-depth-rgb), .14);
    --dm-shadow-5: 0 1px 2px rgba(var(--dm-depth-rgb), .04), 0 20px 40px -18px rgba(var(--dm-depth-rgb), .20);
    --dm-shadow-lg: 0 2px 6px rgba(var(--dm-depth-rgb), .04), 0 32px 64px -24px rgba(var(--dm-depth-rgb), .28);
    --dm-shadow-xl: 0 2px 6px rgba(var(--dm-depth-rgb), .05), 0 40px 80px -28px rgba(var(--dm-depth-rgb), .34);

    --dm-hero-gradient: linear-gradient(135deg, #0A1430 0%, #101F48 55%, #1A2F6B 100%);
    --dm-primary-gradient: linear-gradient(135deg, #4F86FF 0%, #2347D6 100%);

    --dm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dm-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
    --dm-header-h: 76px;
    --dm-content-max: 1440px;

    /* Derived from the active MudBlazor palette so they can never disagree with it */
    --dm-scrollbar: var(--mud-palette-text-disabled);
    --dm-scrollbar-hover: var(--mud-palette-text-secondary);
}

body {
    font-family: var(--dm-font);
    background-color: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dm-font);
    color: var(--mud-palette-text-primary);
    letter-spacing: -.02em;
}

/* FocusOnNavigate moves focus to each page's h1 for screen readers; the
   programmatic focus should not draw a ring around the title. */
h1:focus,
h1:focus-visible {
    outline: none;
}

a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--mud-palette-primary-darken);
}

::selection {
    background: rgba(var(--mud-palette-primary-rgb), .28);
}

/* MudBlazor installs a hard-coded grey scrollbar from its theme provider's inline
   style tag (which lands after this stylesheet), so these need the extra type
   selector to win the cascade. */
html::-webkit-scrollbar,
body ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body ::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body ::-webkit-scrollbar-thumb {
    background: var(--dm-scrollbar);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-scrollbar-hover);
    background-clip: content-box;
}

/* The pages use Color.Secondary to mean "muted" text (a Bootstrap habit), but
   the palette's Secondary is the brand teal. Text and icons therefore map it to
   the palette's secondary *text* colour; buttons and chips keep the teal. */
.mud-typography.mud-secondary-text,
.mud-icon-root.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

.dm-tabular {
    font-variant-numeric: tabular-nums;
}

.dm-mono {
    font-family: var(--dm-mono);
    font-size: .92em;
    letter-spacing: .01em;
}

/* Typography helpers (same names as the website, for cross-project parity) */

.dm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--mud-palette-primary);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dm-eyebrow--teal {
    color: var(--dm-secondary);
}

.dm-muted {
    color: var(--mud-palette-text-secondary);
}

/* =====================================================================
   2. MudBlazor refinements
   ===================================================================== */

/* Cards & icon tiles */

.mud-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dm-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--dm-shadow-sm);
}

.mud-card-header {
    padding: 20px 24px 0;
}

.mud-card-content {
    padding: 24px;
}

.mud-paper:not(.mud-paper-square):not(.mud-popover):not(.mud-appbar):not(.mud-drawer):not(.mud-dialog):not(.mud-table) {
    border-radius: var(--dm-radius);
}

.icon-tile {
    --tile: var(--dm-cat-blue);
    --tile-shadow: rgba(51, 102, 255, .5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #fff;
    background-color: var(--tile);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 60%);
    box-shadow: 0 10px 18px -10px var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

.icon-tile .mud-icon-root {
    font-size: 22px;
}

.icon-tile--blue { --tile: var(--dm-cat-blue); --tile-shadow: rgba(51, 102, 255, .55); }
.icon-tile--indigo { --tile: var(--dm-cat-indigo); --tile-shadow: rgba(99, 102, 241, .55); }
.icon-tile--violet { --tile: var(--dm-cat-violet); --tile-shadow: rgba(139, 92, 246, .55); }
.icon-tile--teal { --tile: var(--dm-cat-teal); --tile-shadow: rgba(20, 184, 166, .55); }
.icon-tile--emerald { --tile: var(--dm-cat-emerald); --tile-shadow: rgba(16, 185, 129, .55); }
.icon-tile--amber { --tile: var(--dm-cat-amber); --tile-shadow: rgba(245, 158, 11, .55); }
.icon-tile--orange { --tile: var(--dm-cat-orange); --tile-shadow: rgba(249, 115, 22, .55); }
.icon-tile--sky { --tile: var(--dm-cat-sky); --tile-shadow: rgba(14, 165, 233, .55); }
.icon-tile--pink { --tile: var(--dm-cat-pink); --tile-shadow: rgba(236, 72, 153, .55); }
.icon-tile--slate { --tile: var(--dm-cat-slate); --tile-shadow: rgba(100, 116, 139, .55); }
.icon-tile--success { --tile: var(--dm-success); --tile-shadow: rgba(15, 159, 110, .5); }
.icon-tile--danger { --tile: var(--dm-danger); --tile-shadow: rgba(229, 72, 77, .5); }

.icon-tile--soft {
    background: rgba(var(--mud-palette-primary-rgb), .1);
    background-image: none;
    color: var(--mud-palette-primary);
    box-shadow: none;
}

.icon-tile--sm {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

.icon-tile--sm .mud-icon-root {
    font-size: 19px;
}

/* Elevation - the website's soft, tinted depth ramp. These rules win over
   MudBlazor.min.css because theme.css is linked last, which also lets the ramp
   follow --dm-depth-rgb into dark mode. */

.mud-elevation-1 { box-shadow: var(--dm-shadow-sm); }
.mud-elevation-2 { box-shadow: var(--dm-shadow-2); }
.mud-elevation-3,
.mud-elevation-4 { box-shadow: var(--dm-shadow); }
.mud-elevation-5,
.mud-elevation-6 { box-shadow: var(--dm-shadow-5); }
.mud-elevation-7,
.mud-elevation-8,
.mud-elevation-9,
.mud-elevation-10,
.mud-elevation-11,
.mud-elevation-12 { box-shadow: var(--dm-shadow-lg); }
.mud-elevation-13,
.mud-elevation-14,
.mud-elevation-15,
.mud-elevation-16,
.mud-elevation-17,
.mud-elevation-18,
.mud-elevation-19,
.mud-elevation-20,
.mud-elevation-21,
.mud-elevation-22,
.mud-elevation-23,
.mud-elevation-24,
.mud-elevation-25 { box-shadow: var(--dm-shadow-xl); }

/* Buttons - pill shaped, as in the app and on the website */

.mud-button {
    border-radius: 999px;
    min-height: 40px;
    padding: 8px 20px;
    font-family: var(--dm-font);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mud-button:hover {
    transform: translateY(-1px);
}

.mud-button:active {
    transform: translateY(0);
}

.mud-button.mud-button-size-small {
    min-height: 32px;
    padding: 4px 14px;
    font-size: 13.5px;
}

.mud-button.mud-button-size-large {
    min-height: 48px;
    padding: 10px 26px;
    font-size: 15.5px;
}

.mud-button-filled {
    box-shadow: none;
}

.mud-button-filled-primary {
    background-color: var(--dm-primary);
    background-image: var(--dm-primary-gradient);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(51, 102, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mud-button-filled-primary:hover {
    background-color: var(--dm-primary-strong);
    color: #fff;
    box-shadow: 0 14px 28px -10px rgba(51, 102, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mud-button-filled-secondary {
    box-shadow: 0 10px 22px -12px rgba(20, 200, 176, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.mud-button-filled-error {
    box-shadow: 0 10px 22px -12px rgba(229, 72, 77, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mud-button-outlined {
    border-width: 1px;
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--dm-shadow-sm);
}

.mud-button-outlined:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), .45);
    background: var(--mud-palette-surface);
    box-shadow: var(--dm-shadow);
}

.mud-button-outlined-primary {
    border-color: rgba(var(--mud-palette-primary-rgb), .5);
    color: var(--mud-palette-primary);
}

.mud-button-outlined-error {
    border-color: rgba(var(--mud-palette-error-rgb), .35);
    color: var(--mud-palette-error);
}

.mud-button-outlined-error:hover {
    border-color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), .04);
}

.mud-button-text {
    padding: 8px 14px;
}

.mud-button-text:hover {
    transform: none;
}

.mud-icon-button {
    border-radius: 999px;
}

.mud-button-group-root {
    border-radius: 999px;
}

/* Inputs */

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--dm-radius-sm);
    border-color: var(--mud-palette-lines-inputs);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mud-input.mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border {
    border-color: rgba(var(--mud-palette-primary-rgb), .45);
}

.mud-input-outlined.mud-input-outlined-focused > .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-outlined-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
    border-width: 1px;
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), .12);
}

.mud-input.mud-input-outlined {
    background: var(--mud-palette-surface);
    border-radius: var(--dm-radius-sm);
}

/* MudBlazor draws disabled outlines darker than enabled ones; keep them quiet */
.mud-input.mud-input-outlined.mud-disabled {
    background: var(--mud-palette-background-gray);
}

.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-default);
}

.mud-input-label {
    font-weight: 500;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-control-input-container {
    border-radius: var(--dm-radius-sm);
}

/* Alerts, chips, panels, lists */

.mud-alert {
    border-radius: 14px;
    padding: 10px 16px;
}

.mud-alert.mud-alert-text-info,
.mud-alert.mud-alert-text-success,
.mud-alert.mud-alert-text-warning,
.mud-alert.mud-alert-text-error {
    border: 1px solid rgba(15, 23, 42, .05);
}

.mud-chip {
    border-radius: 999px;
    font-weight: 500;
}

.mud-expand-panel {
    border-color: var(--mud-palette-lines-default);
}

.mud-list-item {
    font-weight: 500;
}

.mud-divider {
    border-color: var(--mud-palette-divider);
}

/* Tabs. The default treatment is a quiet underline bar (Stripe/Linear style);
   pages opt in with Class="dm-tabs" and Elevation="0". */

.mud-tab {
    font-weight: 600;
    text-transform: none;
    letter-spacing: -.005em;
}

.dm-tabs > .mud-tabs-tabbar {
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}

.dm-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 46px;
}

.dm-tabs .mud-tab {
    min-width: 0;
    min-height: 46px;
    margin-right: 28px;
    padding: 0 2px;
    border-radius: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 14.5px;
    font-weight: 600;
    opacity: 1;
}

.dm-tabs .mud-tab:hover {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
}

.dm-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
}

.dm-tabs .mud-tab .mud-icon-root {
    margin-right: 8px;
    font-size: 19px;
    color: inherit;
}

.dm-tabs .mud-tab.mud-tab-active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.dm-tabs .mud-tab-slider {
    height: 2px;
    border-radius: 2px;
    background: var(--mud-palette-primary);
}

.dm-tabs .mud-tab .mud-badge.mud-badge-default,
.dm-tabs .mud-tab .mud-badge {
    font-weight: 700;
}

.dm-tabs .mud-tabs-panels {
    padding-top: 24px;
}

/* Tables */

.mud-table {
    border-radius: var(--dm-radius);
}

.mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mud-table-root .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 14px 16px;
}

.mud-table-pagination {
    border-top: 1px solid var(--mud-palette-divider);
}

/* Overlays: menus, dialogs, snackbars, tooltips, progress */

.mud-popover {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: var(--dm-shadow-lg);
}

.mud-popover .mud-list {
    padding: 6px;
}

.mud-popover .mud-list-item {
    border-radius: 9px;
}

.mud-menu-item {
    font-weight: 500;
}

.mud-tooltip {
    border-radius: 8px;
    font-weight: 500;
}

.mud-dialog {
    border-radius: var(--dm-radius-lg);
    box-shadow: var(--dm-shadow-xl);
}

.mud-dialog .mud-dialog-title {
    padding: 22px 24px 8px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mud-dialog-actions {
    gap: 8px;
    padding: 16px 24px 20px;
}

.mud-overlay .mud-overlay-dark {
    backdrop-filter: blur(2px);
}

.mud-snackbar {
    border-radius: 14px;
    box-shadow: var(--dm-shadow-lg);
}

.mud-snackbar-content-message {
    font-weight: 500;
}

.mud-linear-progress {
    border-radius: 999px;
}

/* =====================================================================
   3. App shell
   ===================================================================== */

/* Brand lockup: the hexagon mark plus a stacked wordmark */

.dm-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
}

.dm-brand:hover {
    color: #fff;
}

.dm-brand__logo {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 6px 14px rgba(20, 200, 176, .28));
}

.dm-brand__text {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.dm-brand__text span:last-child {
    color: var(--dm-on-navy-2);
    font-weight: 600;
}

.dm-brand--ink,
.dm-brand--ink:hover,
.dm-brand--ink .dm-brand__text {
    color: var(--mud-palette-text-primary);
}

.dm-brand--ink .dm-brand__text span:last-child {
    color: var(--mud-palette-text-secondary);
}

/* The glow suits navy; on light surfaces it reads as a smudge */
.dm-brand--ink .dm-brand__logo {
    filter: none;
}

.dm-brand--compact .dm-brand__logo {
    width: 30px;
    height: 30px;
}

.dm-brand--compact .dm-brand__text {
    font-size: 13.5px;
}

/* Layout: the drawer is persistent from md up, a slide-over below it. The
   mobile app bar only exists below md, so the main column drops its offset. */

.dm-shell {
    --mud-appbar-height: 60px;
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.dm-shell .mud-main-content {
    padding-top: var(--mud-appbar-height);
}

.dm-main__inner {
    width: 100%;
    max-width: var(--dm-content-max);
    margin: 0 auto;
    padding: 32px 40px 56px;
}

@media (min-width: 960px) {
    .dm-shell .dm-mobilebar {
        display: none;
    }

    .dm-shell .mud-main-content {
        padding-top: 0;
    }
}

@media (max-width: 959.98px) {
    .dm-main__inner {
        padding: 24px 20px 48px;
    }
}

@media (max-width: 599.98px) {
    .dm-main__inner {
        padding: 20px 16px 40px;
    }
}

/* Forms and single-record pages read better at a narrower measure */
.dm-narrow {
    max-width: 880px;
}

/* Thin route progress shown while the next page's access check runs */
.dm-route-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1400;
    pointer-events: none;
}

.dm-route-progress .mud-progress-linear {
    height: 3px;
    border-radius: 0;
    background: transparent;
}

/* Mobile app bar */

.mud-appbar.dm-mobilebar {
    background: var(--dm-navy-900);
    background-image: var(--dm-hero-gradient);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
}

.dm-mobilebar .mud-toolbar {
    gap: 8px;
    min-height: var(--mud-appbar-height);
    padding: 0 12px;
}

.dm-mobilebar .mud-icon-button {
    color: rgba(255, 255, 255, .9);
}

.dm-mobilebar .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, .1);
}

/* Sidebar */

.mud-drawer.dm-sidebar {
    background-color: var(--dm-navy-900);
    background-image:
        radial-gradient(110% 45% at 0% 0%, rgba(51, 102, 255, .20) 0%, rgba(51, 102, 255, 0) 60%),
        radial-gradient(90% 35% at 100% 100%, rgba(20, 200, 176, .10) 0%, rgba(20, 200, 176, 0) 60%),
        linear-gradient(180deg, #0B1634 0%, #0A1430 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    color: var(--dm-on-navy);
}

.dm-sidebar .mud-drawer-content {
    min-height: 100%;
}

.dm-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 22px 14px 14px;
}

.dm-sidebar__brand {
    padding: 0 8px;
}

.dm-org {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.dm-org__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(20, 200, 176, .14);
    color: #5EEAD4;
}

.dm-org__icon .mud-icon-root {
    font-size: 18px;
}

.dm-org__text {
    min-width: 0;
}

.dm-org__name {
    overflow: hidden;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-org__role {
    color: var(--dm-on-navy-3);
    font-size: 12px;
    line-height: 1.35;
}

.dm-sidebar__cta.mud-button {
    min-height: 42px;
    justify-content: center;
}

.dm-nav {
    flex: 1 1 auto;
}

.dm-nav__label {
    padding: 16px 12px 6px;
    color: var(--dm-on-navy-4);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dm-nav__label:first-child {
    padding-top: 4px;
}

.dm-sidebar .mud-navmenu .mud-nav-item {
    padding: 1px 0;
}

.dm-sidebar .mud-navmenu .mud-nav-link {
    position: relative;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--dm-on-navy-2);
    font-size: 14.5px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.dm-sidebar .mud-navmenu .mud-nav-link .mud-nav-link-text {
    margin-left: 12px;
    letter-spacing: -.005em;
}

.dm-sidebar .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    color: var(--dm-on-navy-3);
    font-size: 20px;
    transition: color .15s ease;
}

.dm-sidebar .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

.dm-sidebar .mud-navmenu .mud-nav-link:hover .mud-nav-link-icon {
    color: var(--dm-on-navy);
}

.dm-sidebar .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: linear-gradient(90deg, rgba(79, 134, 255, .24) 0%, rgba(79, 134, 255, .08) 100%);
    color: #fff;
    font-weight: 600;
}

.dm-sidebar .mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
    color: #8FB0FF;
}

/* The link clips its overflow (for the ripple), so the glow bar hangs off the item */
.dm-sidebar .mud-navmenu .mud-nav-item {
    position: relative;
}

.dm-sidebar .mud-navmenu .mud-nav-item:has(> .mud-nav-link.active)::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -14px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dm-primary-soft);
    box-shadow: 0 0 12px rgba(79, 134, 255, .85);
}

.dm-sidebar__footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* Signed-in user button (sidebar footer and mobile bar) */

.dm-user {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dm-user:hover,
.dm-user:focus-visible {
    background: rgba(255, 255, 255, .06);
    outline: none;
}

.dm-user__text {
    flex: 1 1 auto;
    min-width: 0;
}

.dm-user--compact {
    width: auto;
    padding: 4px;
}

.dm-user__name,
.dm-user__meta {
    display: block;
}

.dm-user__name {
    overflow: hidden;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-user__meta {
    overflow: hidden;
    color: var(--dm-on-navy-3);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-user__chevron {
    color: var(--dm-on-navy-3);
}

.dm-user-menu .mud-menu {
    width: 100%;
}

.dm-user-menu .mud-menu-activator {
    width: 100%;
}

.dm-menu-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: 4px;
}

.dm-menu-header__name {
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 600;
}

.dm-menu-header__meta {
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
}

/* =====================================================================
   4. Page building blocks
   ===================================================================== */

/* Page header */

.dm-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.dm-page-header__leading {
    flex: 0 0 auto;
    align-self: center;
}

.dm-page-header__text {
    min-width: 0;
    flex: 1 1 360px;
}

.dm-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    font-weight: 600;
}

.dm-page-header__back:hover {
    color: var(--mud-palette-primary);
}

.dm-page-header__back .mud-icon-root {
    font-size: 18px;
    transition: transform .15s ease;
}

.dm-page-header__back:hover .mud-icon-root {
    transform: translateX(-2px);
}

.dm-page-header__eyebrow {
    margin-bottom: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.dm-page-header__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.dm-page-header__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.028em;
}

.dm-page-header__subtitle {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

.dm-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Context selector (owners switching between franchisees) */

.dm-context-select {
    width: 300px;
    max-width: 100%;
    flex: 0 0 auto;
}

.dm-context-select.mud-input-control {
    margin: 0;
}

.dm-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.dm-select-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), .1);
    color: var(--mud-palette-primary);
}

.dm-select-item__name {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.dm-select-item__meta {
    margin-left: auto;
    padding-left: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.dm-context-select .mud-select-input .dm-select-item__meta {
    display: none;
}

.mud-list-item.dm-select-item-all {
    margin-bottom: 4px;
    box-shadow: 0 1px 0 var(--mud-palette-divider);
}

/* Panel: the standard white surface for page content */

.dm-panel {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dm-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--dm-shadow-sm);
}

.dm-panel + .dm-panel {
    margin-top: 20px;
}

.dm-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.dm-panel__header--plain {
    border-bottom: 0;
    padding-bottom: 4px;
}

.dm-panel__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.012em;
}

.dm-panel__subtitle {
    margin: 3px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    line-height: 1.5;
}

.dm-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dm-panel__body {
    padding: 24px;
}

.dm-panel__body--flush {
    padding: 0;
}

.dm-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--mud-palette-divider);
    border-radius: 0 0 var(--dm-radius) var(--dm-radius);
    background: var(--mud-palette-background-gray);
}

@media (max-width: 599.98px) {
    .dm-panel__header,
    .dm-panel__body,
    .dm-panel__footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Responsive grids used by dashboards */

.dm-grid {
    display: grid;
    gap: 20px;
}

.dm-grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dm-grid--split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
}

.dm-grid--top {
    align-items: start;
}

.dm-grid + .dm-grid,
.dm-grid + .dm-panel,
.dm-panel + .dm-grid {
    margin-top: 20px;
}

@media (max-width: 1199.98px) {
    .dm-grid--split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Stat card */

.dm-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dm-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--dm-shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

a.dm-stat:hover,
a.dm-stat:focus-visible {
    border-color: rgba(var(--mud-palette-primary-rgb), .35);
    box-shadow: var(--dm-shadow);
    color: inherit;
    outline: none;
    transform: translateY(-2px);
}

.dm-stat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.dm-stat__go {
    color: var(--mud-palette-text-disabled);
    font-size: 20px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity .2s ease, transform .2s ease;
}

a.dm-stat:hover .dm-stat__go,
a.dm-stat:focus-visible .dm-stat__go {
    color: var(--mud-palette-primary);
    opacity: 1;
    transform: translate(0, 0);
}

.dm-stat__label {
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    font-weight: 600;
}

.dm-stat__value {
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.dm-stat__value--sm {
    font-size: 24px;
}

.dm-stat__hint {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Two compact tiles per row on phones */
@media (max-width: 599.98px) {
    .dm-grid--stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dm-stat {
        padding: 16px;
    }

    .dm-stat__top {
        margin-bottom: 12px;
    }

    .dm-stat__value {
        font-size: 24px;
    }

    .dm-stat__hint {
        display: none;
    }
}

/* Action rows: icon tile, title, description, chevron */

.dm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 699.98px) {
    .dm-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dm-action {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.dm-action:hover,
.dm-action:focus-visible {
    border-color: rgba(var(--mud-palette-primary-rgb), .35);
    background: rgba(var(--mud-palette-primary-rgb), .025);
    box-shadow: var(--dm-shadow-2);
    color: inherit;
    outline: none;
    transform: translateY(-1px);
}

.dm-action__text {
    flex: 1 1 auto;
    min-width: 0;
}

.dm-action__title {
    color: var(--mud-palette-text-primary);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}

.dm-action__desc {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.dm-action__chevron {
    flex: 0 0 auto;
    color: var(--mud-palette-text-disabled);
    transition: transform .2s ease, color .2s ease;
}

.dm-action:hover .dm-action__chevron {
    color: var(--mud-palette-primary);
    transform: translateX(2px);
}

/* =====================================================================
   5. Data display
   ===================================================================== */

/* Initials avatar. Tones are picked from the name so a person keeps a colour. */

.dm-avatar {
    --av-bg: #EBF0FF;
    --av-fg: #2347D6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--av-bg);
    color: var(--av-fg);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

.dm-avatar--xs { width: 26px; height: 26px; font-size: 10.5px; }
.dm-avatar--sm { width: 30px; height: 30px; font-size: 11.5px; }
.dm-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.dm-avatar--xl { width: 64px; height: 64px; font-size: 21px; letter-spacing: 0; }

.dm-avatar--t0 { --av-bg: #EBF0FF; --av-fg: #2347D6; }
.dm-avatar--t1 { --av-bg: #E6F8F5; --av-fg: #0B8A79; }
.dm-avatar--t2 { --av-bg: #F1EBFF; --av-fg: #6D28D9; }
.dm-avatar--t3 { --av-bg: #FFF2DE; --av-fg: #B45309; }
.dm-avatar--t4 { --av-bg: #FDEBF4; --av-fg: #BE185D; }
.dm-avatar--t5 { --av-bg: #E6F4FD; --av-fg: #0369A1; }
.dm-avatar--t6 { --av-bg: #ECFDF3; --av-fg: #047857; }
.dm-avatar--t7 { --av-bg: #EEF0F6; --av-fg: #334155; }

.dm-avatar--navy {
    --av-bg: linear-gradient(135deg, #4F86FF 0%, #2347D6 100%);
    --av-fg: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}

/* Person cell: avatar + name (+ optional secondary line) */

.dm-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dm-person__text {
    min-width: 0;
}

.dm-person__name {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.dm-person__name:hover {
    color: var(--mud-palette-primary);
}

.dm-person__meta {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status pills */

.dm-pill {
    --pill-bg: #F1F4F9;
    --pill-fg: #475569;
    --pill-dot: currentColor;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-fg);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.dm-pill--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pill-dot);
}

.dm-pill--lg {
    height: 28px;
    padding: 0 12px;
    font-size: 13px;
}

.dm-pill .mud-icon-root {
    font-size: 15px;
}

.dm-pill--success { --pill-bg: #E7F7F0; --pill-fg: #0B7A55; }
.dm-pill--warning { --pill-bg: #FFF4E0; --pill-fg: #A35200; }
.dm-pill--danger { --pill-bg: #FDECEC; --pill-fg: #C4262B; }
.dm-pill--info { --pill-bg: #E6F4FD; --pill-fg: #0369A1; }
.dm-pill--brand { --pill-bg: #EBF0FF; --pill-fg: #2347D6; }
.dm-pill--violet { --pill-bg: #F1EBFF; --pill-fg: #6D28D9; }
.dm-pill--dark { --pill-bg: #E7EAF1; --pill-fg: #0F172A; }
.dm-pill--neutral { --pill-bg: #F1F4F9; --pill-fg: #475569; }
.dm-pill--on-navy { --pill-bg: rgba(255, 255, 255, .1); --pill-fg: #fff; }

/* Lesson types share one vocabulary across lists, details and the diary */
.dm-pill--lesson { --pill-bg: #EBF0FF; --pill-fg: #2347D6; }
.dm-pill--test { --pill-bg: #E7EAF1; --pill-fg: #0F172A; }
.dm-pill--mock { --pill-bg: #FFF1E3; --pill-fg: #B4480A; }
.dm-pill--training { --pill-bg: #F1EBFF; --pill-fg: #6D28D9; }
.dm-pill--away { --pill-bg: #EEF1F6; --pill-fg: #475569; }
.dm-pill--slot { --pill-bg: #E7F7F0; --pill-fg: #0B7A55; }

/* Data tables inside panels */

.dm-table.mud-table {
    border-radius: 0 0 var(--dm-radius) var(--dm-radius);
    background: transparent;
    box-shadow: none;
}

.dm-table .mud-table-container {
    border-radius: 0;
}

.dm-table .mud-table-root .mud-table-head .mud-table-cell {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--dm-surface-muted);
    white-space: nowrap;
}

.dm-table .mud-table-root .mud-table-head .mud-table-cell:first-child,
.dm-table .mud-table-root .mud-table-body .mud-table-cell:first-child {
    padding-left: 24px;
}

.dm-table .mud-table-root .mud-table-head .mud-table-cell:last-child,
.dm-table .mud-table-root .mud-table-body .mud-table-cell:last-child {
    padding-right: 24px;
}

.dm-table .mud-table-root .mud-table-body .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
}

.dm-table .mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.dm-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), .035);
}

.dm-table .mud-table-row.dm-row-link {
    cursor: pointer;
}

.dm-table .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}

.dm-table .mud-table-pagination .mud-table-pagination-toolbar {
    padding-left: 16px;
    padding-right: 12px;
}

.dm-table .mud-table-loading .mud-progress-linear {
    border-radius: 0;
}

.dm-cell-muted {
    color: var(--mud-palette-text-secondary);
}

.dm-nowrap,
.dm-table .mud-table-cell.dm-tabular {
    white-space: nowrap;
}

.dm-cell-strong {
    font-weight: 600;
}

.dm-cell-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.dm-cell-when {
    white-space: nowrap;
}

.dm-cell-when__date {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.dm-cell-when__time {
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.dm-cell-truncate {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    /* MudTable stacks each record into label/value rows here; separate the records */
    .dm-table .mud-table-root .mud-table-body .mud-table-row {
        border-bottom: 8px solid var(--mud-palette-background);
    }

    .dm-table .mud-table-root .mud-table-body .mud-table-row:last-child {
        border-bottom: 0;
    }

    /* MudTable switches to stacked cards here; keep them roomy */
    .dm-table .mud-table-root .mud-table-body .mud-table-cell,
    .dm-table .mud-table-root .mud-table-body .mud-table-cell:first-child,
    .dm-table .mud-table-root .mud-table-body .mud-table-cell:last-child {
        padding: 8px 18px;
    }

    .dm-cell-num {
        text-align: left;
    }
}

/* List toolbar: search + filter toggle above a table */

.dm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
}

.dm-toolbar__search {
    flex: 1 1 280px;
    max-width: 380px;
}

.dm-toolbar__search .mud-input-control {
    margin: 0;
}

.dm-toolbar__spacer {
    flex: 1 1 auto;
}

.dm-toolbar__field {
    flex: 0 1 220px;
    min-width: 170px;
}

.dm-toolbar__field .mud-input-control {
    margin: 0;
}

.dm-toolbar .mud-chip {
    margin: 0;
}

.dm-filter-toggle.mud-button.is-active {
    border-color: rgba(var(--mud-palette-primary-rgb), .5);
    background: rgba(var(--mud-palette-primary-rgb), .06);
    color: var(--mud-palette-primary);
}

.dm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

.dm-filters {
    padding: 20px 24px 22px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--dm-surface-muted);
}

.dm-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 16px;
}

.dm-filters__grid .mud-input-control {
    margin: 0;
}

.dm-filters__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

@media (max-width: 599.98px) {
    .dm-toolbar,
    .dm-filters {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dm-toolbar__search {
        max-width: none;
    }
}

/* Field list: read-only label/value pairs (replaces read-only text inputs) */

.dm-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px 32px;
    margin: 0;
}

.dm-fields--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 599.98px) {
    .dm-fields--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dm-field {
    min-width: 0;
}

.dm-field--wide {
    grid-column: 1 / -1;
}

.dm-field dt {
    margin-bottom: 5px;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
}

.dm-field dd {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dm-field dd.is-empty {
    color: var(--mud-palette-text-disabled);
}

.dm-field dd .dm-pill {
    margin-right: 6px;
}

.dm-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--mud-palette-text-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dm-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-divider);
}

.dm-section + .dm-section {
    margin-top: 32px;
}

.dm-section__hint {
    margin: -10px 0 18px;
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
}

.dm-note-block {
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--dm-surface-muted);
    color: var(--mud-palette-text-primary);
    font-size: 14.5px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Plan card (subscription page) */

.dm-plan {
    margin-bottom: 20px;
    overflow: hidden;
}

.dm-plan__main {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 26px 22px;
    background: radial-gradient(70% 140% at 100% 0%, rgba(var(--mud-palette-primary-rgb), .07) 0%, rgba(var(--mud-palette-primary-rgb), 0) 60%);
}

.dm-plan__eyebrow {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dm-plan__title {
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.dm-plan__desc {
    margin: 6px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 14.5px;
    line-height: 1.55;
}

.dm-plan__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 26px 22px 88px;
}

.dm-plan__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--dm-surface-muted);
}

@media (max-width: 599.98px) {
    .dm-plan__notes {
        padding-left: 26px;
    }
}

/* Payment summary (lesson detail) */

.dm-pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dm-pay__amount {
    color: var(--mud-palette-text-primary);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}

/* Quiet metadata line under a detail page */

.dm-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 18px;
    color: var(--mud-palette-text-disabled);
    font-size: 12.5px;
}

a.dm-person {
    color: inherit;
    text-decoration: none;
}

a.dm-person:hover .dm-person__name {
    color: var(--mud-palette-primary);
}

/* Notes timeline */

.dm-notes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-note {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dm-note:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), .25);
    box-shadow: var(--dm-shadow-2);
}

.dm-note__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-primary-rgb), .08);
    color: var(--mud-palette-primary);
}

.dm-note__icon .mud-icon-root {
    font-size: 18px;
}

.dm-note__body {
    flex: 1 1 auto;
    min-width: 0;
}

.dm-note__date {
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
}

.dm-note__text {
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 14.5px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.dm-note__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 2px;
    opacity: .55;
    transition: opacity .2s ease;
}

.dm-note:hover .dm-note__actions,
.dm-note:focus-within .dm-note__actions {
    opacity: 1;
}

/* Accordion used for progress sections */

.dm-accordion .mud-expand-panel {
    margin: 0 0 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px !important;
    box-shadow: none;
}

.dm-accordion .mud-expand-panel::before {
    display: none;
}

.dm-accordion .mud-expand-panel.mud-panel-expanded {
    border-color: rgba(var(--mud-palette-primary-rgb), .25);
    box-shadow: var(--dm-shadow-2);
}

.dm-accordion .mud-expand-panel .mud-expand-panel-header {
    padding: 14px 20px;
}

.dm-accordion .mud-expand-panel .mud-expand-panel-content {
    padding: 4px 20px 20px;
}

/* =====================================================================
   6. Feature surfaces
   ===================================================================== */

/* Navy promo / feature card (franchise, subscription, set-up prompts) */

.dm-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--dm-radius);
    background: var(--dm-hero-gradient);
    box-shadow: var(--dm-shadow-5);
    color: var(--dm-on-navy-2);
}

.dm-feature::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(79, 134, 255, .45), rgba(79, 134, 255, 0));
    pointer-events: none;
}

.dm-feature::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -160px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(20, 200, 176, .22), rgba(20, 200, 176, 0));
    pointer-events: none;
}

.dm-feature > * {
    position: relative;
    z-index: 1;
}

.dm-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.dm-feature__eyebrow {
    color: #5EEAD4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dm-feature__title {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.dm-feature__text {
    margin: 0;
    color: var(--dm-on-navy-2);
    font-size: 14px;
    line-height: 1.6;
}

.dm-feature__actions {
    margin-top: auto;
    padding-top: 6px;
}

.dm-feature .mud-button-filled-default,
.dm-feature .dm-btn-light.mud-button {
    background: #fff;
    color: var(--dm-navy-900);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
}

.dm-feature .dm-btn-light.mud-button:hover {
    background: #EEF2FF;
}

/* Inline banner (status strip at the top of a page) */

.dm-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 16px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dm-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--dm-shadow-sm);
}

.dm-banner__text {
    flex: 1 1 260px;
    min-width: 0;
}

.dm-banner__title {
    color: var(--mud-palette-text-primary);
    font-size: 15px;
    font-weight: 600;
}

.dm-banner__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
}

/* Summary strip: a row of small figures under a detail page header */

.dm-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 28px;
}

.dm-summary__item {
    min-width: 0;
    padding: 18px 24px;
}

.dm-summary__item + .dm-summary__item {
    border-left: 1px solid var(--mud-palette-divider);
}

.dm-summary__label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
}

.dm-summary__label .mud-icon-root {
    font-size: 16px;
    color: var(--mud-palette-text-disabled);
}

.dm-summary__value {
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.dm-summary__value.is-danger {
    color: var(--mud-palette-error);
}

.dm-summary__value small {
    margin-left: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

@media (max-width: 799.98px) {
    .dm-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dm-summary__item:nth-child(3) {
        border-left: 0;
    }

    .dm-summary__item:nth-child(n+3) {
        border-top: 1px solid var(--mud-palette-divider);
    }
}

/* Section progress gauge (progress accordion titles) */

.dm-gauge {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 220px;
    max-width: 45%;
}

.dm-gauge .mud-progress-linear {
    flex: 1 1 auto;
    margin: 0;
}

.dm-gauge__value {
    min-width: 40px;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dm-accordion__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    width: 100%;
    padding-right: 12px;
}

.dm-accordion__name {
    color: var(--mud-palette-text-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Overall progress ring card */

.dm-progress-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    padding: 24px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dm-radius);
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(var(--mud-palette-primary-rgb), .07) 0%, rgba(var(--mud-palette-primary-rgb), 0) 60%),
        var(--mud-palette-surface);
}

.dm-progress-hero__text {
    flex: 1 1 260px;
}

.dm-progress-hero__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 148px;
    height: 148px;
}

/* MudProgressCircular draws no track; this ring matches its stroke (3 of 44
   viewBox units at 148px, about 10px) so the value reads against a full circle. */
.dm-progress-hero__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 10px solid rgba(var(--mud-palette-primary-rgb), .09);
    border-radius: 999px;
}

.dm-progress-hero__ring .mud-progress-circular {
    position: absolute;
    inset: 0;
    width: 148px !important;
    height: 148px !important;
}

.dm-progress-hero__value {
    color: var(--mud-palette-text-primary);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dm-progress-hero__caption {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Empty state */

.dm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 24px;
    text-align: center;
}

.dm-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(var(--mud-palette-primary-rgb), .08);
    color: var(--mud-palette-primary);
}

.dm-empty__icon .mud-icon-root {
    font-size: 26px;
}

.dm-empty__icon--danger {
    background: rgba(var(--mud-palette-error-rgb), .1);
    color: var(--mud-palette-error);
}

.dm-empty__icon--success {
    background: rgba(var(--mud-palette-success-rgb), .1);
    color: var(--mud-palette-success);
}

.dm-center__status {
    text-align: center;
}

.dm-empty__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 600;
}

.dm-empty__text {
    max-width: 380px;
    margin: 6px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.dm-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

/* Centred states: first load, access checks, SSO, 404 */

.dm-center {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 32px 20px;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(51, 102, 255, .08) 0%, rgba(51, 102, 255, 0) 70%),
        var(--mud-palette-background);
}

.dm-center__card {
    width: 100%;
    max-width: 440px;
    padding: 36px 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dm-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--dm-shadow-lg);
    text-align: center;
}

.dm-center__logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
}

.dm-center__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.dm-center__text {
    margin: 8px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 14.5px;
    line-height: 1.6;
}

.dm-center__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.dm-center__code {
    margin: 0 0 6px;
    background: var(--dm-primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
}

/* Quiet loader: logo with an orbiting ring */
.dm-loader {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
}

.dm-loader img {
    width: 40px;
    height: 40px;
}

.dm-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid rgba(var(--mud-palette-primary-rgb), .12);
    border-top-color: var(--mud-palette-primary);
    border-radius: 999px;
    animation: dm-spin .9s linear infinite;
}

@keyframes dm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-loader::before {
        animation-duration: 2.4s;
    }

    .mud-button:hover,
    a.dm-stat:hover,
    .dm-action:hover {
        transform: none;
    }
}

/* =====================================================================
   7. Sign in / sign up
   ===================================================================== */

.dm-auth {
    display: grid;
    grid-template-columns: minmax(420px, 46%) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--mud-palette-surface);
}

.dm-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 40px 56px;
    background: var(--dm-navy-900);
    background-image:
        radial-gradient(70% 55% at 15% 0%, rgba(51, 102, 255, .38) 0%, rgba(51, 102, 255, 0) 70%),
        radial-gradient(60% 45% at 100% 100%, rgba(20, 200, 176, .20) 0%, rgba(20, 200, 176, 0) 70%),
        linear-gradient(160deg, #0A1430 0%, #101F48 60%, #142a63 100%);
    color: var(--dm-on-navy-2);
}

/* Faint road-lane lines: a quiet nod to the product without an illustration */
.dm-auth__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 46px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
    pointer-events: none;
}

.dm-auth__brand > * {
    position: relative;
}

.dm-auth__pitch {
    margin: auto 0;
    padding: 56px 0;
    max-width: 480px;
}

.dm-auth__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #5EEAD4;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.dm-auth__headline {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.dm-auth__headline span {
    background: linear-gradient(90deg, #8FB0FF 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dm-auth__lead {
    margin: 16px 0 0;
    color: var(--dm-on-navy-2);
    font-size: 16px;
    line-height: 1.65;
}

.dm-auth__points {
    display: grid;
    gap: 18px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.dm-auth__point {
    display: flex;
    gap: 14px;
}

.dm-auth__point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: #8FB0FF;
}

.dm-auth__point-icon .mud-icon-root {
    font-size: 19px;
}

.dm-auth__point strong {
    display: block;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}

.dm-auth__point span {
    display: block;
    margin-top: 2px;
    color: var(--dm-on-navy-3);
    font-size: 13.5px;
    line-height: 1.55;
}

.dm-auth__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    color: var(--dm-on-navy-3);
    font-size: 13px;
}

.dm-auth__contact a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dm-on-navy-2);
}

.dm-auth__contact a:hover {
    color: #fff;
}

.dm-auth__contact .mud-icon-root {
    color: var(--dm-secondary);
    font-size: 16px;
}

.dm-auth__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 32px 28px;
}

.dm-auth__mobile-brand {
    display: none;
    align-self: stretch;
    margin-bottom: 8px;
}

.dm-auth__content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: 100%;
    max-width: 420px;
}

.dm-auth__content > * {
    width: 100%;
}

.dm-auth__legal {
    margin-top: 28px;
    color: var(--mud-palette-text-disabled);
    font-size: 12.5px;
    text-align: center;
}

@media (max-width: 959.98px) {
    .dm-auth {
        grid-template-columns: minmax(0, 1fr);
        background: var(--mud-palette-background);
    }

    .dm-auth__brand {
        display: none;
    }

    .dm-auth__main {
        padding: 24px 20px;
    }

    .dm-auth__mobile-brand {
        display: block;
    }

    .dm-auth__content {
        align-items: flex-start;
        padding-top: 32px;
    }
}

/* The form column */

.dm-auth-form__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.dm-auth-form__subtitle {
    margin: 10px 0 30px;
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

.dm-auth-form__row {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
}

.dm-auth-form__row a {
    font-size: 13.5px;
    font-weight: 600;
}

.dm-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 18px;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.dm-auth-divider::before,
.dm-auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-divider);
}

.dm-oauth {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dm-oauth .mud-button {
    min-height: 46px;
}

.dm-oauth .mud-button-label {
    gap: 10px;
}

.dm-oauth__apple.mud-button,
.dm-oauth__apple.mud-button:hover {
    border-color: #000;
    background: #000;
    color: #fff;
}

.dm-oauth__apple.mud-button:hover {
    background: #1d1d1f;
}

.dm-auth-form__footnote {
    margin-top: 24px;
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    text-align: center;
}

.dm-auth-form__fine {
    margin-top: 14px;
    color: var(--mud-palette-text-disabled);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
}

/* =====================================================================
   8. Diary (Syncfusion scheduler, bootstrap5 theme)
   ===================================================================== */

.dm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.dm-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.dm-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

.dm-diary {
    padding: 8px 12px 12px;
}

.dm-diary .e-schedule {
    border: 0;
    font-family: var(--dm-font);
}

.dm-diary .e-schedule .e-schedule-toolbar {
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: transparent;
    box-shadow: none;
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-items {
    background: transparent;
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn {
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: var(--dm-font);
    font-weight: 600;
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: rgba(var(--mud-palette-primary-rgb), .06);
    color: var(--mud-palette-text-primary);
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: inherit;
    font-family: var(--dm-font);
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
    font-family: 'e-icons';
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item.e-date-range .e-tbar-btn .e-tbar-btn-text {
    color: var(--mud-palette-text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item.e-active-view .e-tbar-btn,
.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item.e-active-view .e-tbar-btn:hover {
    background: rgba(var(--mud-palette-primary-rgb), .1);
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item.e-active-view .e-tbar-btn .e-tbar-btn-text {
    color: var(--mud-palette-primary);
}

.dm-diary .e-schedule .e-schedule-toolbar .e-toolbar-item.e-today .e-tbar-btn {
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.dm-diary .e-schedule .e-schedule-toolbar .e-separator {
    opacity: .6;
}

.dm-diary .e-schedule .e-vertical-view .e-date-header-wrap table tbody td,
.dm-diary .e-schedule .e-vertical-view .e-left-indent-wrap table tbody td,
.dm-diary .e-schedule .e-vertical-view .e-time-cells-wrap table td,
.dm-diary .e-schedule .e-vertical-view .e-work-cells,
.dm-diary .e-schedule .e-month-view .e-work-cells,
.dm-diary .e-schedule .e-month-view .e-date-header-wrap table td {
    border-color: var(--dm-line-soft);
}

.dm-diary .e-schedule .e-vertical-view .e-time-cells-wrap table td,
.dm-diary .e-schedule .e-vertical-view .e-time-cells-wrap .e-time-slots,
.dm-diary .e-schedule .e-vertical-view .e-left-indent-wrap table tbody td {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.dm-diary .e-schedule .e-vertical-view .e-work-cells {
    background: var(--mud-palette-surface);
}

.dm-diary .e-schedule .e-vertical-view .e-work-cells.e-work-hours {
    background: var(--mud-palette-surface);
}

.dm-diary .e-schedule .e-vertical-view .e-work-cells:hover,
.dm-diary .e-schedule .e-month-view .e-work-cells:hover {
    background: rgba(var(--mud-palette-primary-rgb), .04);
}

.dm-diary .e-schedule .e-vertical-view .e-work-cells.e-selected-cell,
.dm-diary .e-schedule .e-month-view .e-work-cells.e-selected-cell {
    background: rgba(var(--mud-palette-primary-rgb), .1);
}

.dm-diary .e-schedule .e-vertical-view .e-header-cells {
    padding: 10px 8px;
    background: var(--mud-palette-surface);
}

.dm-diary .e-schedule .e-vertical-view .e-header-cells .e-header-day {
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dm-diary .e-schedule .e-vertical-view .e-header-cells .e-header-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin-top: 2px;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    font-size: 17px;
    font-weight: 700;
}

.dm-diary .e-schedule .e-vertical-view .e-header-cells.e-current-day .e-header-day {
    color: var(--mud-palette-primary);
}

.dm-diary .e-schedule .e-vertical-view .e-header-cells.e-current-day .e-header-date {
    background: var(--dm-primary-gradient);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(51, 102, 255, .8);
}

.dm-diary .e-schedule .e-vertical-view .e-current-timeline {
    border-top: 2px solid var(--dm-danger);
}

.dm-diary .e-schedule .e-vertical-view .e-current-time {
    color: var(--dm-danger);
    font-weight: 700;
}

.dm-diary .e-schedule .e-vertical-view .e-previous-timeline {
    border-top-color: rgba(229, 72, 77, .35);
}

.dm-diary .e-schedule .e-month-view .e-date-header-wrap table td,
.dm-diary .e-schedule .e-month-view .e-date-header {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.dm-diary .e-schedule .e-month-view .e-current-date .e-date-header {
    background: var(--dm-primary);
    color: #fff;
}

/* Appointments: our template paints the whole block, so drop Syncfusion's chrome.
   The selectors mirror the theme's own (four classes deep) so these win. */
.dm-diary .e-schedule .e-vertical-view .e-day-wrapper .e-appointment,
.dm-diary .e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment,
.dm-diary .e-schedule .e-month-view .e-appointment,
.dm-diary .e-schedule .e-appointment {
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: box-shadow .15s ease, transform .15s ease;
}

.dm-diary .e-schedule .e-appointment:hover {
    box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .45);
}

.dm-diary .e-schedule .e-appointment.e-appointment-border,
.dm-diary .e-schedule .e-appointment:focus {
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-primary);
}

.dm-diary .e-schedule .e-vertical-view .e-appointment .e-appointment-details {
    padding: 0;
}

.dm-diary .event-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-left: 3px solid rgba(0, 0, 0, .14);
    border-radius: 8px;
}

.dm-diary .event-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 5px 8px;
    box-sizing: border-box;
}

.dm-diary .event-title {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-diary .event-time {
    margin-top: 1px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    opacity: .9;
    font-variant-numeric: tabular-nums;
}

.dm-diary .event-duration {
    margin-top: 1px;
    font-size: 11px;
    opacity: .75;
}

.dm-diary .payment-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 3px 8px 4px;
    background: rgba(15, 23, 42, .14);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dm-diary .payment-indicator::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

.dm-diary .payment-indicator.paid::before {
    background: #22C55E;
}

.dm-diary .payment-indicator.unpaid::before {
    background: #F43F5E;
}

.dm-diary .e-quick-popup-wrapper {
    border-radius: 14px;
}