/* ========================================================================
   EPOS Solutions admin — design system
   Light-first operations console. Every colour, space, radius, shadow and
   type size used by the app is a token below; components never use literal
   values. Dark mode only redefines tokens (see [data-theme="dark"]).
   Bootstrap is not loaded: the base layer below is the whole reset.
   ======================================================================== */

/* -------------------------------------------------------------------- */
/*  Tokens                                                               */
/* -------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* ---- Surfaces & text ---- */
    --dsh-canvas:           #f5f6f8;
    --dsh-surface:          #ffffff;
    --dsh-surface-muted:    #f8f9fb;
    --dsh-surface-hover:    #f2f4f7;
    --dsh-surface-sunken:   #eef0f3;
    --dsh-border:           #e4e7ec;
    --dsh-border-strong:    #d0d5dd;

    --dsh-text:             #101828;
    --dsh-text-secondary:   #475467;
    --dsh-text-muted:       #667085;
    --dsh-text-on-brand:    #ffffff;

    /* ---- Brand & semantic ---- */
    /* The logo's blue is #1e9bd7; it is too light for white text (3.1:1), so buttons and links use
       a deeper shade of it (4.5:1). The logo's orange is the accent (never text on white). */
    --dsh-brand:            #0a7cbd;
    --dsh-brand-hover:      #07679e;
    --dsh-brand-light:      #eaf6fc;
    --dsh-brand-border:     #b9e0f4;
    --dsh-accent:           #f7993a;

    --dsh-danger:           #d92d20;
    --dsh-danger-hover:     #b42318;
    --dsh-warning:          #dc6803;
    --dsh-success:          #079455;
    --dsh-success-hover:    #067647;
    --dsh-info:             #1570ef;

    --dsh-focus-ring:       0 0 0 3px rgb(10 124 189 / 0.25);
    --dsh-focus-color:      #0a7cbd;

    /* ---- Badges (bg / text / dot) ---- */
    --dsh-badge-info-bg: #eff8ff;    --dsh-badge-info-text: #175cd3;    --dsh-badge-info-dot: #2e90fa;
    --dsh-badge-brand-bg: #eaf6fc;   --dsh-badge-brand-text: #07679e;   --dsh-badge-brand-dot: #1e9bd7;
    --dsh-badge-warning-bg: #fffaeb; --dsh-badge-warning-text: #b54708; --dsh-badge-warning-dot: #f79009;
    --dsh-badge-success-bg: #ecfdf3; --dsh-badge-success-text: #067647; --dsh-badge-success-dot: #17b26a;
    --dsh-badge-danger-bg: #fef3f2;  --dsh-badge-danger-text: #b42318;  --dsh-badge-danger-dot: #f04438;
    --dsh-badge-neutral-bg: #f2f4f7; --dsh-badge-neutral-text: #344054; --dsh-badge-neutral-dot: #98a2b3;

    /* ---- Alerts ---- */
    --dsh-alert-danger-bg: #fef3f2;  --dsh-alert-danger-text: #b42318;  --dsh-alert-danger-border: #fecdca;
    --dsh-alert-warning-bg: #fffaeb; --dsh-alert-warning-text: #b54708; --dsh-alert-warning-border: #fedf89;
    --dsh-alert-info-bg: #eff8ff;    --dsh-alert-info-text: #175cd3;    --dsh-alert-info-border: #b2ddff;
    --dsh-alert-success-bg: #ecfdf3; --dsh-alert-success-text: #067647; --dsh-alert-success-border: #abefc6;

    --dsh-overlay:          rgb(16 24 40 / 0.45);
    --dsh-overlay-light:    rgb(16 24 40 / 0.25);
    --dsh-code-bg:          #f2f4f7;
    --dsh-auth-gradient-accent: #dff1fa;

    /* ---- Spacing (4px scale) ---- */
    --dsh-space-0-5: 2px;
    --dsh-space-1:  4px;
    --dsh-space-1-5: 6px;
    --dsh-space-2:  8px;
    --dsh-space-2-5: 10px;
    --dsh-space-3:  12px;
    --dsh-space-3-5: 14px;
    --dsh-space-4:  16px;
    --dsh-space-5:  20px;
    --dsh-space-6:  24px;
    --dsh-space-8:  32px;
    --dsh-space-10: 40px;
    --dsh-space-12: 48px;

    /* ---- Radii ---- */
    --dsh-radius-sm:   6px;
    --dsh-radius-md:   8px;
    --dsh-radius-lg:   10px;
    --dsh-radius-xl:   14px;
    --dsh-radius-full: 999px;

    /* ---- Shadows ---- */
    --dsh-shadow-xs:   0 1px 2px rgb(16 24 40 / 0.05);
    --dsh-shadow-sm:   0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
    --dsh-shadow-md:   0 4px 8px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.04);
    --dsh-shadow-lg:   0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03);
    --dsh-shadow-xl:   0 24px 48px -12px rgb(16 24 40 / 0.18);

    /* ---- Typography ---- */
    --dsh-font-body:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dsh-font-mono:   ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --dsh-text-2xs:   0.6875rem;  /* 11px */
    --dsh-text-xs:    0.75rem;    /* 12px */
    --dsh-text-sm:    0.8125rem;  /* 13px */
    --dsh-text-base:  0.875rem;   /* 14px */
    --dsh-text-lg:    1rem;       /* 16px */
    --dsh-text-xl:    1.125rem;   /* 18px */
    --dsh-text-2xl:   1.5rem;     /* 24px */
    --dsh-text-3xl:   1.875rem;   /* 30px */
    --dsh-weight-regular:  400;
    --dsh-weight-medium:   500;
    --dsh-weight-semibold: 600;
    --dsh-weight-bold:     700;
    --dsh-leading-tight:   1.25;
    --dsh-leading-normal:  1.5;

    /* ---- Motion ---- */
    --dsh-duration-fast: 120ms;
    --dsh-duration-base: 200ms;
    --dsh-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Layers ---- */
    --dsh-z-sticky:   100;
    --dsh-z-sidebar:  300;
    --dsh-z-menu:     400;
    --dsh-z-drawer:   500;
    --dsh-z-dialog:   600;
    --dsh-z-toast:    700;
    --dsh-z-tooltip:  800;
    --dsh-z-skip:     900;

    /* ---- Shell ---- */
    --dsh-sidebar-width: 248px;
    --dsh-sidebar-collapsed: 68px;
    --dsh-topbar-height: 60px;
    --dsh-content-max: 1440px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --dsh-canvas:           #0c111d;
    --dsh-surface:          #131a29;
    --dsh-surface-muted:    #161e2e;
    --dsh-surface-hover:    #1b2436;
    --dsh-surface-sunken:   #0f1522;
    --dsh-border:           #222c3d;
    --dsh-border-strong:    #333f55;

    --dsh-text:             #f2f4f7;
    --dsh-text-secondary:   #b0b9c8;
    --dsh-text-muted:       #8a94a6;
    --dsh-text-on-brand:    #ffffff;

    --dsh-brand:            #1a8ac8;
    --dsh-brand-hover:      #1e9bd7;
    --dsh-brand-light:      rgb(30 155 215 / 0.14);
    --dsh-brand-border:     rgb(30 155 215 / 0.4);
    --dsh-accent:           #f7993a;

    --dsh-danger:           #f97066;
    --dsh-danger-hover:     #fda29b;
    --dsh-warning:          #fdb022;
    --dsh-success:          #47cd89;
    --dsh-success-hover:    #75e0a7;
    --dsh-info:             #53b1fd;

    --dsh-focus-ring:       0 0 0 3px rgb(30 155 215 / 0.35);
    --dsh-focus-color:      #4bb4e6;

    --dsh-badge-info-bg: rgb(46 144 250 / 0.14);   --dsh-badge-info-text: #84caff;    --dsh-badge-info-dot: #53b1fd;
    --dsh-badge-brand-bg: rgb(30 155 215 / 0.16);  --dsh-badge-brand-text: #7cc8ee;   --dsh-badge-brand-dot: #4bb4e6;
    --dsh-badge-warning-bg: rgb(247 144 9 / 0.14); --dsh-badge-warning-text: #fec84b; --dsh-badge-warning-dot: #fdb022;
    --dsh-badge-success-bg: rgb(23 178 106 / 0.14); --dsh-badge-success-text: #75e0a7; --dsh-badge-success-dot: #47cd89;
    --dsh-badge-danger-bg: rgb(240 68 56 / 0.14);  --dsh-badge-danger-text: #fda29b;  --dsh-badge-danger-dot: #f97066;
    --dsh-badge-neutral-bg: rgb(152 162 179 / 0.14); --dsh-badge-neutral-text: #cfd4dc; --dsh-badge-neutral-dot: #98a2b3;

    --dsh-alert-danger-bg: rgb(240 68 56 / 0.1);  --dsh-alert-danger-text: #fda29b;  --dsh-alert-danger-border: rgb(240 68 56 / 0.35);
    --dsh-alert-warning-bg: rgb(247 144 9 / 0.1); --dsh-alert-warning-text: #fec84b; --dsh-alert-warning-border: rgb(247 144 9 / 0.35);
    --dsh-alert-info-bg: rgb(46 144 250 / 0.1);   --dsh-alert-info-text: #84caff;    --dsh-alert-info-border: rgb(46 144 250 / 0.35);
    --dsh-alert-success-bg: rgb(23 178 106 / 0.1); --dsh-alert-success-text: #75e0a7; --dsh-alert-success-border: rgb(23 178 106 / 0.35);

    --dsh-overlay:          rgb(0 0 0 / 0.6);
    --dsh-overlay-light:    rgb(0 0 0 / 0.45);
    --dsh-code-bg:          #1b2436;
    --dsh-auth-gradient-accent: #0b3550;

    --dsh-shadow-xs:  0 1px 2px rgb(0 0 0 / 0.3);
    --dsh-shadow-sm:  0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.25);
    --dsh-shadow-md:  0 4px 8px -2px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --dsh-shadow-lg:  0 12px 16px -4px rgb(0 0 0 / 0.45), 0 4px 6px -2px rgb(0 0 0 / 0.3);
    --dsh-shadow-xl:  0 24px 48px -12px rgb(0 0 0 / 0.6);
}

/* -------------------------------------------------------------------- */
/*  Base                                                                 */
/* -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Reserve scrollbar space so toggling the theme never shifts content. */
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--dsh-font-body);
    font-size: var(--dsh-text-base);
    font-weight: var(--dsh-weight-regular);
    line-height: var(--dsh-leading-normal);
    color: var(--dsh-text);
    background: var(--dsh-canvas);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--dsh-weight-semibold);
    line-height: var(--dsh-leading-tight);
    color: var(--dsh-text);
}

p { margin: 0 0 var(--dsh-space-3); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding-left: var(--dsh-space-5); }

a { color: var(--dsh-brand); text-decoration: none; }
a:hover { color: var(--dsh-brand-hover); text-decoration: underline; }

strong, b { font-weight: var(--dsh-weight-semibold); }
small { font-size: var(--dsh-text-xs); }

code, kbd, pre, samp { font-family: var(--dsh-font-mono); font-size: 0.92em; }
code {
    padding: 1px var(--dsh-space-1);
    border-radius: var(--dsh-radius-sm);
    background: var(--dsh-code-bg);
    color: var(--dsh-text);
    word-break: break-word;
}
pre { margin: 0; overflow: auto; }

img, svg { vertical-align: middle; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--dsh-border); margin: var(--dsh-space-6) 0; }

button, input, select, textarea, optgroup {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
button, select { text-transform: none; }
button, [type='button'], [type='submit'] { -webkit-appearance: button; }
button:not(:disabled), [role='button'] { cursor: pointer; }
textarea { resize: vertical; }
label { display: inline-block; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--dsh-focus-color);
    outline-offset: 2px;
}

/* FocusOnNavigate (Routes.razor) moves focus to the page <h1> so screen readers announce the
   new page; skip links target <main>. Those are programmatic focus targets, not controls, so
   they get no ring. Interactive elements keep theirs. */
h1:focus,
h1:focus-visible,
main:focus,
main:focus-visible,
[tabindex="-1"]:not(a, button, input, select, textarea, summary):focus-visible {
    outline: none;
}

::selection { background: var(--dsh-brand-light); }

.dsh-sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Inline SVG icons inherit colour and never render filled unless asked. */
/* Size comes from the width/height attributes; container rules (.dsh-btn svg etc.) may override. */
.dsh-icon {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* -------------------------------------------------------------------- */
/*  Skip link                                                            */
/* -------------------------------------------------------------------- */

.dsh-skip-link {
    position: absolute;
    top: -100px;
    left: var(--dsh-space-4);
    z-index: var(--dsh-z-skip);
    padding: var(--dsh-space-2) var(--dsh-space-4);
    background: var(--dsh-brand);
    color: var(--dsh-text-on-brand);
    border-radius: var(--dsh-radius-md);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-semibold);
}
.dsh-skip-link:focus { top: var(--dsh-space-2); color: var(--dsh-text-on-brand); text-decoration: none; }

/* -------------------------------------------------------------------- */
/*  Shell                                                                */
/* -------------------------------------------------------------------- */

.dsh-shell {
    min-height: 100vh;
}

/* ---- Sidebar ---- */

.dsh-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--dsh-z-sidebar);
    width: var(--dsh-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--dsh-surface);
    border-right: 1px solid var(--dsh-border);
    transition: width var(--dsh-duration-base) var(--dsh-ease), transform var(--dsh-duration-base) var(--dsh-ease);
}

.dsh-sidebar-header {
    flex-shrink: 0;
    height: var(--dsh-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-2);
    padding: 0 var(--dsh-space-3) 0 var(--dsh-space-5);
}

.dsh-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2-5);
    min-width: 0;
    color: var(--dsh-text);
    font-size: var(--dsh-text-lg);
    font-weight: var(--dsh-weight-bold);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.dsh-sidebar-brand:hover { color: var(--dsh-text); text-decoration: none; }

.dsh-sidebar-brand-icon,
.dsh-auth-brand-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--dsh-radius-md);
    /* The mark is drawn for a light background, so it sits on a white tile in dark mode too. */
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--dsh-border), var(--dsh-shadow-xs);
    overflow: hidden;
}
.dsh-sidebar-brand-icon img,
.dsh-auth-brand-icon img { width: 26px; height: 26px; display: block; }

.dsh-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--dsh-space-2) var(--dsh-space-3) var(--dsh-space-4);
}

.dsh-sidebar-section-label {
    padding: var(--dsh-space-4) var(--dsh-space-3) var(--dsh-space-1-5);
    font-size: var(--dsh-text-2xs);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsh-sidebar-nav > .dsh-sidebar-section-label:first-child { padding-top: var(--dsh-space-2); }

.dsh-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dsh-space-3);
    height: 36px;
    padding: 0 var(--dsh-space-3);
    margin-bottom: var(--dsh-space-0-5);
    border-radius: var(--dsh-radius-md);
    color: var(--dsh-text-secondary);
    font-size: var(--dsh-text-base);
    font-weight: var(--dsh-weight-medium);
    white-space: nowrap;
    transition: background var(--dsh-duration-fast) ease, color var(--dsh-duration-fast) ease;
}
.dsh-nav-item:hover {
    background: var(--dsh-surface-hover);
    color: var(--dsh-text);
    text-decoration: none;
}
.dsh-nav-item:focus-visible { outline-offset: -2px; }
.dsh-nav-item.active {
    background: var(--dsh-brand-light);
    color: var(--dsh-brand);
    font-weight: var(--dsh-weight-semibold);
    box-shadow: inset 3px 0 0 var(--dsh-accent);
}

.dsh-nav-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
}
.dsh-nav-icon svg { width: 18px; height: 18px; }

.dsh-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsh-sidebar-footer {
    flex-shrink: 0;
    padding: var(--dsh-space-3);
    border-top: 1px solid var(--dsh-border);
}

/* ---- Icon buttons shared by the shell ---- */

.dsh-icon-btn,
.dsh-sidebar-toggle,
.dsh-theme-toggle {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--dsh-radius-md);
    background: transparent;
    color: var(--dsh-text-secondary);
    transition: background var(--dsh-duration-fast) ease, color var(--dsh-duration-fast) ease, border-color var(--dsh-duration-fast) ease;
}
.dsh-icon-btn:hover,
.dsh-sidebar-toggle:hover,
.dsh-theme-toggle:hover {
    background: var(--dsh-surface-hover);
    color: var(--dsh-text);
}
.dsh-icon-btn svg,
.dsh-sidebar-toggle svg,
.dsh-theme-toggle svg { width: 18px; height: 18px; }

.dsh-sidebar-toggle .chevron-expand { display: none; }
.dsh-sidebar-collapsed .dsh-sidebar-toggle .chevron-collapse { display: none; }
.dsh-sidebar-collapsed .dsh-sidebar-toggle .chevron-expand { display: inline; }

.dsh-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .dsh-theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .dsh-theme-toggle .icon-moon { display: none; }

/* ---- Collapsed rail ---- */

.dsh-sidebar-collapsed .dsh-sidebar { width: var(--dsh-sidebar-collapsed); }
.dsh-sidebar-collapsed .dsh-sidebar-header {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: var(--dsh-space-3) 0;
    gap: var(--dsh-space-2);
}
.dsh-sidebar-collapsed .dsh-sidebar-brand-text,
.dsh-sidebar-collapsed .dsh-nav-text { display: none; }
.dsh-sidebar-collapsed .dsh-sidebar-section-label {
    height: 1px;
    padding: 0;
    margin: var(--dsh-space-3) var(--dsh-space-2);
    background: var(--dsh-border);
    color: transparent;
}
.dsh-sidebar-collapsed .dsh-sidebar-nav { padding: 0 var(--dsh-space-3) var(--dsh-space-4); }
.dsh-sidebar-collapsed .dsh-nav-item { justify-content: center; padding: 0; }

/* Tooltip for collapsed nav items: a shared fixed element positioned by sidebar.js. */
.dsh-nav-tooltip {
    display: none;
    position: fixed;
    z-index: var(--dsh-z-tooltip);
    padding: var(--dsh-space-1) var(--dsh-space-2);
    background: #101828;
    color: #ffffff;
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-medium);
    border-radius: var(--dsh-radius-sm);
    white-space: nowrap;
    box-shadow: var(--dsh-shadow-md);
    pointer-events: none;
}
.dsh-nav-tooltip.dsh-nav-tooltip-visible { display: block; }

.dsh-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--dsh-z-sidebar) - 1);
    background: var(--dsh-overlay);
}

/* ---- Content column ---- */

.dsh-content {
    min-height: 100vh;
    margin-left: var(--dsh-sidebar-width);
    display: flex;
    flex-direction: column;
    transition: margin-left var(--dsh-duration-base) var(--dsh-ease);
}
.dsh-sidebar-collapsed .dsh-content { margin-left: var(--dsh-sidebar-collapsed); }

/* ---- Top bar ---- */

.dsh-topbar {
    position: sticky;
    top: 0;
    z-index: var(--dsh-z-sticky);
    height: var(--dsh-topbar-height);
    display: flex;
    align-items: center;
    gap: var(--dsh-space-3);
    padding: 0 var(--dsh-space-8);
    background: color-mix(in srgb, var(--dsh-surface) 85%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--dsh-border);
}

.dsh-topbar-left {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
}

.dsh-topbar-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
}

.dsh-topbar-hamburger { display: none; }

.dsh-topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--dsh-border);
    margin: 0 var(--dsh-space-1);
}

.dsh-env-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-1-5);
    height: 24px;
    padding: 0 var(--dsh-space-2);
    border: 1px solid var(--dsh-alert-warning-border);
    border-radius: var(--dsh-radius-full);
    background: var(--dsh-alert-warning-bg);
    color: var(--dsh-alert-warning-text);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-semibold);
    white-space: nowrap;
}
.dsh-env-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---- Breadcrumb ---- */

.dsh-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-1-5);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--dsh-text-base);
    color: var(--dsh-text-muted);
    white-space: nowrap;
}
.dsh-breadcrumb li { display: flex; align-items: center; gap: var(--dsh-space-1-5); min-width: 0; }
.dsh-breadcrumb a { color: var(--dsh-text-muted); }
.dsh-breadcrumb a:hover { color: var(--dsh-text); text-decoration: none; }
.dsh-breadcrumb-sep { width: 14px; height: 14px; color: var(--dsh-border-strong); }
.dsh-breadcrumb-current {
    color: var(--dsh-text);
    font-weight: var(--dsh-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Tenant switcher ---- */

.dsh-tenant-switcher { position: relative; display: flex; align-items: center; }
.dsh-tenant-switcher-trigger {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    height: 36px;
    min-width: 180px;
    max-width: 260px;
    padding: 0 var(--dsh-space-2-5);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface);
    color: var(--dsh-text);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    box-shadow: var(--dsh-shadow-xs);
    cursor: pointer;
}
.dsh-tenant-switcher-trigger:hover:not(:disabled) { border-color: var(--dsh-border-strong); }
.dsh-tenant-switcher-trigger:focus-visible { outline: none; border-color: var(--dsh-brand); box-shadow: var(--dsh-focus-ring); }
.dsh-tenant-switcher-trigger[aria-expanded="true"] { border-color: var(--dsh-brand); }
.dsh-tenant-switcher-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.dsh-tenant-switcher-icon,
.dsh-tenant-switcher-caret { width: 15px; height: 15px; flex-shrink: 0; color: var(--dsh-text-muted); }
.dsh-tenant-switcher-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.dsh-menu.dsh-tenant-switcher-panel {
    left: 0;
    right: auto;
    width: 340px;
    padding: 0;
    overflow: hidden;
}
.dsh-tenant-switcher-search {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    padding: 0 var(--dsh-space-3);
    border-bottom: 1px solid var(--dsh-border);
    color: var(--dsh-text-muted);
}
.dsh-tenant-switcher-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.dsh-tenant-switcher-search input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--dsh-text);
    font-size: var(--dsh-text-sm);
}
.dsh-tenant-switcher-search input:focus { outline: none; }
.dsh-tenant-switcher-search:focus-within { box-shadow: inset 0 -2px 0 var(--dsh-brand); }

.dsh-tenant-switcher-list {
    max-height: min(360px, 60vh);
    overflow-y: auto;
    padding: var(--dsh-space-1);
}
.dsh-tenant-switcher-list:empty { display: none; }
.dsh-tenant-switcher-group {
    padding: var(--dsh-space-2) var(--dsh-space-2-5) var(--dsh-space-1);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dsh-tenant-switcher-option {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    min-height: 40px;
    padding: var(--dsh-space-1-5) var(--dsh-space-2-5);
    border-radius: var(--dsh-radius-sm);
    cursor: pointer;
}
.dsh-tenant-switcher-option.is-active { background: var(--dsh-surface-hover); }
.dsh-tenant-switcher-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dsh-tenant-switcher-option-name,
.dsh-tenant-switcher-option-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-tenant-switcher-option-name { font-size: var(--dsh-text-sm); font-weight: var(--dsh-weight-medium); color: var(--dsh-text); }
.dsh-tenant-switcher-option-id { font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); }
.dsh-tenant-switcher-check { width: 15px; height: 15px; flex-shrink: 0; color: var(--dsh-brand); }

.dsh-tenant-switcher-status {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    padding: 0 var(--dsh-space-3);
    font-size: var(--dsh-text-xs);
    color: var(--dsh-text-muted);
}
.dsh-tenant-switcher-status:not(:empty) { padding-block: var(--dsh-space-2-5); }
.dsh-tenant-switcher-footer {
    padding: var(--dsh-space-2) var(--dsh-space-3);
    border-top: 1px solid var(--dsh-border);
    font-size: var(--dsh-text-sm);
}

/* ---- User menu (native <details>, works without interactivity) ---- */

.dsh-user-menu { position: relative; }
.dsh-user-menu > summary {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    height: 36px;
    padding: 0 var(--dsh-space-2) 0 var(--dsh-space-1);
    border-radius: var(--dsh-radius-md);
    list-style: none;
    cursor: pointer;
    color: var(--dsh-text-secondary);
}
.dsh-user-menu > summary::-webkit-details-marker { display: none; }
.dsh-user-menu > summary:hover { background: var(--dsh-surface-hover); color: var(--dsh-text); }
.dsh-user-menu[open] > summary { background: var(--dsh-surface-hover); }

.dsh-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dsh-brand-light);
    color: var(--dsh-brand);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-semibold);
    flex-shrink: 0;
}

.dsh-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    color: var(--dsh-text);
}

/* ---- Main ---- */

.dsh-main { flex: 1; min-width: 0; }
.dsh-main:focus { outline: none; }

.dsh-main-inner {
    width: 100%;
    max-width: var(--dsh-content-max);
    margin: 0 auto;
    padding: var(--dsh-space-8);
}

/* ---- Responsive shell ---- */

@media (max-width: 1024px) {
    .dsh-topbar { padding: 0 var(--dsh-space-5); }
    .dsh-main-inner { padding: var(--dsh-space-6) var(--dsh-space-5); }
}

@media (max-width: 768px) {
    .dsh-sidebar {
        width: var(--dsh-sidebar-width);
        transform: translateX(-100%);
        box-shadow: var(--dsh-shadow-xl);
    }
    .dsh-sidebar-open .dsh-sidebar { transform: translateX(0); }
    .dsh-sidebar-open .dsh-sidebar-overlay { display: block; }

    /* No icon rail on phones — collapsed simply means the closed drawer. */
    .dsh-sidebar-collapsed .dsh-sidebar { width: var(--dsh-sidebar-width); }
    .dsh-sidebar-collapsed .dsh-sidebar-header { flex-direction: row; height: var(--dsh-topbar-height); padding: 0 var(--dsh-space-3) 0 var(--dsh-space-5); justify-content: space-between; }
    .dsh-sidebar-collapsed .dsh-sidebar-brand-text,
    .dsh-sidebar-collapsed .dsh-nav-text { display: inline; }
    .dsh-sidebar-collapsed .dsh-sidebar-section-label { height: auto; margin: 0; padding: var(--dsh-space-4) var(--dsh-space-3) var(--dsh-space-1-5); background: none; color: var(--dsh-text-muted); }
    .dsh-sidebar-collapsed .dsh-nav-item { justify-content: flex-start; padding: 0 var(--dsh-space-3); }
    .dsh-sidebar-collapse-btn { display: none; }

    .dsh-content,
    .dsh-sidebar-collapsed .dsh-content { margin-left: 0; }

    .dsh-topbar { padding: 0 var(--dsh-space-3); gap: var(--dsh-space-2); }
    .dsh-topbar-hamburger { display: inline-grid; }
    .dsh-topbar-divider,
    .dsh-user-name,
    .dsh-env-badge-text { display: none; }
    .dsh-env-badge { padding: 0 var(--dsh-space-1-5); }
    .dsh-tenant-switcher-trigger { min-width: 0; max-width: 170px; }
    .dsh-tenant-switcher { position: static; }
    .dsh-menu.dsh-tenant-switcher-panel {
        position: fixed;
        top: calc(var(--dsh-topbar-height) - var(--dsh-space-1));
        left: var(--dsh-space-3);
        right: var(--dsh-space-3);
        width: auto;
    }
    .dsh-breadcrumb-parent { display: none !important; }

    .dsh-main-inner { padding: var(--dsh-space-5) var(--dsh-space-4); }
}

@media (max-width: 480px) {
    .dsh-tenant-switcher-trigger { max-width: 130px; }
    .dsh-tenant-switcher-icon { display: none; }
}

/* -------------------------------------------------------------------- */
/*  Menus (user menu, row action menu)                                   */
/* -------------------------------------------------------------------- */

.dsh-menu {
    position: absolute;
    top: calc(100% + var(--dsh-space-1));
    right: 0;
    z-index: var(--dsh-z-menu);
    min-width: 200px;
    padding: var(--dsh-space-1);
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-lg);
    box-shadow: var(--dsh-shadow-lg);
    animation: dsh-pop var(--dsh-duration-fast) var(--dsh-ease);
}
.dsh-menu-up { top: auto; bottom: calc(100% + var(--dsh-space-1)); }

.dsh-menu-header {
    padding: var(--dsh-space-2) var(--dsh-space-3);
    border-bottom: 1px solid var(--dsh-border);
    margin: 0 calc(var(--dsh-space-1) * -1) var(--dsh-space-1);
}
.dsh-menu-header-title { font-size: var(--dsh-text-sm); font-weight: var(--dsh-weight-semibold); color: var(--dsh-text); }
.dsh-menu-header-sub { font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); }

.dsh-menu-item {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    width: 100%;
    min-height: 34px;
    padding: 0 var(--dsh-space-2-5);
    border: 0;
    border-radius: var(--dsh-radius-sm);
    background: transparent;
    color: var(--dsh-text);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    text-align: left;
    white-space: nowrap;
}
.dsh-menu-item:hover:not(:disabled) { background: var(--dsh-surface-hover); color: var(--dsh-text); text-decoration: none; }
.dsh-menu-item:focus-visible { outline-offset: -2px; }
.dsh-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.dsh-menu-item svg { width: 15px; height: 15px; color: var(--dsh-text-muted); }
.dsh-menu-item-danger,
.dsh-menu-item-danger svg { color: var(--dsh-danger); }
.dsh-menu-item-danger:hover:not(:disabled) { background: var(--dsh-alert-danger-bg); color: var(--dsh-danger); }
.dsh-menu-separator { height: 1px; margin: var(--dsh-space-1) 0; background: var(--dsh-border); }

.dsh-action-menu { position: relative; display: inline-flex; }
.dsh-action-menu-backdrop { position: fixed; inset: 0; z-index: calc(var(--dsh-z-menu) - 1); }

@keyframes dsh-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------- */
/*  Page header & sections                                               */
/* -------------------------------------------------------------------- */

.dsh-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dsh-space-4);
    margin-bottom: var(--dsh-space-6);
}

.dsh-page-header-body { flex: 1 1 320px; min-width: 0; }

.dsh-page-title {
    margin: 0;
    font-size: var(--dsh-text-2xl);
    font-weight: var(--dsh-weight-semibold);
    letter-spacing: -0.02em;
    line-height: var(--dsh-leading-tight);
    color: var(--dsh-text);
}
.dsh-page-title:focus { outline: none; }

.dsh-page-desc {
    margin: var(--dsh-space-1) 0 0;
    max-width: 60rem;
    font-size: var(--dsh-text-base);
    color: var(--dsh-text-muted);
}

.dsh-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dsh-space-2);
}

.dsh-section { margin-top: var(--dsh-space-8); }
.dsh-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-3);
    margin-bottom: var(--dsh-space-3);
}
.dsh-section-title {
    margin: var(--dsh-space-8) 0 var(--dsh-space-3);
    font-size: var(--dsh-text-lg);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text);
}
.dsh-section-header .dsh-section-title { margin: 0; }
.dsh-section-desc { margin: var(--dsh-space-0-5) 0 0; font-size: var(--dsh-text-sm); color: var(--dsh-text-muted); }

/* -------------------------------------------------------------------- */
/*  Cards                                                                */
/* -------------------------------------------------------------------- */

.dsh-card {
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-lg);
    box-shadow: var(--dsh-shadow-xs);
}
.dsh-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-3);
    padding: var(--dsh-space-4) var(--dsh-space-5);
    border-bottom: 1px solid var(--dsh-border);
}
.dsh-card-title { margin: 0; font-size: var(--dsh-text-base); font-weight: var(--dsh-weight-semibold); }
.dsh-card-body { padding: var(--dsh-space-5); }
.dsh-card > .dsh-table-wrapper,
.dsh-card > .dsh-empty-state,
.dsh-card > .dsh-error-block {
    border: 0;
    border-radius: 0 0 var(--dsh-radius-lg) var(--dsh-radius-lg);
    box-shadow: none;
}
.dsh-card-footer {
    padding: var(--dsh-space-3) var(--dsh-space-5);
    border-top: 1px solid var(--dsh-border);
    background: var(--dsh-surface-muted);
    border-radius: 0 0 var(--dsh-radius-lg) var(--dsh-radius-lg);
}

.dsh-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--dsh-space-6);
}

/* -------------------------------------------------------------------- */
/*  Stat cards                                                           */
/* -------------------------------------------------------------------- */

.dsh-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--dsh-space-4);
    margin-bottom: var(--dsh-space-6);
}

.dsh-stat-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--dsh-space-3);
    padding: var(--dsh-space-4) var(--dsh-space-5);
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-lg);
    box-shadow: var(--dsh-shadow-xs);
    color: inherit;

    /* The card is its own sizing context so the value below can scale to the card, not to the
       viewport: a card in this grid is ~200px wide whether the window is 1440px or 1024px. */
    container-type: inline-size;

    /* Inline space the value does NOT get: the icon (36px) plus the flex gap (12px). */
    --dsh-stat-card-gutter: 48px;
}

.dsh-stat-card-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-badge-neutral-bg);
    color: var(--dsh-badge-neutral-text);
}
.dsh-stat-card-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dsh-stat-card-info    .dsh-stat-card-icon { background: var(--dsh-badge-info-bg);    color: var(--dsh-badge-info-text); }
.dsh-stat-card-brand   .dsh-stat-card-icon { background: var(--dsh-badge-brand-bg);   color: var(--dsh-badge-brand-text); }
.dsh-stat-card-warning .dsh-stat-card-icon { background: var(--dsh-badge-warning-bg); color: var(--dsh-badge-warning-text); }
.dsh-stat-card-success .dsh-stat-card-icon { background: var(--dsh-badge-success-bg); color: var(--dsh-badge-success-text); }
.dsh-stat-card-danger  .dsh-stat-card-icon { background: var(--dsh-badge-danger-bg);  color: var(--dsh-badge-danger-text); }
.dsh-stat-card-neutral .dsh-stat-card-icon { background: var(--dsh-badge-neutral-bg); color: var(--dsh-badge-neutral-text); }

.dsh-stat-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--dsh-space-0-5);
    min-width: 0;
    /* In the phone layout the card stacks and `align-items: flex-start` would otherwise let a
       content-sized body grow wider than the card itself. */
    max-width: 100%;
}

.dsh-stat-card-label {
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    color: var(--dsh-text-muted);
    line-height: 1.3;
}

/* The value is sized to fit the card rather than clipped or wrapped. Nigerian totals run to
   "₦999,999,999.99" — 15 glyphs — which at the 2xl display size needs ~200px in a card whose
   text column is ~120px, so a fixed size bleeds the figure straight out over the neighbouring
   card. `--dsh-value-chars` is the value's character count, set by DashCard; 0.58em is the
   widest per-character advance Inter gives these glyphs at semibold, so
   (space available ÷ chars ÷ 0.58) is the largest size that still fits on one line.
   clamp() holds that between a readable floor and the normal display size, so a long figure
   steps down instead of overflowing, and the full number is always shown — abbreviating a
   total someone is reconciling against would be worse than a smaller number.
   The ellipsis is a last resort below the floor; DashCard puts the full value in `title`,
   and CSS truncation never hides it from a screen reader. */
.dsh-stat-card-value {
    --dsh-value-chars: 6;
    font-size: clamp(
        var(--dsh-text-base),
        calc((100cqi - var(--dsh-stat-card-gutter)) / (var(--dsh-value-chars) * 0.58)),
        var(--dsh-text-2xl));
    font-weight: var(--dsh-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--dsh-text);
    font-variant-numeric: tabular-nums;
    /* Never break inside a number: no mid-figure wrap, no sign orphaned on its own line. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsh-stat-card-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-0-5);
    width: fit-content;
    margin-top: var(--dsh-space-1);
    padding: 0 var(--dsh-space-1-5);
    border-radius: var(--dsh-radius-full);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-semibold);
    line-height: 20px;
    white-space: nowrap;
}
.dsh-stat-card-trend svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Trend uses badge text tokens (AA at this size), never the raw semantic colours. */
.dsh-stat-card-trend-up   { color: var(--dsh-badge-success-text); background: var(--dsh-badge-success-bg); }
.dsh-stat-card-trend-down { color: var(--dsh-badge-danger-text);  background: var(--dsh-badge-danger-bg); }
.dsh-stat-card-trend-flat { color: var(--dsh-badge-neutral-text); background: var(--dsh-badge-neutral-bg); }

.dsh-stat-card-link {
    transition: border-color var(--dsh-duration-fast) ease, box-shadow var(--dsh-duration-fast) ease, transform var(--dsh-duration-fast) ease;
}
.dsh-stat-card-link:hover {
    border-color: var(--dsh-brand-border);
    box-shadow: var(--dsh-shadow-md);
    text-decoration: none;
    color: inherit;
}
.dsh-stat-card-link::after {
    content: '';
    position: absolute;
    top: var(--dsh-space-4);
    right: var(--dsh-space-4);
    width: 14px;
    height: 14px;
    opacity: 0;
    background: currentColor;
    color: var(--dsh-text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: opacity var(--dsh-duration-fast) ease;
}
.dsh-stat-card-link:hover::after { opacity: 1; }

/* Filter-toggle variant: a <button> styled as the card. */
.dsh-stat-card-button {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dsh-duration-fast) ease, box-shadow var(--dsh-duration-fast) ease;
}
.dsh-stat-card-button:hover {
    border-color: var(--dsh-brand-border);
    box-shadow: var(--dsh-shadow-md);
}
.dsh-stat-card-button[aria-pressed="true"] {
    border-color: var(--dsh-brand);
    box-shadow: 0 0 0 1px var(--dsh-brand);
}

/* -------------------------------------------------------------------- */
/*  Badges                                                               */
/* -------------------------------------------------------------------- */

.dsh-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-1-5);
    max-width: 100%;
    height: 22px;
    padding: 0 var(--dsh-space-2);
    border-radius: var(--dsh-radius-full);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--dsh-badge-neutral-bg);
    color: var(--dsh-badge-neutral-text);
}
.dsh-badge-dot::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dsh-badge-dot, currentColor);
}

.dsh-badge-info    { background: var(--dsh-badge-info-bg);    color: var(--dsh-badge-info-text);    --dsh-badge-dot: var(--dsh-badge-info-dot); }
.dsh-badge-brand   { background: var(--dsh-badge-brand-bg);   color: var(--dsh-badge-brand-text);   --dsh-badge-dot: var(--dsh-badge-brand-dot); }
.dsh-badge-warning { background: var(--dsh-badge-warning-bg); color: var(--dsh-badge-warning-text); --dsh-badge-dot: var(--dsh-badge-warning-dot); }
.dsh-badge-success { background: var(--dsh-badge-success-bg); color: var(--dsh-badge-success-text); --dsh-badge-dot: var(--dsh-badge-success-dot); }
.dsh-badge-danger  { background: var(--dsh-badge-danger-bg);  color: var(--dsh-badge-danger-text);  --dsh-badge-dot: var(--dsh-badge-danger-dot); }
.dsh-badge-neutral { background: var(--dsh-badge-neutral-bg); color: var(--dsh-badge-neutral-text); --dsh-badge-dot: var(--dsh-badge-neutral-dot); }
.dsh-badge-outline { background: transparent; border: 1px solid var(--dsh-border); color: var(--dsh-text-secondary); }

.dsh-badge-text { overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------------------------- */
/*  Buttons                                                              */
/* -------------------------------------------------------------------- */

.dsh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dsh-space-2);
    height: 36px;
    padding: 0 var(--dsh-space-3-5);
    border: 1px solid var(--dsh-border-strong);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface);
    color: var(--dsh-text);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--dsh-shadow-xs);
    transition: background var(--dsh-duration-fast) ease, border-color var(--dsh-duration-fast) ease, color var(--dsh-duration-fast) ease, box-shadow var(--dsh-duration-fast) ease;
    user-select: none;
}
.dsh-btn:hover { text-decoration: none; }
.dsh-btn:focus-visible { outline: none; box-shadow: var(--dsh-focus-ring); }
.dsh-btn:disabled,
.dsh-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.dsh-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dsh-btn-primary {
    background: var(--dsh-brand);
    border-color: var(--dsh-brand);
    color: var(--dsh-text-on-brand);
}
.dsh-btn-primary:hover:not(:disabled) { background: var(--dsh-brand-hover); border-color: var(--dsh-brand-hover); color: var(--dsh-text-on-brand); }

.dsh-btn-outline,
.dsh-btn-secondary {
    background: var(--dsh-surface);
    border-color: var(--dsh-border-strong);
    color: var(--dsh-text-secondary);
}
.dsh-btn-outline:hover:not(:disabled),
.dsh-btn-secondary:hover:not(:disabled) { background: var(--dsh-surface-hover); color: var(--dsh-text); }

.dsh-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--dsh-text-secondary);
    box-shadow: none;
}
.dsh-btn-ghost:hover:not(:disabled) { background: var(--dsh-surface-hover); color: var(--dsh-text); }

.dsh-btn-danger {
    background: var(--dsh-danger);
    border-color: var(--dsh-danger);
    color: #ffffff;
}
.dsh-btn-danger:hover:not(:disabled) { background: var(--dsh-danger-hover); border-color: var(--dsh-danger-hover); color: #ffffff; }
[data-theme="dark"] .dsh-btn-danger { background: #d92d20; border-color: #d92d20; }
[data-theme="dark"] .dsh-btn-danger:hover:not(:disabled) { background: #b42318; border-color: #b42318; }

.dsh-btn-danger-outline {
    background: var(--dsh-surface);
    border-color: var(--dsh-alert-danger-border);
    color: var(--dsh-danger);
}
.dsh-btn-danger-outline:hover:not(:disabled) { background: var(--dsh-alert-danger-bg); color: var(--dsh-danger); }

.dsh-btn-success {
    background: var(--dsh-success);
    border-color: var(--dsh-success);
    color: #ffffff;
}
.dsh-btn-success:hover:not(:disabled) { background: var(--dsh-success-hover); border-color: var(--dsh-success-hover); color: #ffffff; }
[data-theme="dark"] .dsh-btn-success { background: #079455; border-color: #079455; }
[data-theme="dark"] .dsh-btn-success:hover:not(:disabled) { background: #067647; border-color: #067647; }

.dsh-btn-sm { height: 30px; padding: 0 var(--dsh-space-2-5); font-size: var(--dsh-text-xs); gap: var(--dsh-space-1-5); }
.dsh-btn-sm svg { width: 14px; height: 14px; }
.dsh-btn-lg { height: 42px; padding: 0 var(--dsh-space-5); font-size: var(--dsh-text-base); }
.dsh-btn-block { width: 100%; }

.dsh-btn-icon { width: 36px; padding: 0; }
.dsh-btn-icon.dsh-btn-sm { width: 30px; }
.dsh-btn-ghost.dsh-btn-icon { color: var(--dsh-text-muted); }
.dsh-btn-ghost.dsh-btn-icon:hover:not(:disabled) { color: var(--dsh-text); }
.dsh-btn-ghost.dsh-icon-btn-danger:hover:not(:disabled) { background: var(--dsh-alert-danger-bg); color: var(--dsh-danger); }

.dsh-btn-link {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--dsh-brand);
    font-weight: var(--dsh-weight-semibold);
}
.dsh-btn-link:hover:not(:disabled) { color: var(--dsh-brand-hover); text-decoration: underline; }

.dsh-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dsh-space-1);
}

/* Spinner (buttons and inline loading) */
.dsh-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dsh-spin 0.7s linear infinite;
    vertical-align: -2px;
}
.dsh-spinner-lg { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes dsh-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- */
/*  Toolbar & filters                                                    */
/* -------------------------------------------------------------------- */

.dsh-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dsh-space-2);
    margin-bottom: var(--dsh-space-4);
}
.dsh-filter-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--dsh-space-2); }
.dsh-filter-meta { font-size: var(--dsh-text-sm); color: var(--dsh-text-muted); }

.dsh-filter-input,
.dsh-filter-select {
    height: 36px;
    border: 1px solid var(--dsh-border-strong);
    border-radius: var(--dsh-radius-md);
    background-color: var(--dsh-surface);
    color: var(--dsh-text);
    font-size: var(--dsh-text-sm);
    box-shadow: var(--dsh-shadow-xs);
    transition: border-color var(--dsh-duration-fast) ease, box-shadow var(--dsh-duration-fast) ease;
}
.dsh-filter-input:hover,
.dsh-filter-select:hover { border-color: var(--dsh-text-muted); }
.dsh-filter-input:focus-visible,
.dsh-filter-select:focus-visible { outline: none; border-color: var(--dsh-brand); box-shadow: var(--dsh-focus-ring); }
.dsh-filter-select:disabled { opacity: 0.6; cursor: not-allowed; }
.dsh-filter-select:disabled:hover { border-color: var(--dsh-border); }

.dsh-filter-input {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 340px;
    padding: 0 var(--dsh-space-3) 0 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 15px;
}
.dsh-filter-input::placeholder { color: var(--dsh-text-muted); }

.dsh-filter-select {
    min-width: 150px;
    /* Long names (tills, locations) are cut with "…" instead of widening the toolbar; js/filters.js
       shows the chosen option's full name on hover, and the open list shows every name in full. */
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 34px 0 var(--dsh-space-3);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.dsh-filter-label {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-2);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    color: var(--dsh-text-secondary);
}

/* Native date picker styled like the filter selects (no chevron). */
.dsh-filter-select.dsh-filter-date {
    min-width: 0;
    max-width: none;
    padding: 0 var(--dsh-space-3);
    background-image: none;
}

/* -------------------------------------------------------------------- */
/*  Tabs (underlined, e.g. the Reports page)                             */
/* -------------------------------------------------------------------- */

.dsh-tabs {
    display: flex;
    gap: var(--dsh-space-1);
    margin-bottom: var(--dsh-space-4);
    border-bottom: 1px solid var(--dsh-border);
    overflow-x: auto;
}
.dsh-tab {
    height: 40px;
    padding: 0 var(--dsh-space-3);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--dsh-text-muted);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dsh-duration-fast) ease, border-color var(--dsh-duration-fast) ease;
}
.dsh-tab:hover { color: var(--dsh-text); }
.dsh-tab:focus-visible { outline: none; box-shadow: var(--dsh-focus-ring); border-radius: var(--dsh-radius-md) var(--dsh-radius-md) 0 0; }
.dsh-tab-active { color: var(--dsh-brand); border-bottom-color: var(--dsh-brand); font-weight: var(--dsh-weight-semibold); }

/* -------------------------------------------------------------------- */
/*  Tables                                                               */
/* -------------------------------------------------------------------- */

.dsh-table-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-lg);
    box-shadow: var(--dsh-shadow-xs);
}
.dsh-table-wrapper > .dsh-empty-state,
.dsh-table-wrapper > .dsh-error-block { border: 0; border-radius: 0; box-shadow: none; }

.dsh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dsh-text-sm);
}
.dsh-table caption { caption-side: top; }

.dsh-table thead th {
    height: 40px;
    padding: 0 var(--dsh-space-4);
    background: var(--dsh-surface-muted);
    border-bottom: 1px solid var(--dsh-border);
    color: var(--dsh-text-muted);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-medium);
    text-align: left;
    white-space: nowrap;
}
.dsh-table thead th.dsh-cell-numeric,
.dsh-table thead th.dsh-cell-actions { text-align: right; }

.dsh-table td {
    height: 52px;
    padding: var(--dsh-space-2) var(--dsh-space-4);
    border-bottom: 1px solid var(--dsh-border);
    color: var(--dsh-text-secondary);
    vertical-align: middle;
}
.dsh-table tbody tr:last-child td { border-bottom: 0; }
.dsh-table tbody tr { transition: background var(--dsh-duration-fast) ease; }
.dsh-table tbody tr:hover { background: var(--dsh-surface-muted); }
.dsh-table tbody tr.dsh-row-selected { background: var(--dsh-brand-light); }

.dsh-table-compact td { height: 44px; }

.dsh-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-1);
    margin: 0 calc(var(--dsh-space-1) * -1);
    padding: var(--dsh-space-1);
    border: 0;
    border-radius: var(--dsh-radius-sm);
    background: none;
    color: inherit;
    font: inherit;
}
.dsh-sort-btn:hover { color: var(--dsh-text); }
.dsh-sort-btn:focus-visible { outline: 2px solid var(--dsh-focus-color); outline-offset: 0; }
.dsh-sort-btn svg { width: 12px; height: 12px; }
.dsh-sort-btn .dsh-sort-idle { opacity: 0; transition: opacity var(--dsh-duration-fast) ease; }
.dsh-sort-btn:hover .dsh-sort-idle,
.dsh-sort-btn:focus-visible .dsh-sort-idle { opacity: 0.6; }
.dsh-sort-active { color: var(--dsh-text); }

/* Cell helpers — usable inside and outside tables */
.dsh-cell-primary { color: var(--dsh-text); font-weight: var(--dsh-weight-medium); }
.dsh-cell-mono,
.dsh-mono { font-family: var(--dsh-font-mono); font-size: 0.8125em; letter-spacing: -0.01em; }
.dsh-cell-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsh-cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.dsh-cell-nowrap { white-space: nowrap; }
.dsh-cell-sub { display: block; margin-top: 1px; font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); font-weight: var(--dsh-weight-regular); }
.dsh-cell-truncate {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsh-cell-name { color: var(--dsh-text); font-weight: var(--dsh-weight-medium); }
.dsh-cell-desc { color: var(--dsh-text-muted); }
.dsh-cell-duration { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dsh-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-3);
    padding: var(--dsh-space-3) var(--dsh-space-4);
    border-top: 1px solid var(--dsh-border);
    font-size: var(--dsh-text-sm);
    color: var(--dsh-text-muted);
}

.dsh-pagination { display: flex; align-items: center; gap: var(--dsh-space-1); }
.dsh-pagination button {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--dsh-space-2);
    border: 1px solid var(--dsh-border-strong);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface);
    color: var(--dsh-text-secondary);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    box-shadow: var(--dsh-shadow-xs);
    transition: background var(--dsh-duration-fast) ease, color var(--dsh-duration-fast) ease;
}
.dsh-pagination button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dsh-pagination button:hover:not(:disabled) { background: var(--dsh-surface-hover); color: var(--dsh-text); }
.dsh-pagination button:focus-visible { outline: none; box-shadow: var(--dsh-focus-ring); }
.dsh-pagination button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.dsh-pagination button.active,
.dsh-pagination button.active:disabled {
    opacity: 1;
    background: var(--dsh-surface-hover);
    border-color: var(--dsh-border-strong);
    color: var(--dsh-text);
    font-weight: var(--dsh-weight-semibold);
}
.dsh-pagination-status { padding: 0 var(--dsh-space-2); font-size: var(--dsh-text-sm); color: var(--dsh-text-secondary); white-space: nowrap; }

/* -------------------------------------------------------------------- */
/*  Skeletons                                                            */
/* -------------------------------------------------------------------- */

@keyframes dsh-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dsh-skeleton {
    display: block;
    min-height: 12px;
    border-radius: var(--dsh-radius-sm);
    background: linear-gradient(90deg, var(--dsh-surface-sunken) 0%, var(--dsh-surface-hover) 50%, var(--dsh-surface-sunken) 100%);
    background-size: 200% 100%;
    animation: dsh-shimmer 1.4s ease-in-out infinite;
}

.dsh-skeleton-text { height: 12px; margin-bottom: var(--dsh-space-3); width: 100%; }
.dsh-skeleton-text:last-child { width: 65%; margin-bottom: 0; }

.dsh-skeleton-card {
    height: 86px;
    border-radius: var(--dsh-radius-lg);
}

.dsh-skeleton-table-row,
.dsh-skeleton-table-head {
    display: grid;
    grid-template-columns: var(--dsh-skeleton-columns, 2fr repeat(4, 1fr));
    align-items: center;
    gap: var(--dsh-space-6);
    height: 52px;
    padding: 0 var(--dsh-space-4);
    border-bottom: 1px solid var(--dsh-border);
}
.dsh-skeleton-table-row:last-child { border-bottom: 0; }
.dsh-skeleton-table-head { border-bottom: 1px solid var(--dsh-border); }
.dsh-skeleton-table-row .dsh-skeleton { height: 12px; }
.dsh-skeleton-table-head {
    height: 40px;
    background: var(--dsh-surface-muted);
}
.dsh-skeleton-table-head .dsh-skeleton { height: 8px; width: 50%; }

/* -------------------------------------------------------------------- */
/*  Empty & error states                                                 */
/* -------------------------------------------------------------------- */

.dsh-empty-state,
.dsh-error-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--dsh-space-12) var(--dsh-space-6);
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-lg);
}
.dsh-empty-state-compact { padding: var(--dsh-space-8) var(--dsh-space-5); }

.dsh-state-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--dsh-space-4);
    border-radius: var(--dsh-radius-lg);
    background: var(--dsh-surface-muted);
    border: 1px solid var(--dsh-border);
    color: var(--dsh-text-secondary);
    box-shadow: var(--dsh-shadow-xs);
}
.dsh-state-icon svg { width: 20px; height: 20px; }
.dsh-state-icon-danger { background: var(--dsh-alert-danger-bg); border-color: var(--dsh-alert-danger-border); color: var(--dsh-danger); }
.dsh-state-icon-success { background: var(--dsh-alert-success-bg); border-color: var(--dsh-alert-success-border); color: var(--dsh-success); }

.dsh-empty-state h3,
.dsh-error-block h3,
.dsh-state-title {
    margin: 0 0 var(--dsh-space-1);
    font-size: var(--dsh-text-lg);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text);
}
.dsh-empty-state p,
.dsh-error-block p {
    max-width: 36rem;
    margin: 0;
    font-size: var(--dsh-text-sm);
    color: var(--dsh-text-muted);
}
.dsh-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dsh-space-2); margin-top: var(--dsh-space-5); }

/* -------------------------------------------------------------------- */
/*  Alerts                                                               */
/* -------------------------------------------------------------------- */

.dsh-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--dsh-space-3);
    padding: var(--dsh-space-3) var(--dsh-space-4);
    margin-bottom: var(--dsh-space-4);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface-muted);
    color: var(--dsh-text-secondary);
    font-size: var(--dsh-text-sm);
    line-height: var(--dsh-leading-normal);
}
.dsh-alert > svg { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.dsh-alert-body { flex: 1; min-width: 0; }
.dsh-alert-title { display: block; margin-bottom: var(--dsh-space-0-5); font-weight: var(--dsh-weight-semibold); }
.dsh-alert-actions { display: flex; flex-wrap: wrap; gap: var(--dsh-space-2); margin-top: var(--dsh-space-3); }
.dsh-alert p { margin: 0; }

.dsh-alert-danger  { background: var(--dsh-alert-danger-bg);  color: var(--dsh-alert-danger-text);  border-color: var(--dsh-alert-danger-border); }
.dsh-alert-warning { background: var(--dsh-alert-warning-bg); color: var(--dsh-alert-warning-text); border-color: var(--dsh-alert-warning-border); }
.dsh-alert-info    { background: var(--dsh-alert-info-bg);    color: var(--dsh-alert-info-text);    border-color: var(--dsh-alert-info-border); }
.dsh-alert-success { background: var(--dsh-alert-success-bg); color: var(--dsh-alert-success-text); border-color: var(--dsh-alert-success-border); }

/* -------------------------------------------------------------------- */
/*  Forms                                                                */
/* -------------------------------------------------------------------- */

.dsh-form-group { margin-bottom: var(--dsh-space-4); }
.dsh-form-group:last-child { margin-bottom: 0; }

.dsh-form-group > label,
.dsh-form-label {
    display: block;
    margin-bottom: var(--dsh-space-1-5);
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    color: var(--dsh-text);
}
.dsh-required { color: var(--dsh-danger); margin-left: 2px; }
.dsh-optional { color: var(--dsh-text-muted); font-weight: var(--dsh-weight-regular); }

.dsh-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--dsh-space-4);
    margin-bottom: var(--dsh-space-4);
}
.dsh-form-row > .dsh-form-group { margin-bottom: 0; }

.dsh-form-section-title {
    margin: var(--dsh-space-6) 0 var(--dsh-space-3);
    padding-top: var(--dsh-space-5);
    border-top: 1px solid var(--dsh-border);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dsh-form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.dsh-form-input,
.dsh-form-select,
.dsh-form-textarea {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: var(--dsh-space-2) var(--dsh-space-3);
    border: 1px solid var(--dsh-border-strong);
    border-radius: var(--dsh-radius-md);
    background-color: var(--dsh-surface);
    color: var(--dsh-text);
    font-size: var(--dsh-text-base);
    line-height: 1.4;
    box-shadow: var(--dsh-shadow-xs);
    transition: border-color var(--dsh-duration-fast) ease, box-shadow var(--dsh-duration-fast) ease;
}
textarea.dsh-form-input { min-height: 80px; }
.dsh-form-input::placeholder,
.dsh-form-textarea::placeholder { color: var(--dsh-text-muted); }
.dsh-form-input:hover:not(:disabled),
.dsh-form-select:hover:not(:disabled) { border-color: var(--dsh-text-muted); }
.dsh-form-input:focus,
.dsh-form-select:focus,
.dsh-form-textarea:focus { outline: none; border-color: var(--dsh-brand); box-shadow: var(--dsh-focus-ring); }
.dsh-form-input:disabled,
.dsh-form-select:disabled,
.dsh-form-textarea:disabled {
    background: var(--dsh-surface-muted);
    color: var(--dsh-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}
.dsh-form-input[readonly] { background: var(--dsh-surface-muted); }

select.dsh-form-input,
.dsh-form-select {
    padding-right: 34px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* Blazor validation states */
.dsh-form-input.invalid,
.dsh-form-select.invalid,
.dsh-form-input.is-invalid,
.dsh-form-input.modified.invalid { border-color: var(--dsh-danger); }
.dsh-form-input.invalid:focus,
.dsh-form-select.invalid:focus { box-shadow: 0 0 0 3px rgb(217 45 32 / 0.2); }

.validation-message,
.dsh-field-error {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-1);
    margin-top: var(--dsh-space-1-5);
    font-size: var(--dsh-text-xs);
    color: var(--dsh-danger);
}

.validation-errors,
.dsh-validation-summary {
    margin: 0 0 var(--dsh-space-4);
    padding: var(--dsh-space-3) var(--dsh-space-4) var(--dsh-space-3) var(--dsh-space-8);
    border: 1px solid var(--dsh-alert-danger-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-alert-danger-bg);
    color: var(--dsh-alert-danger-text);
    font-size: var(--dsh-text-sm);
}
.validation-errors:empty { display: none; }

.dsh-field-hint {
    display: block;
    margin-top: var(--dsh-space-1-5);
    font-size: var(--dsh-text-xs);
    line-height: 1.45;
    color: var(--dsh-text-muted);
}

/* Checkbox / radio */
.dsh-check {
    display: flex;
    align-items: flex-start;
    gap: var(--dsh-space-2-5);
    margin-bottom: var(--dsh-space-3);
    font-size: var(--dsh-text-base);
    color: var(--dsh-text);
    cursor: pointer;
}
.dsh-check:last-child { margin-bottom: 0; }
.dsh-check-input,
.dsh-check input[type="checkbox"],
.dsh-check input[type="radio"],
input[type="checkbox"].dsh-check-input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--dsh-brand);
    cursor: pointer;
}
.dsh-check-label { display: flex; flex-direction: column; gap: var(--dsh-space-0-5); min-width: 0; }
.dsh-check-desc { font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); }

/* Selectable list (checkbox pickers inside dialogs) */
.dsh-choice-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
}
.dsh-choice {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-3);
    padding: var(--dsh-space-2-5) var(--dsh-space-3);
    border-bottom: 1px solid var(--dsh-border);
    cursor: pointer;
    font-size: var(--dsh-text-sm);
}
.dsh-choice:last-child { border-bottom: 0; }
.dsh-choice:hover { background: var(--dsh-surface-muted); }
.dsh-choice-disabled { cursor: not-allowed; opacity: 0.6; }
.dsh-choice-body { flex: 1; min-width: 0; }
.dsh-choice-title { color: var(--dsh-text); font-weight: var(--dsh-weight-medium); }
.dsh-choice-meta { font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); }

/* -------------------------------------------------------------------- */
/*  Dialog                                                               */
/* -------------------------------------------------------------------- */

.dsh-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--dsh-z-dialog);
    background: var(--dsh-overlay);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: dsh-fade var(--dsh-duration-base) ease;
}

.dsh-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: calc(var(--dsh-z-dialog) + 1);
    width: min(520px, calc(100vw - var(--dsh-space-8)));
    max-height: calc(100vh - var(--dsh-space-12));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translate(-50%, -50%);
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-xl);
    box-shadow: var(--dsh-shadow-xl);
    animation: dsh-dialog-in var(--dsh-duration-base) var(--dsh-ease);
}
.dsh-dialog:focus { outline: none; }
.dsh-dialog-sm { width: min(420px, calc(100vw - var(--dsh-space-8))); }
.dsh-dialog-lg { width: min(760px, calc(100vw - var(--dsh-space-8))); }
.dsh-dialog-xl { width: min(960px, calc(100vw - var(--dsh-space-8))); }

/* EditForm renders a <form> around header/body/footer: make it a flex column so the body scrolls. */
.dsh-dialog > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

@keyframes dsh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsh-dialog-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.dsh-dialog-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dsh-space-4);
    padding: var(--dsh-space-5) var(--dsh-space-6) var(--dsh-space-4);
}
.dsh-dialog-heading { min-width: 0; }
.dsh-dialog-title {
    margin: 0;
    font-size: var(--dsh-text-xl);
    font-weight: var(--dsh-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--dsh-text);
}
.dsh-dialog-subtitle { margin: var(--dsh-space-1) 0 0; font-size: var(--dsh-text-sm); color: var(--dsh-text-muted); }

.dsh-dialog-close,
.dsh-drawer-close {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--dsh-radius-md);
    background: transparent;
    color: var(--dsh-text-muted);
    font-size: 1.25rem;
    line-height: 1;
}
.dsh-dialog-close:hover:not(:disabled),
.dsh-drawer-close:hover:not(:disabled) { background: var(--dsh-surface-hover); color: var(--dsh-text); }
.dsh-dialog-close svg,
.dsh-drawer-close svg { width: 18px; height: 18px; }

.dsh-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--dsh-space-2) var(--dsh-space-6) var(--dsh-space-6);
    color: var(--dsh-text-secondary);
}

.dsh-dialog-footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dsh-space-2);
    padding: var(--dsh-space-4) var(--dsh-space-6);
    border-top: 1px solid var(--dsh-border);
    background: var(--dsh-surface-muted);
}
.dsh-dialog-footer-start { margin-right: auto; }

.dsh-idle-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--dsh-space-8);
    text-align: center;
}

.dsh-confirm-target {
    margin-bottom: var(--dsh-space-3);
    padding: var(--dsh-space-3);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface-muted);
    color: var(--dsh-text);
    font-weight: var(--dsh-weight-medium);
    word-break: break-word;
}

@media (max-width: 640px) {
    .dsh-dialog,
    .dsh-dialog-sm,
    .dsh-dialog-lg,
    .dsh-dialog-xl {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 92vh;
        transform: none;
        border-radius: var(--dsh-radius-xl) var(--dsh-radius-xl) 0 0;
        animation: dsh-sheet-in var(--dsh-duration-base) var(--dsh-ease);
    }
    .dsh-dialog-footer .dsh-btn { flex: 1; }
}
@keyframes dsh-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* -------------------------------------------------------------------- */
/*  Drawer                                                               */
/* -------------------------------------------------------------------- */

.dsh-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--dsh-z-drawer);
    background: var(--dsh-overlay-light);
    animation: dsh-fade var(--dsh-duration-base) ease;
}

.dsh-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--dsh-z-drawer) + 1);
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--dsh-surface);
    border-left: 1px solid var(--dsh-border);
    box-shadow: var(--dsh-shadow-xl);
    animation: dsh-drawer-slide var(--dsh-duration-base) var(--dsh-ease);
}
.dsh-drawer:focus { outline: none; }

@keyframes dsh-drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

.dsh-drawer-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dsh-space-4);
    padding: var(--dsh-space-5) var(--dsh-space-6);
    border-bottom: 1px solid var(--dsh-border);
}
.dsh-drawer-heading { min-width: 0; }
.dsh-drawer-eyebrow { font-size: var(--dsh-text-xs); font-weight: var(--dsh-weight-medium); color: var(--dsh-text-muted); margin-bottom: var(--dsh-space-0-5); }
.dsh-drawer-title {
    margin: 0;
    font-size: var(--dsh-text-xl);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsh-drawer-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dsh-space-2); margin-top: var(--dsh-space-2); }

.dsh-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--dsh-space-5) var(--dsh-space-6) var(--dsh-space-8);
}

.dsh-drawer-section { margin-bottom: var(--dsh-space-6); }
.dsh-drawer-section:last-child { margin-bottom: 0; }

.dsh-drawer-section-title,
.dsh-drawer-subsection-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-2);
    margin: 0 0 var(--dsh-space-2);
    font-size: var(--dsh-text-xs);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dsh-drawer-subsection-title { margin-top: var(--dsh-space-4); text-transform: none; letter-spacing: 0; font-size: var(--dsh-text-sm); color: var(--dsh-text); }

/* Key/value rows (drawer fields) */
.dsh-drawer-fields {
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    overflow: hidden;
}
.dsh-drawer-field {
    display: flex;
    /* Wraps rather than squeezing the value: the label is prose and the value may be an
       unbreakable figure, so when both cannot share a line the value drops to its own,
       still right-aligned and still complete. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-4);
    min-height: 38px;
    padding: var(--dsh-space-2) 0;
    border-bottom: 1px solid var(--dsh-border);
    font-size: var(--dsh-text-sm);
}
.dsh-drawer-field:last-child { border-bottom: 0; }
.dsh-drawer-fields > .dsh-drawer-field { padding: var(--dsh-space-2) var(--dsh-space-3); }
.dsh-drawer-field-label { flex-shrink: 0; color: var(--dsh-text-muted); }
.dsh-drawer-field-value {
    min-width: 0;
    color: var(--dsh-text);
    font-weight: var(--dsh-weight-medium);
    text-align: right;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.dsh-drawer-field-total .dsh-drawer-field-label,
.dsh-drawer-field-total .dsh-drawer-field-value { color: var(--dsh-text); font-weight: var(--dsh-weight-semibold); font-size: var(--dsh-text-base); }

.dsh-drawer-timeline { list-style: none; margin: 0; padding: 0; }
.dsh-drawer-timeline li {
    position: relative;
    padding: 0 0 var(--dsh-space-5) var(--dsh-space-6);
}
.dsh-drawer-timeline li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 14px;
    bottom: -2px;
    width: 2px;
    background: var(--dsh-border);
}
.dsh-drawer-timeline li:last-child { padding-bottom: 0; }
.dsh-drawer-timeline li:last-child::before { display: none; }
.dsh-drawer-timeline li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dsh-surface);
    border: 2px solid var(--dsh-brand);
}
.dsh-drawer-timeline-event { font-size: var(--dsh-text-sm); font-weight: var(--dsh-weight-semibold); color: var(--dsh-text); }
.dsh-drawer-timeline-desc { margin: var(--dsh-space-0-5) 0; font-size: var(--dsh-text-sm); color: var(--dsh-text-secondary); }
.dsh-drawer-timeline-meta { display: flex; flex-wrap: wrap; gap: var(--dsh-space-3); font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); }

/* -------------------------------------------------------------------- */
/*  Misc content                                                         */
/* -------------------------------------------------------------------- */

.dsh-code-block {
    padding: var(--dsh-space-3);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface-sunken);
    font-family: var(--dsh-font-mono);
    font-size: var(--dsh-text-xs);
    color: var(--dsh-text);
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

.dsh-inline-list { display: flex; flex-wrap: wrap; gap: var(--dsh-space-1); }

.dsh-kv-inline { display: inline-flex; align-items: center; gap: var(--dsh-space-1); }

/* -------------------------------------------------------------------- */
/*  Utilities                                                            */
/* -------------------------------------------------------------------- */

.dsh-text { color: var(--dsh-text); }
.dsh-text-secondary { color: var(--dsh-text-secondary); }
.dsh-text-muted { color: var(--dsh-text-muted); }
.dsh-text-danger { color: var(--dsh-danger); }
.dsh-text-success { color: var(--dsh-badge-success-text); }
.dsh-text-warning { color: var(--dsh-badge-warning-text); }
.dsh-text-2xs { font-size: var(--dsh-text-2xs); }
.dsh-text-xs { font-size: var(--dsh-text-xs); }
.dsh-text-sm { font-size: var(--dsh-text-sm); }
.dsh-text-base { font-size: var(--dsh-text-base); }
.dsh-text-lg { font-size: var(--dsh-text-lg); }
.dsh-fw-medium { font-weight: var(--dsh-weight-medium); }
.dsh-fw-semibold { font-weight: var(--dsh-weight-semibold); }
.dsh-tabular { font-variant-numeric: tabular-nums; }
.dsh-nowrap { white-space: nowrap; }
/* Money and other figures. Digits line up column to column, and the number is never broken:
   not mid-figure, not between a minus sign and its digits, not between an amount and a
   trailing ISO code. Use it wherever Display.Money output lands outside a `dsh-cell-numeric`
   table cell (which already carries the same treatment). Declared after the components above
   so it also overrides their `word-break: break-word`. */
.dsh-figure {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
.dsh-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-break { word-break: break-word; overflow-wrap: anywhere; }

.dsh-stack { display: flex; flex-direction: column; gap: var(--dsh-space-3); }
.dsh-stack-sm { display: flex; flex-direction: column; gap: var(--dsh-space-1); }
.dsh-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dsh-space-2); }
.dsh-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dsh-space-2); }

.dsh-mt-0 { margin-top: 0 !important; }
.dsh-mt-2 { margin-top: var(--dsh-space-2); }
.dsh-mt-3 { margin-top: var(--dsh-space-3); }
.dsh-mt-4 { margin-top: var(--dsh-space-4); }
.dsh-mt-6 { margin-top: var(--dsh-space-6); }
.dsh-mb-0 { margin-bottom: 0 !important; }
.dsh-mb-2 { margin-bottom: var(--dsh-space-2); }
.dsh-mb-3 { margin-bottom: var(--dsh-space-3); }
.dsh-mb-4 { margin-bottom: var(--dsh-space-4); }
.dsh-mb-6 { margin-bottom: var(--dsh-space-6); }

/* -------------------------------------------------------------------- */
/*  Account & auth pages (AccountLayout + AccountCard/AccountSection/     */
/*  AccountAlert/AccountStepIndicator): sign-in, password, two-factor,   */
/*  registration, unsubscribe. One centred card, no admin shell.         */
/* -------------------------------------------------------------------- */

.dsh-account-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--dsh-canvas);
}

.dsh-account-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(1200px 600px at 50% -10%, var(--dsh-auth-gradient-accent) 0%, transparent 60%);
}

.dsh-account-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dsh-space-3);
    padding: var(--dsh-space-4) var(--dsh-space-6);
}

.dsh-account-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-2-5);
    min-width: 0;
}
.dsh-account-brand-text {
    font-size: var(--dsh-text-lg);
    font-weight: var(--dsh-weight-bold);
    letter-spacing: -0.02em;
    color: var(--dsh-text);
}

.dsh-account-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    min-width: 0;
}

.dsh-account-user {
    display: flex;
    align-items: center;
    gap: var(--dsh-space-2);
    min-width: 0;
}
.dsh-account-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.dsh-account-user-name,
.dsh-account-user-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dsh-account-user-name { font-size: var(--dsh-text-sm); font-weight: var(--dsh-weight-semibold); color: var(--dsh-text); }
.dsh-account-user-email { font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); }

.dsh-account-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--dsh-space-6) var(--dsh-space-4) var(--dsh-space-8);
}
.dsh-account-main:focus { outline: none; }

@media (min-height: 760px) {
    /* Vertically centre short cards (sign-in) on tall screens; long ones (2FA) still scroll. */
    .dsh-account-main { align-items: center; }
}

.dsh-account-column {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--dsh-space-4);
}

.dsh-account-back {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-1);
    align-self: flex-start;
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    color: var(--dsh-text-secondary);
}
.dsh-account-back:hover { color: var(--dsh-text); }
.dsh-account-back svg { width: 16px; height: 16px; }

.dsh-account-footer {
    padding: 0 var(--dsh-space-4) var(--dsh-space-6);
    font-size: var(--dsh-text-sm);
    color: var(--dsh-text-muted);
    text-align: center;
}

/* ---- Step indicator ---- */

.dsh-account-steps-summary {
    margin: 0;
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-brand);
}
.dsh-account-steps-track {
    display: flex;
    gap: var(--dsh-space-2);
    margin: var(--dsh-space-2) 0 0;
    padding: 0;
    list-style: none;
}
.dsh-account-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dsh-space-1-5);
    font-size: var(--dsh-text-xs);
    color: var(--dsh-text-muted);
}
.dsh-account-step-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--dsh-border);
}
.dsh-account-step-done .dsh-account-step-bar,
.dsh-account-step-current .dsh-account-step-bar { background: var(--dsh-brand); }
.dsh-account-step-current { color: var(--dsh-text); font-weight: var(--dsh-weight-semibold); }

/* ---- Card ---- */

.dsh-account-card {
    width: 100%;
    padding: var(--dsh-space-8);
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-xl);
    box-shadow: var(--dsh-shadow-lg);
}
.dsh-account-card-header { margin-bottom: var(--dsh-space-6); }
.dsh-account-card-title {
    margin: 0;
    font-size: var(--dsh-text-2xl);
    font-weight: var(--dsh-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--dsh-text);
}
.dsh-account-card-title:focus { outline: none; }
.dsh-account-card-desc { margin: var(--dsh-space-1-5) 0 0; font-size: var(--dsh-text-base); color: var(--dsh-text-muted); }
.dsh-account-card > .dsh-account-card-desc { margin: 0 0 var(--dsh-space-4); }

/* Accept-invite: what the person is joining, above the password form. */
.dsh-invite-summary {
    margin: 0 0 var(--dsh-space-4);
    padding: var(--dsh-space-3) var(--dsh-space-4);
    background: var(--dsh-surface-muted);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    font-size: var(--dsh-text-sm);
}
.dsh-invite-summary > div { display: flex; gap: var(--dsh-space-3); justify-content: space-between; padding: var(--dsh-space-1) 0; }
.dsh-invite-summary dt { color: var(--dsh-text-muted); }
.dsh-invite-summary dd { margin: 0; font-weight: var(--dsh-weight-medium); text-align: right; overflow-wrap: anywhere; }

/* Primary actions span the card; secondary ones (outline/danger) stay compact. */
.dsh-account-card form .dsh-btn-primary,
.dsh-account-block-btn { width: 100%; height: 40px; margin-top: var(--dsh-space-2); font-size: var(--dsh-text-base); }

.dsh-account-card-footer {
    margin-top: var(--dsh-space-4);
    text-align: center;
    font-size: var(--dsh-text-sm);
}

.dsh-account-section + .dsh-account-section {
    margin-top: var(--dsh-space-6);
    padding-top: var(--dsh-space-6);
    border-top: 1px solid var(--dsh-border);
}
.dsh-account-section-title {
    margin: 0 0 var(--dsh-space-2);
    font-size: var(--dsh-text-lg);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text);
}
.dsh-account-section p { margin: 0 0 var(--dsh-space-4); color: var(--dsh-text-secondary); }

.dsh-account-steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--dsh-space-3);
    margin: 0 0 var(--dsh-space-5);
    padding-left: var(--dsh-space-5);
    color: var(--dsh-text-secondary);
}

.dsh-qr {
    display: inline-block;
    padding: var(--dsh-space-2);
    background: #ffffff;
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    line-height: 0;
}
.dsh-qr svg { max-width: 100%; height: auto; }

.dsh-secret-key {
    margin-top: var(--dsh-space-1);
    font-family: var(--dsh-font-mono);
    letter-spacing: 0.06em;
    word-break: break-all;
    color: var(--dsh-text);
}

.dsh-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dsh-space-2) var(--dsh-space-4);
    margin: 0 0 var(--dsh-space-2);
    padding: var(--dsh-space-4);
    list-style: none;
    font-family: var(--dsh-font-mono);
    background: var(--dsh-surface-muted);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
}

/* ---- Decorative photo panel (signed-out visitors, wide screens) ---- */

/* The background images are only set inside the media query so phones never download them. */
.dsh-auth-hero { display: none; }

@media (min-width: 1024px) {
    .dsh-account-shell-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .dsh-account-shell-hero .dsh-auth-hero {
        position: relative;
        display: block;
        overflow: hidden;
        min-height: 100vh;
        background: #111;
    }

    /* Three photos stacked on top of each other, one every 8s (24s a round). Each fades in over the one
       before and holds until the next is fully in, so the panel never dips to black between them. The
       first starts already visible (negative delay); without animation only the first shows. */
    .dsh-auth-hero-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        background: #111 center 40% / cover no-repeat;
        opacity: 0;
        animation: dsh-auth-hero-fade 24s linear infinite;
    }
    .dsh-auth-hero-slide:first-child { opacity: 1; }
    .dsh-auth-hero-slide-card { background-image: url('../images/login-hero.webp'); animation-delay: -1.5s; }
    .dsh-auth-hero-slide-order { background-image: url('../images/login-hero-order.webp'); background-position: center 45%; animation-delay: 6.5s; }
    .dsh-auth-hero-slide-owner { background-image: url('../images/login-hero-owner.webp'); background-position: center 55%; animation-delay: 14.5s; }

    @keyframes dsh-auth-hero-fade {
        0% { opacity: 0; }
        5% { opacity: 1; }
        39% { opacity: 1; }
        44% { opacity: 0; }
        100% { opacity: 0; }
    }

    /* Darken the bottom edge so the caption stays legible over the photo. */
    .dsh-auth-hero-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
    }

    .dsh-auth-hero-caption {
        position: relative;
        padding: var(--dsh-space-8) var(--dsh-space-10);
        color: #fff;
    }
    .dsh-auth-hero-tagline {
        margin: 0;
        max-width: 22ch;
        font-size: var(--dsh-text-2xl);
        font-weight: var(--dsh-weight-semibold);
        letter-spacing: -0.02em;
        line-height: 1.25;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dsh-auth-hero-slide { animation: none; }
}

@media (max-width: 640px) {
    .dsh-account-topbar { padding: var(--dsh-space-3) var(--dsh-space-4); }
    .dsh-account-user-text { display: none; }
    .dsh-account-main { padding: var(--dsh-space-2) var(--dsh-space-4) var(--dsh-space-6); }
    .dsh-account-card { padding: var(--dsh-space-6) var(--dsh-space-5); }
    .dsh-account-card-title { font-size: var(--dsh-text-xl); }
}

@media (max-width: 480px) {
    .dsh-recovery-codes { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------- */
/*  Order tabs (orders grouped by barcode)                               */
/* -------------------------------------------------------------------- */

/* Two-option view switch in a filter toolbar. Buttons carry aria-pressed. */
.dsh-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--dsh-border-strong);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface-muted);
    box-shadow: var(--dsh-shadow-xs);
}
.dsh-segmented-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dsh-space-1-5);
    height: 30px;
    padding: 0 var(--dsh-space-3);
    border: 0;
    border-radius: var(--dsh-radius-sm);
    background: transparent;
    color: var(--dsh-text-muted);
    font: inherit;
    font-size: var(--dsh-text-sm);
    font-weight: var(--dsh-weight-medium);
    cursor: pointer;
    transition: background var(--dsh-duration-fast) ease, color var(--dsh-duration-fast) ease;
}
.dsh-segmented-btn svg { width: 14px; height: 14px; }
.dsh-segmented-btn:hover { color: var(--dsh-text); }
.dsh-segmented-btn[aria-pressed="true"] { background: var(--dsh-surface); color: var(--dsh-text); box-shadow: var(--dsh-shadow-xs); }
.dsh-segmented-btn:focus-visible { outline: none; box-shadow: var(--dsh-focus-ring); }

.dsh-filter-date {
    height: 36px;
    padding: 0 var(--dsh-space-2);
    border: 1px solid var(--dsh-border-strong);
    border-radius: var(--dsh-radius-md);
    background-color: var(--dsh-surface);
    color: var(--dsh-text);
    font: inherit;
    font-size: var(--dsh-text-sm);
    box-shadow: var(--dsh-shadow-xs);
    color-scheme: light dark;
}
/* The whole field opens the calendar (js/filters.js), so it reads as clickable and keeps its icon. */
.dsh-filter-date { cursor: pointer; }
.dsh-filter-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.dsh-filter-date:focus-visible { outline: none; border-color: var(--dsh-brand); box-shadow: var(--dsh-focus-ring); }

.dsh-table .dsh-cell-toggle { width: 1%; padding-right: 0; }
.dsh-table tbody tr.dsh-row-expanded { background: var(--dsh-surface-muted); }
.dsh-table tbody tr.dsh-row-expanded td { border-bottom-color: transparent; }
.dsh-table tbody tr.dsh-table-detail-row,
.dsh-table tbody tr.dsh-table-detail-row:hover { background: var(--dsh-surface-muted); }
.dsh-table tbody tr.dsh-table-detail-row > td { height: auto; padding: 0 var(--dsh-space-4) var(--dsh-space-4); }

.dsh-tab-batches {
    overflow-x: auto;
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface);
}
.dsh-tab-batches .dsh-table thead th { height: 34px; background: var(--dsh-surface); }

.dsh-tab-progress { display: flex; flex-direction: column; gap: var(--dsh-space-1); min-width: 120px; }
.dsh-tab-progress-label { font-size: var(--dsh-text-xs); color: var(--dsh-text-secondary); white-space: nowrap; }
.dsh-tab-progress-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: var(--dsh-radius-full);
    background: var(--dsh-border);
}
.dsh-tab-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--dsh-badge-info-dot); }
.dsh-tab-progress-brand { background: var(--dsh-badge-brand-dot); }
.dsh-tab-progress-success { background: var(--dsh-badge-success-dot); }
.dsh-tab-progress-danger { background: var(--dsh-badge-danger-dot); }
.dsh-tab-progress-neutral { background: var(--dsh-badge-neutral-dot); }

.dsh-tab-batch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dsh-space-3); }
.dsh-tab-batch {
    padding: var(--dsh-space-3);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface);
}
.dsh-tab-batch-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dsh-space-2); margin-bottom: var(--dsh-space-1); }
/* nowrap so the amount stays whole; the head is `flex-wrap: wrap`, so a long batch label
   pushes the amount onto its own line instead of squeezing the figure. */
.dsh-tab-batch-amount { margin-left: auto; font-weight: var(--dsh-weight-semibold); color: var(--dsh-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsh-tab-batch-refs { display: flex; flex-wrap: wrap; gap: var(--dsh-space-1-5); margin-top: var(--dsh-space-2); }

@media (forced-colors: active) {
    .dsh-segmented-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
    .dsh-tab-progress-track { border: 1px solid CanvasText; }
    .dsh-tab-progress-fill { background: Highlight; }
}

/* Reports: daily summary card (label / value / sub-line tiles) */
/* 200px, not 170px: a tile has to hold "₦999,999,999.99" at the lg size (~139px) plus room
   for a longer "1,234.56 XOF" style fallback, without the figure touching the next column.
   The column count is unchanged at every breakpoint the app uses. */
.dsh-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--dsh-space-4) var(--dsh-space-6);
    margin: 0;
}
.dsh-summary-item { min-width: 0; }
.dsh-summary-item dt { font-size: var(--dsh-text-xs); color: var(--dsh-text-muted); margin-bottom: var(--dsh-space-1); }
.dsh-summary-item dd { margin: 0; }
.dsh-summary-value {
    font-size: var(--dsh-text-lg);
    font-weight: var(--dsh-weight-semibold);
    color: var(--dsh-text);
    font-variant-numeric: tabular-nums;
    /* No `word-break` here on purpose: a grouped amount has no break opportunity of its own,
       so leaving wrapping at its default is what keeps the number whole. A tile whose value
       is a figure followed by a word ("1m 23s median") still wraps between the two. */
}
.dsh-summary-sub { font-size: var(--dsh-text-xs); font-weight: normal; color: var(--dsh-text-secondary); }

/* -------------------------------------------------------------------- */
/*  Responsive content                                                   */
/* -------------------------------------------------------------------- */

@media (max-width: 640px) {
    .dsh-page-header { align-items: flex-start; margin-bottom: var(--dsh-space-5); }
    .dsh-page-title { font-size: var(--dsh-text-xl); }
    .dsh-page-actions { width: 100%; }
    .dsh-page-actions > .dsh-btn-primary { flex: 1; }

    .dsh-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dsh-space-3); }
    /* Stacked: the icon sits above the text, so the value gets the card's full inline size. */
    .dsh-stat-card { flex-direction: column; gap: var(--dsh-space-2); padding: var(--dsh-space-3) var(--dsh-space-4); --dsh-stat-card-gutter: 0px; }
    .dsh-stat-card-icon { width: 30px; height: 30px; }
    .dsh-stat-card-icon svg { width: 16px; height: 16px; }
    /* Same fit-to-card rule, one step down from the desktop ceiling. */
    .dsh-stat-card-value {
        font-size: clamp(
            var(--dsh-text-sm),
            calc((100cqi - var(--dsh-stat-card-gutter)) / (var(--dsh-value-chars) * 0.58)),
            var(--dsh-text-xl));
    }

    .dsh-filter-toolbar > * { flex: 1 1 100%; max-width: none; min-width: 0; }
    .dsh-segmented-btn { flex: 1; justify-content: center; }
    .dsh-filter-label > span { min-width: 2.5rem; }
    .dsh-filter-label .dsh-filter-date { flex: 1; }
    .dsh-filter-toolbar-end { margin-left: 0; }

    .dsh-table-footer { justify-content: center; }
}

/* -------------------------------------------------------------------- */
/*  Motion & forced colours                                              */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .dsh-nav-item.active { border: 2px solid ButtonText; }
    .dsh-badge { border: 1px solid CanvasText; }
    .dsh-btn { border: 1px solid ButtonText; }
    :focus-visible { outline: 2px solid Highlight; }
}

/* Business switcher (BusinessSwitcher.razor): each option is a form button posting to /switch-business. */
.dsh-tenant-switcher-list ul,
ul.dsh-tenant-switcher-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dsh-tenant-switcher-list form {
    margin: 0;
}

.dsh-tenant-switcher-list button.dsh-tenant-switcher-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dsh-tenant-switcher-list button.dsh-tenant-switcher-option:hover:not(:disabled),
.dsh-tenant-switcher-list button.dsh-tenant-switcher-option:focus-visible {
    background: var(--dsh-surface-hover);
}

.dsh-tenant-switcher-list button.dsh-tenant-switcher-option:disabled {
    cursor: default;
}

/* Organisation page (Admin/Organization.razor). */
.dsh-inline-form {
    display: inline;
    margin: 0;
}

.dsh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Choose organisation (Pages/Auth/ChooseOrganization.razor): one card-button per organisation. */
.dsh-org-choice-form {
    margin: 0;
}

.dsh-org-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius-md);
    background: var(--dsh-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dsh-org-choice:hover,
.dsh-org-choice:focus-visible {
    border-color: var(--dsh-brand);
    background: var(--dsh-surface-hover);
}

.dsh-org-choice.is-last {
    border-color: var(--dsh-border-strong);
}

.dsh-org-choice-name {
    font-weight: 600;
}

.dsh-org-choice-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--dsh-text-muted);
}