/* ── CSS Custom Properties ─────────────────────────── */

:root {
    --shell-appbar-height: 64px;
    --shell-rail-width: 56px;
    --shell-footer-height: 40px;
    --shell-drawer-content-offset: 50px;
    --shell-appbar-title-offset: 38px;
    --shell-actions-column-width: 60px;
    --shell-chip-field-min-height: 40px;
    --audit-diff-removed-bg: #D32F2F;
    --audit-diff-added-bg: #2E7D32;
    --audit-diff-changed-color: #FFFFFF;
    --shell-notification-popover-offset: -12px;
    --shell-notification-panel-width: 350px;
    --shell-notification-panel-max-height: 450px;
    --shell-notification-tab-padding: 6px 16px;
    --shell-notification-empty-height: 320px;
    --shell-notification-title-max-width: 400px;
    --shell-drawer-background: var(--mud-palette-drawer-background);
    --shell-rail-background: #e9eef6;
}

/* ── Popover (must sit above the app bar) ────────────── */

.mud-popover-provider {
    z-index: 1700;
}

/* ── Dialog (must sit above popovers) ───────────────── */

.mud-overlay-scrim,
.mud-dialog-container {
    z-index: 1800;
}

/* ── App bar ─────────────────────────────────────────── */

.starter-appbar {
    margin-left: 0;
    z-index: 1600;
}

    .starter-appbar .mud-toolbar-gutters {
        padding-left: 16px;
        min-height: var(--shell-appbar-height);
    }

    .starter-appbar .mud-icon-button .mud-icon-root {
        color: var(--mud-palette-text-secondary);
    }

@media (max-width: 600px) {
    .starter-appbar .mud-toolbar-gutters {
        padding-left: 4px;
        padding-right: 4px;
    }

    .starter-appbar .mud-icon-button-edge-start {
        margin-left: 0;
    }
}

/* ── App bar title (under logo) ─────────────────────── */

.starter-appbar-title {
    color: var(--mud-palette-secondary);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    right: var(--shell-appbar-title-offset);
}

/* ── App bar user menu ──────────────────────────────── */

.starter-user-menu {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.starter-user-menu-anchor {
    position: relative;
}

.starter-user-menu-body {
    min-width: 240px;
}

/* ── Notification popover ────────────────────────────── */

.starter-notification-popover {
    transform: translateX(var(--shell-notification-popover-offset));
}

.starter-notification-panel {
    width: var(--shell-notification-panel-width);
    max-height: var(--shell-notification-panel-max-height);
    overflow-y: auto;
    overflow-x: hidden;
}

.starter-notification-header-title {
    font-weight: 600;
}

.starter-notification-empty,
.starter-notification-list {
    height: var(--shell-notification-empty-height);
}

.starter-notification-list {
    overflow-y: auto;
    padding: 0;
}

.starter-notification-item-body {
    flex: 1;
    min-width: 0;
}

.starter-notification-read-icon {
    margin-left: auto;
    margin-top: 2px;
    flex-shrink: 0;
}

.starter-notification-panel .notification-read-title {
    font-weight: 400;
}

.starter-notification-panel .notification-unread {
    font-weight: 600;
    color: inherit;
}

.notification-badge {
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    transform: translate(-10%, 20%);
}

.break-word {
    word-break: break-word;
}

.select-all-link {
    cursor: pointer;
    padding: 4px 2px;
}

/* MudBlazor overrides — scoped to notification panel */

.starter-notification-panel .mud-tabs {
    min-height: unset;
}

    .starter-notification-panel .mud-tabs .mud-tab {
        min-width: 0 !important;
        flex: 1 1 0% !important;
        padding: var(--shell-notification-tab-padding);
        text-transform: none;
    }

    .starter-notification-panel .mud-tabs .mud-tab-active {
        font-weight: 700;
        color: var(--mud-palette-text-primary) !important;
    }

    .starter-notification-panel .mud-tabs .mud-tabs-scroll-btn {
        display: none !important;
    }

    .starter-notification-panel .mud-tabs .mud-tabs-tabbar,
    .starter-notification-panel .mud-tabs .mud-tabs-tabbar-inner {
        width: 100% !important;
        display: flex !important;
        overflow: visible !important;
    }

/* ── Notifications admin grid ────────────────────────── */

.notification-title-truncate,
.notification-title-tooltip {
    max-width: var(--shell-notification-title-max-width);
}

.notification-title-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Rail ────────────────────────────────────────────── */

.starter-rail {
    position: fixed;
    top: var(--shell-appbar-height);
    left: 0;
    bottom: 0;
    width: var(--shell-rail-width);
    background: var(--shell-rail-background);
    z-index: 1500;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.starter-rail--dark {
    background: var(--mud-palette-appbar-background);
}

.starter-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--shell-rail-width);
    padding: 12px 0;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    border: none;
    background: none;
}

    .starter-rail-item:hover,
    .starter-rail-item:focus-visible {
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-action-default-hover);
    }

.starter-rail-item--active {
    color: var(--mud-palette-secondary);
    background: var(--shell-drawer-background);
    border-left: 3px solid var(--mud-palette-secondary);
}

.starter-rail-label {
    font-size: 0.7rem;
    line-height: 1;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52px;
    text-align: center;
}

.starter-rail-bottom {
    margin-top: auto;
    padding-bottom: 8px;
}

/* ── Drawer ──────────────────────────────────────────── */

.starter-drawer {
    top: var(--shell-appbar-height) !important;
    height: calc(100vh - var(--shell-appbar-height)) !important;
}

    .starter-drawer .mud-drawer-content {
        padding-left: var(--shell-drawer-content-offset);
        overflow-x: hidden;
        background-color: var(--shell-drawer-background);
    }

    .starter-drawer .mud-nav-link-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5;
        display: block;
        padding-bottom: 2px;
    }

/* ── Main content ────────────────────────────────────── */

.mud-main-content {
    overflow-y: auto;
    max-height: calc(100vh - var(--shell-appbar-height));
}

.starter-content {
    padding-top: 14px;
    padding-bottom: var(--shell-footer-height);
}

/* ── Tables (actions column) ─────────────────────────── */

.starter-actions-header,
.starter-actions-cell {
    width: var(--shell-actions-column-width);
    text-align: center;
}

/* Apply to <MudDataGrid Class="starter-header-nowrap"> to keep all column headers on a single line. */
.starter-header-nowrap .mud-table-head th {
    white-space: nowrap;
}

/* Apply to <MudDataGrid Class="starter-header-bold"> to render all column headers in bold. */
.starter-header-bold .mud-table-head th,
.starter-header-bold .mud-table-head th * {
    font-weight: bold !important;
}

/* ── Forms (chip multi-select fields) ────────────────── */

.starter-chip-field {
    min-height: var(--shell-chip-field-min-height);
}

/* ── Status page ─────────────────────────────────────── */

.starter-break-all {
    word-break: break-all;
}

/* ── Error page ──────────────────────────────────────── */

.starter-error-page {
    min-height: 100vh;
}

/* ── Scratch Pad panel ───────────────────────────────── */

.starter-scratch-pad-panel {
    min-width: 400px;
    max-width: var(--shell-scratch-pad-panel-max-width, 400px);
    overflow: hidden;
}

textarea.starter-scratch-pad-field {
    width: 100%;
    min-width: 100%;
    min-height: 180px;
    resize: both;
    overflow-y: auto;
    padding: 8px;
    box-sizing: border-box;
    font-family: var(--mud-typography-default-family, 'Roboto', sans-serif);
    font-size: var(--mud-typography-body2-size, 0.875rem);
    /* line-height intentionally overrides body2 (1.43) for textarea readability. */
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
    max-height: calc(100vh - var(--shell-appbar-height) - var(--shell-footer-height) - 60px);
    max-width: 100%;
}

/* ── Footer ──────────────────────────────────────────── */

.starter-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 8px 16px;
    height: var(--shell-footer-height);
}

.starter-footer-text {
    color: var(--mud-palette-text-secondary);
}

/* ── Term acknowledgement dialog ─────────────────────── */
.starter-term-acknowledgement-content {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

/* ── Pre-boot loading throbber ───────────────────────────
   Static gray track + secondary-green outer arc (spinning) +
   4 Catalis chevrons pulsing in an upward wave.
   Renders before Blazor mounts, so --mud-palette-* vars are not
   defined yet — fallbacks must match StarterTheme.Default values. */

.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    z-index: 9999;
}

.app-loading-spinner {
    width: 72px;
    height: 72px;
}

.app-loading-spinner-track,
.app-loading-spinner-arc {
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
}

.app-loading-spinner-track {
    stroke: rgba(0, 0, 0, 0.08);
}

.app-loading-spinner-arc {
    stroke: var(--mud-palette-secondary, #18795A);
    stroke-dasharray: 90 200;
    transform-box: fill-box;
    transform-origin: center;
    animation: app-loading-spin 1.4s linear infinite;
}

.app-loading-chevron {
    fill: none;
    stroke: var(--mud-palette-secondary, #18795A);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: app-loading-chevron-pulse 1.4s ease-in-out infinite;
}

.app-loading-chevron-1 { animation-delay: 0.45s; }
.app-loading-chevron-2 { animation-delay: 0.30s; }
.app-loading-chevron-3 { animation-delay: 0.15s; }
.app-loading-chevron-4 { animation-delay: 0s; }

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

@keyframes app-loading-chevron-pulse {
    0%, 100% { opacity: 0.2; }
    50%     { opacity: 1; }
}

.cursor-pointer {
    cursor: pointer;
}

/* Editable data-grid cells: keep empty cells tall enough to stay a click target.
   Width and cursor come from utilities (mud-width-full + cursor-pointer); only
   min-height has no MudBlazor utility equivalent. */
.starter-edit-cell {
    min-height: var(--shell-cell-min-height, 24px);
}

/* ── Contrast fixes for primary color ────────────────────────────────── */

.mud-tab.mud-tab-active, .mud-stepper .mud-button-root {
    color: var(--mud-palette-text-primary) !important;
}