/* Layout shell — MainLayout's app-shell/app-main wrapper, the sticky NotificationBanner, and shared field-validation error styling. Applies to every page. */

/* --- Dashboard layout (MainLayout / NavMenu / Dashboard) ---
   Structural layout only — visual styling (color, radius, spacing scale) comes from the
   ThemeBuilder swatch later. This lives in the global stylesheet, not scoped *.razor.css files:
   Blazor's CSS isolation stamps its scope attribute only onto raw HTML elements a component writes
   directly; MainLayout/NavMenu/Dashboard are built entirely from Telerik components (per "no HTML"),
   so there is no element for a scoped stylesheet to attach to and ::deep rules silently never match. */

.lh-app-shell {
    height: 100vh;
    width: 100%;
}

/* The single default gutter around every page's content. This lives here — on the shared wrapper
   around @Body in MainLayout — rather than as right-padding on NavMenu, so it applies to every current
   and future page automatically without each page needing its own copy (Dashboard used to hand-roll
   this itself via .lh-dashboard; see that rule). A page can still override with its own padding if it
   ever needs something other than the default (e.g. a page that wants edge-to-edge content). */
/* App-surface (not plain white) so cards — which render at --kendo-color-surface-alt, pure white, via
   Kendo's own .k-card rule — read as elevated above the page canvas instead of blending flat into it
   (client feedback, comparing against Figma: the two tokens are only a hair apart, #fafbfd vs #ffffff,
   but that's deliberate — a subtle pop, not a visibly gray page). Shared wrapper, so this is every
   page's background, not just the vessel file page's — same single-point-of-control reasoning as the
   padding above. */
.lh-app-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    padding: var(--kendo-spacing-8) var(--kendo-spacing-10);
    box-sizing: border-box;
    background-color: var(--kendo-color-app-surface);
}

/* NotificationBanner.razor (Components/Shared) — sticks to the top of .lh-app-main (the scrolling
   container above, not the viewport) instead of scrolling away with the rest of the page's content.
   z-index only needs to clear ordinary page content (cards, grids, ...); Kendo's own overlays/dialogs
   (busy spinner, confirm dialogs, ...) use far higher values and correctly still cover it. */
.lh-notification-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* FieldError.razor (Components/Shared) — the per-field counterpart to the banner above, rendered
   directly under a field rather than at the page or form level (Figma's own error-state treatment:
   red field border plus red text below it, e.g. "That IMO already exists." under Vessel IMO Number —
   client feedback, supersedes an earlier aggregate-list-at-the-top approach). Pair with
   .lh-field-invalid on the field's own Class parameter. */
.lh-field-error {
    display: block;
    margin-top: var(--kendo-spacing-1);
    color: var(--kendo-color-error);
    font-family: var(--lh-font-body);
    font-size: var(--lh-text-sm);
}

/* Matches Kendo's own rendered root classes for the input families used on these forms — .k-input for
   TextBox/ComboBox/NumericTextBox, .k-picker for DateTimePicker/DropDownList — same combined-selector
   specificity fight as this file's other Kendo overrides (e.g. .lh-modal-add-link). */
.lh-field-invalid.k-input,
.lh-field-invalid.k-input:hover,
.lh-field-invalid.k-input.k-hover,
.lh-field-invalid.k-picker,
.lh-field-invalid.k-picker:hover,
.lh-field-invalid.k-picker.k-hover {
    border-color: var(--kendo-color-error) !important;
}

/* --- Focus rings ---
   Kendo draws its focus outline on plain :focus, so every mouse click on a checkbox, radio, window, ...
   leaves a heavy 2px black ring behind. :focus-visible is the browser's own "this focus came from the
   keyboard" signal, so removing the outline only where it is NOT matched drops the ring for mouse clicks
   everywhere in the app while keyboard users tabbing through still see it. !important because Kendo
   itself uses !important on some of these (e.g. inside ripple containers). */
:focus:not(:focus-visible) {
    outline: none !important;
}

/* A disabled outline button keeps its themed border color — Kendo dims the text of a disabled
   .k-button-outline.k-button-primary/-error but the theme's own outline border (teal/red) still wins, so a
   disabled Save read as active at a glance (e.g. Agency Charges' per-parameter Save before its value
   changes). Neutral hairline instead, the same border token used for the app's other quiet outlines. */
.k-button.k-button-outline.k-disabled,
.k-button.k-button-outline:disabled {
    border-color: var(--lh-border);
}