/* ============================================================
   Datly Design System — Modern UI Layer
   Overrides KTUI with a refined, consistent design language
   Supports light & dark modes via CSS custom properties
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────── */
:root,
html[data-kt-theme-mode="light"] {
  --dl-ink: #0a1b3d;
  --dl-ink-2: #3a4b6e;
  --dl-ink-3: #6b7b98;
  --dl-line: #e3e8f2;
  --dl-line-2: #eef2f9;
  --dl-bg: #ffffff;
  --dl-bg-soft: #f6f8fc;
  --dl-bg-tint: #eef3ff;
  --dl-surface: #ffffff;
  --dl-surface-hover: #f9fafb;
  --dl-blue: #1b4dff;
  --dl-blue-2: #4f75ff;
  --dl-blue-deep: #0832c4;
  --dl-mint: #19c7a0;
  --dl-mint-soft: #e8fbf4;
  --dl-coral: #ff7a59;
  --dl-coral-soft: #ffefe9;
  --dl-amber: #ffb13d;
  --dl-amber-soft: #fff5e0;
  --dl-indigo: #7a5bff;
  --dl-indigo-soft: #eceaff;
  --dl-sky: #0284c7;
  --dl-sky-soft: #e0f2fe;
  --dl-red: #ef4444;
  --dl-red-soft: #fef2f2;
  --dl-green: #22c55e;
  --dl-green-soft: #f0fdf4;
  --dl-yellow: #eab308;
  --dl-yellow-soft: #fefce8;
  --dl-maxw: 1280px;
  --dl-r-sm: 8px;
  --dl-r: 12px;
  --dl-r-lg: 16px;
  --dl-r-xl: 22px;
  --dl-r-2xl: 28px;
  --dl-shadow-sm: 0 1px 2px rgba(10, 27, 61, 0.04), 0 2px 6px rgba(10, 27, 61, 0.04);
  --dl-shadow: 0 1px 2px rgba(10, 27, 61, 0.04), 0 12px 24px -8px rgba(10, 27, 61, 0.1), 0 32px 60px -20px rgba(10, 27, 61, 0.14);
  --dl-shadow-lg: 0 1px 2px rgba(10, 27, 61, 0.04), 0 18px 38px -10px rgba(10, 27, 61, 0.12), 0 50px 90px -20px rgba(10, 27, 61, 0.18);
  --dl-shadow-inset: inset 0 1px 2px rgba(10, 27, 61, 0.04);
  --dl-ring: 0 0 0 3px rgba(27, 77, 255, 0.15);
  --dl-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --dl-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --dl-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html.dark,
html[data-kt-theme-mode="dark"] {
  /* Graphite: quiet neutral-cool surfaces, high-contrast text, one accent.
     Depth comes from elevation steps, not colored tints or glows. */
  --dl-ink: #f2f4f8;
  --dl-ink-2: #cdd3df;
  --dl-ink-3: #9ba3b4;
  --dl-line: #232935;
  --dl-line-2: #303846;
  --dl-bg: #0a0c10;
  --dl-bg-soft: #0e1116;
  --dl-bg-tint: #181d29;
  --dl-surface: #12151c;
  --dl-surface-hover: #1b202a;
  --dl-blue: #6c8cff;
  --dl-blue-2: #8fa7ff;
  --dl-blue-deep: #5472ec;
  --dl-mint: #2bd4ab;
  --dl-mint-soft: rgba(43, 212, 171, 0.13);
  --dl-coral: #ff8a66;
  --dl-coral-soft: rgba(255, 138, 102, 0.13);
  --dl-amber: #fbbf24;
  --dl-amber-soft: rgba(251, 191, 36, 0.12);
  --dl-indigo: #9b8cff;
  --dl-indigo-soft: rgba(155, 140, 255, 0.14);
  --dl-sky: #4cc3ff;
  --dl-sky-soft: rgba(76, 195, 255, 0.13);
  --dl-red: #f87171;
  --dl-red-soft: rgba(248, 113, 113, 0.13);
  --dl-green: #4ade80;
  --dl-green-soft: rgba(74, 222, 128, 0.13);
  --dl-yellow: #facc15;
  --dl-yellow-soft: rgba(250, 204, 21, 0.12);
  /* Elevation: hairline top highlight + deep soft shadows */
  --dl-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --dl-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 32px -12px rgba(0, 0, 0, 0.55), 0 40px 80px -24px rgba(0, 0, 0, 0.6);
  --dl-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 64px 120px -24px rgba(0, 0, 0, 0.65);
  --dl-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  --dl-ring: 0 0 0 3px rgba(108, 140, 255, 0.3);

  /* Re-align ALL KTUI/shadcn base tokens with the palette so menus, dropdowns,
     inputs, select2 and the calendar follow it (the stock dark tokens are
     neutral zinc with muted text — the source of most contrast failures). */
  --background: var(--dl-bg);
  --foreground: var(--dl-ink);
  --card: var(--dl-surface);
  --card-foreground: var(--dl-ink);
  --popover: var(--dl-surface);
  --popover-foreground: var(--dl-ink);
  --primary: var(--dl-blue);
  --primary-foreground: #ffffff;
  --secondary: var(--dl-bg-tint);
  --secondary-foreground: var(--dl-ink);
  --muted: var(--dl-bg-soft);
  --muted-foreground: var(--dl-ink-3);
  --accent: var(--dl-surface-hover);
  --accent-foreground: var(--dl-ink);
  /* Bright red for destructive TEXT/borders (readable on dark surfaces);
     solid destructive backgrounds get a deep-red override further below. */
  --destructive: #f87171;
  --destructive-foreground: #ffffff;
  --border: var(--dl-line);
  --input: var(--dl-line);
  --ring: var(--dl-blue);
  --mono: var(--dl-ink);
  --mono-foreground: var(--dl-bg);
}

/* ============================================================
   DARK MODE — refinements & contrast fixes (dark only, light untouched)
   ============================================================ */

html.dark ::selection,
html[data-kt-theme-mode="dark"] ::selection {
  background: rgba(108, 140, 255, 0.35);
  color: #ffffff;
}

/* Scrollbars blended into the graphite surfaces */
html.dark * {
  scrollbar-color: #2b3342 transparent;
}

html.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.dark ::-webkit-scrollbar-track {
  background: transparent;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #2b3342;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #3a4354;
  background-clip: padding-box;
}

/* Cards: lift with a brighter border instead of dropping it */
html.dark .dl-card:hover,
html[data-kt-theme-mode="dark"] .dl-card:hover {
  border-color: var(--dl-line-2);
}

/* Sidebar: quiet accent tint for the active item (no glows) */
html.dark .dl-sidebar .kt-menu-item.active > .kt-menu-link,
html.dark .dl-sidebar .kt-menu-item.show > .kt-menu-link,
html[data-kt-theme-mode="dark"] .dl-sidebar .kt-menu-item.active > .kt-menu-link,
html[data-kt-theme-mode="dark"] .dl-sidebar .kt-menu-item.show > .kt-menu-link {
  background: rgba(108, 140, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(108, 140, 255, 0.16);
}

/* Primary actions: solid accent, hover steps lighter (not deeper), and a
   restrained tinted shadow instead of the light-mode color halo */
html.dark .kt-btn-primary,
html[data-kt-theme-mode="dark"] .kt-btn-primary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(108, 140, 255, 0.35);
}

html.dark .kt-btn-primary:hover,
html[data-kt-theme-mode="dark"] .kt-btn-primary:hover {
  background: var(--dl-blue-2) !important;
  border-color: var(--dl-blue-2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px -8px rgba(108, 140, 255, 0.45);
}

html.dark .dl-btn--primary,
html[data-kt-theme-mode="dark"] .dl-btn--primary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(108, 140, 255, 0.35);
}

html.dark .dl-btn--primary:hover,
html[data-kt-theme-mode="dark"] .dl-btn--primary:hover {
  background: var(--dl-blue-2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px -8px rgba(108, 140, 255, 0.45);
}

/* Solid destructive backgrounds stay deep so white text keeps passing;
     the bright --destructive token is only for text/borders/outlines. */
html.dark .kt-btn-destructive:not(.kt-btn-outline),
html.dark .kt-badge-destructive:not(.kt-badge-outline),
html.dark .dl-btn--danger,
html[data-kt-theme-mode="dark"] .kt-btn-destructive:not(.kt-btn-outline),
html[data-kt-theme-mode="dark"] .kt-badge-destructive:not(.kt-badge-outline),
html[data-kt-theme-mode="dark"] .dl-btn--danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

html.dark .dl-btn--danger:hover,
html[data-kt-theme-mode="dark"] .dl-btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

/* State borders full-strength read harsh on dark — soften to a tint */
html.dark .border-primary,
html[data-kt-theme-mode="dark"] .border-primary {
  border-color: rgba(108, 140, 255, 0.4);
}

html.dark .border-destructive,
html[data-kt-theme-mode="dark"] .border-destructive {
  border-color: rgba(248, 113, 113, 0.4);
}

/* KTUI outline badges: the stock dark variants pair mid-tone text with a
     near-black fill (e.g. green-600 on green-950 ≈ 2.5:1 — unreadable).
     Rebuild them as translucent tints with bright text. */
html.dark .kt-badge-outline.kt-badge-primary,
html[data-kt-theme-mode="dark"] .kt-badge-outline.kt-badge-primary {
  border-color: rgba(108, 140, 255, 0.35);
  background-color: rgba(108, 140, 255, 0.12);
  color: #9db4ff;
}

html.dark .kt-badge-outline.kt-badge-success,
html[data-kt-theme-mode="dark"] .kt-badge-outline.kt-badge-success {
  border-color: rgba(74, 222, 128, 0.3);
  background-color: rgba(74, 222, 128, 0.1);
  color: #86efac;
}

html.dark .kt-badge-outline.kt-badge-destructive,
html[data-kt-theme-mode="dark"] .kt-badge-outline.kt-badge-destructive {
  border-color: rgba(248, 113, 113, 0.32);
  background-color: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

html.dark .kt-badge-outline.kt-badge-warning,
html[data-kt-theme-mode="dark"] .kt-badge-outline.kt-badge-warning {
  border-color: rgba(251, 191, 36, 0.3);
  background-color: rgba(251, 191, 36, 0.1);
  color: #fcd34d;
}

html.dark .kt-badge-outline.kt-badge-info,
html[data-kt-theme-mode="dark"] .kt-badge-outline.kt-badge-info {
  border-color: rgba(167, 139, 250, 0.32);
  background-color: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
}

/* Card brand logos (Visa/Mastercard SVGs) are drawn in dark brand colors —
     illegible on dark surfaces. Sit them on a small white chip. */
html.dark img[src*="brand-logos"],
html[data-kt-theme-mode="dark"] img[src*="brand-logos"] {
  background: #ffffff;
  border-radius: 6px;
  padding: 2px 6px;
  box-sizing: content-box;
}

/* Modal scrim: deeper than the shared rgba black */
html.dark .dl-modal-overlay,
html[data-kt-theme-mode="dark"] .dl-modal-overlay {
  background: rgba(2, 4, 8, 0.66);
}

/* ── Base resets ────────────────────────────────────────── */
* {
  font-family: var(--dl-font);
}

a {
  color: var(--dl-blue);
  text-decoration: none;
  transition: color var(--dl-transition);
}

a:hover {
  color: var(--dl-blue-deep);
}

/* ── Scroll reveal ──────────────────────────────────────── */
.dl-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.dl-reveal.dl-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   CARDS
   ============================================================ */
.dl-card {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  box-shadow: var(--dl-shadow-sm);
  transition: box-shadow var(--dl-transition), transform var(--dl-transition), border-color var(--dl-transition);
  overflow: hidden;
}

.dl-card:hover {
  box-shadow: var(--dl-shadow);
  border-color: transparent;
}

.dl-card-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dl-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dl-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.dl-card-subtitle {
  font-size: 13px;
  color: var(--dl-ink-3);
  margin: 0;
}

.dl-card-body {
  padding: 20px 24px;
}

.dl-card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--dl-line);
  background: var(--dl-bg-soft);
}

/* Override KTUI cards */
.kt-card.dl-card {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  box-shadow: var(--dl-shadow-sm);
}

.kt-card.dl-card .kt-card-header {
  padding: 20px 24px 0;
}

.kt-card.dl-card .kt-card-content {
  padding: 20px 24px;
}

/* ============================================================
   STAT CARDS (small-box replacement)
   ============================================================ */
.dl-stat {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--dl-shadow-sm);
  transition: transform var(--dl-transition), box-shadow var(--dl-transition);
  position: relative;
  overflow: hidden;
}

.dl-stat::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.06;
  transition: opacity var(--dl-transition-slow);
}

/* Accent line that sweeps in from the left on hover */
.dl-stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--dl-r-xl) var(--dl-r-xl) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dl-transition-slow);
}

.dl-stat:hover {
  border-color: var(--dl-line-2);
}

.dl-stat:hover::before {
  opacity: 0.12;
}

.dl-stat:hover::after {
  transform: scaleX(1);
}

.dl-stat:hover .dl-stat-icon {
  transform: scale(1.08);
}

.dl-stat--info::before, .dl-stat--info::after { background: var(--dl-blue); }
.dl-stat--success::before, .dl-stat--success::after { background: var(--dl-green); }
.dl-stat--warning::before, .dl-stat--warning::after { background: var(--dl-amber); }
.dl-stat--danger::before, .dl-stat--danger::after { background: var(--dl-red); }
.dl-stat--mint::before, .dl-stat--mint::after { background: var(--dl-mint); }

.dl-stat--info::after { background: linear-gradient(90deg, var(--dl-blue), var(--dl-blue-2)); }
.dl-stat--success::after { background: linear-gradient(90deg, var(--dl-green), #4ade80); }
.dl-stat--warning::after { background: linear-gradient(90deg, var(--dl-amber), #ffc56b); }
.dl-stat--danger::after { background: linear-gradient(90deg, var(--dl-red), #ff8a8a); }
.dl-stat--mint::after { background: linear-gradient(90deg, var(--dl-mint), #5ee0c4); }

.dl-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--dl-r-lg);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform var(--dl-transition);
}

.dl-stat--info .dl-stat-icon { background: var(--dl-bg-tint); color: var(--dl-blue); }
.dl-stat--success .dl-stat-icon { background: var(--dl-green-soft); color: var(--dl-green); }
.dl-stat--warning .dl-stat-icon { background: var(--dl-amber-soft); color: var(--dl-amber); }
.dl-stat--danger .dl-stat-icon { background: var(--dl-red-soft); color: var(--dl-red); }
.dl-stat--mint .dl-stat-icon { background: var(--dl-mint-soft); color: var(--dl-mint); }

.dl-stat-content {
  flex: 1;
  min-width: 0;
}

.dl-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--dl-ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.dl-stat-label {
  font-size: 13px;
  color: var(--dl-ink-3);
  font-weight: 500;
}

.dl-stat-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--dl-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  transition: gap var(--dl-transition);
}

.dl-stat-link:hover {
  gap: 8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--dl-r);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--dl-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.dl-btn:hover {
  transform: translateY(-1px);
}

.dl-btn:active {
  transform: translateY(0);
}

.dl-btn--primary {
  background: var(--dl-blue);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(27, 77, 255, 0.35);
}

.dl-btn--primary:hover {
  background: var(--dl-blue-deep);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(27, 77, 255, 0.45);
}

.dl-btn--secondary {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
  border-color: var(--dl-line);
}

.dl-btn--secondary:hover {
  background: var(--dl-surface-hover);
  border-color: var(--dl-ink-3);
}

.dl-btn--ghost {
  background: transparent;
  color: var(--dl-ink-2);
}

.dl-btn--ghost:hover {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
}

.dl-btn--danger {
  background: var(--dl-red);
  color: #fff;
}

.dl-btn--danger:hover {
  background: #dc2626;
  color: #fff;
}

.dl-btn--success {
  background: var(--dl-green);
  color: #fff;
}

.dl-btn--success:hover {
  background: #16a34a;
  color: #fff;
}

.dl-btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.dl-btn--lg {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
}

.dl-btn--icon {
  width: 40px;
  padding: 0;
}

.dl-btn--icon.dl-btn--sm {
  width: 32px;
}

.dl-btn--full {
  width: 100%;
}

.dl-btn:disabled,
.dl-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Override KTUI buttons — apply to ALL kt-btn, not just .dl-btn */
.kt-btn {
  border-radius: var(--dl-r);
  font-weight: 600;
  transition: all var(--dl-transition);
}

.kt-btn:not(.kt-btn-icon):not(.kt-btn-xs):not(.kt-btn-sm):not(.kt-btn-lg) {
  height: 34px;
  padding: 0 20px;
}

.kt-btn-primary {
  background: var(--dl-blue) !important;
  color: #fff !important;
  border-color: var(--dl-blue) !important;
  box-shadow: 0 4px 12px -2px rgba(27, 77, 255, 0.35);
}

.kt-btn-primary:hover {
  background: var(--dl-blue-deep) !important;
  color: #fff !important;
  border-color: var(--dl-blue-deep) !important;
  box-shadow: 0 6px 16px -4px rgba(27, 77, 255, 0.45);
}

.kt-btn-primary .ki-filled,
.kt-btn-primary .ki-outline,
.kt-btn-primary span,
.kt-btn-primary i,
.kt-btn-primary svg {
  color: #fff !important;
  fill: #fff !important;
}

.kt-btn-outline {
  background: transparent !important;
  color: var(--dl-ink) !important;
  border-color: var(--dl-line) !important;
}

.kt-btn-outline:hover {
  background: var(--dl-bg-soft) !important;
  border-color: var(--dl-ink-3) !important;
}

.kt-btn-outline .ki-filled,
.kt-btn-outline .ki-outline,
.kt-btn-outline span,
.kt-btn-outline i,
.kt-btn-outline svg {
  color: var(--dl-ink) !important;
  fill: var(--dl-ink) !important;
}

.kt-btn-outline.kt-btn-danger {
  color: var(--dl-red) !important;
  border-color: var(--dl-red) !important;
}

.kt-btn-outline.kt-btn-danger:hover {
  background: var(--dl-red-soft) !important;
}

.kt-btn-outline.kt-btn-danger span,
.kt-btn-outline.kt-btn-danger i,
.kt-btn-outline.kt-btn-danger svg {
  color: var(--dl-red) !important;
}

.kt-btn-outline.kt-btn-success {
  color: var(--dl-green) !important;
  border-color: var(--dl-green) !important;
}

.kt-btn-outline.kt-btn-success span,
.kt-btn-outline.kt-btn-success i,
.kt-btn-outline.kt-btn-success svg {
  color: var(--dl-green) !important;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.dl-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--dl-line);
  border-radius: var(--dl-r);
  background: var(--dl-surface);
  color: var(--dl-ink);
  font-size: 14px;
  transition: border-color var(--dl-transition), box-shadow var(--dl-transition);
  outline: none;
}

.dl-input::placeholder {
  color: var(--dl-ink-3);
}

.dl-input:hover {
  border-color: var(--dl-ink-3);
}

.dl-input:focus {
  border-color: var(--dl-blue);
  box-shadow: var(--dl-ring);
}

.dl-input:disabled {
  background: var(--dl-bg-soft);
  opacity: 0.6;
  cursor: not-allowed;
}

.dl-input--sm {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.dl-input--lg {
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
}

.dl-input--error {
  border-color: var(--dl-red);
}

.dl-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

textarea.dl-input {
  height: auto;
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}

select.dl-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7b98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Override KTUI inputs */
.kt-input.dl-input {
  border: 1.5px solid var(--dl-line);
  border-radius: var(--dl-r);
  height: 42px;
}

.dl-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dl-ink);
  margin-bottom: 6px;
}

.dl-form-hint {
  font-size: 12px;
  color: var(--dl-ink-3);
  margin-top: 4px;
}

.dl-form-error {
  font-size: 12px;
  color: var(--dl-red);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   TABLES
   ============================================================ */
.dl-table-wrap {
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  overflow: hidden;
  background: var(--dl-surface);
}

.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dl-table thead {
  background: var(--dl-bg-soft);
}

.dl-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--dl-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--dl-line);
}

.dl-table td {
  padding: 14px 16px;
  color: var(--dl-ink);
  border-bottom: 1px solid var(--dl-line);
  vertical-align: middle;
}

.dl-table tbody tr {
  transition: background var(--dl-transition);
}

.dl-table tbody tr:hover {
  background: var(--dl-bg-soft);
}

.dl-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.dl-badge--info { background: var(--dl-bg-tint); color: var(--dl-blue); }
.dl-badge--success { background: var(--dl-green-soft); color: var(--dl-green); }
.dl-badge--warning { background: var(--dl-amber-soft); color: var(--dl-amber); }
.dl-badge--danger { background: var(--dl-red-soft); color: var(--dl-red); }
.dl-badge--mint { background: var(--dl-mint-soft); color: var(--dl-mint); }
.dl-badge--neutral { background: var(--dl-bg-soft); color: var(--dl-ink-2); border: 1px solid var(--dl-line); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.dl-progress {
  width: 100%;
  height: 8px;
  background: var(--dl-bg-soft);
  border-radius: 999px;
  overflow: hidden;
}

.dl-progress-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dl-progress-bar--info { background: var(--dl-blue); }
.dl-progress-bar--success { background: var(--dl-green); }
.dl-progress-bar--warning { background: var(--dl-amber); }
.dl-progress-bar--danger { background: var(--dl-red); }

/* ============================================================
   AVATAR
   ============================================================ */
.dl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.dl-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.dl-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.dl-avatar--xl { width: 64px; height: 64px; font-size: 24px; }

.dl-avatar--blue { background: linear-gradient(135deg, var(--dl-blue), var(--dl-blue-2)); }
.dl-avatar--mint { background: linear-gradient(135deg, var(--dl-mint), #2dd4a8); }
.dl-avatar--coral { background: linear-gradient(135deg, var(--dl-coral), #ff9a7a); }
.dl-avatar--amber { background: linear-gradient(135deg, var(--dl-amber), #ffc56b); }
.dl-avatar--indigo { background: linear-gradient(135deg, var(--dl-indigo), #a89aff); }

.dl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.dl-empty {
  text-align: center;
  padding: 60px 24px;
}

.dl-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--dl-bg-soft);
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--dl-ink-3);
}

.dl-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dl-ink);
  margin: 0 0 8px;
}

.dl-empty-desc {
  font-size: 14px;
  color: var(--dl-ink-3);
  margin: 0 0 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   MODAL / DIALOG
   ============================================================ */

/* KTUI modals (.kt-modal, used by confirm dialogs, the generic
   information dialog, etc.) toggle a plain "open" class and rely on
   `transitionDuration` to know when to flip display:none — without a
   transition they pop in/out instantly. Give them the same fade + scale
   treatment as our custom .dl-modal-overlay. */
.kt-modal {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kt-modal.open {
  opacity: 1;
}

.kt-modal .kt-modal-content {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  transform: scale(0.95) translateY(16px);
  opacity: 0;
  border-radius: var(--dl-r-2xl);
  box-shadow: var(--dl-shadow-lg);
}

.kt-modal.open .kt-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.kt-modal-content {
  max-height: calc(100vh - 4rem);
}

.kt-modal-body {
  min-height: 0;
}


.dl-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}

.dl-help::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--mono);
  color: var(--background);
  padding: 4px 8px;
  border-radius: var(--dl-r-sm);
  font-size: 11px;
  line-height: 1.2;
  font-family: var(--dl-font);
  box-shadow: var(--dl-shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 60;
}

.dl-help:hover::after,
.dl-help:focus-visible::after {
  opacity: 1;
}

.dl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.dl-modal-overlay.dl-open {
  opacity: 1;
  visibility: visible;
}

.dl-modal {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-2xl);
  box-shadow: var(--dl-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-modal-overlay.dl-open .dl-modal {
  transform: scale(1) translateY(0);
}

.dl-modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dl-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dl-ink);
  margin: 0;
}

.dl-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--dl-r-sm);
  border: none;
  background: transparent;
  color: var(--dl-ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dl-transition), color var(--dl-transition);
}

.dl-modal-close:hover {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
}

.dl-modal-body {
  padding: 16px 24px;
}

.dl-modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
}

/* ============================================================
   TOAST / NOTIFICATION
   ============================================================ */
.dl-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.dl-toast {
  pointer-events: auto;
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  box-shadow: var(--dl-shadow);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 320px;
  max-width: 420px;
  animation: dl-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-toast.dl-toast-out {
  animation: dl-toast-out 0.25s ease forwards;
}

.dl-toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
}

.dl-toast--success .dl-toast-icon { background: var(--dl-green-soft); color: var(--dl-green); }
.dl-toast--error .dl-toast-icon { background: var(--dl-red-soft); color: var(--dl-red); }
.dl-toast--warning .dl-toast-icon { background: var(--dl-amber-soft); color: var(--dl-amber); }
.dl-toast--info .dl-toast-icon { background: var(--dl-bg-tint); color: var(--dl-blue); }

.dl-toast-content {
  flex: 1;
}

.dl-toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dl-ink);
  margin: 0 0 2px;
}

.dl-toast-message {
  font-size: 13px;
  color: var(--dl-ink-3);
  margin: 0;
}

@keyframes dl-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(40px) scale(0.95); }
}

/* ============================================================
    SIDEBAR MODERN OVERRIDES
    ============================================================ */

/* Override the demo1 sidebar width variables with higher specificity
   (body.demo1.dl-sidebar > .demo1) so the collapsed state actually
   shrinks the sidebar instead of just hiding the labels. */
body.demo1.dl-sidebar {
  --sidebar-width: 260px;
  --sidebar-default-width: 260px;
  --sidebar-width-collapse: 76px;
}

body.demo1.dl-sidebar.kt-sidebar-collapse {
  --sidebar-width: var(--sidebar-width-collapse);
}

/* Disable demo1's hover-to-expand behaviour while collapsed: our menu
   labels stay hidden, so an expanding sidebar on hover would look broken. */
body.demo1.dl-sidebar.kt-sidebar-collapse .kt-sidebar,
body.demo1.dl-sidebar.kt-sidebar-collapse .kt-sidebar:hover:not(.animating) {
  width: var(--sidebar-width-collapse);
}

.dl-sidebar .kt-sidebar {
  background: var(--dl-bg);
  border-right: 1px solid var(--dl-line);
  display: flex;
  flex-direction: column;
}

.dl-sidebar .kt-sidebar-header {
  height: var(--header-height);
  padding: 0 20px;
  border-bottom: 1px solid var(--dl-line);
  flex-shrink: 0;
}

.dl-sidebar .kt-sidebar-content {
  padding: 12px 12px 12px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dl-sidebar #sidebar_scrollable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  height: auto !important;
}

/* Logo swap between expanded (wordmark) and collapsed (icon-only) */
.dl-sidebar-logo-collapsed {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .kt-sidebar-header {
  padding: 0 12px;
  justify-content: center;
}

.dl-sidebar.kt-sidebar-collapse .dl-sidebar-logo-full {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .dl-sidebar-logo-collapsed {
  display: flex;
}

.dl-sidebar .kt-menu {
  gap: 2px;
}

.dl-sidebar .kt-menu-link {
  border-radius: var(--dl-r);
  padding: 9px 12px;
  transition: all var(--dl-transition);
  color: var(--dl-ink-2);
  gap: 12px;
}

.dl-sidebar .kt-menu-link:hover {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
}

.dl-sidebar .kt-menu-item.active > .kt-menu-link,
.dl-sidebar .kt-menu-item.show > .kt-menu-link {
  background: var(--dl-bg-tint);
  color: var(--dl-blue);
}

.dl-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title,
.dl-sidebar .kt-menu-item.show > .kt-menu-link .kt-menu-title {
  color: var(--dl-blue);
  font-weight: 600;
}

.dl-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon,
.dl-sidebar .kt-menu-item.show > .kt-menu-link .kt-menu-icon {
  color: var(--dl-blue);
}

.dl-sidebar .kt-menu-icon {
  color: var(--dl-ink-3);
  width: 22px;
  transition: color var(--dl-transition);
}

.dl-sidebar .kt-menu-title {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  transition: color var(--dl-transition);
}

.dl-sidebar .kt-menu-accordion {
  padding-left: 34px;
  margin-top: 2px;
  gap: 2px;
}

.dl-sidebar .kt-menu-accordion::before {
  left: 14px;
  border-color: var(--dl-line);
}

.dl-sidebar .kt-menu-accordion .kt-menu-link {
  padding: 7px 12px;
  gap: 10px;
}

.dl-sidebar .kt-menu-bullet::before {
  background: var(--dl-ink-3);
  transition: background var(--dl-transition);
}

.dl-sidebar .kt-menu-item.active .kt-menu-bullet::before {
  background: var(--dl-blue);
}

.dl-sidebar .kt-menu-arrow {
  color: var(--dl-ink-3);
  transition: transform var(--dl-transition), color var(--dl-transition);
}

.dl-sidebar .kt-sidebar-footer {
  height: 64px;
  flex-shrink: 0;
  padding: 0 16px;
  border-top: 1px solid var(--dl-line);
  background: var(--dl-bg-soft);
}

.dl-sidebar .kt-sidebar-footer .dl-avatar {
  box-shadow: 0 0 0 2px var(--dl-bg), 0 0 0 4px var(--dl-line);
}

/* Collapsed sidebar */
.dl-sidebar.kt-sidebar-collapse .kt-menu-title,
.dl-sidebar.kt-sidebar-collapse .kt-menu-arrow,
.dl-sidebar.kt-sidebar-collapse .kt-sidebar-footer .flex-col {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .kt-menu-accordion {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .kt-menu-link {
  justify-content: center;
  padding-inline: 0;
  gap: 0;
}

.dl-sidebar.kt-sidebar-collapse .kt-sidebar-footer {
  justify-content: center;
  padding: 0;
}

/* ============================================================
   HEADER MODERN OVERRIDES
   ============================================================ */
.dl-header .kt-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--dl-line);
}

html.dark .dl-header .kt-header,
html[data-kt-theme-mode="dark"] .dl-header .kt-header {
  background: rgba(10, 12, 16, 0.72);
}

/* ============================================================
   FOOTER — visually align with the sidebar footer bar
   ============================================================ */
.kt-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--dl-line);
  background: var(--dl-bg-soft);
}

/* ============================================================
   WIZARD / STEPS
   ============================================================ */
.dl-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}

.dl-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative;
}

.dl-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--dl-line);
  margin: 0 12px;
}

.dl-step--completed:not(:last-child)::after {
  background: var(--dl-blue);
}

.dl-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--dl-line);
  color: var(--dl-ink-3);
  background: var(--dl-surface);
  flex-shrink: 0;
  transition: all var(--dl-transition);
}

.dl-step--active .dl-step-number {
  border-color: var(--dl-blue);
  color: var(--dl-blue);
  background: var(--dl-bg-tint);
}

.dl-step--completed .dl-step-number {
  border-color: var(--dl-blue);
  background: var(--dl-blue);
  color: #fff;
}

.dl-step-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dl-ink-3);
  white-space: nowrap;
}

.dl-step--active .dl-step-label {
  color: var(--dl-ink);
  font-weight: 600;
}

.dl-step--completed .dl-step-label {
  color: var(--dl-ink-2);
}

/* ============================================================
   CHECKBOX / TOGGLE
   ============================================================ */
.dl-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--dl-ink);
}

.dl-checkbox input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--dl-line);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dl-transition);
  position: relative;
  flex-shrink: 0;
}

.dl-checkbox input[type="checkbox"]:checked {
  background: var(--dl-blue);
  border-color: var(--dl-blue);
}

.dl-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dl-checkbox input[type="checkbox"]:focus {
  box-shadow: var(--dl-ring);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.dl-skeleton {
  background: var(--dl-bg-soft);
  border-radius: var(--dl-r);
  position: relative;
  overflow: hidden;
}

.dl-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: dl-skeleton-shimmer 1.5s infinite;
}

html.dark .dl-skeleton::after,
html[data-kt-theme-mode="dark"] .dl-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

@keyframes dl-skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dl-skeleton--text {
  height: 14px;
  margin-bottom: 8px;
}

.dl-skeleton--text:last-child {
  width: 60%;
}

.dl-skeleton--heading {
  height: 24px;
  width: 40%;
  margin-bottom: 16px;
}

.dl-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.dl-skeleton--card {
  height: 120px;
  border-radius: var(--dl-r-xl);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.dl-section-header {
  margin-bottom: 24px;
}

.dl-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dl-ink);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.dl-section-desc {
  font-size: 14px;
  color: var(--dl-ink-3);
  margin: 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.dl-text-muted { color: var(--dl-ink-3); }
.dl-text-secondary { color: var(--dl-ink-2); }
.dl-text-primary { color: var(--dl-blue); }
.dl-text-success { color: var(--dl-green); }
.dl-text-danger { color: var(--dl-red); }
.dl-text-warning { color: var(--dl-amber); }

.dl-bg-muted { background: var(--dl-bg-soft); }
.dl-bg-tint { background: var(--dl-bg-tint); }

.dl-border { border: 1px solid var(--dl-line); }
.dl-border-b { border-bottom: 1px solid var(--dl-line); }
.dl-border-t { border-top: 1px solid var(--dl-line); }

.dl-rounded { border-radius: var(--dl-r); }
.dl-rounded-lg { border-radius: var(--dl-r-lg); }
.dl-rounded-xl { border-radius: var(--dl-r-xl); }

.dl-shadow-sm { box-shadow: var(--dl-shadow-sm); }
.dl-shadow { box-shadow: var(--dl-shadow); }
.dl-shadow-lg { box-shadow: var(--dl-shadow-lg); }

.dl-transition { transition: all var(--dl-transition); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dl-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-fade-in-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.dl-animate-in { animation: dl-fade-in 0.3s ease; }
.dl-animate-in-up { animation: dl-fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.dl-animate-in-down { animation: dl-fade-in-down 0.35s ease; }
.dl-animate-scale { animation: dl-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* ============================================================
   ICON BADGES (page/section headers)
   ============================================================ */
.dl-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--dl-r-lg);
  display: grid;
  place-items: center;
  font-size: 19px;
  flex-shrink: 0;
  background: var(--dl-bg-tint);
  color: var(--dl-blue);
}

.dl-icon-badge--success { background: var(--dl-green-soft); color: var(--dl-green); }

/* ============================================================
   WIDGET DOMAINS PAGE
   ============================================================ */
.dl-domain-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--dl-line);
}

.dl-domain-form .kt-input {
  flex: 1 1 240px;
}

.dl-domain-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  background: var(--dl-surface);
  overflow: hidden;
  max-height: 200px;
  transition: border-color var(--dl-transition), box-shadow var(--dl-transition), transform var(--dl-transition),
    opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.dl-domain-row:hover {
  border-color: var(--dl-line-2);
  box-shadow: var(--dl-shadow-sm);
  transform: translateX(2px);
}

.dl-domain-row-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dl-domain-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--dl-r);
  display: grid;
  place-items: center;
  background: var(--dl-green-soft);
  color: var(--dl-green);
  font-size: 16px;
  flex-shrink: 0;
}

.dl-domain-row-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--dl-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-domain-row-delete {
  color: var(--dl-ink-3);
  transition: color var(--dl-transition), background var(--dl-transition);
}

.dl-domain-row-delete:hover {
  color: var(--dl-red);
  background: var(--dl-red-soft);
}

.dl-row-leaving {
  opacity: 0;
  transform: scale(0.97);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}

.dl-domain-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--dl-ink-3);
}

.dl-domain-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dl-bg-tint);
  color: var(--dl-blue);
  font-size: 24px;
}

.dl-domain-empty p {
  font-size: 14px;
  max-width: 360px;
  margin: 0;
}

/* ============================================================
   VIEW TOGGLE (table/calendar segmented control)
   ============================================================ */
.dl-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r);
  background: var(--dl-bg-soft);
}

.dl-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: calc(var(--dl-r) - 3px);
  background: transparent;
  color: var(--dl-ink-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dl-transition);
}

.dl-view-toggle-btn:hover {
  color: var(--dl-ink);
}

.dl-view-toggle-btn.active {
  background: var(--dl-surface);
  color: var(--dl-blue);
  box-shadow: var(--dl-shadow-sm);
}

/* ============================================================
   LANGUAGE SWITCH (compact segmented control)
   ============================================================ */
.dl-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r);
  background: var(--dl-bg-soft);
}

.dl-lang-switch-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: calc(var(--dl-r) - 3px);
  color: var(--dl-ink-3);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dl-transition);
}

.dl-lang-switch-btn:hover {
  color: var(--dl-ink);
}

.dl-lang-switch-btn.active {
  background: var(--dl-surface);
  color: var(--dl-blue);
  box-shadow: var(--dl-shadow-sm);
  pointer-events: none;
}

/* ============================================================
   PUBLIC PAGE (LOGIN/SIGNUP) OVERRIDES
   ============================================================ */
.dl-auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dl-auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--dl-bg);
}

.dl-auth-form-card {
  width: 100%;
  max-width: 400px;
}

.dl-auth-brand-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: linear-gradient(135deg, var(--dl-blue-deep), var(--dl-blue));
  color: #fff;
  overflow: hidden;
}

.dl-auth-brand-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(400px 300px at 20% 80%, rgba(255,255,255,0.08), transparent 60%);
}

.dl-auth-brand-side > * {
  position: relative;
  z-index: 1;
}

.dl-auth-brand-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 16px;
}

.dl-auth-brand-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
}

/* ============================================================
   LOGIN FEATURE CARDS
   ============================================================ */
.feature-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(10, 27, 61, 0.12);
}

.feature-card:hover .ki-filled {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dl-auth-page {
    grid-template-columns: 1fr;
  }

  .dl-auth-brand-side {
    display: none;
  }
}

/* ── Large screens / 4K ───────────────────────────────── */
/* En monitores grandes (27"/32") el contenido dejaba mucho espacio sin usar; se amplía el
   contenedor de forma progresiva para aprovechar el ancho sin llegar a pantalla completa. */
@media (min-width: 1600px) {
  .kt-container-fixed {
    max-width: 1480px !important;
  }
}

@media (min-width: 1920px) {
  .kt-container-fixed {
    max-width: 1760px !important;
  }
}

@media (min-width: 2560px) {
  .kt-container-fixed {
    max-width: 2200px !important;
  }
}

@media (min-width: 3200px) {
  .kt-container-fixed {
    max-width: 2720px !important;
  }
}

.kt-container-fixed {
  max-width: var(--dl-maxw);
}

/* Nombre del titular de tarjeta: siempre en mayúsculas (como aparece en la tarjeta física). */
.dl-card-holder {
  text-transform: uppercase;
}
.dl-card-holder::placeholder {
  text-transform: none;
}

@media (max-width: 768px) {
  .dl-stat {
    padding: 16px;
  }

  .dl-stat-value {
    font-size: 24px;
  }

  .dl-card-body {
    padding: 16px;
  }

  .dl-table th,
  .dl-table td {
    padding: 10px 12px;
  }

  .dl-steps {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dl-step:not(:last-child)::after {
    display: none;
  }
}

/* ── Tiles de método de pago (checkout) ─────────────────────
   Escrito en CSS plano para no depender de la compilación de
   Tailwind (las variantes has-[:checked] arbitrarias no existen
   en el bundle si no se recompila el frontend). */
.dl-pay-tile {
  position: relative;
}

.dl-pay-tile:hover {
  border-color: rgba(27, 77, 255, 0.4);
}

.dl-pay-tile:has(input:checked) {
  border: 2px solid var(--dl-blue);
  background-color: rgba(27, 77, 255, 0.1);
}

/* SweetAlert2 toasts (showToast, position "top-end"): el contenedor
   `.swal2-container` es position:fixed + inset:0 con overflow-y propio.
   Durante la animación de entrada/salida del toast su contenido excede
   por una fracción de px el viewport, lo que dispara brevemente el
   scrollbar DEL CONTENEDOR (no el de la página) en el borde derecho,
   dejando un hueco vacío hasta que el toast termina de animarse.
   heightAuto:false/scrollbarPadding:false (ver ada.core.js) evitan que
   toque html/body, pero no el overflow propio del contenedor. */
.swal2-container {
  overflow-y: hidden !important;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-fade-up {
  animation: fadeUp 0.3s ease-out forwards;
}