/* ═══════════════════════════════════════════════════════════════
   Chroniq Health — Vendor skin + transitional bridge
   Loaded after styles.css. Two jobs:
     1. Re-skin the component libraries we use (Syncfusion, Radzen) onto
        the design tokens.
     2. A compact transitional bridge: minimal Bootstrap grid / form /
        button / card / table primitives (the retired Now UI theme used
        to provide these). Pages that have not moved to .chq-* still rely
        on them, so we re-provide just the essentials, styled to the new
        tokens. Migrated pages ignore this section.

   DevExpress is gone. Its skin, and the Bootstrap primitives that existed
   only because it rendered Bootstrap-4 markup - the modal behind DxPopup,
   the dropdown list behind DxComboBox, .nav-tabs behind DxTabs and
   .pagination behind the grid pager - went with it. What remains of the
   bridge is what plain markup still uses.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. Bridge: layout grid ───────────────────────── */
.container, .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.row > [class^="col"], .row > [class*=" col"] { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* Bridge: a few utilities still referenced across un-migrated markup */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.float-right, .float-lg-right { float: right !important; }
.float-left { float: left !important; }
.ml-2 { margin-left: .5rem !important; }
.mw-1100 { max-width: 1100px; }
.w-100 { width: 100% !important; }
.clearfix::after { display: block; clear: both; content: ""; }
.text-danger { color: var(--danger-600) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-body); }
.text-white { color: #fff !important; }
.bg-primary { background: var(--cobalt-500); }

/* Bootstrap nav-pills (Identity account-manage side nav). */
.nav-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-pills .nav-item { list-style: none; }
.nav-pills .nav-link { display: block; padding: 9px 12px; border-radius: var(--radius-md); color: var(--text-body); text-decoration: none; transition: var(--transition-control); }
.nav-pills .nav-link:hover { background: var(--neutral-100); color: var(--text-strong); }
.nav-pills .nav-link.active { background: var(--cobalt-50); color: var(--cobalt-700); font-weight: var(--fw-semibold); }
.mt-2, .my-2 { margin-top: .5rem !important; }
.mb-2, .my-2 { margin-bottom: .5rem !important; }
.mt-3, .my-3 { margin-top: 1rem !important; }
.mb-3, .my-3 { margin-bottom: 1rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }

/* ─────────────────── Bridge: card / table / form / button ─────────────────── */
.card {
  background: var(--surface-card); border: var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 20px;
}
.card .card-header { padding: 18px 20px 0; border: none; background: none; }
.card .card-header .title, .card .card-header h2, .card .card-header h3, .card-title {
  font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug);
  color: var(--text-strong); margin: 0;
}
.card .card-body { padding: 16px 20px 20px; }

.table { width: 100%; border-collapse: collapse; color: var(--text-body); }
.table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); font-weight: var(--fw-bold); text-align: left; padding: 16px 12px 10px; }
.table td { padding: 12px; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }

label { font-weight: var(--fw-semibold); color: var(--text-muted); font-size: var(--text-sm); }
.form-control {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body);
  height: var(--control-md); padding: 0 14px; width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); transition: var(--transition-control);
}
.form-control:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.form-group { margin-bottom: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug);
  height: var(--control-md); padding: 0 18px; font-size: var(--text-base);
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: var(--transition-control); text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn.btn-primary { background: var(--cobalt-500); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--cobalt-600); color: #fff; }
.btn-secondary, .btn-default { background: var(--neutral-0); color: var(--text-body); border-color: var(--border-default); }
.btn-secondary:hover, .btn-default:hover { background: var(--neutral-50); }
.btn-danger { background: var(--danger-500); color: #fff; }
.btn-success { background: var(--success-500); color: #fff; }
.btn-link { background: none; color: var(--text-link); box-shadow: none; }

/* Bootstrap badges (used as status chips on the care-plan editors etc.) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: 3px 10px; border-radius: var(--radius-pill); line-height: 1.6;
}
.badge-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge-danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.badge-info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.badge-secondary, .badge-light { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge-primary { background: var(--cobalt-50); color: var(--cobalt-700); }

/* Bootstrap alerts */
.alert {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; font-size: var(--text-sm); margin-bottom: 16px;
}
.alert-success { background: var(--status-success-bg); border-color: var(--success-100); color: var(--status-success-fg); }
.alert-warning { background: var(--status-warning-bg); border-color: var(--warning-100); color: var(--status-warning-fg); }
.alert-danger  { background: var(--status-danger-bg);  border-color: var(--danger-100);  color: var(--status-danger-fg); }
.alert-info    { background: var(--status-info-bg);    border-color: var(--cyan-100);     color: var(--status-info-fg); }

/* ───────────────── Bridge: input-group primitives ─────────────────
   The dropdown primitives that used to sit here went with DevExpress. They existed because its
   combo boxes, date editors and grid filter editors rendered as Bootstrap 4 dropdowns and relied on
   the retired theme to show and hide them. Syncfusion's dropdowns are self-contained, and no markup
   references .dropdown-menu, .dropdown-item or .dropdown-toggle any more. The input-group rules
   below stay: plain markup still uses them. */

.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; }
.input-group-prepend, .input-group-append { display: flex; }
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }
.input-group-prepend .btn, .input-group-append .btn { position: relative; z-index: 2; }
.input-group-text {
  display: flex; align-items: center; padding: 0 12px; margin-bottom: 0;
  font-size: var(--text-base); color: var(--text-muted); white-space: nowrap;
  background: var(--neutral-50); border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-prepend ~ .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* The Bootstrap bridge above stays. It was written because DevExpress emitted Bootstrap-4 markup,
   but plain markup in this application still uses .btn, .card-header, .form-control, .input-group
   and .nav-link, and the old theme that once supplied them is long gone. The parts that existed
   only for DevExpress - the modal primitives behind DxPopup, the dropdown/list styling behind
   DxComboBox's option list, the .nav-tabs behind DxTabs and the .pagination behind its grid pager -
   went with it, along with the whole .dxbs-/.dxbl- skin. None of those classes appear in the markup
   any more. */
/* ───────────────────────── 3. Radzen skin ───────────────────────── */
/* Only Radzen's default-base.css is loaded (no colour theme), so accented
   controls default to Radzen's blue "secondary" (#35a0d7). Point the secondary
   palette at the cobalt brand so radio buttons, sliders and the steps wizard
   all match the design system. */
:root {
  --rz-secondary: var(--cobalt-500);
  --rz-secondary-light: var(--cobalt-400);
  --rz-secondary-lighter: var(--cobalt-100);
  --rz-secondary-dark: var(--cobalt-600);
  --rz-secondary-darker: var(--cobalt-700);
  --rz-on-secondary: #fff;
}

.rz-dialog { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; font-family: var(--font-sans); }
.rz-dialog-titlebar { background: var(--surface-card); border-bottom: var(--hairline); color: var(--text-strong); font-weight: var(--fw-bold); padding: 16px 20px; }
.rz-dialog-content { padding: 20px; }
.rz-dialog-mask { background: rgba(15, 20, 27, 0.45); }
.rz-notification { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-sans); }
.rz-card { border-radius: var(--radius-lg); border: var(--hairline); box-shadow: var(--shadow-md); }
.rz-button { border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.rz-button.rz-primary { background: var(--cobalt-500); }
.rz-button.rz-primary:hover { background: var(--cobalt-600); }

/* Dropdown / autocomplete / multiselect options (RadzenDropDown, RadzenDropDownDataGrid,
   RadzenAutoComplete, RadzenListBox, and the RadzenDataGrid pager's page-size picker).

   Same root cause as the accordion below: only default-base.css is loaded, so every
   --rz-dropdown-item-* var is undefined. Those vars are the ONLY thing that colours an
   option, e.g.

       .rz-dropdown-items li.rz-state-highlight {
           background-color: var(--rz-dropdown-item-selected-background-color);
           color: var(--rz-dropdown-item-selected-color); … }

   An undefined var makes the declaration invalid at computed-value time, which drops it
   — so the selected option was styled exactly like every other option (and the padding
   fell back to 0). Same visible fault as the DevExpress combo above, different mechanism:
   there the colour was overridden, here it was never applied.

   Set on :root, not scoped to .rz-dropdown: Radzen renders the option panel in a popup at
   the end of <body>, outside the component, so a scoped selector would never reach it.
   Selected and hover are given different fills on purpose — hovering one option while
   another is selected has to leave both legible. */
:root {
  --rz-dropdown-item-padding: 8px 12px;
  --rz-dropdown-item-font-size: var(--text-sm);
  --rz-dropdown-item-transition: background-color .12s ease, color .12s ease;
  --rz-dropdown-item-hover-background-color: var(--neutral-100);
  --rz-dropdown-item-hover-color: var(--text-strong);
  --rz-dropdown-item-selected-background-color: var(--cobalt-100);
  --rz-dropdown-item-selected-color: var(--cobalt-700);
  --rz-dropdown-item-selected-shadow: none;
  --rz-dropdown-item-selected-hover-background-color: var(--cobalt-200);
  --rz-dropdown-item-selected-hover-color: var(--cobalt-800);
  --rz-dropdown-item-disabled-opacity: .5;
  --rz-dropdown-items-padding: 4px 0;
  --rz-dropdown-items-margin: 0;
}
/* Matches the weight the DevExpress selected option gets, so the two component
   libraries' dropdowns do not disagree about what "selected" looks like. */
.rz-dropdown-items li.rz-state-highlight,
.rz-multiselect-items li.rz-state-highlight,
.rz-autocomplete-items li.rz-state-highlight,
.rz-listbox-item.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight {
  font-weight: var(--fw-semibold);
}

/* Accordion — only Radzen's default-base.css is loaded (no theme), so every
   --rz-accordion-* var is undefined and the header/content render unstyled
   (transparent box, no radius). Map them onto the design tokens. Used on the
   care-plan editors (Medical History / Medications / Lifestyle sections). */
.rz-accordion {
  --rz-accordion-border-radius: var(--radius-lg);
  --rz-accordion-shadow: var(--shadow-sm);
  --rz-accordion-item-background-color: var(--surface-card);
  --rz-accordion-item-border: 1px solid var(--border-subtle);
  --rz-accordion-item-color: var(--text-strong);
  --rz-accordion-item-margin: 0;
  --rz-accordion-item-padding-block: 12px;
  --rz-accordion-item-padding-inline: 16px;
  --rz-accordion-item-font-size: var(--text-sm);
  --rz-accordion-item-font-weight: var(--fw-semibold);
  --rz-accordion-item-line-height: 1.4;
  --rz-accordion-hover-color: var(--cobalt-600);
  --rz-accordion-selected-color: var(--cobalt-600);
  --rz-accordion-content-font-size: var(--text-sm);
  --rz-accordion-content-padding-block: 16px;
  --rz-accordion-content-padding-inline: 16px;
  --rz-accordion-icon-font-size: var(--text-base);
  --rz-accordion-toggle-icon-margin-inline: 0 8px;
  border: var(--hairline);
}
/* Open section gets a subtle brand tint + accent bar so it reads clearly.
   Radzen marks the expanded state on the toggle icon (.rz-state-expanded),
   not the header, so match the header that contains an expanded icon. */
.rz-accordion .rz-accordion-header:has(.rz-accordion-toggle-icon.rz-state-expanded) {
  background: var(--cobalt-50);
  box-shadow: inset 3px 0 0 var(--cobalt-500);
}
.rz-accordion .rz-accordion-content { border-top: 1px solid var(--border-subtle); }

/* Steps wizard (Create Care Plan dialog). Radzen renders each step header as a
   <button>, which DevExpress's global dx-blazor reboot hits with
   `button{opacity:.6}` + stray group borders/radius — washing the text out and
   drawing a boxed segment. Reset that, and remap the number/title to tokens. */
.rz-steps {
  --rz-steps-number-background-color: var(--neutral-200);
  --rz-steps-number-color: var(--text-muted);
  --rz-steps-number-selected-background: var(--cobalt-500);
  --rz-steps-number-selected-color: #fff;
  --rz-steps-title-selected-color: var(--cobalt-600);
  --rz-steps-color: var(--text-muted);
}
.rz-steps .rz-steps-item,
.rz-steps ul,
.rz-steps .rz-menuitem-link,
.rz-steps .rz-steps-prev,
.rz-steps .rz-steps-next {
  opacity: 1;
  border: none;
  background: none;
}
.rz-steps .rz-steps-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); }

/* ───────────────── 4. Syncfusion skin ───────────────── */
/* Only the bootstrap5 theme file is loaded. It is self-contained (.e-* selectors only),
   so this section just pulls the accent and chrome onto the design tokens.
   This file is linked after the Syncfusion theme in _Host.cshtml, so equal-specificity
   rules here win. */

/* ---- Buttons (SfButton) ----
   The bootstrap5 theme ships its own grey/blue button, which does not match the design
   system. These rules restate .chq-btn on .e-btn using the same tokens, so an SfButton
   and a DsButton side by side are indistinguishable: default reads as .chq-btn--secondary,
   and CssClass="e-primary" reads as .chq-btn--primary. */
.e-btn, .e-css.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug);
  height: var(--control-md); padding: 0 18px; font-size: var(--text-base);
  text-transform: none; white-space: nowrap; cursor: pointer;
  background: var(--neutral-0); color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); transition: var(--transition-control);
}
.e-btn:hover, .e-css.e-btn:hover { background: var(--neutral-50); border-color: var(--border-strong); color: var(--text-body); }
.e-btn:active, .e-css.e-btn:active, .e-btn:active:hover {
  background: var(--neutral-100); border-color: var(--border-strong); color: var(--text-body); transform: translateY(1px);
}
/* The theme's :focus rule repaints the button grey and adds its own halo. Both are
   replaced here; the visible ring is kept for :focus-visible only, so a mouse click
   does not leave a button ringed. */
.e-btn:focus, .e-css.e-btn:focus {
  background: var(--neutral-0); border-color: var(--border-default); color: var(--text-body);
  outline: none; box-shadow: var(--shadow-xs);
}
.e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus {
  background: var(--cobalt-500); border-color: var(--cobalt-500); color: #fff; box-shadow: var(--shadow-brand);
}
.e-btn:focus-visible, .e-css.e-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.e-btn:disabled, .e-css.e-btn:disabled, .e-btn.e-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Primary. Syncfusion's own .e-primary sets background and border, so both are restated. */
.e-btn.e-primary, .e-css.e-btn.e-primary {
  background: var(--cobalt-500); border-color: var(--cobalt-500); color: #fff; box-shadow: var(--shadow-brand);
}
.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background: var(--cobalt-600); border-color: var(--cobalt-600); color: #fff; }
.e-btn.e-primary:active, .e-css.e-btn.e-primary:active, .e-btn.e-primary:active:hover {
  background: var(--cobalt-700); border-color: var(--cobalt-700); color: #fff;
}
.e-btn.e-danger { background: var(--danger-500); border-color: var(--danger-500); color: #fff; box-shadow: none; }
.e-btn.e-danger:hover { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.e-btn.e-flat, .e-btn.e-link { background: transparent; border-color: transparent; box-shadow: none; color: var(--cobalt-600); }
.e-btn.e-flat:hover, .e-btn.e-link:hover { background: var(--cobalt-50); border-color: transparent; }

/* The icon is spaced by the flex gap above, so Syncfusion's own icon margins are cleared
   - otherwise the caption sits noticeably off-centre. IconCss carries Font Awesome
   classes here rather than Syncfusion's .e-icons, so the font-family must not be forced. */
.e-btn .e-btn-icon {
  margin: 0; padding: 0; width: auto; font-size: inherit; line-height: inherit;
}
.e-btn .e-btn-icon.e-icon-left, .e-btn .e-btn-icon.e-icon-right { margin: 0; }

/* ---- Text inputs (SfTextBox, and the input half of the pickers) ----
   Syncfusion wraps the <input> in a bordered .e-input-group, so the border, height and
   radius belong on the wrapper and the input itself goes transparent inside it. */
.e-input-group, .e-input-group.e-control-wrapper,
.e-float-input, .e-float-input.e-control-wrapper {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body);
  height: var(--control-md); width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); transition: var(--transition-control);
}
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input,
.e-float-input input.e-input, .e-float-input.e-control-wrapper input.e-input {
  height: 100%; padding: 0 14px; border: none; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body);
}
/* SfTextArea wraps a <textarea>, and Syncfusion marks that wrapper .e-multi-line-input. The fixed
   control height above is meant for single-line inputs - left applying here it collapses every
   multi-line box to one row and RowCount does nothing, which is what made the care plan Measure and
   every other memo field a single line. Height goes back to the textarea, which sizes from rows. */
.e-input-group.e-multi-line-input, .e-input-group.e-multi-line-input.e-control-wrapper,
.e-float-input.e-multi-line-input, .e-float-input.e-multi-line-input.e-control-wrapper {
  height: auto; min-height: var(--control-md); padding: 0;
  /* Restated rather than inherited from .e-input-group above: the theme sizes a textarea wrapper
     from the textarea's own cols, so without this a memo sits at its intrinsic width instead of
     filling its cell - noticeably narrower than the single-line controls beside it. */
  width: 100%;
}
.e-input-group.e-multi-line-input textarea.e-input,
.e-float-input.e-multi-line-input textarea.e-input {
  height: auto; padding: 10px 14px; border: none; background: transparent; width: 100%;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body);
  line-height: 1.45; resize: vertical;
}
.e-input-group.e-multi-line-input textarea.e-input::placeholder { color: var(--text-subtle); }

.e-input-group input.e-input::placeholder { color: var(--text-subtle); }
.e-input-group:focus-within, .e-input-group.e-input-focus,
.e-float-input:focus-within, .e-float-input.e-input-focus {
  border-color: var(--border-focus); box-shadow: var(--ring);
}
.e-input-group.e-error, .e-input-group.e-control-wrapper.e-error { border-color: var(--danger-500); }
.e-input-group.e-disabled, .e-input-group input.e-input[disabled] { background: var(--neutral-50); opacity: .7; }

/* The theme draws its underline/ripple with pseudo-elements on the wrapper. With a full
   border above they render as a stray line across the bottom of every field. */
.e-input-group::before, .e-input-group::after,
.e-float-input::before, .e-float-input::after { display: none; content: none; }

/* Trailing icons (the combo box caret, the date picker's calendar glyph). */
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
  background: transparent; border: none; color: var(--text-muted); min-width: 34px;
}
.e-input-group .e-input-group-icon:hover { background: var(--neutral-50); color: var(--text-strong); }

/* ---- Dropdown option lists (SfComboBox, SfDropDownList, SfMultiSelect) ----
   Same treatment the DevExpress and Radzen option lists get above, so a selected option
   reads identically whichever library drew the control. */
.e-dropdownbase .e-list-item, .e-popup.e-ddl .e-list-item {
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-body);
}
.e-dropdownbase .e-list-item.e-hover, .e-dropdownbase .e-list-item.e-item-focus,
.e-popup.e-ddl .e-list-item.e-hover, .e-popup.e-ddl .e-list-item.e-item-focus {
  background: var(--cobalt-50); color: var(--text-strong);
}
.e-dropdownbase .e-list-item.e-active, .e-popup.e-ddl .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover {
  background: var(--cobalt-100); color: var(--cobalt-700); font-weight: var(--fw-semibold);
}
.e-popup.e-ddl, .e-popup.e-popup-open {
  border: var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}

/* ---- Tabs (SfTab) ----
   The bootstrap5 theme draws boxed tabs with blue link text; the design system's tabs are
   underlined, muted until active. These restate .chq-tabs / .chq-tab on Syncfusion's markup so
   SfTab matches what DxTabs looked like after its own re-skin above, and what DsTabs looks like.
   Syncfusion animates a separate .e-indicator element for the active underline; it is hidden and
   the underline drawn as a border on the active item instead, so the result is deterministic
   rather than dependent on the indicator being positioned correctly. */
.e-tab .e-tab-header {
  background: transparent; border: none; border-bottom: 1px solid var(--border-subtle);
  min-height: 0; height: auto;
}
.e-tab .e-tab-header .e-toolbar-items { background: transparent; }
.e-tab .e-tab-header .e-indicator { display: none; }

.e-tab .e-tab-header .e-toolbar-item,
.e-tab .e-tab-header .e-toolbar-item.e-ileft {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  margin: 0 4px -1px 0; min-height: 0; height: auto; border-radius: 0;
}
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
  background: transparent; border: none; padding: 11px 14px; height: auto; border-radius: 0;
}
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--text-muted); text-transform: none; transition: var(--transition-control);
}
.e-tab .e-tab-header .e-toolbar-item:hover .e-tab-wrap { background: transparent; }
.e-tab .e-tab-header .e-toolbar-item:hover .e-tab-text { color: var(--text-strong); }

.e-tab .e-tab-header .e-toolbar-item.e-active {
  background: transparent; border-bottom-color: var(--cobalt-500);
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap { background: transparent; }
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--cobalt-600); }
.e-tab .e-tab-header .e-toolbar-item.e-disable .e-tab-text { opacity: .5; }

/* The panel below the strip: no card chrome, since the tabs sit inside one already. */
.e-tab > .e-content, .e-tab .e-content .e-item { background: transparent; border: none; }

/* ---- Schedule (Tasks page) ---- */
.e-schedule {
  border: var(--hairline); border-radius: var(--radius-lg); overflow: hidden;
  font-family: var(--font-sans);
}
.e-schedule .e-schedule-toolbar { background: var(--neutral-50); border-bottom: 1px solid var(--border-subtle); }
.e-schedule .e-schedule-toolbar .e-toolbar-items { background: transparent; }
.e-schedule .e-schedule-toolbar .e-tbar-btn { border-radius: var(--radius-md); }
.e-schedule .e-date-range .e-tbar-btn-text { font-weight: var(--fw-bold); color: var(--text-strong); }
.e-schedule .e-table-container, .e-schedule .e-content-wrap { font-size: var(--text-sm); }
.e-schedule .e-header-cells, .e-schedule .e-time-cells-wrap { color: var(--text-subtle); }
.e-schedule .e-current-day { color: var(--cobalt-600); }
.e-schedule .e-current-date .e-header-date { background: var(--cobalt-500); color: #fff; }
/* Event chips. The colour itself is set per-event in EventRendered (overdue vs not). */
.e-schedule .e-appointment {
  border: none; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
}
.e-schedule .e-appointment .e-subject { font-weight: var(--fw-semibold); }
.e-schedule .e-work-cells:hover { background: var(--neutral-50); }

/* ───────────────────── 5. Blazored Typeahead (topbar search) ───────────────────── */
.chq-search, .chq-search .blazored-typeahead { width: 100%; }
.blazored-typeahead__input {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-body);
  height: 38px; padding: 0 14px 0 40px; width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); transition: var(--transition-control);
}
.blazored-typeahead__input::placeholder { color: var(--text-subtle); }
.blazored-typeahead__input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.blazored-typeahead__results {
  border-radius: var(--radius-md); border: var(--hairline);
  box-shadow: var(--shadow-lg); background: var(--surface-card); margin-top: 4px; overflow: hidden;
}
.blazored-typeahead__result { font-size: var(--text-sm); padding: 9px 12px; color: var(--text-body); }
.blazored-typeahead__active { background: var(--cobalt-50); color: var(--text-strong); }