/* OVELRO theme layer — .NET 10 / C# / Blazor Server / Radzen.
   --rz-* here are a thin bridge onto the semantic --ovelro-* tokens (ovelro-design-tokens.css),
   never a second, independent palette — light/dark/system all fall out of that file's three states. */
:root {
  --rz-primary: var(--ovelro-accent);
  --rz-primary-light: var(--ovelro-accent-soft);
  --rz-primary-dark: var(--ovelro-accent-hover);
  --rz-base-50: var(--ovelro-bg);
  --rz-base-100: var(--ovelro-surface);
  --rz-base-200: var(--ovelro-border);
  --rz-base-300: var(--ovelro-border);
  --rz-base-500: var(--ovelro-text-muted);
  --rz-base-700: var(--ovelro-text);
  --rz-base-800: var(--ovelro-text);
  --rz-base-900: var(--ovelro-text);
  --rz-base-background-color: var(--ovelro-surface);
  --rz-text-color: var(--ovelro-text);
  /* Material theme's dropdown/menu "selected item" background/text read --rz-primary-lighter /
     --rz-on-primary-lighter, which the Radzen material theme hardcodes as a tinted derivative of
     the *default* indigo primary rather than deriving from --rz-primary — so overriding
     --rz-primary alone (above) does not reach them. Bridge them explicitly so the highlighted
     list item (e.g. LanguagePicker's active culture) matches the OVELRO accent. */
  --rz-primary-lighter: var(--ovelro-accent-soft);
  --rz-on-primary-lighter: var(--ovelro-accent);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ovelro-display); }
.rz-button, .rz-textbox, .rz-dropdown, .rz-multiselect, .rz-datepicker { border-radius: 10px; }
.rz-primary.rz-button {
  background: var(--rz-primary);
  border-color: var(--rz-primary);
  color: var(--ovelro-accent-contrast);
}
.rz-primary.rz-button:hover {
  background: var(--rz-primary-dark);
  border-color: var(--rz-primary-dark);
}
.rz-panel, .rz-card, .rz-dialog {
  border-radius: 14px;
  box-shadow: 0 10px 30px var(--ovelro-shadow);
}
.ovelro-app-shell { min-height: 100vh; background: var(--rz-base-50); }
.ovelro-topbar { background: var(--ovelro-nav-bg); color: var(--ovelro-nav-text); }
.ovelro-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--ovelro-display);
  font-weight: 700;
}
.ovelro-brand img { width: 34px; height: 34px; }

/* LanguagePicker sits on the always-dark .ovelro-nav bar (--ovelro-nav-bg/--ovelro-nav-text),
   independent of the light/dark theme toggle — so its closed control is themed against the nav
   tokens, not the page surface tokens the rest of this file bridges. Its popup panel portals to
   the document body and picks up the --rz-base-* / --rz-primary-lighter bridge above instead. */
.ovelro-language-picker.rz-dropdown {
  /* width = outer padding-inline (--rz-input-padding-inline * 2) + label content (2ch for the
     culture code) + trigger icon box (--rz-dropdown-trigger-icon-width + its inline margins).
     Radzen's .rz-dropdown-label also reserves 24px of its own padding-inline-end for a clear
     icon we don't use (AllowClear="false"), so that's zeroed below rather than budgeted for. */
  width: calc(2 * var(--rz-input-padding-inline) + 2ch + var(--rz-dropdown-trigger-icon-width) + 1rem);
  background: transparent;
  border-color: var(--ovelro-nav-text);
  color: var(--ovelro-nav-text);
}
.ovelro-language-picker.rz-dropdown .rz-dropdown-label {
  padding-inline-end: 0;
}
/* Specificity note: Radzen's own hover/focus rules are e.g.
   .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover — each :not() counts as a class for
   specificity, so they outweigh a plain .ovelro-language-picker.rz-dropdown:hover override. Matching
   the same :not() chain here, rather than reaching for !important, keeps this file's cascade
   readable and still loses cleanly if the control is ever actually disabled.
   Both --rz-input-hover-background-color and --rz-input-focus-background-color resolve to
   --rz-base-background-color in Radzen's material theme (bridged to --ovelro-surface, white in
   light mode), but this control keeps --ovelro-nav-text (white) as its text color always — so both
   states need the same transparent override, or the closed control goes white-on-white. The :focus
   case is the one that lingers after closing the popup: Radzen doesn't blur the control when an
   option is picked or the mouse moves away, so it stays focused (and, without this rule, blank). */
.ovelro-language-picker.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
.ovelro-language-picker.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus {
  background: transparent;
  border-color: var(--ovelro-accent);
}

/* ThemeToggle (RadzenSelectBar) sits on the always-dark .ovelro-nav bar too, and unlike
   LanguagePicker's popup it never portals elsewhere — every segment needs nav-toned styling for
   its whole lifetime. --rz-selectbar-background-color also resolves to nothing (Radzen's own
   material theme references the misspelled --rz-base-backgorund-color, never defined by any
   theme), so unselected segments render with no explicit background at all without this override. */
.ovelro-theme-toggle.rz-selectbar {
  border-color: var(--ovelro-nav-text);
}
.ovelro-theme-toggle .rz-button {
  background: transparent;
  color: var(--ovelro-nav-text);
  border-color: var(--ovelro-nav-text);
  padding: 0.35rem;
}
.ovelro-theme-toggle .rz-button:hover {
  background: rgb(255 255 255 / 12%);
}
.ovelro-theme-toggle .rz-button.rz-state-active {
  background: var(--ovelro-accent);
  color: var(--ovelro-accent-contrast);
  border-color: var(--ovelro-accent);
}
.ovelro-theme-toggle .rz-button.rz-state-active:hover {
  background: var(--ovelro-accent-hover);
  border-color: var(--ovelro-accent-hover);
}

/* RadzenDataGrid headers: default Radzen material CSS keeps column title text on a single line
   with no wrap allowance, so a header's own label competes for space with its sort arrow and
   filter icon inside whatever fixed Width the column declares — narrow columns (booleans, short
   labels) end up clipping or overlapping instead of just wrapping to a second line. Letting the
   title content wrap keeps every header legible regardless of column width, across every
   RadzenDataGrid in the app.
   Wrapping alone isn't enough, though: .rz-column-title is a flex row (title span + sort icon +
   filter icon), and a flex item's default min-width is auto (its content's natural width), not 0 —
   so on a wrapped two-line title, the text span still refuses to shrink below its longest word and
   pushes the sort/filter icons out to overlap it instead of wrapping the row. min-width: 0 lets the
   text span actually shrink to the column's available width, and flex-wrap lets the icons drop to
   their own line if there truly isn't room, rather than clipping under/behind the text. */
.rz-column-title-content {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
  min-width: 0;
}
.rz-data-grid .rz-column-title {
  height: auto;
  padding-block: 0.5rem;
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

/* Highlights the RadzenDataGrid row currently open for editing (e.g. backoffice Content page),
   via a `data-editing="true"` attribute set through RowRender. Lives here rather than in a
   component's scoped .razor.css: RadzenDataGrid renders its own <table>/<tr> markup outside any
   RenderFragment the owning component authored, so Blazor never stamps that component's CSS scope
   attribute onto it — scoped ::deep rules have nothing to key off and silently never match.
   Specificity note: the Material theme's zebra striping
   (.rz-grid-table-striped tbody > tr:not(...):nth-child(even/odd) > td { background-color }) is
   (0,4,1) and covers every row (even AND odd) — a bare `tr[data-editing] > td` selector loses to
   it outright, so the background never showed. Matching the same `tbody > tr ... > td` shape (with
   the attribute selector swapped in for the class) keeps specificity equal-or-higher while staying
   readable, without reaching for !important. */
tr[data-editing="true"] {
  box-shadow: inset 3px 0 0 var(--ovelro-accent);
}
.rz-grid-table.rz-grid-table tbody > tr[data-editing="true"] > td {
  background-color: color-mix(in srgb, var(--ovelro-accent) 10%, transparent);
}