/* ==========================================================================
   DQ Design - Jembatan ke Bootstrap 5.3 dan Syncfusion Fluent 2.
   Muat SETELAH bootstrap.min.css dan _content/Syncfusion.Blazor.Themes/fluent2.css.
   ========================================================================== */

/* ---------- Bootstrap ---------- */
:root, [data-bs-theme="light"] {
  --bs-primary: var(--dq-brand);
  --bs-primary-rgb: var(--dq-brand-rgb);
  --bs-primary-text-emphasis: var(--dq-brand-text);
  --bs-primary-bg-subtle: var(--dq-brand-lighter);
  --bs-primary-border-subtle: var(--dq-brand-light);
  --bs-link-color: var(--dq-brand-text);
  --bs-link-color-rgb: var(--dq-brand-rgb);
  --bs-link-hover-color: var(--dq-brand-text);
  --bs-link-hover-color-rgb: var(--dq-brand-rgb);
  --bs-focus-ring-color: rgba(var(--dq-brand-rgb), .35);

  --bs-success: var(--dq-success);  --bs-warning: var(--dq-warning);
  --bs-danger: var(--dq-danger);    --bs-info: var(--dq-info);

  --bs-body-font-family: var(--dq-font-base);
  --bs-body-font-size: var(--dq-text-body);
  --bs-body-color: var(--dq-neutral-fg);
  --bs-body-bg: var(--dq-neutral-bg);
  --bs-secondary-color: var(--dq-neutral-fg-3);
  --bs-border-color: var(--dq-neutral-stroke);
  --bs-tertiary-bg: var(--dq-neutral-surface-2); --bs-emphasis-color: var(--dq-neutral-fg);
  --bs-border-radius: var(--dq-radius-md);
  --bs-border-radius-sm: var(--dq-radius-sm);
  --bs-border-radius-lg: var(--dq-radius-lg);
  --bs-border-radius-xl: var(--dq-radius-xl);
  --bs-heading-color: var(--dq-neutral-fg);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--dq-font-display); font-weight: 600; }

.btn-primary {
  --bs-btn-color: var(--dq-brand-fg); --bs-btn-hover-color: var(--dq-brand-fg); --bs-btn-active-color: var(--dq-brand-fg); --bs-btn-disabled-color: var(--dq-brand-fg);
  --bs-btn-bg: var(--dq-brand);            --bs-btn-border-color: var(--dq-brand);
  --bs-btn-hover-bg: var(--dq-brand-hover);   --bs-btn-hover-border-color: var(--dq-brand-hover);
  --bs-btn-active-bg: var(--dq-brand-pressed); --bs-btn-active-border-color: var(--dq-brand-pressed);
  --bs-btn-disabled-bg: var(--dq-brand);   --bs-btn-disabled-border-color: var(--dq-brand);
  --bs-btn-focus-shadow-rgb: var(--dq-brand-rgb);
}
.btn-outline-primary {
  --bs-btn-hover-color: var(--dq-brand-fg); --bs-btn-active-color: var(--dq-brand-fg);
  --bs-btn-color: var(--dq-brand-ink);     --bs-btn-border-color: var(--dq-brand-ink);
  --bs-btn-hover-bg: var(--dq-brand);      --bs-btn-hover-border-color: var(--dq-brand);
  --bs-btn-active-bg: var(--dq-brand-pressed); --bs-btn-active-border-color: var(--dq-brand-pressed);
  --bs-btn-focus-shadow-rgb: var(--dq-brand-rgb);
}
.btn { font-weight: 600; }
.form-control:focus, .form-select:focus {
  border-color: var(--dq-brand);
  box-shadow: 0 0 0 .2rem rgba(var(--dq-brand-rgb), .2);
}
.form-check-input:checked { background-color: var(--dq-brand); border-color: var(--dq-brand); }

/* ---------- Syncfusion Fluent 2 ---------- */
:root {
  --color-sf-primary: var(--dq-brand);
  --color-sf-primary-light: var(--dq-brand-light);
  --color-sf-primary-lighter: var(--dq-brand-lighter);
  --color-sf-primary-dark: var(--dq-brand-hover);
  --color-sf-primary-darker: var(--dq-brand-pressed);
  --color-sf-primary-text-color: var(--dq-brand-fg);
  --color-sf-primary-bg-color: var(--dq-brand);
  --color-sf-primary-border-color: var(--dq-brand);
  --color-sf-primary-bg-color-hover: var(--dq-brand-hover);
  --color-sf-primary-bg-color-pressed: var(--dq-brand-pressed);
  --color-sf-primary-bg-color-selected: var(--dq-brand-hover);
  --color-sf-primary-bg-color-focus: var(--dq-brand-hover);
  --color-sf-primary-outline: var(--dq-brand);
  --color-sf-primary-label-color: var(--dq-brand-text);
  --color-sf-primary-cell-selection: var(--dq-brand-lighter);
  --color-sf-cell-selection-bg-color: var(--dq-brand-lighter);
  --color-sf-utility-primary-lighter: var(--dq-brand-subtle);
  --color-sf-brand-primary: var(--dq-brand);
  --color-sf-brand-primary-d10: var(--dq-brand-hover);
}
/* Samakan font komponen Syncfusion dengan halaman */
/* (jangan pakai selector turunan: akan menimpa font ikon .e-icons) */
.e-control { font-family: var(--dq-font-base); }
/* Kotak centang nonaktif (kolom DisplayAsCheckBox di grid) yang tercentang: bawaan tema nyaris tak terlihat. Bingkai dan centang berwarna aksen kampus. */
.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check,
.e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check {
  background-color: transparent;
  border-color: var(--dq-brand);
  color: var(--dq-brand);
}

/* ---------- Telerik / Kendo Fluent ----------
   Turunan (hover, subtle, active) di tema Kendo memakai oklch(from var(--kendo-color-primary) ...),
   jadi cukup satu variabel. Muat SETELAH kendo-theme-fluent.css. */
:root {
  --kendo-color-primary: var(--dq-brand);
}

/* Kolom input putih di atas kartu (Fluent), bukan abu-abu kanvas */
.form-control, .form-select { background-color: var(--dq-neutral-surface); }