/* Dinia.ai — Modern Enterprise & Landing Page Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --color-dinia-ikb: #002FA7;
  --color-dinia-sky: #60A5FA;
  --color-dinia-slate: #1D283A;
  --color-atlas: #33CCB1;
  --color-janus: #0891B2;
  --color-kairos: #A159A6;
  --color-iris: #644DB3;
  --color-suada: #CC9F33;
}

html {
  min-height: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #F8FAFC;
}

html.dark {
  background-color: #030712 !important;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #F8FAFC;
  color: #1D283A;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html.dark body {
  background-color: #030712 !important;
  color: #F8FAFC;
}

header {
  max-width: 100vw;
  box-sizing: border-box;
}

.font-display {
  font-family: 'Montserrat', 'Inter', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #F1F5F9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Dark Custom Scrollbars */
html.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #0F172A;
}
html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #334155;
}
html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Glassmorphism elements */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

html.dark .glass-panel {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.6);
  color: #F8FAFC;
}

.glass-dark {
  background: rgba(29, 40, 58, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .glass-dark {
  background: rgba(10, 15, 29, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Theme switch button styling & micro-animation */
#themeToggleBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#themeToggleBtn:hover {
  transform: scale(1.05);
}

#themeToggleBtn:active {
  transform: scale(0.95);
}

#themeToggleBtn i {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Tab active state */
.nav-tab.active-tab {
  background-color: #002FA7;
  color: #FFFFFF;
}

.nav-tab.active-tab svg,
.nav-tab.active-tab i {
  color: #FFFFFF;
}

/* Pulsing and glow animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}
.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

@keyframes data-flow {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}
.data-flow-line {
  stroke-dasharray: 6;
  animation: data-flow 1.5s linear infinite;
}

/* ============================================================= */
/* DARK MODE COMPREHENSIVE MAPPINGS                              */
/* ============================================================= */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #030712;
  color: #F8FAFC;
}

/* Sections & Structural Containers */
html.dark #ecosystem,
html.dark #workflow,
html.dark #pricing,
html.dark #security,
html.dark footer {
  background-color: #030712;
  border-color: #1E293B;
}

html.dark .bg-white {
  background-color: #0F172A;
}

html.dark .bg-slate-50 {
  background-color: #030712;
}

html.dark .bg-slate-100 {
  background-color: #1E293B;
}

html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-white:hover {
  background-color: #1E293B;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-300 {
  border-color: #1E293B;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #1E293B;
}

/* Typography */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #F8FAFC;
}

html.dark .text-slate-700 {
  color: #E2E8F0;
}

html.dark .text-slate-600 {
  color: #CBD5E1;
}

html.dark .text-slate-500 {
  color: #94A3B8;
}

/* Inputs & Form Controls */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
  background-color: #0F172A;
  border-color: #334155;
  color: #F8FAFC;
}

html.dark select option {
  background-color: #0F172A;
  color: #F1F5F9;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748B;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #60A5FA;
  outline: none;
}

/* Modals & Dialogs */
html.dark .modal-content,
html.dark [id^="modal"] > div > div,
html.dark #authModal > div > div,
html.dark #invoiceModalContent {
  background-color: #0F172A;
  border-color: #1E293B;
  color: #F8FAFC;
}

/* Shadows */
html.dark .shadow-card-hover:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 47, 167, 0.25);
}

html.dark .shadow-jira {
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1);
}

html.dark .shadow-2xs,
html.dark .shadow-xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}

/* Print Styles for Invoices */
@media print {
  body * {
    visibility: hidden !important;
  }
  #invoiceModal, #invoiceModalContent, #invoiceModalContent * {
    visibility: visible !important;
  }
  #invoiceModal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  #invoiceModalContent {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .no-print {
    display: none !important;
  }
}

/* ============================================================= */
/* DINIA INTERCONNECTION ANIMATED SCHEMA STYLES                  */
/* ============================================================= */
@keyframes flowDash {
  to {
    stroke-dashoffset: -48;
  }
}

@keyframes reverseFlowDash {
  to {
    stroke-dashoffset: 48;
  }
}

.interconnect-flow-line {
  stroke-dasharray: 6 6;
  animation: flowDash 2.4s linear infinite;
  transition: stroke 0.3s ease, opacity 0.3s ease, stroke-width 0.3s ease;
}

.interconnect-flow-line.reverse {
  animation: reverseFlowDash 2.4s linear infinite;
}

.interconnect-paused .interconnect-flow-line {
  animation-play-state: paused !important;
}

.interconnect-paused animateMotion {
  animation-play-state: paused !important;
}

.interconnect-node-group {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.interconnect-node-group:hover {
  transform: scale(1.035);
}

.interconnect-node-group.interconnect-node-selected {
  transform: scale(1.05);
}

.interconnect-dimmed {
  opacity: 0.12 !important;
}

@keyframes tagPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.06); opacity: 1; }
}

.interconnect-badge-pulse {
  animation: tagPulse 2.2s ease-in-out infinite;
}