/* DOK-290 — app shell top bar (PlaygroundLayout).
   Global on purpose: these classes style MudBlazor component roots (MudAppBar,
   MudIconButton) and popovers (rendered under MudPopoverProvider), which never
   receive Blazor scoped-CSS attributes — rules for them in
   PlaygroundLayout.razor.css silently don't apply.
   DOK-300 — white shell bar + Docker-style apps menu, Atlassian-style settings
   menu and the user menu with the appearance selector. */

/* DOK-364 — the height of the fixed bottom areas bar the shell shows below 720px.
   It lives here, globally, because two other stylesheets have to clear it: the shared
   cadastro footer (dok-cadastro.css) and the dossier footer (CaseDetailPage). Both used to
   sit at bottom:0 with the same z-index as the bar, and since the bar comes later in the
   DOM it won the tie and painted over the Submit button. Neither file knew the bar existed,
   because 60px was a number only PlaygroundLayout.razor.css had. It is a variable now so
   that stops being possible. */
:root {
    --dok-mobile-areas-height: 60px;
}

/* DOK-1657 — the content clears the optional areas bar, fixed under the 72px top bar and 48px tall. The class sits on
   MudMainContent's root, which never receives the scope attribute: written in PlaygroundLayout.razor.css the rule
   applied to nothing, and the top 40px of every page sat under the bar. Below 720px the bar is hidden and the content
   goes back to clearing the top bar alone. */
.dok-has-areas-bar {
    padding-top: 120px !important;
}

@media (max-width: 720px) {
    .dok-has-areas-bar {
        padding-top: 80px !important;
    }
}

.dok-app-header {
    height: 72px;
    min-height: 72px;
    padding: 0 28px;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dok-app-header__leading {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.dok-app-header__page-name {
    margin-left: 10px;
    font-weight: var(--dok-font-weight-bold);
    font-size: var(--dok-font-size-base);
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dok-app-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.dok-app-header__icon-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    color: var(--mud-palette-text-secondary) !important;
    border: none !important;
    background: transparent !important;
}

.dok-app-header__icon-button:hover {
    background-color: rgba(32, 196, 184, 0.12) !important;
    color: #159a90 !important;
}

/* DOK-300 — the areas launcher keeps the brand navy as the single accent on the white bar. */
.dok-app-header__icon-button--primary {
    background: linear-gradient(180deg, #17355a, #14304f) !important;
    border-color: #14304f !important;
    color: #e8eef5 !important;
}

.dok-app-header__icon-button--primary:hover {
    background: #1d4370 !important;
    border-color: #1d4370 !important;
    color: #ffffff !important;
}

.dok-app-header__notification {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.dok-app-header__notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    border: 2px solid var(--mud-palette-surface);
    font-size: 10px;
    font-weight: var(--dok-font-weight-bold);
    line-height: 1;
    pointer-events: none;
}

/* ---- DOK-300: apps menu (Docker-Desktop style) --------------------------------------------- */

.dok-apps-popover {
    min-width: 320px;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.dok-apps-popover .mud-list {
    padding: 6px;
}

.dok-apps-item {
    border-radius: 10px;
}

.dok-apps-item__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px;
}

.dok-apps-item__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(23, 53, 90, 0.08);
    color: #17355a;
}

.dok-apps-item__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-apps-item__title {
    font-weight: var(--dok-font-weight-bold);
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.dok-apps-item__desc {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- DOK-300: settings menu (Atlassian style) ---------------------------------------------- */

.dok-settings-popover {
    min-width: 320px;
    max-height: min(78vh, 720px);
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.dok-settings-popover .mud-list {
    padding: 6px;
}

.dok-settings-section-label {
    padding: 10px 14px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.dok-settings-item {
    border-radius: 10px;
}

.dok-settings-item .mud-menu-item-icon {
    align-self: flex-start;
    margin-top: 2px;
}

.dok-settings-item__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-settings-item__text {
    font-weight: var(--dok-font-weight-semibold);
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
}

.dok-settings-item__desc {
    font-size: var(--dok-font-size-xs);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- DOK-244: notification preview popover -------------------------------------------------
   Global rather than scoped, and that is not a style preference: MudBlazor renders a popover into
   its own container outside this component's DOM, so a .razor.css rule never reaches it. Colours
   come from the Mud palette variables so the popover follows the tenant theme and dark mode
   without a second set of declarations. */

.dok-notification-popover {
    min-width: 340px;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.dok-notification-popover .mud-list {
    padding: 6px;
}

.dok-notification-menu__state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.dok-notification-item {
    border-radius: 10px;
}

.dok-notification-item__content {
    display: flex;
    gap: 10px;
    min-width: 0;
}

.dok-notification-item__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.dok-notification-item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dok-notification-item__title {
    font-weight: var(--dok-font-weight-semibold);
    font-size: 0.86rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dok-notification-item__time {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

.dok-notification-item--all {
    justify-content: center;
}

.dok-notification-item__all {
    font-weight: var(--dok-font-weight-bold);
    font-size: 0.82rem;
    color: var(--mud-palette-primary);
}

/* ---- DOK-300: user menu (appearance selector lives here) ----------------------------------- */

.dok-user-popover {
    min-width: 300px;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.dok-user-trigger {
    min-width: 0 !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
}

.dok-user-trigger__arrow {
    margin-left: 2px;
    color: var(--mud-palette-text-secondary);
}

.dok-user-dropdown {
    min-width: 300px;
}

.dok-user-dropdown__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.dok-user-dropdown__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-user-dropdown__name {
    font-weight: var(--dok-font-weight-bold);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.dok-user-dropdown__meta {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dok-user-dropdown__meta--muted {
    font-size: 0.72rem;
    opacity: 0.85;
}

.dok-user-dropdown__section {
    padding: 6px;
}

.dok-user-dropdown__section-label {
    padding: 8px 10px 6px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dok-user-appearance {
    display: flex;
    gap: 0;
    margin: 0 10px 8px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background);
}

.dok-user-appearance__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0 !important;
    padding: 7px 10px !important;
    border: 0;
    border-radius: 8px !important;
    background: transparent;
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.82rem;
    font-weight: var(--dok-font-weight-semibold);
    text-transform: none;
    cursor: pointer;
}

.dok-user-appearance__option:hover {
    color: var(--mud-palette-text-primary);
}

.dok-user-appearance__option--active {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: var(--dok-font-weight-bold);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.dok-user-item {
    border-radius: 10px;
}

.dok-user-item__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-user-item__text {
    font-weight: var(--dok-font-weight-semibold);
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
}

.dok-user-item__desc {
    font-size: var(--dok-font-size-xs);
    color: var(--mud-palette-text-secondary);
}

.dok-user-item--danger .mud-menu-item-icon,
.dok-user-item--danger {
    color: var(--mud-palette-error) !important;
}

@media (max-width: 960px) {
    .dok-app-header {
        padding: 0 16px;
    }

}

@media (max-width: 720px) {
    .dok-app-header {
        height: auto;
        min-height: 72px;
        padding: 10px 14px;
    }

    .dok-app-header__leading {
        margin-right: 8px;
    }

    .dok-app-header__page-name {
        margin-left: 6px;
        font-size: 0.9rem;
    }

    .dok-app-header__actions {
        gap: 6px;
    }

    .dok-app-header__icon-button {
        width: 38px !important;
        height: 38px !important;
    }

}

/* DOK-348 — attachment preview dialog chrome. Global on purpose: the Class parameter lands on
   MudBlazor's .mud-dialog root inside MudDialogProvider, which scoped .razor.css can never reach
   (see the repo's MudBlazor scoped-CSS gotcha). Radius stays the dok-theme.css default. */
.dok-file-preview-dialog .mud-dialog-content {
    padding-top: 0.25rem;
}

/* DOK-834 — the page-level error panel (DokErrorBoundary).
   Global, and deliberately built from nothing: this panel is what renders when the page inside it has
   already failed, and it sits OUTSIDE PlaygroundLayout, so it has no MudBlazor providers and no shell
   around it. Every value here is either a literal or a --mud-palette-* variable that MudThemeProvider
   writes onto :root, so the panel survives a failure in anything of ours. */
.dok-error-boundary {
    max-width: 720px;
    margin: 8vh auto 0;
    padding: 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dok-error-boundary__title {
    margin: 0 0 12px;
    font-size: 1.35rem;
    font-weight: var(--dok-font-weight-bold);
}

.dok-error-boundary__body {
    margin: 0 0 20px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
}

/* Development only; see the component. Scrolls inside itself so a long stack never widens the page. */
.dok-error-boundary__details {
    max-height: 320px;
    margin: 0 0 20px;
    padding: 12px;
    overflow: auto;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.dok-error-boundary__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.dok-error-boundary__button {
    padding: 9px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    font-weight: var(--dok-font-weight-semibold);
    cursor: pointer;
}

.dok-error-boundary__button:hover {
    filter: brightness(1.08);
}

.dok-error-boundary__link {
    color: var(--mud-palette-text-secondary);
    text-decoration: underline;
}

/* ===== Accessibility utilities (DOK-341) ===================================
   Two rules the whole app leans on, both token-only (D3): no literal colour
   appears below, and neither is allowed to. */

/* Text that exists for a screen reader and for nothing else. Clipped rather
   than display:none or visibility:hidden — both of those remove the node from
   the accessibility tree, which is the one place it needs to be. */
.dok-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The first focusable thing on every page. Off-screen until it is focused, so
   it costs a mouse user nothing and saves a keyboard user the top bar and the
   areas bar on every single navigation. */
.dok-skip-link {
    position: absolute;
    top: var(--dok-space-2, 0.5rem);
    left: var(--dok-space-2, 0.5rem);
    z-index: 2000;
    transform: translateY(-200%);
    padding: var(--dok-space-2, 0.5rem) var(--dok-space-4, 1rem);
    border-radius: var(--dok-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--dok-shadow-md);
    font-weight: var(--dok-font-weight-semibold);
    text-decoration: none;
}

.dok-skip-link:focus,
.dok-skip-link:focus-visible {
    transform: translateY(0);
}

/* DOK-962 — the page title stops wearing a black box after every navigation.

   Routes.razor carries Blazor's <FocusOnNavigate Selector="h1" />, which gives the heading tabindex="-1"
   and focuses it on each navigation so a screen reader announces the new page. That is worth keeping. What
   is not worth keeping is its side effect for everyone else: Chrome draws its default focus ring on the
   focused heading, so a reader who arrived by clicking a link sees a black rectangle around "Dashboard" or
   "Genius" until they click something. It is also what put a focus ring into the marketing screenshots.

   :not(:focus-visible) is the whole point — the ring survives for anyone navigating by keyboard, who is
   the person it exists for. Removing the outline outright, or dropping FocusOnNavigate, would each fix the
   picture by taking something from the people who depend on it. */
.dok-premium-app h1:focus:not(:focus-visible) {
    outline: none;
}

/* DGI-25 — the language selector, shaped like the site's lang-picker.

   The row inside the user menu: flag, the language in its own name, and a caret that says there is
   more behind it. The first attempt passed Icon to the nested MudMenu, which made MudBlazor render
   its icon-button activator and drop the label entirely — a row with a globe and no words. */
.dok-user-item--language {
    width: 100%;
}

.dok-language-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.dok-language-trigger:hover {
    background-color: rgba(32, 196, 184, 0.12);
}

.dok-language-trigger__label {
    flex: 1 1 auto;
    font-size: 0.9rem;
    font-weight: var(--dok-font-weight-medium);
}

.dok-language-trigger__caret {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

/* Sized here rather than on the component so both surfaces can differ: the site's header is tighter
   than a dropdown row. The rounded corner is the site's own. */
.dok-language-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .10);
}

.dok-language-popover {
    min-width: 232px;
}

.dok-language-menu__label {
    padding: 10px 16px 6px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dok-language-option__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Two lines, like the site: the language in its own name, the country under it. The country is what
   makes "English" answerable when there is more than one of it. */
.dok-language-option__labels {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1 1 auto;
}

.dok-language-option__language {
    font-size: 0.9rem;
    font-weight: var(--dok-font-weight-semibold);
}

.dok-language-option__country {
    font-size: var(--dok-font-size-xs);
    color: var(--mud-palette-text-secondary);
}

.dok-language-option.is-current {
    background-color: rgba(37, 99, 235, .06);
}

.dok-language-option__check {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

/* DOK-955 — the language selector on a phone.
   The user dropdown is min-width 300px, so on a 375px screen a submenu opening beside it has
   almost nowhere to go. Three constraints keep it on screen rather than trusting the popover's
   own flip logic to find room that is not there.

   NOT VERIFIED ON A DEVICE. bUnit loads no CSS and the App cannot run locally without its API and
   database, so this is reasoned from the widths, not seen. If it still crowds on a real phone, the
   fallback is the site's own answer — render the options in flow inside the menu below this
   breakpoint instead of in a submenu — and that is a structural change, not more CSS. */
@media (max-width: 720px) {
    .dok-user-dropdown {
        min-width: 0;
        max-width: calc(100vw - 24px);
    }

    .dok-language-popover {
        min-width: 0;
        max-width: calc(100vw - 32px);
    }

    /* The country is the first thing that may be cut: the language name is what identifies the
       option, and "United Kingdom" wrapping to two lines is worse than it ending in an ellipsis. */
    .dok-language-option__country {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dok-language-trigger {
        gap: 8px;
        padding: 8px 6px;
    }
}

/* ==========================================================================================================
   DOK-1112 — A SWITCH STOPS CLAIMING THE WHOLE ROW.

   MudBlazor gives every .mud-input-control width: 100%, which is right for the thing that rule was written
   for — a text field in a form column. A checkbox, a switch or a radio is also a .mud-input-control, and for
   those 100% is never what anyone wants: put one in a flex row beside its own explanation and the wrapper
   takes the whole line, leaving the words squeezed into whatever is left.

   Measured on DEV before this rule: the Genius step's "Revisão de Qualidade" toggle was 722px of a 722px
   row and its description had 108px, which wrapped it to one word per line for eight lines. The owner's
   report was "o layout do texto poderia ser muito mais largo". After: the switch is 58px and the text 636px.

   Global rather than per screen because it is a property of the CONTROL, not of any one layout, and because
   the same defect had already been found three times in three different screens. A boolean input that wants
   to fill its line still can — it is the parent's business to stretch it, which is what a grid cell or a
   flex child with flex-grow does.

   NO RENDER TEST CAN SEE THIS. bUnit loads no stylesheet, so a box measured at zero (or at 722) is a box it
   never measures; the guard is a stylesheet test, and DEV is where it was found and confirmed.

   DOK-1115 — `flex: 0 0 auto` IS THE OTHER HALF, and without it the rule above does nothing here.
   MudBlazor's base rule is not only `width: 100%`: it is `flex: 1 1 auto` as well, and a flex item with
   flex-grow takes the free space whatever its width says. So "Revisão de Qualidade" was reported again in
   DEV, wrapped to twelve lines in a 110px column, with the release above already in place. The sibling fix
   in DokOrganizationalScopeSection.razor had both halves from the start and did not come back. */
.mud-input-control.mud-input-control-boolean-input {
    width: auto;
    flex: 0 0 auto;
}

/* DOK-1117 — one row of the icon picker: the glyph, then the word the user searched by. */
.dok-icon-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* DOK-1104 — the wrapper DokDatePicker puts around MudDatePicker so that a focusout can be heard.
   It must be invisible to layout: every call site sizes the picker itself (dok-filter-field,
   dok-adv-fields__input, case-dossier-validity__picker) and several of those sit in flex or grid
   containers, where an extra block-level ancestor would take the sizing for itself and leave the picker
   at its intrinsic width. `display: contents` removes the box while keeping the element in the tree, so
   the picker stays the flex item it already was and the event still bubbles through. */
.dok-date-input {
    display: contents;
}