h1:focus {
    outline: none;
}

/* MudBlazor 9.1's MudDatePicker popover paper ships with overflow-x:hidden, which clips
   the rightmost weekday columns whenever the paper sizes itself narrower than the 310px
   calendar grid it wraps. Surfaced in PBI 69's schedule sub-dialog (PickerVariant.Dialog
   inside a modal), but the same clip can affect inline popovers in narrow form contexts.
   Minimal-impact fix: just remove the overflow clip so the paper grows to the natural
   width of its content. No width-force — MudBlazor's own 310px min-width is already
   right; the bug was that the clip prevented that width from showing. Global rule
   because the popover paper renders at the popover-provider level (separate DOM tree
   from any specific picker instance), so scoped-CSS approaches can't reach it. */
.mud-picker-popover-paper {
    overflow-x: visible !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* EasySong custom styles */

.login-card {
    border-radius: 12px !important;
}

.social-login-btn {
    text-transform: none !important;
    font-weight: 500;
    border-color: #ddd !important;
    color: #333 !important;
}

.social-login-btn:hover {
    background-color: #f5f5f5 !important;
}

/* ===== Direct Licensing theme tokens ===== */
:root {
    --dl-side-publishing: #7c3aed;
    --dl-side-master: #2563eb;
}

/* ===== Direct Licensing Styles ===== */

/* Request list item hover state */
.dl-list-item:hover {
    background: var(--mud-palette-action-default-hover) !important;
}

/* Filter dropdown popovers — wider than the input so option text isn't cut off */
.dl-filter-popover {
    min-width: 240px;
}
.dl-filter-popover .mud-list-item-text {
    white-space: normal;
    word-break: break-word;
}

/* Split pane scrollable panels */
.dl-ticket {
    min-height: 0;
}

/* Timeline styling */
.dl-ticket .mud-timeline {
    padding-left: 0;
}

/* Properties and Customer/Milestones sidebars sticky positioning */
@media (min-width: 960px) {
    .dl-ticket .mud-grid > .mud-item:first-child,
    .dl-ticket .mud-grid > .mud-item:last-child {
        position: sticky;
        top: 0;
        align-self: flex-start;
    }
}

/* Compact property-field inputs to match caption-sized labels */
.pf-compact .mud-input-control {
    margin-top: 0 !important;
}
.pf-compact .mud-input,
.pf-compact .mud-select-input {
    font-size: 0.75rem !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.pf-compact .mud-input-slot {
    font-size: 0.75rem !important;
}
.pf-compact .mud-input-slot:has(textarea) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.pf-compact .mud-input-control .mud-input-label {
    display: none;
}

/* Workflow pipeline responsive */
.dl-pipeline {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* PBI 57 — accounting-style currency display. Tabular figures give every digit equal
   width so decimal points line up across stacked values; right-alignment makes amounts
   of different magnitudes ($165.00 vs $4,345.00) align on the decimal. Applied to
   read-only money values and to dashboard fee grid cells. */
.usd-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
}

/* Right-align the numeric text inside financial entry fields so a stacked column of
   inputs reads like a ledger — decimals line up under each other, matching the
   read-only .usd-amount values. Targets the inner <input> of a MudNumericField. */
.usd-field input {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* The trailing "USD" adornment: add a gap so it doesn't butt against the number, and
   match its size to the digits. In the compact PropertyField context (.pf-compact) the
   input text is shrunk to 0.75rem but the adornment is not — bring it down to match so
   "500.00 USD" reads as one consistent unit. */
.usd-field .mud-input-adornment-end {
    margin-left: 0.75em;
    padding-left: 0.25em;
}
.pf-compact .usd-field .mud-input-adornment-end,
.pf-compact .usd-field .mud-input-adornment-end * {
    font-size: 0.75rem;
}

/* PBI 88: visual cue applied to a Missing Fields chip's target anchor when the chip
   is clicked. Distinct from MudBlazor's per-field error styling so the agent's eye is
   drawn to the specific chip target even on a page already showing validation errors.

   Lifecycle is split between CSS and JS:
     - CSS @keyframes field-anchor-pulse runs once (0.6s) on class-add for a quick
       attention "pop" from no-shadow to the steady glow.
     - After the pulse, the steady outline + box-shadow remain (no animation loop)
       until missingFieldsInterop.scrollAndFocus removes the class at HIGHLIGHT_DURATION_MS
       (currently 2.5s). The fade-out is the transition triggered by class removal. */
.field-anchor-highlight {
    outline: 2px solid var(--mud-palette-error, #d32f2f);
    outline-offset: 4px;
    border-radius: 4px;
    box-shadow: 0 0 16px 2px rgba(211, 47, 47, 0.45);
    animation: field-anchor-pulse 0.6s ease-out 1;
    transition: outline-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

@keyframes field-anchor-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.6); }
    100% { box-shadow: 0 0 16px 2px rgba(211, 47, 47, 0.45); }
}

/* PBI 133: make the note add/inline-edit text boxes user-resizable so a long note can be
   dragged open and read in full while editing, instead of being trapped in a fixed scrolling
   window. Shared by the Project Notes boxes (ProjectDetail) and the Requests Add-note box
   (RequestTicketView) via the .resizable-note-field class. MudTextField renders its <textarea>
   in MudBlazor's own markup, so a scoped/::deep rule from the page can't cleanly reach it —
   same reason the picker rule at the top of this file is global. We match the textarea by
   element (not an internal MudBlazor class) so the rule survives MudBlazor markup changes;
   .resizable-note-field is only ever set on note fields, so the descendant textarea is
   unambiguous. resize:vertical adds the drag grip and keeps width under layout control;
   !important overrides MudBlazor's base textarea resize:none. The component's Lines= sets the
   starting height (AC: compact default when empty); min-height is a fixed ~3-line drag-shrink
   floor (independent of Lines) so the box can't be collapsed to a sliver. */
.resizable-note-field textarea {
    resize: vertical !important;
    min-height: 64px !important;
}