/* ==========================================================================
   Omiko Bot Theme — Matching omikobot.com landing page aesthetic
   Light, airy, white floating nav, soft gradient background
   ========================================================================== */

/* ---------- 1. Color Tokens ---------- */
:root {
  --omiko-purple: #a855f7;
  --omiko-pink: #ec4899;
  --omiko-orange: #f97316;

  --omiko-bg-gradient: linear-gradient(135deg, #f5f0ff 0%, #fdf2f8 35%, #fff7ed 65%, #f5f0ff 100%);
  --omiko-bg-neutral: #faf9fe;

  --omiko-card-bg: #ffffff;
  --omiko-card-border: rgba(0, 0, 0, 0.06);
  --omiko-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --omiko-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.06);

  --omiko-heading: #111827;
  --omiko-body: #4b5563;
  --omiko-muted: #9ca3af;
  --omiko-label: #6b7280;

  --omiko-border: #e5e7eb;
  --omiko-border-light: #f3f4f6;

  --omiko-link: #a855f7;
  --omiko-link-hover: #9333ea;

  --omiko-success: #22c55e;
  --omiko-error: #ef4444;
  --omiko-warning: #f59e0b;
  --omiko-info: #3b82f6;
}

/* ---------- Dark Mode Tokens ---------- */
[data-bs-theme="dark"] {
  --omiko-bg-gradient: linear-gradient(135deg, #0f0a1a 0%, #1a0f1e 35%, #1a1410 65%, #0f0a1a 100%);
  --omiko-bg-neutral: #1b1b2f;

  --omiko-card-bg: #1e1e2d;
  --omiko-card-border: rgba(255, 255, 255, 0.06);
  --omiko-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
  --omiko-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);

  --omiko-heading: #e5e7eb;
  --omiko-body: #9ca3af;
  --omiko-muted: #6b7280;
  --omiko-label: #9ca3af;

  --omiko-border: #2d2d3f;
  --omiko-border-light: #252535;
}

/* ---------- 2. Typography ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--omiko-body);
}

/* ---------- 3. Gradient Text ---------- */
.text-omiko-gradient {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- 4. Page Background ---------- */
body.header-extended,
body.auth-bg {
  background: var(--omiko-bg-gradient) !important;
  min-height: 100vh;
}

.wrapper {
  background: transparent !important;
}

.page {
  background: transparent !important;
}

/* ---------- 5. Header — White Floating Nav ---------- */
#kt_header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-top {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.header-navs {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
}

/* Nav links — dark text on white bg */
.header-menu .menu-item .menu-link .menu-title {
  color: var(--omiko-body) !important;
  font-weight: 500;
  font-size: 14px;
}

.header-menu .menu-item .menu-link:hover .menu-title {
  color: var(--omiko-purple) !important;
}
.header-menu .menu-item.menu-here-bg .menu-link .menu-title {
  color: var(--omiko-purple) !important;
  font-weight: 600;
}

/* Active indicator — purple bottom border centered under text */
.header-menu .menu-item .menu-link {
  background: transparent !important;
  position: relative;
  border-bottom: none !important;
}
.header-menu .menu-item.menu-here-bg .menu-link {
  background: transparent !important;
}
.header-menu .menu-item.menu-here-bg .menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  height: 2px;
  background: var(--omiko-purple);
  border-radius: 1px;
}

/* Active bg override — remove Metronic blue highlight */
.menu-root-here-bg-desktop > .menu-item.menu-here-bg > .menu-link {
  background-color: transparent !important;
}

/* Nav tabs — dark text on white */
.header-tabs .nav-link {
  color: var(--omiko-body) !important;
}
.header-tabs .nav-link.active {
  color: var(--omiko-purple) !important;
  border-bottom: 2px solid var(--omiko-purple) !important;
}

/* Mobile toggle button — dark icon on white bg */
#kt_header_navs_toggle {
  color: var(--omiko-heading) !important;
}
#kt_header_navs_toggle i {
  color: var(--omiko-heading) !important;
}

/* Topbar buttons — dark icons on white bg */
.header-top .btn-color-white {
  color: var(--omiko-body) !important;
}
.header-top .btn-color-white i {
  color: var(--omiko-body) !important;
}
.header-top .bg-hover-white:hover,
.header-top .bg-hover-opacity-10:hover {
  background: rgba(168, 85, 247, 0.08) !important;
}

/* User name — dark text on white bg */
.header-top .text-white {
  color: var(--omiko-heading) !important;
}
.header-top .text-white.opacity-75 {
  color: var(--omiko-muted) !important;
}

/* ---------- 6. Cards ---------- */
.card {
  background: var(--omiko-card-bg) !important;
  border: 1px solid var(--omiko-card-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--omiko-card-shadow) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  box-shadow: var(--omiko-card-shadow-hover) !important;
}

.card-header {
  border-bottom: 1px solid var(--omiko-border-light) !important;
  border-radius: 16px 16px 0 0 !important;
  background: transparent !important;
}

.card-footer {
  border-top: 1px solid var(--omiko-border-light) !important;
  border-radius: 0 0 16px 16px !important;
  background: transparent !important;
}

/* ---------- 7. Buttons ---------- */

/*
 * Gradient-border pill technique:
 * Use background-image on the element with a padding-based "border".
 * Outer layer = gradient, inner layer (via background-origin/clip) = white fill.
 */

/* Primary — white pill with gradient border */
.btn-primary,
.btn-omiko-primary {
  position: relative;
  background: white !important;
  color: var(--omiko-heading) !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: none;
}
.btn-primary:hover,
.btn-omiko-primary:hover {
  background-image: linear-gradient(#faf9fe, #faf9fe), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.15) !important;
  color: var(--omiko-heading) !important;
}
.btn-primary:focus,
.btn-primary:active {
  background-image: linear-gradient(white, white), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: var(--omiko-heading) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12) !important;
}

/* Primary button arrow icon — match landing page */
.btn-primary i,
.btn-primary .ki-duotone {
  color: var(--omiko-purple) !important;
}

/* Secondary — outlined pill (simple border) */
.btn-omiko-secondary {
  background: white;
  color: var(--omiko-heading);
  border: 1.5px solid var(--omiko-border);
  border-radius: 50px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
.btn-omiko-secondary:hover {
  border-color: var(--omiko-heading);
  background: #faf9fe;
}

/* Light button — keep default Metronic style */

/* Success (Add) button — gradient border pill */
.btn-bg-success {
  background: white !important;
  color: var(--omiko-heading) !important;
  border: 2px solid transparent !important;
  border-radius: 50px !important;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  transition: all 0.2s ease;
}
.btn-bg-success:hover {
  background-image: linear-gradient(#faf9fe, #faf9fe), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.12) !important;
}
.btn-bg-success i {
  color: var(--omiko-purple) !important;
}

/* Icon buttons */
.btn-bg-light {
  border-radius: 8px !important;
  border: 1px solid var(--omiko-border) !important;
  background: white !important;
  transition: all 0.2s ease;
}
.btn-bg-light:hover {
  border-color: var(--omiko-purple) !important;
  background: rgba(168, 85, 247, 0.04) !important;
}

/* Active light buttons — match purple theme */
.btn-active-light-primary:hover,
.btn-active-light-primary.active {
  background: rgba(168, 85, 247, 0.08) !important;
  color: var(--omiko-purple) !important;
}

/* ---------- 8. Form Inputs ---------- */
.form-control {
  background: #ffffff !important;
  border: 1.5px solid var(--omiko-border) !important;
  border-radius: 10px !important;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--omiko-heading) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder {
  color: var(--omiko-muted) !important;
}
.form-control:focus {
  border-color: var(--omiko-purple) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.08) !important;
  outline: none;
}

.form-control-solid {
  background: var(--omiko-bg-neutral) !important;
}

/* Labels */
.col-form-label,
.form-label {
  color: var(--omiko-label) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.form-text {
  color: var(--omiko-muted);
  font-size: 12px;
}

/* ---------- 9. Separators ---------- */
.separator {
  border-color: var(--omiko-border-light) !important;
}

/* ---------- 10. Alerts ---------- */
.alert-success {
  background: #dcfce7 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 12px !important;
  color: #166534 !important;
}

/* ---------- 11. Toolbar / Page Title ---------- */
.toolbar {
  background: transparent !important;
}

.page-title h1 {
  color: var(--omiko-heading) !important;
  font-weight: 700 !important;
  align-items: center !important;
  display: flex !important;
}

/* Vertical separator between title and username */
.page-title h1 .border-start {
  align-self: center;
  opacity: 0.4;
}

/* Username next to title — vertically center */
.page-title h1 small {
  margin: 0 !important;
  display: flex;
  align-items: center;
}

/* Align toolbar separator with content below */
.toolbar .separator {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-title .text-gray-500 {
  color: var(--omiko-muted) !important;
}

.page-title .breadcrumb-item {
  color: var(--omiko-muted) !important;
  font-size: 13px;
}

/* ---------- 12. Links ---------- */
a.link-primary,
.link-primary {
  color: var(--omiko-purple) !important;
}
a.link-primary:hover,
.link-primary:hover {
  color: var(--omiko-link-hover) !important;
}

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

.text-hover-primary:hover {
  color: var(--omiko-purple) !important;
}

/* ---------- 13. Card dashed (billing) ---------- */
.card-dashed {
  border: 1.5px dashed var(--omiko-border) !important;
  border-radius: 12px !important;
  background: var(--omiko-bg-neutral) !important;
}

/* ---------- 14. Timeline (Activity) ---------- */
.timeline-icon i {
  color: var(--omiko-purple) !important;
}

.timeline-border-dashed .timeline-line {
  border-color: rgba(168, 85, 247, 0.15) !important;
}

/* ---------- 15. Footer ---------- */
.footer {
  background: transparent !important;
}
.footer .text-muted {
  color: var(--omiko-muted) !important;
}
.footer a {
  color: var(--omiko-body) !important;
  transition: color 0.2s ease;
}
.footer a:hover {
  color: var(--omiko-purple) !important;
}
/* Keep gradient text for brand link */
.footer a.text-omiko-gradient {
  -webkit-text-fill-color: transparent !important;
}

/* ---------- 16. Card Titles ---------- */
.card-label {
  color: var(--omiko-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.card-title .text-muted {
  color: var(--omiko-muted) !important;
  font-size: 12px !important;
}

.text-gray-900 {
  color: var(--omiko-heading) !important;
}

.text-gray-800 {
  color: var(--omiko-heading) !important;
}

.text-gray-500,
.text-gray-600 {
  color: var(--omiko-body) !important;
}

/* ---------- 17. Avatars ---------- */
.symbol-label {
  border-radius: 10px !important;
}

/* ---------- 18. Editable Fields ---------- */
.editable[contenteditable="true"] {
  outline: 2px dashed var(--omiko-purple) !important;
  background: rgba(168, 85, 247, 0.04) !important;
  border-radius: 4px;
  padding: 2px 4px;
}

/* ---------- 19. Dropdown Menus ---------- */
.menu-sub-dropdown {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  background: white !important;
  z-index: 1060 !important;
}

/* Ensure header-top sits above header-navs so dropdown isn't clipped */
.header-top {
  z-index: 1050 !important;
  position: relative;
}
.header-navs {
  z-index: 1040 !important;
  position: relative;
}

/* ---------- 20. Badges ---------- */
.badge-light-success {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.badge-light {
  background: var(--omiko-bg-neutral) !important;
}

/* ---------- 21. Content Container ---------- */
#kt_content_container {
  padding-bottom: 40px;
}

/* ---------- 22. Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.3);
}

/* ---------- 23. Auth Pages ---------- */

/* Auth page background */
body.auth-bg {
  background: var(--omiko-bg-gradient) !important;
}

/* Auth form wrapper — card-like with white bg */
body.auth-bg .w-lg-500px {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Mobile auth: hide aside panel, form takes full screen with light bg */
@media (max-width: 991.98px) {
  body.auth-bg .order-1.order-lg-2 {
    display: none !important;
  }
  body.auth-bg .d-flex.flex-lg-row-fluid.w-lg-50 {
    width: 100% !important;
    min-height: 100vh;
  }
  body.auth-bg .w-lg-500px {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
}

body.auth-bg h1 {
  color: var(--omiko-heading) !important;
  font-weight: 700 !important;
}

/* Auth form inputs — solid white with visible border, override bg-transparent */
body.auth-bg .form-control,
body.auth-bg .form-control.bg-transparent {
  background: #ffffff !important;
  border: 1.5px solid var(--omiko-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  color: var(--omiko-heading) !important;
}
body.auth-bg .form-control:focus,
body.auth-bg .form-control.bg-transparent:focus {
  border-color: var(--omiko-purple) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.08) !important;
}

/* Auth Sign In button — solid gradient fill, not gradient-border */
body.auth-bg .btn-primary {
  width: 100%;
  padding: 12px 20px;
  font-size: 15px;
  background: linear-gradient(90deg, #a855f7, #ec4899) !important;
  background-image: linear-gradient(90deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
}
body.auth-bg .btn-primary:hover {
  background: linear-gradient(90deg, #9333ea, #db2777) !important;
  background-image: linear-gradient(90deg, #9333ea, #db2777) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
}
body.auth-bg .btn-primary:focus,
body.auth-bg .btn-primary:active {
  background: linear-gradient(90deg, #a855f7, #ec4899) !important;
  background-image: linear-gradient(90deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
}
body.auth-bg .btn-primary .indicator-label {
  color: #ffffff !important;
}

/* Auth links — purple */
body.auth-bg .link-primary {
  color: var(--omiko-purple) !important;
}
body.auth-bg .link-primary:hover {
  color: var(--omiko-link-hover) !important;
}

/* Auth subtitle text */
body.auth-bg .text-gray-500 {
  color: var(--omiko-muted) !important;
}

/* Auth right panel — soft pastel gradient matching page bg */
body.auth-bg .order-1.order-lg-2 {
  background-image: none !important;
  background: linear-gradient(135deg, #e8dff5 0%, #f2d5e8 35%, #f5ddd0 65%, #ece4f0 100%) !important;
}
body.auth-bg .order-1.order-lg-2 h1 {
  color: var(--omiko-heading) !important;
}
body.auth-bg .order-1.order-lg-2 .text-white {
  color: var(--omiko-body) !important;
}

/* Footer links on auth page */
body.auth-bg .text-primary {
  color: var(--omiko-purple) !important;
}
body.auth-bg .btn-color-gray-700 {
  color: var(--omiko-body) !important;
}

/* ---------- 24. Billing Page (standalone) ---------- */

body.billing-page {
  background: var(--omiko-bg-gradient) !important;
}

.billing-topbar {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.billing-page .billing-card {
  background: var(--omiko-card-bg) !important;
  border-radius: 16px !important;
  border: 1px solid var(--omiko-card-border) !important;
  box-shadow: var(--omiko-card-shadow) !important;
  margin-top: 0 !important;
}

body.billing-page .billing-card .card-footer {
  background: transparent !important;
}

/* Stripe card element wrapper */
.billing-card-element {
  background: #ffffff;
  border: 1.5px solid var(--omiko-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.billing-card-element.StripeElement--focus {
  border-color: var(--omiko-purple);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.08);
}

/* Billing primary button — solid gradient */
body.billing-page .btn-primary {
  background: linear-gradient(90deg, #a855f7, #ec4899) !important;
  background-image: linear-gradient(90deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600;
  padding: 10px 24px;
}
body.billing-page .btn-primary:hover {
  background: linear-gradient(90deg, #9333ea, #db2777) !important;
  background-image: linear-gradient(90deg, #9333ea, #db2777) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
}

/* Billing outlined button */
body.billing-page .btn-omiko-primary {
  background: linear-gradient(90deg, #a855f7, #ec4899) !important;
  background-image: linear-gradient(90deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600;
}
body.billing-page .btn-omiko-secondary {
  background: transparent !important;
  color: var(--omiko-purple) !important;
  border: 1.5px solid var(--omiko-purple) !important;
  border-radius: 8px !important;
  font-weight: 600;
}
body.billing-page .btn-omiko-secondary:hover {
  background: rgba(168, 85, 247, 0.06) !important;
}

/* Dark mode billing page */
[data-bs-theme="dark"] body.billing-page {
  background: var(--omiko-bg-gradient) !important;
}

[data-bs-theme="dark"] .billing-topbar {
  background: rgba(30, 30, 45, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .billing-card-element {
  background: var(--omiko-bg-neutral);
  border-color: var(--omiko-border);
}

[data-bs-theme="dark"] body.billing-page .btn-omiko-secondary {
  color: var(--omiko-heading) !important;
  border-color: var(--omiko-border) !important;
  background: var(--omiko-card-bg) !important;
}
[data-bs-theme="dark"] body.billing-page .btn-omiko-secondary:hover {
  background: rgba(168, 85, 247, 0.1) !important;
}

/* ---------- 25. Misc Overrides ---------- */

/* Remove Metronic blue active states */
.menu-state-primary .menu-item .menu-link.active .menu-title,
.menu-state-primary .menu-item.show > .menu-link .menu-title {
  color: var(--omiko-purple) !important;
}

/* Header tab "Account" text */
.header-tabs .nav-link {
  font-size: 13px;
  font-weight: 500;
}

/* Remove harsh borders from header */
#kt_header .border-bottom {
  border-bottom: none !important;
}

/* Active color for buttons */
.btn-active-color-primary:hover i,
.btn-active-color-primary.active i {
  color: var(--omiko-purple) !important;
}

/* Text selection */
::selection {
  background: rgba(168, 85, 247, 0.15);
  color: var(--omiko-heading);
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */

/* Page background */
[data-bs-theme="dark"] body.header-extended,
[data-bs-theme="dark"] body.auth-bg {
  background: var(--omiko-bg-gradient) !important;
}

/* Header — dark frosted glass */
[data-bs-theme="dark"] .header-top {
  background: rgba(30, 30, 45, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .header-navs {
  background: rgba(30, 30, 45, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Nav links — light text in dark mode */
[data-bs-theme="dark"] .header-menu .menu-item .menu-link .menu-title {
  color: var(--omiko-body) !important;
}

/* User name in header */
[data-bs-theme="dark"] .header-top [style*="color: var(--omiko-heading)"] {
  color: var(--omiko-heading) !important;
}

/* Cards */
[data-bs-theme="dark"] .card {
  background: var(--omiko-card-bg) !important;
  border-color: var(--omiko-card-border) !important;
}

[data-bs-theme="dark"] .card-header {
  border-bottom-color: var(--omiko-border-light) !important;
}

[data-bs-theme="dark"] .card-footer {
  border-top-color: var(--omiko-border-light) !important;
}

/* Buttons — dark fill with gradient border */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-omiko-primary {
  background: var(--omiko-card-bg) !important;
  color: var(--omiko-heading) !important;
  background-image: linear-gradient(var(--omiko-card-bg), var(--omiko-card-bg)), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-omiko-primary:hover {
  background-image: linear-gradient(#252535, #252535), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  color: var(--omiko-heading) !important;
}
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active {
  background-image: linear-gradient(var(--omiko-card-bg), var(--omiko-card-bg)), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
  color: var(--omiko-heading) !important;
}

/* Success (Add) button */
[data-bs-theme="dark"] .btn-bg-success {
  background: var(--omiko-card-bg) !important;
  color: var(--omiko-heading) !important;
  background-image: linear-gradient(var(--omiko-card-bg), var(--omiko-card-bg)), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
}
[data-bs-theme="dark"] .btn-bg-success:hover {
  background-image: linear-gradient(#252535, #252535), linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
}

/* Secondary button */
[data-bs-theme="dark"] .btn-omiko-secondary {
  background: var(--omiko-card-bg);
  color: var(--omiko-heading);
  border-color: var(--omiko-border);
}
[data-bs-theme="dark"] .btn-omiko-secondary:hover {
  background: #252535;
}

/* Icon buttons */
[data-bs-theme="dark"] .btn-bg-light {
  background: var(--omiko-card-bg) !important;
  border-color: var(--omiko-border) !important;
}
[data-bs-theme="dark"] .btn-bg-light:hover {
  background: rgba(168, 85, 247, 0.1) !important;
}

/* Form inputs */
[data-bs-theme="dark"] .form-control {
  background: var(--omiko-card-bg) !important;
  border-color: var(--omiko-border) !important;
  color: var(--omiko-heading) !important;
}

[data-bs-theme="dark"] .form-control-solid {
  background: var(--omiko-bg-neutral) !important;
}

/* Dropdown menus */
[data-bs-theme="dark"] .menu-sub-dropdown {
  background: var(--omiko-card-bg) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Separators */
[data-bs-theme="dark"] .separator {
  border-color: var(--omiko-border-light) !important;
}

/* Badges */
[data-bs-theme="dark"] .badge-light-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

[data-bs-theme="dark"] .badge-light {
  background: var(--omiko-bg-neutral) !important;
}

/* Card dashed */
[data-bs-theme="dark"] .card-dashed {
  background: var(--omiko-bg-neutral) !important;
  border-color: var(--omiko-border) !important;
}

/* Alerts */
[data-bs-theme="dark"] .alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

/* Editable fields */
[data-bs-theme="dark"] .editable[contenteditable="true"] {
  background: rgba(168, 85, 247, 0.08) !important;
}

/* Scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.25);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.4);
}

/* Text color overrides for dark mode */
[data-bs-theme="dark"] .text-gray-900,
[data-bs-theme="dark"] .text-gray-800 {
  color: var(--omiko-heading) !important;
}

[data-bs-theme="dark"] .text-gray-500,
[data-bs-theme="dark"] .text-gray-600 {
  color: var(--omiko-body) !important;
}

[data-bs-theme="dark"] .card-label {
  color: var(--omiko-heading) !important;
}

[data-bs-theme="dark"] .page-title h1 {
  color: var(--omiko-heading) !important;
}

/* Auth page dark mode */
[data-bs-theme="dark"] body.auth-bg h1 {
  color: var(--omiko-heading) !important;
}

[data-bs-theme="dark"] body.auth-bg .w-lg-500px {
  background: var(--omiko-card-bg);
  border-color: var(--omiko-card-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] body.auth-bg .form-control,
[data-bs-theme="dark"] body.auth-bg .form-control.bg-transparent {
  background: var(--omiko-bg-neutral) !important;
  border-color: var(--omiko-border) !important;
  color: var(--omiko-heading) !important;
}

[data-bs-theme="dark"] body.auth-bg .text-gray-500 {
  color: var(--omiko-muted) !important;
}

[data-bs-theme="dark"] body.auth-bg .btn-color-gray-700 {
  color: var(--omiko-body) !important;
}