/* Custom Stylesheet for W3CRM Landing Page */

/* Base Transitions & Scroll Behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #080c0e;
}

::-webkit-scrollbar-thumb {
  background: #222d32;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5ba3d1;
}

/* Material Design 3 range slider customization */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5ba3d1;
  border: 2px solid #080c0e;
  cursor: pointer;
  transition: transform 0.15s ease-in-out, background-color 0.15s;
  box-shadow: 0 0 10px rgba(91, 163, 209, 0.4);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #3df2a5;
  box-shadow: 0 0 14px rgba(61, 242, 165, 0.6);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5ba3d1;
  border: 2px solid #080c0e;
  cursor: pointer;
  transition: transform 0.15s ease-in-out, background-color 0.15s;
  box-shadow: 0 0 10px rgba(91, 163, 209, 0.4);
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  background: #3df2a5;
  box-shadow: 0 0 14px rgba(61, 242, 165, 0.6);
}

/* MD3 state layers / Interactive Ripple emulation */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s;
  pointer-events: none;
}

.btn-ripple:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: 0s;
}

/* Custom Kanban board micro-animations */
#col1-container, #col2-container, #col3-container {
  transition: background-color 0.2s ease;
}

/* Card moving highlights */
.card-moved {
  animation: pulse-border 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0px rgba(61, 242, 165, 0.6);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(61, 242, 165, 0);
    transform: scale(1);
  }
}

/* Custom Accordion smooth heights */
.accordion-open {
  max-height: 500px !important;
}

/* Smooth opacity adjustments */
[data-i18n] {
  transition: opacity 0.15s ease-in-out;
}

/* Theme Toggle Variables & General Overrides */
:root {
  --brand-dark: 248 250 252;
  --brand-surface: 241 245 249;
  --brand-card: 255 255 255;
  --brand-border: 226 232 240;
  --brand-primary: 30 58 95;
  --brand-primary-hover: 18 37 64;
  --brand-accent: 16 185 129;
  --brand-muted: 100 116 139;
  --brand-text: 30 41 59;
  --brand-heading: 15 23 42;
}

html.dark {
  --brand-dark: 8 12 14;
  --brand-surface: 17 22 25;
  --brand-card: 22 29 32;
  --brand-border: 34 45 50;
  --brand-primary: 91 163 209;
  --brand-primary-hover: 124 181 219;
  --brand-accent: 61 242 165;
  --brand-muted: 142 157 166;
  --brand-text: 226 232 240;
  --brand-heading: 255 255 255;
}

.theme-transition, .theme-transition * {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

body {
  background-color: rgb(var(--brand-dark)) !important;
  color: rgb(var(--brand-text)) !important;
}

/* headings and text override in light mode */
html:not(.dark) h1:not(.text-transparent), 
html:not(.dark) h2:not(.text-transparent), 
html:not(.dark) h3:not(.text-transparent), 
html:not(.dark) h4:not(.text-transparent), 
html:not(.dark) h5:not(.text-transparent), 
html:not(.dark) h6:not(.text-transparent) {
  color: rgb(var(--brand-heading)) !important;
}

html:not(.dark) p:not(.text-brand-muted) {
  color: rgb(var(--brand-text)) !important;
}

html:not(.dark) .text-white {
  color: rgb(var(--brand-text)) !important;
}

html:not(.dark) .bg-brand-surface {
  background-color: rgb(var(--brand-surface)) !important;
}

html:not(.dark) .bg-brand-card {
  background-color: rgb(var(--brand-card)) !important;
}

html:not(.dark) .bg-brand-dark {
  background-color: rgb(var(--brand-dark)) !important;
}

html:not(.dark) .border-brand-border {
  border-color: rgb(var(--brand-border)) !important;
}

html:not(.dark) button.text-white, 
html:not(.dark) a.text-white,
html:not(.dark) button .text-white, 
html:not(.dark) a .text-white,
html:not(.dark) .bg-brand-primary .text-white,
html:not(.dark) .bg-brand-accent .text-brand-dark {
  color: #000000 !important;
}

html:not(.dark) .bg-brand-primary {
  background-color: rgb(var(--brand-primary)) !important;
  color: #ffffff !important;
}

html:not(.dark) .bg-brand-primary .text-brand-dark {
  color: #ffffff !important;
}

html:not(.dark) .bg-brand-accent {
  background-color: rgb(var(--brand-accent)) !important;
  color: #000000 !important;
}

html:not(.dark) .bg-brand-accent .text-brand-dark {
  color: #000000 !important;
}

html:not(.dark) .bg-brand-surface\/40 {
  background-color: rgba(var(--brand-surface), 0.4) !important;
}

html:not(.dark) .bg-brand-surface\/95 {
  background-color: rgba(var(--brand-surface), 0.95) !important;
}

html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea {
  background-color: rgb(var(--brand-card)) !important;
  color: rgb(var(--brand-text)) !important;
  border-color: rgb(var(--brand-border)) !important;
}

html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}