/* ==========================================================================
   Haileck Design System — global tokens + "hl-" components
   ==========================================================================
   Single source of truth for dashboard/table styling. Loaded LAST (after
   the Metronic bundle and site.css) in _Layout.cshtml / _LayoutFullPage.cshtml
   / _LayoutDenied.cshtml so it always wins the cascade.

   Naming convention: `--hl-*` for tokens, `.hl-*` for components.
   Goal: simple, modern, minimal, premium — one look, everywhere.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------- */
  /* Navy stays the brand accent everywhere EXCEPT buttons: links, text,
     badges, table hover, card/stat borders. See "Buttons" below for the
     button-specific red/blue system. */
  --hl-primary: #283199;
  --hl-primary-rgb: 40, 49, 153;
  --hl-primary-hover: #1f277a;
  --hl-primary-soft: #eef0fb;
  --hl-primary-soft-strong: rgba(40, 49, 153, 0.08);

  /* ---- Buttons (project red = primary action, project blue = secondary) */
  --hl-btn-red: #ed1c24;
  --hl-btn-red-rgb: 237, 28, 36;
  --hl-btn-red-hover: #c4161d;
  --hl-btn-red-soft: #fdeaea;
  --hl-btn-blue: var(--hl-primary);
  --hl-btn-blue-rgb: var(--hl-primary-rgb);
  --hl-btn-blue-hover: var(--hl-primary-hover);
  --hl-btn-blue-soft: var(--hl-primary-soft);

  /* ---- Status (kept distinct from primary, unlike the old overrides) */
  --hl-success: #17c653;
  --hl-warning: #f6a609;
  --hl-danger: #e02b45;
  --hl-info: #4a8bf5;

  /* ---- Surfaces & text ---------------------------------------------- */
  --hl-surface: #ffffff;
  --hl-surface-muted: #f8f9fc;
  --hl-border: #e7e9f5;
  --hl-text: #1b1f3b;
  --hl-text-muted: #6b7290;

  /* ---- Shape & elevation --------------------------------------------- */
  --hl-radius-sm: 8px;
  --hl-radius: 12px;
  --hl-radius-lg: 16px;
  --hl-radius-pill: 999px;
  --hl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --hl-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  --hl-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);

  /* ---- Typography ------------------------------------------------------ */
  --hl-font-sans: var(--app-font-sans, "Outfit", "Segoe UI", Arial, sans-serif);
  --hl-font-display: var(--app-font-display, "Montserrat", "Segoe UI", Arial, sans-serif);
}

/* --------------------------------------------------------------------------
   Retire the color split: force Bootstrap + Metronic "primary" tokens to
   the real brand navy everywhere, instead of the leftover theme green.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--hl-primary);
  --bs-primary-rgb: var(--hl-primary-rgb);
  --bs-primary-text-emphasis: var(--hl-primary-hover);
  --bs-primary-bg-subtle: var(--hl-primary-soft);
  --bs-primary-border-subtle: #c7cbeb;
  --kt-primary: var(--hl-primary);
  --kt-primary-active: var(--hl-primary-hover);
  --kt-primary-light: var(--hl-primary-soft);
}

.text-primary {
  color: var(--hl-primary) !important;
}

.badge-light-primary {
  color: var(--hl-primary) !important;
  background-color: var(--hl-primary-soft) !important;
}

/* --------------------------------------------------------------------------
   Buttons — the one place navy steps aside for the two-color brand system:
   primary action = project red, secondary action = project blue (navy).
   Every solid variant pins its own text color so labels never wash out;
   outline/light variants keep colored text on a light background.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hl-btn-red);
  --bs-btn-border-color: var(--hl-btn-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hl-btn-red-hover);
  --bs-btn-hover-border-color: var(--hl-btn-red-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hl-btn-red-hover);
  --bs-btn-active-border-color: var(--hl-btn-red-hover);
  --bs-btn-disabled-color: #fff;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hl-btn-blue);
  --bs-btn-border-color: var(--hl-btn-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hl-btn-blue-hover);
  --bs-btn-hover-border-color: var(--hl-btn-blue-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hl-btn-blue-hover);
  --bs-btn-active-border-color: var(--hl-btn-blue-hover);
  --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--hl-btn-red);
  --bs-btn-border-color: var(--hl-btn-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hl-btn-red);
  --bs-btn-hover-border-color: var(--hl-btn-red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hl-btn-red);
  --bs-btn-active-border-color: var(--hl-btn-red);
}

.btn-outline-secondary {
  --bs-btn-color: var(--hl-btn-blue);
  --bs-btn-border-color: var(--hl-btn-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hl-btn-blue);
  --bs-btn-hover-border-color: var(--hl-btn-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hl-btn-blue);
  --bs-btn-active-border-color: var(--hl-btn-blue);
}

/* Metronic "light" buttons — soft-tinted background, follows the same
   primary-is-red convention. */
.btn-light-primary {
  --bs-btn-color: var(--hl-btn-red);
  --bs-btn-bg: var(--hl-btn-red-soft);
  --bs-btn-border-color: var(--hl-btn-red-soft);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hl-btn-red);
  --bs-btn-hover-border-color: var(--hl-btn-red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hl-btn-red);
  --bs-btn-active-border-color: var(--hl-btn-red);
}

.btn-light-secondary {
  --bs-btn-color: var(--hl-btn-blue);
  --bs-btn-bg: var(--hl-btn-blue-soft);
  --bs-btn-border-color: var(--hl-btn-blue-soft);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hl-btn-blue);
  --bs-btn-hover-border-color: var(--hl-btn-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hl-btn-blue);
  --bs-btn-active-border-color: var(--hl-btn-blue);
}

/* ==========================================================================
   Cards & stat tiles — the shared dashboard "chrome"
   ========================================================================== */

/* Apply the same premium card chrome to every plain Bootstrap/Metronic
   `.card` too — not just `.hl-card`. Many cards in this app are rendered
   dynamically from JS template strings (e.g. wwwroot/js/wsq.js) rather
   than from Razor markup, so they can never carry the `hl-card` class.
   Styling the base `.card` class means those get the consistent look for
   free, and any page not yet migrated to `.hl-card` still matches. Explicit
   Bootstrap utility overrides (`.p-3`, `.border-0`, `.shadow-none`, etc.)
   use `!important` and still win, so intentional deviations are unaffected. */
.card,
.hl-card {
  background: var(--hl-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  box-shadow: var(--hl-shadow-sm);
}

/* The Metronic bundle defines `.card .card-header { padding: 0 2.25rem;
   min-height: 70px }` as a compound selector, which beats a flat
   `.card-header` rule on specificity alone regardless of load order —
   that's what was zeroing out vertical header padding. Match the same
   compound selector here (same specificity, loaded later, so it wins) so
   every card header — Razor-rendered or JS-templated — gets real padding. */
.card-header,
.card .card-header {
  padding: 1.5rem 2rem;
  min-height: 0;
  border-bottom: 1px solid var(--hl-border);
  background-color: var(--hl-surface);
}

.card-body,
.card .card-body {
  padding: 2rem;
}

.card-title,
.card .card-header .card-title {
  font-family: var(--hl-font-display);
  font-weight: 600;
  color: var(--hl-text);
}

.hl-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--hl-border);
}

.hl-card-title {
  font-family: var(--hl-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--hl-text);
  margin: 0;
}

.hl-card-subtitle {
  color: var(--hl-text-muted);
  font-size: 0.85rem;
  margin: 0.2rem 0 0;
}

.hl-card-body {
  padding: 2rem;
}

/* Fixed-width card used in horizontal scroll rails (e.g. enrolled courses). */
.hl-enrolled-course-card {
  min-width: 220px;
  max-width: 260px;
}

/* Stat tile — the recurring "number + label" block on dashboards */
.hl-stat {
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius);
  background: var(--hl-surface-muted);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hl-stat-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hl-text-muted);
}

.hl-stat-value {
  font-family: var(--hl-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hl-text);
}

.hl-stat-hint {
  font-size: 0.85rem;
  color: var(--hl-text-muted);
}

/* Pill / status chip, matching the ETM pattern used for badges */
.hl-pill {
  border-radius: var(--hl-radius-pill);
  padding: 0.15rem 0.75rem;
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.hl-pill-primary {
  background: var(--hl-primary-soft-strong);
  color: var(--hl-primary);
}

/* ==========================================================================
   Tables & DataTables — one premium look for every grid in the app.
   Promoted from the ETM-only `.datatable-shell` / `.modern-table` pattern
   (previously scoped under `.etm-dashboard`) so any view can opt in.
   ========================================================================== */

.hl-table-shell {
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius);
  padding: 1rem;
  background: var(--hl-surface);
  box-shadow: var(--hl-shadow-sm);
}

.hl-table-shell .hl-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  color: var(--hl-text-muted);
}

.hl-table-scroll {
  max-height: 70vh;
  overflow: auto;
  border-radius: var(--hl-radius-sm);
}

/* Keep every table and DataTable column consistent: headers and cell values
   always start at the left edge, including legacy alignment utility classes. */
table th,
table td {
  text-align: left !important;
}

.hl-table thead th,
.hl-table-shell table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hl-border);
  color: var(--hl-text-muted);
  background-color: var(--hl-surface-muted);
  white-space: nowrap;
}

.hl-table tbody td,
.hl-table-shell table tbody td {
  vertical-align: middle;
  border-color: #f0f2fa;
  color: var(--hl-text);
}

.hl-table tbody tr:hover,
.hl-table-shell table tbody tr:hover {
  background-color: var(--hl-primary-soft-strong);
}

/* Table cell holding multiple action buttons/forms — keeps table-cell
   layout (no flex/grid display override) while spacing the actions out. */
.hl-action-group {
  white-space: nowrap;
}

.hl-action-group > * + * {
  margin-left: 0.5rem;
}

/* --------------------------------------------------------------------------
   Table actions — semantic, compact controls for row-level operations.
   Keep these separate from the global button palette: table actions need a
   predictable meaning (view/edit/delete) even when page-level button usage
   changes.
   -------------------------------------------------------------------------- */

.hl-table-actions {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  white-space: nowrap;
}

.hl-table-action {
  --hl-table-action-bg: var(--hl-surface-muted);
  --hl-table-action-border: var(--hl-border);
  --hl-table-action-color: var(--hl-text-muted);
  --hl-table-action-hover-bg: var(--hl-primary-soft);
  --hl-table-action-hover-border: var(--hl-primary);
  --hl-table-action-hover-color: var(--hl-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--hl-table-action-border);
  border-radius: var(--hl-radius-sm);
  background-color: var(--hl-table-action-bg);
  color: var(--hl-table-action-color);
  line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}

.hl-table-action:hover,
.hl-table-action:focus-visible {
  background-color: var(--hl-table-action-hover-bg);
  border-color: var(--hl-table-action-hover-border);
  color: var(--hl-table-action-hover-color);
}

.hl-table-action:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--hl-primary-rgb), 0.2);
}

.hl-table-action:disabled,
.hl-table-action.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.hl-table-action--view,
.hl-table-action--edit {
  --hl-table-action-bg: var(--hl-primary-soft);
  --hl-table-action-border: var(--hl-primary-soft);
  --hl-table-action-color: var(--hl-primary);
  --hl-table-action-hover-bg: var(--hl-primary);
  --hl-table-action-hover-border: var(--hl-primary);
  --hl-table-action-hover-color: #fff;
}

.hl-table-action--primary {
  --hl-table-action-bg: var(--hl-btn-red);
  --hl-table-action-border: var(--hl-btn-red);
  --hl-table-action-color: #fff;
  --hl-table-action-hover-bg: var(--hl-btn-red-hover);
  --hl-table-action-hover-border: var(--hl-btn-red-hover);
  --hl-table-action-hover-color: #fff;
}

.hl-table-action--warning {
  --hl-table-action-bg: #fff4d6;
  --hl-table-action-border: #f6d889;
  --hl-table-action-color: #9a6700;
  --hl-table-action-hover-bg: var(--hl-warning);
  --hl-table-action-hover-border: var(--hl-warning);
  --hl-table-action-hover-color: #fff;
}

.hl-table-action--danger {
  --hl-table-action-bg: var(--hl-btn-red-soft);
  --hl-table-action-border: var(--hl-btn-red-soft);
  --hl-table-action-color: var(--hl-danger);
  --hl-table-action-hover-bg: var(--hl-danger);
  --hl-table-action-hover-border: var(--hl-danger);
  --hl-table-action-hover-color: #fff;
}

/* Compatibility mapping for action buttons in legacy Razor templates that
   already sit inside the shared action group. */
.hl-table-actions > .btn-icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--hl-radius-sm);
}

.hl-table-actions > .btn-light-primary {
  color: var(--hl-primary);
  background-color: var(--hl-primary-soft);
  border-color: var(--hl-primary-soft);
}

.hl-table-actions > .btn-light-primary:hover,
.hl-table-actions > .btn-light-primary:focus-visible {
  color: #fff;
  background-color: var(--hl-primary);
  border-color: var(--hl-primary);
}

.hl-table-actions > .btn-light-danger {
  color: var(--hl-danger);
  background-color: var(--hl-btn-red-soft);
  border-color: var(--hl-btn-red-soft);
}

.hl-table-actions > .btn-light-danger:hover,
.hl-table-actions > .btn-light-danger:focus-visible {
  color: #fff;
  background-color: var(--hl-danger);
  border-color: var(--hl-danger);
}

/* Labelled actions are reserved for a primary workflow action in a row. */
.hl-table-action-label {
  width: auto;
  min-width: 6.5rem;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .hl-table-actions {
    gap: 0.35rem;
  }

  .hl-table-action {
    width: 1.875rem;
    height: 1.875rem;
  }

  .hl-table-action-label {
    width: auto;
    min-width: 6.5rem;
  }
}

.hl-table-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--hl-text-muted);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   jQuery DataTables (Metronic "kt_datatable" convention) — restyle the
   plugin's own chrome (search/length controls, info text, pagination) so
   every one of the ~17 DataTable instances in the app inherits the same
   premium look with zero per-view JS changes.
   -------------------------------------------------------------------------- */

.hl-table-shell .dataTables_wrapper .dataTables_length select,
.hl-table-shell .dataTables_wrapper .dataTables_filter input {
  border-radius: var(--hl-radius-sm);
  border-color: var(--hl-border);
}

.hl-table-shell .dataTables_wrapper .dataTables_info,
.hl-table-shell .dataTables_wrapper .dataTables_length,
.hl-table-shell .dataTables_wrapper .dataTables_filter {
  color: var(--hl-text-muted);
  font-size: 0.85rem;
}

.hl-table-shell .dataTables_wrapper .dataTables_paginate .page-link {
  border-radius: var(--hl-radius-sm);
  color: var(--hl-text);
  border-color: var(--hl-border);
}

.hl-table-shell .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background-color: var(--hl-primary);
  border-color: var(--hl-primary);
  color: #fff;
}

.hl-table-shell .dataTables_wrapper .dataTables_paginate .page-link:hover {
  background-color: var(--hl-primary-soft);
  color: var(--hl-primary);
}

/* Shared pagination/footer markup already used across the app
   (.datatable-footer, .datatable-footer-pagination) — align it visually. */
.datatable-footer {
  border-top: 1px solid var(--hl-border);
  padding-top: 0.75rem;
}

/* ==========================================================================
   Form controls — inputs, selects, textareas, checks. One consistent look
   app-wide (not scoped to cards/tables), matching the same simple/modern/
   minimal/premium bar. Focus ring uses the brand navy accent (not the
   button red/blue) since inputs aren't buttons.
   ========================================================================== */

.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid {
  border-color: var(--hl-border);
  border-radius: var(--hl-radius-sm);
  color: var(--hl-text);
  background-color: var(--hl-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control {
  padding: 0.65rem 0.9rem;
}

/* `.form-select` needs its right-side padding left alone — Bootstrap
   reserves that space for the dropdown chevron background-image. Setting a
   uniform padding here (as an earlier pass did) shrinks that space and
   makes the chevron overlap the selected text/number. Only touch the
   sides that don't hold the icon. */
.form-select {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  padding-left: 0.9rem;
}

.form-select-sm {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 0.75rem;
}

.form-control.form-control-solid,
.form-select.form-select-solid {
  background-color: var(--hl-surface-muted);
}

.form-control::placeholder {
  color: var(--hl-text-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
  border-color: var(--hl-primary);
  background-color: var(--hl-surface);
  box-shadow: 0 0 0 0.2rem var(--hl-primary-soft-strong);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--hl-surface-muted);
  color: var(--hl-text-muted);
}

textarea.form-control {
  border-radius: var(--hl-radius);
}

.input-group-text {
  border-color: var(--hl-border);
  background-color: var(--hl-surface-muted);
  color: var(--hl-text-muted);
  border-radius: var(--hl-radius-sm);
}

.form-label {
  color: var(--hl-text);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.form-check-input {
  border-color: var(--hl-border);
}

.form-check-input:checked {
  background-color: var(--hl-primary);
  border-color: var(--hl-primary);
}

.form-check-input:focus {
  border-color: var(--hl-primary);
  box-shadow: 0 0 0 0.2rem var(--hl-primary-soft-strong);
}

/* Metronic switches use a wrapped background element rather than the
   native checkbox background — align the "on" state with the brand navy. */
.form-check.form-switch .form-check-input:checked {
  background-color: var(--hl-primary);
  border-color: var(--hl-primary);
}