/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* this new add */

.light-theme {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.light-theme header,
.light-theme footer {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
}

.light-theme main {
  background: #f8fafc !important;
}

.light-theme a {
  color: inherit;
}

.light-theme .bg-slate-950,
.light-theme .bg-slate-900,
.light-theme .bg-slate-900\/60 {
  background-color: #f8fafc !important;
}

.light-theme .bg-white\/5 {
  background-color: #ffffff !important;
}

.light-theme .bg-white\/10 {
  background-color: #f1f5f9 !important;
}

.light-theme .bg-orange-500\/10 {
  background-color: #fff7ed !important;
}

.light-theme .bg-orange-500\/20 {
  background-color: #ffedd5 !important;
}

.light-theme .bg-green-500\/20 {
  background-color: #dcfce7 !important;
}

.light-theme .bg-blue-500\/20 {
  background-color: #dbeafe !important;
}

.light-theme .bg-purple-500\/20 {
  background-color: #f3e8ff !important;
}

.light-theme .hover\:bg-white\/10:hover,
.light-theme .hover\:bg-white\/20:hover {
  background-color: #e2e8f0 !important;
}

.light-theme .border-white\/10 {
  border-color: #e2e8f0 !important;
}

.light-theme .border-orange-500\/20,
.light-theme .border-orange-500\/30 {
  border-color: #fed7aa !important;
}

.light-theme .text-white {
  color: #0f172a !important;
}

.light-theme .text-slate-300,
.light-theme .text-slate-400,
.light-theme .text-slate-500 {
  color: #475569 !important;
}

.light-theme .text-slate-950 {
  color: #0f172a !important;
}

.light-theme .text-green-300 {
  color: #15803d !important;
}

.light-theme .text-blue-300 {
  color: #2563eb !important;
}

.light-theme .text-orange-300,
.light-theme .text-orange-400 {
  color: #ea580c !important;
}

.light-theme .text-purple-300 {
  color: #7e22ce !important;
}

.light-theme input,
.light-theme textarea,
.light-theme select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.light-theme input::placeholder,
.light-theme textarea::placeholder {
  color: #64748b !important;
}

.light-theme pre {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

.light-theme .shadow-light {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.light-theme .bg-slate-950\/50 {
  background-color: #ffffff !important;
}

.light-theme .placeholder\:text-slate-500::placeholder {
  color: #64748b !important;
}

.light-theme .focus\:border-orange-400:focus {
  border-color: #fb923c !important;
}

.light-theme .bg-slate-900 {
  background-color: #f8fafc !important;
}

/* this new add */
/* compact theme toggle class based */
.theme-toggle-button {
  height: 42px;
  min-width: 74px;
}

.theme-toggle-slider {
  will-change: transform;
}

.light-theme .theme-toggle-button {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}

.light-theme .theme-toggle-slider {
  background-color: #0f172a !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18) !important;
}

.light-theme .theme-toggle-dark {
  color: #64748b !important;
}

.light-theme .theme-toggle-light {
  color: #ffffff !important;
}

/* this new add */
/* user dropdown light mode */
.light-theme .user-menu > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.light-theme .user-menu summary > div {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.light-theme .user-menu summary > div:hover {
  background-color: #f1f5f9 !important;
}

.light-theme .user-menu .hover\:bg-white\/10:hover {
  background-color: #f1f5f9 !important;
}

.light-theme .user-menu .text-slate-400,
.light-theme .user-menu .text-slate-500 {
  color: #64748b !important;
}

.light-theme header .bg-white\/10 {
  background-color: #f8fafc !important;
}

.light-theme header .text-slate-300 {
  color: #475569 !important;
}



/* Select2 global style */
.select2-container {
  width: 100% !important;
  color: #ffffff !important;
}

.select2-container--default .select2-selection--single {
  min-height: 58px !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 13px 16px !important;
  outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
  line-height: 30px !important;
  padding-left: 32px !important;
  padding-right: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8 !important;
}

.select2-dropdown {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

.select2-search {
  padding: 10px !important;
}

.select2-search__field {
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #020617 !important;
  color: #ffffff !important;
  padding: 10px 12px !important;
  outline: none !important;
}

.select2-results__option {
  color: #e2e8f0 !important;
  background: #0f172a !important;
  padding: 12px 14px !important;
}

.select2-results__option--highlighted {
  background: #f97316 !important;
  color: #ffffff !important;
}

/* Select2 light theme */
.light-theme .select2-container--default .select2-selection--single {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

.light-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a !important;
}

.light-theme .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #64748b !important;
}

.light-theme .select2-dropdown {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
}

.light-theme .select2-search__field {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.light-theme .select2-results__option {
  background: #ffffff !important;
  color: #0f172a !important;
}

.light-theme .select2-results__option--highlighted {
  background: #f97316 !important;
  color: #ffffff !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #fb923c !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12) !important;
}


.nav-dropdown-menu {
  animation: dropdownFade 0.18s ease;
}

.nav-dropdown button {
  cursor: pointer;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .nav-dropdown-menu {
  display: none;
  animation: dropdownFade 0.18s ease;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

/* new add  */

.os-highlight {
  position: relative;
  display: inline-block;
  color: #fb923c;
  z-index: 1;
}

.os-highlight::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 7px;
  height: 18px;
  background: rgba(249, 115, 22, 0.18);
  border-radius: 999px;
  z-index: -1;
}

.os-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.os-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.os-card:hover {
  transform: translateY(-8px);
  border-color: rgba(251, 146, 60, 0.55) !important;
  box-shadow: 0 24px 70px rgba(249, 115, 22, 0.18);
}

.os-card:hover::before {
  opacity: 1;
}

.os-card-content {
  position: relative;
  z-index: 1;
}

.os-card:hover .os-title {
  color: rgb(253, 186, 116);
}

.os-arrow {
  transition: transform 0.3s ease;
}

.os-card:hover .os-arrow {
  transform: translateX(8px);
}

@media (max-width: 640px) {
  .os-highlight::after {
    bottom: 4px;
    height: 12px;
  }

  .os-card:hover {
    transform: translateY(-4px);
  }
}

.light-theme .bg-white\/\[0\.05\] {
  background-color: #ffffff !important;
}

.light-theme .from-slate-900,
.light-theme .via-slate-950,
.light-theme .to-black {
  --tw-gradient-from: #ffffff !important;
  --tw-gradient-to: #ffffff !important;
  --tw-gradient-stops: #ffffff, #ffffff !important;
}

.light-theme .os-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

.light-theme .os-card:hover {
  background: #f8fafc !important;
}