/* ============================================================
   TitleKnight Design System — radzen-overrides.css
   Skin Radzen components that we still use in new code:
     - RadzenDataGrid       (visual surface)
     - RadzenHtmlEditor     (visual surface)
     - RadzenChart family   (carve-out: chart visuals not covered
                              by the design system primitives)
   Anything else we touch is via the IAppDialog / IAppToast
   wrappers and inherits the design system automatically.
   See DESIGN.md § 17.
   ============================================================ */

/* -----------------------------------------------------------
   RadzenDataGrid
   ----------------------------------------------------------- */
.rz-data-grid {
  font-family: var(--font-sans);
  font-size: var(--fs-135);
  border: 0;
  background: transparent;
}
.rz-data-grid .rz-grid-table {
  border-collapse: collapse;
}
.rz-data-grid .rz-grid-table thead > tr > th {
  background: var(--card);
  border-bottom: 1px solid var(--line-2);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  color: var(--soft);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 10px 18px;
  white-space: nowrap;
}
.rz-data-grid .rz-grid-table tbody > tr > td {
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  color: var(--ink-2);
  font-size: var(--fs-135);
  background: transparent;
}
.rz-data-grid .rz-grid-table tbody > tr:hover > td,
.rz-data-grid .rz-grid-table tbody > tr.rz-state-hover > td {
  background: var(--bg);
}
.rz-data-grid .rz-grid-table tbody > tr.rz-state-highlight > td {
  background: var(--primary-50);
  color: var(--ink-2);
}
.rz-data-grid .rz-grid-table tbody > tr:last-child > td {
  border-bottom: 0;
}

/* Pager */
.rz-data-grid .rz-paginator,
.rz-paginator {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-2);
  padding: 10px 18px;
  font-size: 13px;
  color: var(--muted);
}
.rz-paginator .rz-paginator-element {
  height: 28px; min-width: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 2px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13px;
  transition: background var(--dur-1);
}
.rz-paginator .rz-paginator-element:hover {
  background: var(--bg);
}
.rz-paginator .rz-paginator-element.rz-state-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Filter row */
.rz-data-grid .rz-grid-table .rz-cell-filter input,
.rz-data-grid .rz-grid-table .rz-cell-filter select {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

/* Inline buttons inside the grid (open-in-new icons) */
.rz-data-grid .rz-button {
  background: transparent;
  border: 0;
  color: var(--soft);
  width: 28px; height: 28px;
  border-radius: var(--r-3);
  padding: 0;
}
.rz-data-grid .rz-button:hover {
  background: var(--bg);
  color: var(--ink-2);
}

/* -----------------------------------------------------------
   RadzenHtmlEditor
   ----------------------------------------------------------- */
.rz-html-editor {
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
}
.rz-html-editor:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring-primary);
}
.rz-html-editor .rz-html-editor-toolbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  padding: 6px;
}

/* -----------------------------------------------------------
   RadzenChart family — chart carve-out
   Color usage on charts: --primary (series 1), --success (series 2),
   --warning (series 3), --error (alerts).
   ----------------------------------------------------------- */
.rz-chart {
  font-family: var(--font-sans);
}
.rz-chart .rz-chart-tooltip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  padding: 8px 12px;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.rz-chart text {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
}
.rz-chart .rz-grid-line,
.rz-chart .rz-axis line {
  stroke: var(--line-2);
}
.rz-chart .rz-axis-title text {
  fill: var(--soft);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* -----------------------------------------------------------
   RadzenDialog / RadzenNotification — used only via the
   IAppDialog / IAppToast wrappers. Re-skin to the design
   system's dialog / alert visuals.
   ----------------------------------------------------------- */
.rz-dialog-wrapper .rz-dialog {
  border-radius: var(--r-7);
  box-shadow: var(--shadow-5);
  font-family: var(--font-sans);
}
.rz-dialog-wrapper .rz-dialog .rz-dialog-titlebar {
  background: #fff;
  border-bottom: 1px solid var(--line-2);
  padding: 18px 22px 14px;
}
.rz-dialog-wrapper .rz-dialog .rz-dialog-titlebar .rz-dialog-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.rz-dialog-wrapper .rz-dialog .rz-dialog-content {
  padding: 18px 22px;
  font-size: var(--fs-14);
  color: var(--ink-2);
}

/* Radzen 10.3 DOM:
     .rz-notification              fixed-position outer container
       .rz-notification-item-wrapper.rz-notification-{severity}
         (theme paints this white via --rz-notification-container-background-color;
          when an auto-close progressbar is present, .rz-notification-content gets
          a bottom margin so the wrapper's white bleeds out below the colored item)
         .rz-notification-content    (gets margin-block-end when progressbar exists)
           .rz-notification-item     (colored severity surface, but our --*-soft
                                      tokens are ~10% alpha — they don't cover the
                                      wrapper, so any white shows through)
   Make the whole card present as one solid tinted surface: apply the severity
   tint to the wrapper, kill the progressbar gap, and let the item ride on top
   with a matching transparent fill. */
.rz-notification {
  font-family: var(--font-sans);
  font-size: var(--fs-135);
  --rz-notification-container-background-color: transparent;
  --rz-notification-border-radius: var(--r-5);
}
.rz-notification .rz-notification-item-wrapper {
  border-radius: var(--r-5);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  background-color: var(--card);
}
.rz-notification .rz-notification-item-wrapper > .rz-notification-content {
  margin-block-end: 0;
}
.rz-notification .rz-notification-item {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}
/* Layer the soft severity tint over the white wrapper so the card is fully
   opaque (the soft tokens are ~10% alpha and would let the page show through
   on their own). */
.rz-notification-success { background-image: linear-gradient(var(--success-soft), var(--success-soft)); border-color: rgba(15,169,104,.2) !important; }
.rz-notification-error   { background-image: linear-gradient(var(--error-soft),   var(--error-soft));   border-color: rgba(239,68,68,.2)  !important; }
.rz-notification-warn    { background-image: linear-gradient(var(--warning-soft), var(--warning-soft)); border-color: rgba(234,179,8,.2)  !important; }
.rz-notification-info    { background-image: linear-gradient(var(--primary-50),   var(--primary-50));   border-color: rgba(1,30,92,.15)   !important; }

/* -----------------------------------------------------------
   RadzenUpload — used by ClientOrderForm under our .uploader
   chrome. Hide Radzen's default button/list visuals so our
   design-system uploader styling drives.
   ----------------------------------------------------------- */
.rz-fileupload {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
}
.rz-fileupload .rz-fileupload-buttonbar {
  background: transparent;
  border: 0;
  padding: 0;
}
.rz-fileupload .rz-fileupload-content {
  background: transparent;
  border: 0;
  padding: 0;
}

/* -----------------------------------------------------------
   RadzenFormField, RadzenTextBox, RadzenNumeric, RadzenDropDown,
   RadzenDatePicker — used by ClientOrderFormFieldComponent.
   Re-skin to design-system tokens so the form fields look
   consistent with the rest of the app.
   ----------------------------------------------------------- */
.rz-form-field {
  font-family: var(--font-sans);
}
.rz-form-field .rz-form-field-label,
.rz-form-field .rz-form-field-content > label {
  font-size: var(--fs-125);
  font-weight: 600;
  color: var(--ink-2);
}
.rz-form-field-content,
.rz-form-field.rz-variant-outlined {
  background: transparent;
}
.rz-form-field.rz-variant-outlined .rz-form-field-content {
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: #fff;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.rz-form-field.rz-variant-outlined.rz-state-focused .rz-form-field-content {
  border-color: var(--primary);
  box-shadow: var(--ring-primary);
}

.rz-textbox,
.rz-numeric,
.rz-dropdown,
.rz-datepicker {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink-2);
}

.rz-textbox,
.rz-textbox:focus {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.rz-numeric input,
.rz-dropdown .rz-inputtext,
.rz-datepicker input {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink-2);
}

/* The dropdown is `display: inline-flex; flex-direction: column` in
   Radzen Material with no `justify-content`, so when something taller
   stretches it (a flex-row sibling at default align-items: stretch,
   the .rz-form-field-content wrapper, an explicit height) the label
   collapses to the top of the box. justify-content: center keeps the
   label vertically centered regardless. min-height brings the
   collapsed-state height up to the standard input height (40px) so
   the dropdown lines up with textboxes/datepickers and the 24px
   trigger arrow icon stops clipping against the box. */
.rz-dropdown {
  border-radius: var(--r-4);
  justify-content: center;
  min-height: var(--rz-input-height);
}
.rz-dropdown .rz-dropdown-trigger { color: var(--soft); }

.rz-checkbox-box {
  border-color: var(--line);
  border-radius: var(--r-3);
}
.rz-checkbox-box.rz-state-active {
  background: var(--primary);
  border-color: var(--primary);
}

/* RadzenLabel — used inside ClientOrderFormFieldComponent for required/error text */
.rz-label { font-family: var(--font-sans); }

/* -----------------------------------------------------------
   RadzenTabs — sensitive-page carve-out for EditClientOrder.
   Two responsibilities:
     (1) Re-create the height / overflow chain that the
         removed Bootstrap `.h-100 .overflow-auto` used to
         provide on the outer splitter pane.
     (2) Re-skin Material's underline-style tab nav as the
         design-system segmented pill (DESIGN.md § 9.15).
   Both are scoped to .edit-order-tabs so this does not leak
   to RadzenTabs elsewhere (e.g., ApiDocumentation language
   tabs). See DESIGN.md § 17.5 carve-outs.
   ----------------------------------------------------------- */

/* (1) Height / scroll chain — the Diligence Report's right
   pane is fixed-height; the panels area inside scrolls. */
.edit-order-tabs.rz-tabview {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  border: 0;
}
.edit-order-tabs.rz-tabview > .rz-tabview-nav-container {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 4px 0 0;
}
.edit-order-tabs.rz-tabview > .rz-tabview-panels {
  flex: 1 1 auto;
  overflow-y: auto;
  background: transparent;
  border: 0;
  padding: 0;
}
/* Single source of truth for the gap between segmented pill and tab
   body — 16px on every tab. Per-tab markup must NOT add its own top
   margin/padding or the spacing becomes inconsistent. */
.edit-order-tabs.rz-tabview > .rz-tabview-panels > .rz-tabview-panel {
  height: auto;
  padding: 16px 0 0;
}

/* (2) Segmented-pill tab nav. The <ul.rz-tabview-nav> is the
   pill track; each <li> is a tab. Active = white pill on a
   tinted track, no underline (DESIGN.md § 9.15 rule 2). */
.edit-order-tabs.rz-tabview ul.rz-tabview-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  margin: 0;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  max-width: 100%;
}

.edit-order-tabs.rz-tabview ul.rz-tabview-nav > li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
}

.edit-order-tabs.rz-tabview ul.rz-tabview-nav > li > a.rz-tabview-nav-link,
.edit-order-tabs.rz-tabview ul.rz-tabview-nav > li.rz-state-default > a.rz-tabview-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--fs-135);
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-3);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
}

.edit-order-tabs.rz-tabview ul.rz-tabview-nav > li > a.rz-tabview-nav-link:hover {
  color: var(--ink);
  background: transparent;
}

.edit-order-tabs.rz-tabview ul.rz-tabview-nav > li.rz-tabview-selected > a.rz-tabview-nav-link,
.edit-order-tabs.rz-tabview ul.rz-tabview-nav > li.rz-state-active > a.rz-tabview-nav-link {
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-1);
}

/* Hide Radzen's default ink-bar — the pill IS the active indicator. */
.edit-order-tabs.rz-tabview .rz-tabview-ink-bar {
  display: none;
}