/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
.h-100 { height: 100%; }
.vh-100 { height: 100vh; height: 100dvh; }

/* Layout utilities */
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }

/* Text utilities */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-nowrap { white-space: nowrap; }

/* ─── MudBlazor Layout Overrides ───────────────────────────── */
.mud-layout {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

.mud-main-content {
    background: transparent !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
}

/* ─── AppBar: two-row auto-height header ───────────────────── */
/* The app bar is in-flow with height:auto, so --mud-appbar-height only drives
   the top offset of the clipped L2 drawer. Anything stacked above the app bar
   must be added to it, or the drawer slides under the header. */
:root {
    --app-header-height: 128px;
    --app-sim-banner-height: 40px;
    --mud-appbar-height: var(--app-header-height) !important;
}

.mud-layout.has-role-simulation {
    --mud-appbar-height: calc(var(--app-header-height) + var(--app-sim-banner-height)) !important;
}

.app-sim-banner { flex-shrink: 0; }

.app-sim-banner > .mud-paper {
    height: var(--app-sim-banner-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.app-sim-banner > .mud-paper > * { height: 100%; }

.mud-appbar {
    border-radius: 0 !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.app-header.mud-appbar {
    position: relative !important;
    height: auto !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: var(--mud-zindex-appbar) !important;
}

.app-header .mud-toolbar,
.app-header .mud-toolbar-appbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

/* ─── Top navigation tabs ──────────────────────────────────── */
/* Scroll horizontally rather than break the layout when tabs overflow (md and up). */
.nav-row {
    overflow-x: auto;
    scrollbar-width: thin;
}

.nav-tab.mud-button-root {
    border-radius: 0 !important;
    text-transform: none !important;
    min-width: auto;
    padding: 8px 16px;
    font-weight: 400;
    font-size: 0.8125rem;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, background-color 0.2s;
}

.nav-tab.mud-button-root .mud-icon-button-label,
.nav-tab.mud-button-root .mud-button-icon-start {
    font-size: 1.125rem;
    margin-right: 4px;
}

.nav-tab.mud-button-root:hover:not(:disabled) {
    opacity: 1;
    background-color: rgba(128, 128, 128, 0.12);
}

.nav-tab-active.mud-button-root {
    opacity: 1;
    font-weight: 500;
    box-shadow: inset 0 -3px 0 0 currentColor;
}

/* ─── Drawer ────────────────────────────────────────────────── */
.mud-drawer { border-radius: 0 !important; }

/* Snackbar positioning */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right { top: 64px !important; }

@media (max-width: 600px) {
    .mud-snackbar { font-size: 0.8rem; padding: 6px 10px; min-width: 0; }
    .mud-snackbar-location-top-right { right: 8px !important; left: 8px !important; width: auto !important; }
}

/* ── Notification list divider ──────────────────── */
.border-bottom-divider {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Miscellaneous utilities */
.overflow-y-scroll { -webkit-overflow-scrolling: touch; }
.font-monospace { font-family: monospace !important; font-size: 11px !important; }
.word-break-all { word-break: break-all; }
.word-break-word { word-break: break-word; }
.text-center { text-align: center; }


/* ── Timeline catalog ────────────────────────────── */
.timeline-dot {
    width: 52px;
    height: 52px;
}

/* Whole dot in the app-bar colour. MudBlazor paints two circles — the outer with
   --mud-palette-surface and the inner with grey (Color.Default) — both more specific than a
   single class, so override both with !important, scoped to this timeline. */
.plans-timeline .mud-timeline-item-dot,
.plans-timeline .mud-timeline-item-dot .mud-timeline-item-dot-inner {
    background-color: var(--mud-palette-appbar-background) !important;
}

.timeline-dot-stack {
    width: 52px;
    height: 52px;
}

.timeline-time-label {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    /* Dot uses the app-bar background, so the label follows the default text color, which the
       theme keeps readable in both modes (dark text in light mode, light text in dark mode). */
    color: var(--mud-palette-text-primary);
}

.timeline-content {
    min-width: 0;
    padding-right: 12px;
}

.timeline-info-btn {
    width: 20px;
    height: 20px;
    min-width: 0;
    padding: 0;
}

/* ── Table column widths ─────────────────────────── */
.td-log-message {
    word-break: break-all;
    min-width: 400px;
}

/* ── Execution list row ──────────────────────────── */
@media (min-width: 600px) {
    .execution-group-card-content-compact {
        min-height: 10.5rem;
    }
}

.execution-group-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.execution-group-card-alert .mud-alert-position {
    width: 100%;
}

.execution-group-card-alert .mud-alert-message {
    flex: 1 1 auto;
    min-width: 0;
}

.execution-group-card-header-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.execution-group-card-header-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.5rem;
    padding: 0 0.55rem;
    margin-left: auto;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.execution-trailing {
    min-width: 40px;
}