html, body, #app {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mud-typography-subtitle1-weight: 600;
}

/* Input fields inherit subtitle1's 600 weight — reset to normal for actual inputs */
.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    font-weight: 400;
}

/* Search fields with start adornment: add a small gap between the icon and the placeholder/text */
.mud-input.mud-input-outlined.mud-has-start-adornment > input.mud-input-root,
.mud-input.mud-input-outlined.mud-has-start-adornment > .mud-input-slot.mud-input-root {
    padding-left: 8px;
}

.mud-layout {
    min-height: 100vh;
}

.mud-main-content {
    min-height: 100%;
}

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

/* ── Drawer theming: the light-mode nav drawer is IDNT blue so all buttons/icons/text
   inside must be white. Scoped to .idnt-nav-drawer (added to the MainLayout MudDrawer)
   to avoid spilling into temporary drawers (incident panel, support panel etc.) which
   use the surface background and need normal theme text colors. ── */
.idnt-nav-drawer .mud-button,
.idnt-nav-drawer .mud-icon-button {
    color: #ffffff !important;
}

.idnt-nav-drawer .mud-typography {
    color: #ffffff;
}

/* ── Drawer nav: enforce theme drawer-text on all MudNavMenu items ── */
.idnt-nav-drawer .mud-nav-link,
.idnt-nav-drawer .mud-nav-group-header,
.idnt-nav-drawer .mud-nav-group-title {
    color: var(--mud-palette-drawer-text) !important;
}

.idnt-nav-drawer .mud-nav-link .mud-icon-root,
.idnt-nav-drawer .mud-nav-link .mud-svg-icon {
    color: var(--mud-palette-drawer-icon) !important;
}

.idnt-nav-drawer .mud-nav-link:hover,
.idnt-nav-drawer .mud-nav-group-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.idnt-nav-drawer .mud-nav-link.active,
.idnt-nav-drawer .mud-nav-link[aria-current] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.idnt-nav-drawer .mud-nav-link.active .mud-icon-root,
.idnt-nav-drawer .mud-nav-link[aria-current] .mud-icon-root {
    color: #ffffff !important;
}

/* ── Nav group expand icon: always white in nav drawer ── */
.idnt-nav-drawer .mud-navmenu .mud-nav-link-expand-icon {
    color: #ffffff !important;
}

/* ── Health incident message: explicit colors so temporary drawer surface renders correctly ── */
.incident-message {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.incident-message p {
    margin: 0 0 0.5rem 0;
}

.incident-message p:last-child {
    margin-bottom: 0;
}

.incident-message br + br {
    display: block;
    content: "";
    margin-top: 0.25rem;
}

/* ── Incident drawer service name: the group label (e.g. "Microsoft 365 Copilot Chat")
   sits between the blue drawer header and the white incident cards. In light mode the
   drawer surface inherits from the primary-coloured header context, making dark text
   (mud-text-secondary) hard to read. Use a dedicated class so we can force white only
   in light mode without touching any shared MudBlazor class. ── */
@media (prefers-color-scheme: light) {
    .idnt-incident-service-name {
        color: rgba(255, 255, 255, 0.85) !important;
    }
}

/* ── Incident drawer header: manufacturer name and close icon must be white
   on the theme's blue drawer-header background (same as the nav drawer header). ── */
.idnt-incident-drawer-header .mud-typography {
    color: #ffffff !important;
}

.idnt-incident-drawer-header .mud-icon-button {
    color: #ffffff !important;
}

/* ── Plain-text incident message body: <pre> with inherited font and word-wrap.
   Preserves the source line breaks without breaking layout on long lines. ── */
.incident-message-pre {
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
}

/* ── Utility classes ── */

/* Multi-line text clamp: truncate at 2 lines with ellipsis */
.mud-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Multi-line text clamp: truncate at 3 lines with ellipsis */
.mud-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer !important;
}

.user-menu-activator {
    color: #ffffff !important;
    border-radius: 999px;
    padding: 4px;
}

.user-menu-activator:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.user-menu-panel-content {
    min-width: 280px;
}

.user-menu-profile-row {
    gap: 0.85rem;
}

.user-menu-profile-meta {
    min-width: 0;
}

.user-menu-display-name {
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.user-menu-item {
    min-height: 2.5rem;
}

.user-menu-item-signout {
    color: var(--mud-palette-error) !important;
}

/* ── Floating support widget ── */
.support-widget-anchor {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
}

@media (max-width: 600px) {
    .support-widget-anchor {
        bottom: 0.75rem;
        right: 0.75rem;
    }
}

/* ── Dashboard ── */
.dashboard-hero {
    border-radius: var(--mud-default-borderradius);
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(12, 76, 125, 0.12), rgba(14, 124, 107, 0.08));
}

.dashboard-card {
    height: 100%;
}

.dashboard-kpi {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.dashboard-chart-wrap {
    min-height: 220px;
    align-items: center;
}

/* Legend to the right of the donut: cap size and add scroll for many items */
.dashboard-chart-wrap .mud-chart-legend {
    max-height: 210px;
    overflow-y: auto;
    min-width: 0 !important;
    max-width: 190px;
}

/* Smaller font + ellipsis for long product names */
.dashboard-chart-wrap .mud-chart-legend-text {
    font-size: 0.7rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
    display: block !important;
}

.dashboard-chart-wrap .mud-chart-legend-item {
    margin: 1px 4px !important;
}

.dashboard-chart-header {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.dashboard-manufacturer-select {
    min-width: 220px;
}

.dashboard-empty-state {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

/* ── Product detail ── */
.product-detail-hero {
    align-items: stretch;
}

.product-detail-media {
    min-height: 215px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
}

.product-option-card {
    height: 100%;
    background: var(--mud-palette-surface);
}

/* ── Catalog cards ── */
/* Image area uses the full card width with a consistent height */
.catalog-card-media {
    width: 100%;
    height: 160px;
    position: relative;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}
.catalog-card-media img,
.catalog-card-media .mud-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.catalog-placeholder-icon {
    font-size: 4.5rem !important;
}

.catalog-favorites-placeholder-icon {
    font-size: 5.5rem !important;
}

.catalog-folder-card .mud-typography {
    text-align: center;
}

.catalog-product-card {
    background: var(--mud-palette-surface);
}

.catalog-product-card .mud-card-content {
    padding-top: 8px;
}

.catalog-product-title {
    min-height: 2.9rem;
}

.catalog-product-description {
    margin-top: 1rem;
    min-height: 2.7rem;
}

.catalog-price-slot {
    min-height: 1.8rem;
}

.catalog-product-footer {
    background: rgba(0, 0, 0, 0.04);
    padding-top: 8px;
    padding-bottom: 8px;
}

:root.dark .catalog-product-footer {
    background: rgba(0, 0, 0, 0.2);
}

.catalog-scroll-sentinel {
    height: 1px;
    width: 100%;
}

.catalog-filter-select {
    min-width: 220px;
}

/* ── Add-on cards ── */
/* Fixed-size thumbnail slot so a failed image swaps to the fallback icon without shifting layout */
.addon-card-thumb {
    width: 72px;
    height: 60px;
    flex-shrink: 0;
}

.addon-card-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.subscription-customer-note-preview {
    white-space: pre-line;
}

/* ── Blazor error UI ── */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.signin-required-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(12, 76, 125, 0.12), transparent 36%),
        radial-gradient(circle at 88% 82%, rgba(14, 124, 107, 0.10), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%);
}

.signin-required-card {
    width: min(34rem, 100%);
    text-align: center;
    border: 1px solid rgba(12, 76, 125, 0.08);
    box-shadow: 0 12px 28px rgba(10, 24, 40, 0.08);
}

.signin-required-button {
    min-width: 10rem;
}

.auth-flow-brand {
    display: flex;
    justify-content: center;
}

.auth-flow-card {
    backdrop-filter: blur(2px);
}

.auth-flow-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
}

.auth-flow-progress {
    width: min(15rem, 100%);
}

.signin-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%);
}

.signin-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 15%, rgba(12, 76, 125, 0.16), transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(14, 124, 107, 0.14), transparent 38%),
        radial-gradient(circle at 50% 100%, rgba(12, 76, 125, 0.08), transparent 45%);
}

.signin-hero-card {
    position: relative;
    width: min(32rem, 100%);
    text-align: center;
    border: 1px solid rgba(12, 76, 125, 0.08);
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(10, 24, 40, 0.10), 0 2px 6px rgba(10, 24, 40, 0.06);
    padding: 2.5rem 2rem;
    backdrop-filter: blur(2px);
    animation: signin-card-in 350ms ease-out both;
}

/* NOTE: .notif-bell-ringing is defined in NotificationMenu.razor's own <style> block (the single
   source of truth — it overrides any rule here via source order since it renders after this
   stylesheet). Do not redefine it here to avoid two conflicting definitions drifting apart. */

@keyframes signin-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .signin-hero-card {
        padding: 2rem 1.25rem;
        border-radius: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .signin-hero-card {
        animation: none;
    }
}

/* ── MudPaper: keep default border-radius at 6px for cards/surfaces,
   while --mud-default-borderradius is 0 for input fields/buttons. ── */
.mud-paper {
    border-radius: 6px;
}

/* ── Health incident section labels (parsed from plain-text messages) ── */
.incident-section-label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

/* ── User Manager (#1 row height, #5 sort always visible, #6 white inputs) ── */

/* #1: Touch-friendly row height — override Dense padding */
.mud-data-grid tr.mud-table-row td.mud-table-cell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 52px;
}

/* Sort direction arrow: MudBlazor 9 uses .sort-direction-icon (opacity:0 by default).
   Make it always visible at 50% so touch users know columns are sortable. Full opacity when active. */
.mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
    opacity: 0.5 !important;
}
.mud-data-grid .mud-table-cell .column-header .sort-direction-icon.mud-direction-asc,
.mud-data-grid .mud-table-cell .column-header .sort-direction-icon.mud-direction-desc {
    opacity: 1 !important;
}

/* #6 / #12 / #13 / #15: Outlined inputs — white surface background in light, dark surface in dark.
   Setting color AND background on the CONTAINER (.mud-input-outlined) means all children that
   use currentColor (input text, textarea, adornment icons, select slot) automatically get the
   correct theme color without needing individual rules.
   IMPORTANT: background must go on the CONTAINER, NOT on .mud-input-outlined-border — that element
   is position:absolute and covers the text when given a background! */
.mud-input.mud-input-outlined {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: var(--mud-default-borderradius);
}
.mud-input.mud-input-filled {
    background-color: rgba(0,0,0,.03) !important;
}
/* Placeholders: disabled color in all themes */
.mud-input.mud-input-outlined input::placeholder,
.mud-input.mud-input-outlined textarea::placeholder {
    color: var(--mud-palette-text-disabled) !important;
    opacity: 1;
}

/* #7: Version string in nav drawer must be white (override mud-secondary-text which wins over mud-typography) */
.idnt-nav-drawer .mud-secondary-text,
.idnt-nav-drawer .app-version {
    color: #ffffff !important;
}

/* ── User Manager v2 fixes ── */

/* #16: Tab panels top padding.
   .mud-tab-panel has display:contents when active — padding on it is ignored by the browser.
   Apply the padding one level up on .mud-tabs-panels instead. */
.mud-tabs.mud-tabs-rounded .mud-tabs-panels {
    padding-top: 24px;
}

/* Mobile user cards */
.icmp-user-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.icmp-user-card:hover {
    box-shadow: var(--mud-elevation-4) !important;
}

/* Roles list: ensure label text uses theme text color in both light and dark themes */
.icmp-roles-list .mud-button-label,
.icmp-roles-list label {
    color: var(--mud-palette-text-primary) !important;
}

/* Groups list: pin text to theme color (MudListItem can inherit wrong color in light mode) */
.icmp-groups-list .mud-typography {
    color: var(--mud-palette-text-primary) !important;
}

/* Email tab: pin text to theme color (chip labels and email addresses can inherit wrong color) */
.icmp-email-tab .mud-chip-text,
.icmp-email-tab .mud-typography {
    color: var(--mud-palette-text-primary);
}

/* Licenses tab: pin checkbox label text to theme color (inherits drawer-text in light mode otherwise) */
.icmp-licenses-tab .mud-checkbox-label,
.icmp-licenses-tab .mud-typography {
    color: var(--mud-palette-text-primary);
}

/* Tab scroll buttons: explicit color so they're visible in light theme */
.mud-tabs-scroll-button {
    color: #1e354e;
}

/* User list table: taller rows for touch friendliness */
.icmp-users-grid .mud-table-row td {
    height: 56px;
}

/* #10: Dialogs full-width on small screens */
@media (max-width: 599px) {
    .mud-dialog-container .mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: unset !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100dvh !important;
    }
}

/* #11: Drawer full-width on small screens (max-width matches MudBlazor xs breakpoint) */
@media (max-width: 599px) {
    .icmp-user-detail-drawer,
    .icmp-user-detail-drawer .mud-drawer-content {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* #12: Sort icon — handled in the sort block above with correct .sort-direction-icon selector */