/* Shared application template. Loaded after component styles so dialog chrome,
   spacing and interaction semantics have one source of truth. Specialist content
   (canvas, previews, timelines) keeps its own layout. */
:root {
    --ui-surface: var(--rz-base-background-color, #fff);
    --ui-muted-surface: var(--rz-body-background-color, #f7f8fc);
    --ui-text: var(--rz-text-color, #0f172a);
    --ui-muted: var(--rz-text-secondary-color, #475569);
    --ui-border: color-mix(in srgb, var(--ui-text) 22%, var(--ui-surface));
    --ui-radius: 12px;
    --ui-space: 1rem;
}
.rz-dialog {
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    border-radius: 16px;
    color: var(--ui-text);
    background: var(--ui-surface);
}
.rz-dialog .rz-dialog-content {
    padding: 1rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.rz-dialog .dialog-header { margin-bottom: 1rem; }
.rz-dialog .dialog-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ui-text); }
.rz-dialog .dialog-copy, .rz-dialog .dialog-muted { color: var(--ui-muted); line-height: 1.5; }
.rz-dialog .dialog-body { min-width: 0; }
.rz-dialog .dialog-card {
    padding: 1rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: none;
}
.rz-dialog .dialog-card-title, .rz-dialog .field-label { color: var(--ui-text); }
.rz-dialog .dialog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0 0;
    margin-top: 1rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.rz-dialog .dialog-footer > .rz-button { min-height: 44px; }
/* Floating chat must not cover a modal's save/cancel actions or receive focus. */
body:has(.rz-dialog) .chat-container { display: none; }
.rz-dialog .dialog-input, .rz-dialog .dialog-textarea { width: 100%; min-width: 0; }
/* Native oninput fields use the same touch target as composite inputs. */
.rz-dialog input.dialog-input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; padding: .5rem .65rem; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.rz-dialog .dialog-grid { min-width: 0; }
.rz-dialog .dialog-field { min-width: 0; }
.rz-dialog :is(.rz-inputtext, .rz-dropdown, .jans-num-picker__input input) { min-height: 44px; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--rz-primary, #2563eb);
    outline-offset: 3px;
}
/* Never hide module destinations to create a single clipped tab strip. */
.rz-body .weather-tab-list, .rz-dialog .weather-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    max-width: 100%;
    overflow: visible;
}
.weather-tab-button { min-height: 44px; }
.rz-dialog .dialog-error { padding: .75rem; border: 1px solid #b91c1c; border-radius: 8px; color: var(--rz-danger, #b91c1c); }
@media (max-width: 767px) {
    .rz-dialog { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
    .rz-dialog .rz-dialog-content { padding: .75rem; }
    .rz-dialog .dialog-card { padding: .75rem; }
    .rz-dialog .dialog-grid { display: flex; flex-direction: column; }
    .rz-dialog .dialog-field { width: 100%; flex-basis: auto; }
    .rz-dialog .dialog-footer > .rz-button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .rz-dialog, .weather-tab-button, .dual-list-selector * { animation: none; transition: none; }
}

/* Shared page, table and selection surfaces follow Radzen's active theme. */
body { background: var(--ui-muted-surface); color: var(--ui-text); }
.rz-body .app-shell { background: var(--ui-muted-surface); color: var(--ui-text); }
.rz-body .app-shell-title, .rz-body .app-shell-subtitle { color: var(--ui-text); }
.jans-table {
    --jans-table-surface: var(--ui-surface);
    --jans-table-surface-muted: var(--ui-muted-surface);
    --jans-table-header-bg: var(--ui-muted-surface);
    --jans-table-border: var(--ui-border);
    --jans-table-border-strong: var(--ui-border);
    --jans-table-text: var(--ui-text);
    --jans-table-muted: var(--ui-muted);
    --jans-table-hover: color-mix(in srgb, var(--ui-surface) 92%, #2563eb);
    --jans-table-context: color-mix(in srgb, var(--ui-surface) 90%, #22c55e);
}
.dual-list-selector {
    --dual-list-surface: var(--ui-surface);
    --dual-list-subtle: var(--ui-muted-surface);
    --dual-list-text: var(--ui-text);
    --dual-list-text-soft: var(--ui-muted);
    --dual-list-border: var(--ui-border);
}
.dual-list-selector .dual-list-search, .dual-list-selector .dual-list-chip {
    background: var(--ui-surface); color: var(--ui-text);
}
.ribbon-control {
    --ribbon-bg: var(--ui-surface);
    --ribbon-border: var(--ui-border);
    --ribbon-border-soft: var(--ui-border);
    --ribbon-text: var(--ui-text);
    --ribbon-muted: var(--ui-muted);
}
.ribbon-control .ribbon-tab-list {
    flex-wrap: wrap; overflow: visible; background: var(--ui-surface);
}
.ribbon-control .ribbon-command-bar { background: var(--ui-surface); }
.ribbon-control .ribbon-tab-button { color: var(--ui-text); min-height: 44px; }
.ribbon-control .ribbon-tab-button.is-active { background: #1d4ed8; color: #fff; }
.ribbon-control .ribbon-command-bar-label { color: var(--ui-text); }
.rz-body .wawi-overview-card, .rz-body .warehouse-page-card {
    background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border);
}
.rz-body .warehouse-page-title, .rz-body .warehouse-page-kpi-value { color: var(--ui-text); }
.rz-body .warehouse-page-subtitle, .rz-body .warehouse-page-kpi-label { color: var(--ui-muted); }

/* One modal shell and one scroll container instead of nested bordered shells. */
.rz-dialog .rz-dialog-content > :where([class$="-dialog"], [class*="-dialog "]) {
    margin: 0 auto; padding: 0; border: 0; box-shadow: none;
    max-height: none; overflow: visible; background: var(--ui-surface);
}
.rz-dialog .rz-tabview-nav {
    display: flex; flex-wrap: wrap; overflow: visible; gap: .35rem;
    background: var(--ui-surface); border: 0;
}
.rz-dialog .rz-tabview-nav > li { margin: 0; border: 0; min-width: 0; }
.rz-dialog .rz-tabview-nav > li > a {
    min-height: 44px; padding: .5rem .75rem; border-radius: 8px;
    background: var(--ui-muted-surface); color: var(--ui-text);
}
.rz-dialog .rz-tabview-nav > li.rz-tabview-selected > a { background: #1d4ed8; color: #fff; border: 0; }
.rz-dialog .rz-tabview-panels { padding: .75rem 0 0; background: var(--ui-surface); }

/* Application action semantics must not inherit Radzen's green-primary/blue-secondary palette. */
.rz-button.rz-primary:not(.rz-state-disabled) { background: #2563eb; color: #fff; border-color: #2563eb; }
.rz-button.rz-primary:not(.rz-state-disabled):hover { background: #1d4ed8; border-color: #1d4ed8; }
.rz-button.rz-secondary:not(.rz-state-disabled) { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); }
.rz-button.rz-secondary:not(.rz-state-disabled):hover { background: var(--ui-muted-surface); }
.rz-button.rz-danger:not(.rz-state-disabled) { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.rz-button.rz-danger:not(.rz-state-disabled):hover { background: #991b1b; border-color: #991b1b; }

/* Ribbon-hosted task overviews use the available content width. */
.overview-page, .overview-page > .dialog-card, .rule-execution-overview { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; }
.overview-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); gap: .75rem; padding: .75rem; margin-bottom: 1rem; background: var(--rz-base-100, #f8fafc); border-radius: 10px; }
.overview-filters > div { display: flex; flex-direction: column; min-width: 0; gap: .3rem; }
.overview-help { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
.overview-help [role="note"] { padding: .5rem; cursor: help; }
@media (max-width: 600px) { .overview-filters { grid-template-columns: 1fr; } }

.chat-privacy-notice { font-size: .8rem; line-height: 1.5; color: var(--rz-text-secondary-color, #475569); padding: .5rem .75rem; margin: 0; }
.overview-filter-groups { display: grid; gap: .75rem; margin-bottom: .75rem; }
.overview-filter-groups legend { font-weight: 600; padding-inline: .4rem; }

.overview-page .connected-form { padding: .85rem; margin-bottom: 1rem; background: var(--rz-base-background-color, #fff); border: 1px solid var(--rz-base-300, #e2e8f0); border-radius: 10px; }
.overview-page .connected-form > .connected-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: .75rem; }
.overview-page .connected-field, .rule-execution-overview .connected-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; min-width: 0; }
.overview-page .connected-field :is(.rz-dropdown, .rz-datepicker), .rule-execution-overview .rz-datepicker { width: 100%; }
@media (max-width: 600px) { .overview-page .connected-form > .connected-row { grid-template-columns: 1fr; } }

/* Shared content surface for overview pages hosted by a module ribbon. */
.module-overview { width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.module-overview-heading { margin: 0 0 1rem; }
.module-overview-heading h2 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.module-overview-heading p { margin: 0; color: var(--ui-text-muted, #475569); line-height: 1.55; }
.module-overview .rule-execution-overview,
.module-overview .operational-problems-overview { padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.module-overview .overview-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-overview .overview-filters .rz-datepicker { width: 100%; }
.module-overview [hidden] { display: none !important; }
@media (max-width: 600px) { .module-overview .overview-filters { grid-template-columns: 1fr; } }

/* Hosted planning workspaces align with their single parent ribbon. */
.ribbon-workspace,
.ribbon-workspace > div,
.ribbon-workspace .ai-page-layout {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Remove repeated page/card gutters only in the integrated planning workspaces. */
.ribbon-workspace :is(.employee-overview-page, .tasklists-page, .checklists-page,
    .worktime-backfill-page, .vacation-overview-page, .usergroup-overview-page,
    .facility-products-page, .task-completion-report-page),
.planning-workspaces :is(.shifts-page, .events-page, .teams-page) {
    padding: 0;
    background: transparent;
}
.ribbon-workspace :is(.employee-card, .tasklists-card, .checklists-card, .tasks-card,
    .worktime-card, .vacation-card, .usergroup-card, .facility-products-card,
    .task-completion-report-card),
.planning-workspaces :is(.shifts-card, .events-card, .teams-card) {
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Grant source fingerprints remain fully readable without widening the dialog. */
.grant-dialog-body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.grant-dialog-body .grant-source-revision {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Wide grant columns scroll only within their existing table container. */
.grant-dialog-body .jans-table {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}