/* ============================================================
   Ikeloa Dark Theme — Internal Pages
   Mirrors the company landing page design system.
   Loaded after Tailwind; overrides light-mode utility classes.
   ============================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --dt-bg:            #08090d;
  --dt-bg-panel:      rgba(255, 255, 255, 0.06);
  --dt-bg-panel2:     rgba(255, 255, 255, 0.09);
  --dt-bg-hover:      rgba(12, 164, 176, 0.08);
  --dt-bg-input:      rgba(255, 255, 255, 0.05);

  --dt-cyan:          #0ca4b0;
  --dt-cyan-bright:   #0fc4d2;
  --dt-cyan-dim:      #0a8490;
  --dt-cyan-bg:       rgba(12, 164, 176, 0.18);
  --dt-cyan-bg-hover: rgba(12, 164, 176, 0.30);
  --dt-cyan-text:     #A3F0F5;

  --dt-text:          #E8EDF4;
  --dt-text-2:        #C8D2E0;
  --dt-text-muted:    #A0B0C8;
  --dt-text-dim:      #8090A8;

  --dt-border:        rgba(255, 255, 255, 0.08);
  --dt-border-vis:    rgba(12, 164, 176, 0.30);

  --dt-red:           #e05a6a;
  --dt-red-bg:        rgba(220, 53, 69, 0.18);
  --dt-yellow:        #d4aa5a;
  --dt-yellow-bg:     rgba(212, 170, 90, 0.18);
  --dt-green:         #4ec994;
  --dt-green-bg:      rgba(78, 201, 148, 0.18);
  --dt-blue:          #5ba4e8;
  --dt-blue-bg:       rgba(91, 164, 232, 0.18);

  --dt-radius-sm:     6px;
  --dt-radius:        10px;
  --dt-radius-lg:     14px;

  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background-color: var(--dt-bg) !important;
  color: var(--dt-text) !important;
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* ── Navigation ──────────────────────────────────────────── */
nav.dt-nav {
  background: rgba(8, 9, 13, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

nav.dt-nav .dt-brand-name {
  color: var(--dt-text) !important;
  font-weight: 700;
  letter-spacing: 0.2px;
}

nav.dt-nav .dt-brand-sub {
  color: var(--dt-text-muted) !important;
  font-size: 0.85rem;
}

nav.dt-nav .dt-badge-admin {
  background: var(--dt-cyan-bg) !important;
  color: var(--dt-cyan-text) !important;
  border: 1px solid var(--dt-border-vis);
  border-radius: var(--dt-radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 8px;
}

nav.dt-nav a,
nav.dt-nav button {
  color: var(--dt-text-muted) !important;
  transition: color 0.2s;
}

nav.dt-nav a:hover,
nav.dt-nav button:hover {
  color: var(--dt-cyan-bright) !important;
}

/* Admin dropdown menu */
.dt-dropdown-menu {
  background: #0f1117 !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  border-radius: var(--dt-radius) !important;
  color: var(--dt-text) !important;
}

.dt-dropdown-menu a {
  color: var(--dt-text-2) !important;
}

.dt-dropdown-menu a:hover {
  background: var(--dt-bg-hover) !important;
  color: var(--dt-cyan-bright) !important;
}

.dt-dropdown-menu .dt-divider {
  border-color: var(--dt-border) !important;
}

/* Mobile menu */
.dt-mobile-menu {
  border-top: 1px solid var(--dt-border);
}

.dt-mobile-menu a {
  color: var(--dt-text-muted) !important;
}

.dt-mobile-menu a:hover {
  color: var(--dt-cyan-bright) !important;
}

.dt-mobile-section-label {
  color: var(--dt-text-dim) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
footer.dt-footer {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid var(--dt-border) !important;
  color: var(--dt-text-dim) !important;
}

/* ── Tailwind Background Overrides ───────────────────────── */
.bg-white          { background-color: var(--dt-bg-panel) !important; }
.bg-gray-50        { background-color: var(--dt-bg) !important; }
.bg-gray-100       { background-color: rgba(255,255,255,0.05) !important; }
.bg-gray-200       { background-color: rgba(255,255,255,0.07) !important; }
.bg-gray-300       { background-color: rgba(255,255,255,0.10) !important; }
.bg-gray-700       { background-color: rgba(255,255,255,0.07) !important; }
.bg-gray-800       { background-color: #0c0e14 !important; }
.bg-gray-900       { background-color: #07080a !important; }
.bg-blue-50        { background-color: var(--dt-cyan-bg) !important; }
.bg-blue-100       { background-color: var(--dt-cyan-bg) !important; }
.bg-blue-600       { background-color: var(--dt-cyan) !important; }
.bg-blue-700       { background-color: var(--dt-cyan-dim) !important; }
.bg-indigo-50      { background-color: var(--dt-cyan-bg) !important; }
.bg-indigo-100     { background-color: var(--dt-cyan-bg) !important; }
.bg-purple-50      { background-color: rgba(120, 60, 180, 0.12) !important; }
.bg-yellow-50      { background-color: var(--dt-yellow-bg) !important; }
.bg-yellow-100     { background-color: var(--dt-yellow-bg) !important; }
.bg-green-50       { background-color: var(--dt-green-bg) !important; }
.bg-green-100      { background-color: var(--dt-green-bg) !important; }
.bg-red-50         { background-color: var(--dt-red-bg) !important; }
.bg-red-100        { background-color: var(--dt-red-bg) !important; }

/* ── Tailwind Text Overrides ─────────────────────────────── */
.text-gray-900     { color: var(--dt-text) !important; }
.text-gray-800     { color: var(--dt-text) !important; }
.text-gray-700     { color: var(--dt-text-2) !important; }
.text-gray-600     { color: var(--dt-text-muted) !important; }
.text-gray-500     { color: var(--dt-text-muted) !important; }
.text-gray-400     { color: var(--dt-text-dim) !important; }
.text-gray-300     { color: var(--dt-text-dim) !important; }
.text-blue-600     { color: var(--dt-cyan-bright) !important; }
.text-blue-700     { color: var(--dt-cyan-bright) !important; }
.text-blue-800     { color: var(--dt-cyan-text) !important; }
.text-blue-200     { color: var(--dt-text-muted) !important; }
.text-indigo-600   { color: var(--dt-cyan-bright) !important; }
.text-indigo-700   { color: var(--dt-cyan-bright) !important; }
.text-indigo-800   { color: var(--dt-cyan-text) !important; }
.text-purple-600   { color: #c084fc !important; }
.text-yellow-600   { color: var(--dt-yellow) !important; }
.text-yellow-700   { color: var(--dt-yellow) !important; }
.text-yellow-800   { color: var(--dt-yellow) !important; }
.text-green-600    { color: var(--dt-green) !important; }
.text-green-700    { color: var(--dt-green) !important; }
.text-green-800    { color: var(--dt-green) !important; }
.text-red-500      { color: var(--dt-red) !important; }
.text-red-600      { color: var(--dt-red) !important; }
.text-red-700      { color: var(--dt-red) !important; }
.text-red-800      { color: var(--dt-red) !important; }

/* ── Tailwind Border Overrides ───────────────────────────── */
.border-gray-100   { border-color: var(--dt-border) !important; }
.border-gray-200   { border-color: var(--dt-border) !important; }
.border-gray-300   { border-color: rgba(255,255,255,0.12) !important; }
.border-blue-200   { border-color: var(--dt-border-vis) !important; }
.border-t          { border-top-color: var(--dt-border) !important; }

/* ── Tailwind Divide Overrides ───────────────────────────── */
.divide-gray-200 > * + * { border-color: var(--dt-border) !important; }
.divide-gray-100 > * + * { border-color: var(--dt-border) !important; }

/* ── Cards & Panels ──────────────────────────────────────── */
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

/* White/light panels become dark glass cards */
.rounded-lg.bg-white,
.rounded.bg-white,
.rounded-xl.bg-white,
.rounded-md.bg-white {
  background: var(--dt-bg-panel) !important;
  border: 1px solid var(--dt-border) !important;
}

/* ── Tables ──────────────────────────────────────────────── */
table {
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
}

thead, .bg-gray-50 thead {
  background-color: rgba(255,255,255,0.04) !important;
}

th {
  color: var(--dt-text-muted) !important;
  border-bottom-color: var(--dt-border) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

td {
  color: var(--dt-text) !important;
  border-bottom-color: var(--dt-border) !important;
}

tbody tr:hover {
  background: var(--dt-bg-hover) !important;
}

.even\:bg-gray-50:nth-child(even),
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ── Forms ───────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: var(--dt-bg-input) !important;
  color: var(--dt-text) !important;
  border-color: var(--dt-border) !important;
  border-radius: var(--dt-radius-sm) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--dt-text-dim) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--dt-cyan) !important;
  box-shadow: 0 0 0 2px rgba(12, 164, 176, 0.25) !important;
}

label {
  color: var(--dt-text-2) !important;
}

/* select option dropdown background */
select option {
  background-color: #0f1117;
  color: var(--dt-text);
}

/* ── Buttons ─────────────────────────────────────────────── */

/* Primary blue button → cyan */
.bg-blue-600,
button.bg-blue-600,
a.bg-blue-600 {
  background-color: var(--dt-cyan) !important;
  color: #fff !important;
  border-color: var(--dt-cyan) !important;
}

.hover\:bg-blue-700:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover {
  background-color: var(--dt-cyan-dim) !important;
}

/* Outlined/ghost buttons */
.border-blue-600,
.border-indigo-600 {
  border-color: var(--dt-cyan) !important;
  color: var(--dt-cyan-bright) !important;
}

.hover\:bg-blue-50:hover,
.hover\:bg-indigo-50:hover {
  background-color: var(--dt-cyan-bg) !important;
}

/* Red/danger buttons */
.bg-red-600        { background-color: var(--dt-red) !important; border-color: var(--dt-red) !important; }
.hover\:bg-red-700:hover { background-color: #c0404e !important; }
.border-red-600    { border-color: var(--dt-red) !important; color: var(--dt-red) !important; }

/* Green buttons */
.bg-green-600      { background-color: var(--dt-green) !important; border-color: var(--dt-green) !important; color: #07080a !important; }
.hover\:bg-green-700:hover { background-color: #38a87a !important; }

/* Gray buttons */
.bg-gray-200.text-gray-700,
.bg-gray-100.text-gray-700 {
  background-color: rgba(255,255,255,0.08) !important;
  color: var(--dt-text-2) !important;
  border-color: var(--dt-border) !important;
}

/* ── Status Badges ───────────────────────────────────────── */
.status-pending,
.bg-yellow-100.text-yellow-800 {
  background-color: var(--dt-yellow-bg) !important;
  color: var(--dt-yellow) !important;
  border-color: rgba(212, 170, 90, 0.30) !important;
}

.status-running,
.bg-blue-100.text-blue-800 {
  background-color: var(--dt-blue-bg) !important;
  color: var(--dt-blue) !important;
  border-color: rgba(91, 164, 232, 0.30) !important;
}

.status-completed,
.bg-green-100.text-green-800 {
  background-color: var(--dt-green-bg) !important;
  color: var(--dt-green) !important;
  border-color: rgba(78, 201, 148, 0.30) !important;
}

.status-failed,
.bg-red-100.text-red-800 {
  background-color: var(--dt-red-bg) !important;
  color: var(--dt-red) !important;
  border-color: rgba(220, 53, 69, 0.30) !important;
}

/* ── Alerts / Notices ────────────────────────────────────── */
.bg-yellow-50.border-yellow-200,
.border-yellow-400 {
  background-color: var(--dt-yellow-bg) !important;
  border-color: rgba(212, 170, 90, 0.35) !important;
  color: var(--dt-yellow) !important;
}

.bg-blue-50.border-blue-200,
.border-blue-400 {
  background-color: var(--dt-cyan-bg) !important;
  border-color: var(--dt-border-vis) !important;
  color: var(--dt-cyan-text) !important;
}

.bg-red-50.border-red-200,
.border-red-400 {
  background-color: var(--dt-red-bg) !important;
  border-color: rgba(220, 53, 69, 0.35) !important;
  color: var(--dt-red) !important;
}

.bg-green-50.border-green-200,
.border-green-400 {
  background-color: var(--dt-green-bg) !important;
  border-color: rgba(78, 201, 148, 0.35) !important;
  color: var(--dt-green) !important;
}

/* ── Modal / Dialog ──────────────────────────────────────── */
.fixed.inset-0.bg-gray-500,
.fixed.inset-0.bg-black {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

.fixed.inset-0 .bg-white,
.relative.bg-white {
  background: #0f1117 !important;
  border: 1px solid var(--dt-border) !important;
  color: var(--dt-text) !important;
}

/* ── Schema Builder (custom.css overrides) ───────────────── */
.schema-field {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: var(--dt-border) !important;
}

.nested-fields {
  background-color: rgba(255,255,255,0.03) !important;
}

.nested-fields .nested-fields {
  background-color: rgba(255,255,255,0.05) !important;
}

.nested-fields .nested-fields .nested-fields {
  background-color: rgba(255,255,255,0.03) !important;
}

.nested-fields::before {
  background: linear-gradient(to bottom, var(--dt-cyan), var(--dt-cyan-dim)) !important;
}

.nested-object-content {
  background-color: rgba(255,255,255,0.03) !important;
  border-left-color: var(--dt-border-vis) !important;
}

.nested-object-content::before {
  background: linear-gradient(to bottom, var(--dt-cyan), var(--dt-cyan-dim)) !important;
}

.nested-object-header,
.array-field-header {
  border-bottom-color: var(--dt-border) !important;
}

.nested-object-header h6,
.array-field-header .form-label {
  color: var(--dt-text-2) !important;
}

.array-items {
  background-color: rgba(255,255,255,0.03) !important;
}

.array-item {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: var(--dt-border) !important;
}

.array-item:hover {
  border-color: var(--dt-cyan) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40) !important;
}

.array-item .btn-outline-danger {
  background: rgba(8, 9, 13, 0.9) !important;
  border-color: var(--dt-red) !important;
  color: var(--dt-red) !important;
}

.array-item .btn-outline-danger:hover {
  background: var(--dt-red) !important;
  color: #fff !important;
}

.array-item .text-muted.fw-semibold {
  color: var(--dt-text-dim) !important;
}

#schema-preview,
#example-preview {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text-2) !important;
}

.form-label {
  color: var(--dt-text-2) !important;
}

.form-text {
  color: var(--dt-text-dim) !important;
}

.form-actions {
  background-color: rgba(255,255,255,0.04) !important;
}

.nested-object-container,
.array-field-container {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}

/* ── Options Dialog ──────────────────────────────────────── */
.options-dialog {
  background: #0f1117 !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.65) !important;
}

.options-dialog-header {
  border-bottom-color: var(--dt-border) !important;
}

.options-dialog-header h2 {
  color: var(--dt-text) !important;
}

.options-dialog-close {
  color: var(--dt-text-muted) !important;
}

.options-dialog-close:hover {
  background-color: rgba(255,255,255,0.08) !important;
}

.options-dialog-button {
  background: transparent !important;
  border-color: var(--dt-border-vis) !important;
  color: var(--dt-text-2) !important;
}

.options-dialog-button:hover {
  background: var(--dt-cyan-bg) !important;
  border-color: var(--dt-cyan) !important;
  color: var(--dt-cyan-text) !important;
}

/* ── Dropdown Menus (pipeline builder, etc.) ─────────────── */
.connect-dropdown-menu,
.target-key-dropdown-menu {
  background: #0f1117 !important;
  border-color: var(--dt-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55) !important;
}

.connect-dropdown-menu .dropdown-item,
.target-key-dropdown-menu .dropdown-item {
  border-bottom-color: var(--dt-border) !important;
  color: var(--dt-text-2) !important;
}

.connect-dropdown-menu .dropdown-item:hover,
.target-key-dropdown-menu .dropdown-item:hover {
  background-color: var(--dt-bg-hover) !important;
  color: var(--dt-cyan-bright) !important;
}

.target-key-dropdown-menu .dropdown-item:last-child {
  color: var(--dt-cyan-bright) !important;
}

/* ── Connection Toolbar ──────────────────────────────────── */
.connection-toolbar {
  background: #0f1117 !important;
  border-color: var(--dt-cyan) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55) !important;
}

.connection-toolbar-header h6 {
  color: var(--dt-cyan-bright) !important;
}

.connection-toolbar-header {
  border-bottom-color: var(--dt-border) !important;
}

/* ── Loading Overlay ─────────────────────────────────────── */
.loading-overlay {
  background: rgba(0, 0, 0, 0.70) !important;
}

.loading-spinner {
  border-color: rgba(255,255,255,0.12) !important;
  border-top-color: var(--dt-cyan) !important;
}

/* ── Code / Pre blocks ───────────────────────────────────── */
pre, code {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--dt-text-2) !important;
  border-radius: var(--dt-radius-sm);
}

/* ── Scrollbars ──────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 164, 176, 0.45);
}

/* ── Tailwind Gradient stat-card overrides ───────────────── */
/* Tailwind v2 gradient classes set CSS vars; override them globally */
[class*="from-blue-"],
[class*="from-indigo-"] {
  --tw-gradient-from: rgba(12, 164, 176, 0.15) !important;
}

[class*="to-blue-"],
[class*="to-indigo-"] {
  --tw-gradient-to: rgba(12, 164, 176, 0.08) !important;
}

[class*="from-yellow-"] {
  --tw-gradient-from: rgba(212, 170, 90, 0.18) !important;
}

[class*="to-yellow-"] {
  --tw-gradient-to: rgba(212, 170, 90, 0.09) !important;
}

[class*="from-green-"] {
  --tw-gradient-from: rgba(78, 201, 148, 0.15) !important;
}

[class*="to-green-"] {
  --tw-gradient-to: rgba(78, 201, 148, 0.07) !important;
}

[class*="from-red-"] {
  --tw-gradient-from: rgba(220, 53, 69, 0.15) !important;
}

[class*="to-red-"] {
  --tw-gradient-to: rgba(220, 53, 69, 0.07) !important;
}

[class*="from-purple-"] {
  --tw-gradient-from: rgba(120, 60, 180, 0.15) !important;
}

[class*="to-purple-"] {
  --tw-gradient-to: rgba(120, 60, 180, 0.07) !important;
}

[class*="from-gray-"] {
  --tw-gradient-from: rgba(255, 255, 255, 0.06) !important;
}

[class*="to-gray-"] {
  --tw-gradient-to: rgba(255, 255, 255, 0.03) !important;
}

/* Darker text on tinted cards — these would be near-invisible on dark */
.text-blue-900    { color: var(--dt-cyan-text) !important; }
.text-yellow-900  { color: var(--dt-yellow) !important; }
.text-green-900   { color: var(--dt-green) !important; }
.text-red-900     { color: var(--dt-red) !important; }
.text-indigo-900  { color: var(--dt-cyan-text) !important; }
.text-purple-900  { color: #c084fc !important; }

/* Gradient cards need a border so they don't disappear into the background */
[class*="bg-gradient-to-"] {
  border: 1px solid var(--dt-border) !important;
}

/* ── Login divider "Or continue with" fix ────────────────── */
/* The centered text bg trick needs the dark panel bg, not white */
.relative .absolute.inset-0.flex.items-center ~ .relative span.px-2.bg-white,
span.bg-white {
  background-color: transparent !important;
  color: var(--dt-text-muted) !important;
}

/* ── Misc Tailwind utilities ─────────────────────────────── */
.ring-2 { --tw-ring-color: var(--dt-cyan) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--dt-cyan) !important; }
.focus\:border-blue-500:focus { border-color: var(--dt-cyan) !important; }
.focus\:border-indigo-500:focus { border-color: var(--dt-cyan) !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--dt-cyan) !important; }