/* 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-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: 700;
    font-size: 1rem;
    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: 700;
    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: 700;
    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: 600;
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
}

.dok-settings-item__desc {
    font-size: 0.75rem;
    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: 600;
    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: 700;
    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__avatar {
    background: #1c66d6;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.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__avatar {
    background: #1c66d6;
    color: #ffffff;
    font-weight: 700;
}

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

.dok-user-dropdown__name {
    font-weight: 700;
    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: 600;
    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: 700;
    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: 600;
    font-size: 0.88rem;
    color: var(--mud-palette-text-primary);
}

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

.dok-user-item--active .dok-user-item__text {
    font-weight: 700;
}

.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: 700;
}

.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: 600;
    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: 600;
    text-decoration: none;
}

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