html, body {
    font-family: 'Roboto', sans-serif;
}

#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 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI4Ny4zNzUgNzMuMDM0NUMyODguMTU4IDczLjgyNjkgMjg4LjY0MSA3NC45MjMxIDI4OC42NDEgNzYuMTMzOEwyODguNjQxIDEwMEMyODguNjQxIDEwMi4yMSAyODYuODUxIDEwNCAyODQuNjQxIDEwNEwyNTEuNSAxMDRDMjQ5LjI5MSAxMDQgMjQ3LjUgMTAyLjIxIDI0Ny41IDEwMEwyNDcuNSA1765NdCMjQ3LjUgNTMuNzkwOSAyNDkuMjkxIDUyIDI1MS41IDUyTDI2My41MDYgNTJaIiBmaWxsPSIjRkYwMDAwIi8+PHBhdGggZD0iTTI2OC43NCA2My41ODM4QzI2OC4xMzUgNjIuMzA1NSAyNjYuMjI2IDYyLjMwNTUgMjY1LjYyMSA2My41ODM4TDI2MS4wNjYgNzIuNzEwNEMyNjAuNjI3IDczLjU2MDIgMjYxLjI1MyA3NC41Njg1IDI2Mi4yNTMgNzQuNTY4NUwyNzEuOTc5IDc0LjU2ODVDMjcyLjk3OSA3NC41Njg1IDI3My42MDQgNzMuNTYwMiAyNzMuMTY2IDcyLjcxMDRMMjY4Ljc0IDYzLjU4MzhaIi8+PHBhdGggZD0iTTI1NS44MjggODkuMDEyQzI1NS44MjggODkuNTcyOCAyNTUuMzc0IDkwLjAyNjQgMjU0LjgxMyA5MC4wMjY0TDI0OC41NzggOTAuMDI2NEMyNDguMDE3IDkwLjAyNjQgMjQ3LjU2MyA4OS41NzI4IDI0Ny41NjMgODkuMDEyTDI0Ny41NjMgODUuNDc1NkMyNDcuNTYzIDg0LjkxNDggMjQ4LjAxNyA4NC40NjEyIDI0OC41NzggODQuNDYxMkwyNTQuODEzIDg0LjQ2MTJDMjU1LjM3NCA4NC40NjEyIDI1NS44MjggODQuOTE0OCAyNTUuODI4IDg1LjQ3NTZMMjU1LjgyOCA4OS4wMTJaIiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Custom Styles */
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    opacity: 0.9;
}

/* Card hover effect */
.mud-card.cursor-pointer:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Loading spinner center */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}


/* Chip improvements */
.mud-chip {
    font-weight: 500;
}

/* Dialog improvements */
.mud-dialog {
    max-height: 90vh;
    overflow-y: auto;
}

/* Small date picker */
.small-picker .mud-input-control input {
    font-size: 0.8rem !important;
}

.small-picker .mud-input-label {
    font-size: 0.75rem !important;
}

/* Compact searchable filter autocompletes (org / business-unit filters on
   Tenants, Projects, Agreements). The MudAutocomplete root font-size does not
   reach the inner <input>, so the selected value rendered in the box stayed
   larger than the 0.85rem dropdown items. Match the input to the items. */
.compact-filter .mud-input-control input {
    font-size: 0.85rem !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Dark-mode semantic badge tints.
   These severity/group badges are defined per-component with light pastel
   backgrounds + dark saturated text (a light-mode pattern). CSS can't branch
   on theme inside those <style> blocks, so the dark equivalents are centralised
   here, scoped to the `.sams-dark` root class added by MainLayout in dark mode:
   translucent accent surface + lightened accent text (readable on dark).
   ────────────────────────────────────────────────────────────────────────── */

/* RED — critical */
.sams-dark .tl-priority-critical,
.sams-dark .tl-esc-imp-critical,
.sams-dark .esc-imp-critical,
.sams-dark .esc-impact-critical,
.sams-dark .cust-esc-critical { background: rgba(229,115,115,0.16) !important; color: #f0a3a3 !important; }

/* ORANGE — high / warnings */
.sams-dark .tl-priority-high,
.sams-dark .tl-esc-imp-high,
.sams-dark .esc-imp-high,
.sams-dark .esc-impact-high,
.sams-dark .cust-esc-high,
.sams-dark .bx-warn-badge { background: rgba(245,150,60,0.15) !important; color: #f6b27a !important; }

/* BLUE — medium / service-provider */
.sams-dark .tl-priority-medium,
.sams-dark .fd-pgroup-sp { background: rgba(96,165,250,0.15) !important; color: #93c5fd !important; }

/* GREEN — low */
.sams-dark .tl-priority-low { background: rgba(127,191,134,0.16) !important; color: #a6dcab !important; }

/* INDIGO — normal */
.sams-dark .esc-impact-normal,
.sams-dark .cust-esc-normal { background: rgba(129,140,248,0.15) !important; color: #aab4f5 !important; }

/* AMBER — client group */
.sams-dark .fd-pgroup-client { background: rgba(234,160,74,0.15) !important; color: #f3c489 !important; }

/* NEUTRAL — general group */
.sams-dark .fd-pgroup-general { background: rgba(156,163,175,0.13) !important; color: #c3c9d2 !important; }

/* Cookie consent banner — warm cream in light, soft amber-tinted dark surface in dark */
.sams-dark .cookie-banner { background: rgba(245,200,60,0.10) !important; border-color: rgba(245,200,60,0.38) !important; }

/* §26 — the effort overview drawer is a custom fixed panel at z-index:10000, far above
   MudBlazor's default popover layer (~1200). A popover opened from inside the drawer would
   otherwise render BEHIND it (invisible / cut off). Lift the relevant popovers above the drawer:
   - .teov-popover / .teov-onbehalf-popover : scoped via PopoverClass on controls that support it
     (the on-behalf "select user" MudSelect, the effort-row ⋮ MudMenu).
   - MudDatePicker (MudPicker) has NO PopoverClass in MudBlazor 7.16, so its calendar popover can't
     be scoped by a class we set; target it by its built-in marker (.mud-picker-inline-paper) so the
     effort-entry date calendar (a standard MudDatePicker, like everywhere else) shows in front.
   All raise to 10100 (just above the drawer); other popovers app-wide keep MudBlazor defaults. */
.teov-popover,
.teov-onbehalf-popover { z-index: 10100 !important; }
.mud-popover:has(.mud-picker-inline-paper) { z-index: 10100 !important; }


/* ──────────────────────────────────────────────────────────────────────────
   Mobile responsiveness — Phase 0/1 (app shell).
   Desktop-first layout was forcing Mobile Safari to shrink the whole page to
   fit intrinsically-wide chrome. These rules keep the frame within the phone
   viewport; dense data views (calendar grid, audit matrix) are handled per-page.
   ────────────────────────────────────────────────────────────────────────── */

/* Media never forces horizontal overflow (universally safe). */
img, video, canvas { max-width: 100%; }

@media (max-width: 960px) {
    /* The full product name in the app bar has no room on a phone; the Support
       icon + workspace chip already identify the app. Hide the long title. */
    .sams-appbar-title { display: none !important; }

    /* The user-menu chip carries the full display name ("System Administrator"),
       the widest item in the right-side cluster — on a phone it pushes the chip
       past the viewport edge and gets clipped. Show just the person icon; the
       menu still opens on tap. Drop the icon's trailing margin so the icon-only
       chip stays snug. */
    .sams-user-name { display: none !important; }
    .sams-user-icon { margin-right: 0 !important; }

    /* The Support icon sat beside the (now-hidden) product title as brand dressing;
       with the title gone it's an orphan consuming ~28px the right-side cluster
       needs. The white logo plate already brands the bar — drop it on phones. */
    .sams-appbar-support { display: none !important; }

    /* The white logo plate reserves the full 240px drawer width via an inline
       style; on a phone the drawer is an overlay, so shrink the plate to just
       the small logo instead of pushing the whole bar off-screen. */
    .logo-area { width: 56px !important; }

    /* Trim the main content gutter so page bodies get more usable width. */
    .mud-main-content .mud-container { padding-left: 12px; padding-right: 12px; }
}