/*
 * 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);
  }
}

/* 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;
}






/* Everything section attractive UI */
.os-everything-section {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.os-everything-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(249, 115, 22, 0.09), transparent 30%),
    radial-gradient(circle at 88% 25%, rgba(59, 130, 246, 0.07), transparent 28%),
    radial-gradient(circle at 50% 95%, rgba(168, 85, 247, 0.07), transparent 32%);
  pointer-events: none;
}

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

.os-everything-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

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

.os-everything-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 24px 70px rgba(249, 115, 22, 0.13);
}

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

.os-everything-card > * {
  position: relative;
  z-index: 1;
}

.os-everything-icon {
  width: 58px;
  height: 58px;
  border-radius: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  background: rgba(249, 115, 22, 0.13);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.14);
}

.light-theme .os-everything-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: #e2e8f0;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.07);
}

.light-theme .os-everything-card:hover {
  background: #ffffff;
}






/* Mobile menu light mode fix */
.mobile-menu-summary {
  color: #ffffff;
}

.mobile-menu-panel {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-link {
  color: #cbd5e1;
}

.mobile-menu-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fdba74;
}

.mobile-menu-active {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.25), rgba(249, 115, 22, 0.1));
  color: #fdba74;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.2);
}

.light-theme .mobile-menu-summary {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.light-theme .mobile-menu-panel {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14) !important;
}

.light-theme .mobile-menu-link {
  color: #334155 !important;
}

.light-theme .mobile-menu-link:hover {
  background: #fff7ed !important;
  color: #ea580c !important;
}

.light-theme .mobile-menu-active {
  background: #fff7ed !important;
  color: #ea580c !important;
  box-shadow: inset 0 0 0 1px #fed7aa !important;
}

.light-theme .mobile-user-card {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
}

.light-theme .mobile-user-card p {
  color: #0f172a !important;
}

.light-theme .mobile-user-card .mobile-user-email {
  color: #64748b !important;
}