/* ============================================================
   upGrad AUTOMATION — PREMIUM DESIGN SYSTEM
   ============================================================ */

:root,
.dark {
  --background: #000000;
  --foreground: #f4f4f5;
  --surface: #0a0a0c;
  --surface-hover: #121215;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --accent: #F23E36;      /* upGrad Brand Red */
  --accent-hover: #ff5952;
  --muted: #121215;
  --muted-fg: #8a8a93;
  --card-bg: rgba(10, 10, 12, 0.45);
  --card-hover: rgba(18, 18, 21, 0.65);
  --sidebar-bg: #000000;
  --input-bg: #0a0a0c;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --glow-color: rgba(242, 62, 54, 0.08);
  --glass-bg: #0a0a0c;
  --glass-border: rgba(255, 255, 255, 0.08);
  --grid-color: rgba(255, 255, 255, 0.02); /* Adjusted grid opacity for premium visual cleanliness */
  --shadow-color: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

.light {
  --background: #ffffff;
  --foreground: #09090b;
  --surface: #f4f4f5;
  --surface-hover: #e4e4e7;
  --border-color: rgba(0, 0, 0, 0.12);
  --border-hover: rgba(0, 0, 0, 0.2);
  --accent: #F23E36;
  --accent-hover: #d32f27;
  --muted: #f4f4f5;
  --muted-fg: #4b5563;
  --card-bg: rgba(255, 255, 255, 0.45);
  --card-hover: rgba(244, 244, 245, 0.65);
  --sidebar-bg: #ffffff;
  --input-bg: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
  --glow-color: rgba(242, 62, 54, 0.04);
  --glass-bg: #ffffff;
  --glass-border: rgba(0, 0, 0, 0.12);
  --grid-color: rgba(0, 0, 0, 0.03);
  --shadow-color: rgba(0, 0, 0, 0.04);
  color-scheme: light;
}

/* ============================================================
   BASE STYLES & OVERRIDES
   ============================================================ */
* {
  box-sizing: border-box;
}

body,
aside,
nav,
div,
button,
input,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html {
  /* Responsive base font: smaller on mobile, normal on desktop */
  font-size: clamp(60%, 1.5vw, 75%);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* Phone: use full 100% font size feel */
@media (max-width: 640px) {
  html {
    font-size: 85%;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  html {
    font-size: 78%;
  }
}

/* Large screens (1440px+) */
@media (min-width: 1440px) {
  html {
    font-size: 80%;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 999px;
}

/* ============================================================
   GLASSMORPHISM UTILITIES
   ============================================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.ultra-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(10, 10, 12, 0.4) 100%);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8);
}

/* Elegant card hover shine overlay */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right,
      transparent 0%,
      rgba(255, 255, 255, 0.01) 45%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0.01) 55%,
      transparent 100%);
  transform: rotate(45deg) translateX(-100%);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.card-shine:hover::after {
  transform: rotate(45deg) translateX(100%);
}

/* React Bits ShinyText - Premium sweeping shiny text effect */
.shiny-text {
  display: inline-block;
  background-image: linear-gradient(
      120deg, 
      #b5b5b5 0%, 
      #b5b5b5 35%, 
      #ffffff 50%, 
      #b5b5b5 65%, 
      #b5b5b5 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-sweep 2s linear infinite;
}

@keyframes shine-sweep {
  0% { background-position: 150% center; }
  100% { background-position: -50% center; }
}

/* Ambient Backdrop Light */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.07; }
}
.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Grid Texture Background */
.grid-bg {
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Live Indicator Dot */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: live-pulse 2s ease-in-out infinite;
}

/* Inputs and interactive focus controls */
.input-glow {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
}
.input-glow:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--glow-color);
  border-color: rgba(242, 62, 54, 0.5);
}

.btn-press:active {
  transform: scale(0.97);
}

/* ============================================================
   CUSTOM INLINE RANGE CALENDAR (MUI DATECALENDAR DESIGN)
   ============================================================ */
#inline-calendar {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
  max-width: 220px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem !important;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  font-size: 10px;
}

/* Hover style - centered circular overlay */
.cal-day:hover:not(.cal-empty):not(.cal-disabled):not(.cal-selected-start):not(.cal-selected-end)::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.cal-day:hover:not(.cal-empty):not(.cal-disabled) {
  color: #ffffff;
}

/* Today indicator - centered border circle */
.cal-day.cal-today::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1.2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Selected Start & End indicators - solid centered red circles */
.cal-day.cal-selected-start::after,
.cal-day.cal-selected-end::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: #EE2C3C;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  box-shadow: 0 0 8px rgba(238, 44, 60, 0.4);
}

.cal-day.cal-selected-start,
.cal-day.cal-selected-end {
  color: #ffffff !important;
  font-weight: 700;
}

/* Range background highlight - fills the square block to remain continuous */
.cal-day.cal-in-range {
  background: rgba(238, 44, 60, 0.15) !important;
  color: #ffffff;
  border-radius: 0 !important;
}

/* Slight rounding for the start/end margins of the continuous highlight */
.cal-day.cal-in-range-start-edge {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

.cal-day.cal-in-range-end-edge {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.cal-day.cal-empty {
  cursor: default;
  pointer-events: none;
  opacity: 0;
}

.cal-day.cal-disabled {
  color: rgba(255, 255, 255, 0.15);
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive improvements for settings */
@media (max-width: 640px) {
  #settings-modal .ultra-glass {
    padding: 1.25rem;
    max-height: 95vh;
  }
}

/* ============================================================
   FLOATING POPUP DATEPICKER STYLES (CUSTOM CUSTOMIZED)
   ============================================================ */

.datepicker-popup {
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
  z-index: 100;
  display: block; /* JS will toggle hidden class */
}

/* Make start left-0 and end right-0 */
#start-datepicker {
  left: 0;
}

#end-datepicker {
  right: 0 !important;
  left: auto !important;
}

.datepicker {
  width: 280px;
  background: rgba(15, 15, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(255, 255, 255, 0.05);
  padding: 1rem;
}

.datepicker-top {
  margin-bottom: 0.75rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.tag {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 0.4em 0.75em;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.15s ease;
  line-height: 1;
}

.tag:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.tag:active {
  transform: scale(0.95);
}

.month-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.25rem;
}

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-color: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  width: 2.2rem;
  height: 2.2rem;
  transition: all 0.15s ease;
}

.arrow:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.arrow:active {
  transform: scale(0.95);
}

.month-name {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
}

.datepicker-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.25rem;
}

.day {
  color: rgba(255, 255, 255, 0.4);
  font-size: 9px;
  font-weight: 600;
  justify-self: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.date {
  border: 0;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  justify-self: center;
}

.date:focus {
  outline: 0;
}

.date:hover:not(.faded):not(.current-day) {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.faded {
  color: rgba(255, 255, 255, 0.25) !important;
}

.current-day {
  color: #ffffff !important;
  border-color: #EE2C3C !important;
  background-color: #EE2C3C !important;
  box-shadow: 0 0 10px rgba(238, 44, 60, 0.4);
}

.current-day:hover {
  background-color: #ff3e4d !important;
}

/* Scrollbar utility to hide scrollbars */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ============================================================
   LIGHT THEME CONTRAST & VISIBILITY OVERRIDES
   ============================================================ */
.light .text-white {
  color: var(--foreground) !important;
}
.light .text-white\/90 {
  color: rgba(9, 9, 11, 0.9) !important;
}
.light .text-white\/85 {
  color: rgba(9, 9, 11, 0.85) !important;
}
.light .text-white\/80 {
  color: rgba(9, 9, 11, 0.8) !important;
}
.light .text-white\/70 {
  color: rgba(9, 9, 11, 0.7) !important;
}
.light .text-white\/60 {
  color: rgba(9, 9, 11, 0.6) !important;
}
.light .text-white\/55 {
  color: rgba(9, 9, 11, 0.55) !important;
}
.light .text-white\/50 {
  color: rgba(9, 9, 11, 0.5) !important;
}
.light .text-white\/40 {
  color: rgba(9, 9, 11, 0.4) !important;
}
.light .text-white\/35 {
  color: rgba(9, 9, 11, 0.35) !important;
}
.light .text-white\/30 {
  color: rgba(9, 9, 11, 0.3) !important;
}
.light .text-white\/25 {
  color: rgba(9, 9, 11, 0.25) !important;
}
.light .text-white\/20 {
  color: rgba(9, 9, 11, 0.2) !important;
}
.light .text-white\/15 {
  color: rgba(9, 9, 11, 0.15) !important;
}
.light .text-white\/10 {
  color: rgba(9, 9, 11, 0.1) !important;
}
.light .text-\[rgba\(255\,255\,255\,0\.6\)\] {
  color: rgba(9, 9, 11, 0.65) !important;
}
.light .shiny-text {
  background-image: linear-gradient(120deg, #18181b 0%, #18181b 35%, #09090b 50%, #18181b 65%, #18181b 100%) !important;
}

/* Background Opacities Overrides */
.light .bg-white\/5 {
  background-color: rgba(9, 9, 11, 0.05) !important;
}
.light .bg-white\/10 {
  background-color: rgba(9, 9, 11, 0.08) !important;
}
.light .bg-white\/\[0\.03\] {
  background-color: rgba(9, 9, 11, 0.03) !important;
}
.light .bg-white\/\[0\.04\] {
  background-color: rgba(9, 9, 11, 0.04) !important;
}
.light .bg-white\/\[0\.01\] {
  background-color: rgba(9, 9, 11, 0.01) !important;
}
.light .bg-white\/\[0\.02\] {
  background-color: rgba(9, 9, 11, 0.02) !important;
}
.light .bg-black\/20 {
  background-color: rgba(9, 9, 11, 0.03) !important;
}
.light .bg-black\/30 {
  background-color: rgba(9, 9, 11, 0.05) !important;
}
.light .bg-black\/40 {
  background-color: rgba(9, 9, 11, 0.06) !important;
}
.light .bg-black\/45 {
  background-color: rgba(9, 9, 11, 0.08) !important;
}

/* Border Opacities Overrides */
.light .border-white\/5 {
  border-color: rgba(9, 9, 11, 0.08) !important;
}
.light .border-white\/10 {
  border-color: rgba(9, 9, 11, 0.12) !important;
}
.light .border-white\/\[0\.05\] {
  border-color: rgba(9, 9, 11, 0.06) !important;
}
.light .border-white\/\[0\.06\] {
  border-color: rgba(9, 9, 11, 0.08) !important;
}
.light .border-white\/\[0\.08\] {
  border-color: rgba(9, 9, 11, 0.1) !important;
}
.light .border-white\/\[0\.12\] {
  border-color: rgba(9, 9, 11, 0.15) !important;
}

/* Force legibility of standard semantic tags in light mode */
.light h1:not(#obo-modal-html-preview *):not(#bulk-modal-html-preview *),
.light h2:not(#obo-modal-html-preview *):not(#bulk-modal-html-preview *),
.light h3:not(#obo-modal-html-preview *):not(#bulk-modal-html-preview *),
.light h4:not(#obo-modal-html-preview *):not(#bulk-modal-html-preview *),
.light h5:not(#obo-modal-html-preview *):not(#bulk-modal-html-preview *),
.light h6:not(#obo-modal-html-preview *):not(#bulk-modal-html-preview *) {
  color: #09090b !important;
}

/* Ensure red primary branding elements maintain white text & icons */
.light .bg-\[\#EE2C3C\],
.light .bg-\[\#EE2C3C\] *,
.light .bg-red-500,
.light .bg-red-500 * {
  color: #ffffff !important;
}

/* Specific Interactive Controls Overrides */
.light .input-glow {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: rgba(9, 9, 11, 0.15) !important;
}
.light .input-glow:focus {
  border-color: rgba(242, 62, 54, 0.6) !important;
}
.light .input-glow::placeholder {
  color: rgba(9, 9, 11, 0.4) !important;
}
.light select option {
  background-color: #ffffff !important;
  color: #09090b !important;
}
.light .bg-\[rgba\(0\,0\,0\,0\.35\)\] {
  background-color: #ffffff !important;
  color: #09090b !important;
}
.light .bg-black\/95 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Modal Popups Overrides */
.light .datepicker {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(9, 9, 11, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.light .month-name {
  color: #09090b !important;
}
.light .arrow {
  border-color: rgba(9, 9, 11, 0.1) !important;
  background-color: rgba(9, 9, 11, 0.02) !important;
  color: #09090b !important;
}
.light .arrow:hover {
  background-color: rgba(9, 9, 11, 0.06) !important;
}
.light .day {
  color: rgba(9, 9, 11, 0.4) !important;
}
.light .date {
  color: #09090b !important;
}
.light .date:hover:not(.faded):not(.current-day) {
  background-color: rgba(9, 9, 11, 0.06) !important;
  color: #09090b !important;
}
.light .faded {
  color: rgba(9, 9, 11, 0.25) !important;
}
.light .tag {
  border-color: rgba(9, 9, 11, 0.1) !important;
  background-color: rgba(9, 9, 11, 0.03) !important;
  color: rgba(9, 9, 11, 0.7) !important;
}
.light .tag:hover {
  background-color: rgba(9, 9, 11, 0.08) !important;
  color: #09090b !important;
  border-color: rgba(9, 9, 11, 0.18) !important;
}

/* Custom Calendar Days Overrides */
.light .cal-day {
  color: rgba(9, 9, 11, 0.7) !important;
}
.light .cal-day:hover:not(.cal-empty):not(.cal-disabled):not(.cal-selected-start):not(.cal-selected-end)::before {
  background: rgba(9, 9, 11, 0.06) !important;
}
.light .cal-day:hover:not(.cal-empty):not(.cal-disabled) {
  color: #09090b !important;
}
.light .cal-day.cal-today::after {
  border-color: rgba(9, 9, 11, 0.35) !important;
}
.light .cal-day.cal-disabled {
  color: rgba(9, 9, 11, 0.2) !important;
}
.light .cal-day.cal-in-range {
  background: rgba(238, 44, 60, 0.1) !important;
  color: #EE2C3C !important;
}

/* Stats Card Styling */
.light #dashboard-active .grid-cols-3 > div {
  background: #ffffff !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}
.light #dashboard-active .grid-cols-3 > div:hover {
  border-color: rgba(9, 9, 11, 0.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

/* SPOC pills bar */
.light .spoc-pill:not(.bg-\[\#EE2C3C\]) {
  background-color: rgba(9, 9, 11, 0.04) !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
  color: rgba(9, 9, 11, 0.6) !important;
}
.light .spoc-pill:not(.bg-\[\#EE2C3C\]):hover {
  background-color: rgba(9, 9, 11, 0.08) !important;
  color: #09090b !important;
}

/* Previews Cards Grid elements */
.light #previews-cards-grid > div {
  background-color: #ffffff !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}
.light #previews-cards-grid > div:hover {
  background-color: #ffffff !important;
  border-color: rgba(238, 44, 60, 0.3) !important;
  box-shadow: 0 8px 24px rgba(238, 44, 60, 0.05) !important;
}
.light #previews-cards-grid > div h4 {
  color: #09090b;
}
.light #previews-cards-grid > div:hover h4 {
  color: #EE2C3C !important;
}

/* Terminal Log Override */
.light #terminal-container {
  background-color: rgba(9, 9, 11, 0.02) !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
}
.light #terminal-log p {
  color: rgba(9, 9, 11, 0.75) !important;
}
.light #terminal-log span.font-bold {
  color: #F23E36 !important;
}
.light #terminal-container span.font-mono {
  color: rgba(9, 9, 11, 0.5) !important;
}
.light #terminal-container button {
  color: rgba(9, 9, 11, 0.4) !important;
}
.light #terminal-container button:hover {
  color: #09090b !important;
}

/* Color codes in log outputs */
.light .text-\[\#4ade80\] { color: #15803d !important; }
.light .text-\[\#f87171\] { color: #b91c1c !important; }
.light .text-\[\#f59e0b\] { color: #b45309 !important; }

/* Sidebar and Portals Background Overrides */
.light #app-sidebar {
  background-color: #f4f4f5 !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
}
.light #app-sidebar nav button:not(.bg-\[\#EE2C3C\]) {
  color: rgba(9, 9, 11, 0.6) !important;
}
.light #app-sidebar nav button:hover:not(.bg-\[\#EE2C3C\]) {
  background-color: rgba(9, 9, 11, 0.04) !important;
  color: #09090b !important;
}
.light #sb-profile-name {
  color: #09090b !important;
}
.light #sb-profile-role {
  color: rgba(9, 9, 11, 0.5) !important;
}
.light #sb-profile-avatar {
  box-shadow: 0 2px 8px rgba(238, 44, 60, 0.2) !important;
}
.light #app-sidebar button[onclick="handleLogout()"] {
  background-color: rgba(9, 9, 11, 0.04) !important;
  color: rgba(9, 9, 11, 0.6) !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
}
.light #app-sidebar button[onclick="handleLogout()"]:hover {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.light #admin-logs-console {
  background-color: rgba(9, 9, 11, 0.02) !important;
  color: #09090b !important;
}
.light #admin-spoc-stats-body i {
  color: rgba(9, 9, 11, 0.3) !important;
}
.light .ultra-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
  border: 1px solid rgba(9, 9, 11, 0.08) !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.08) !important;
}

/* Modals sub-components contrast overrides */
.light .ultra-glass button:not(.bg-\[\#EE2C3C\]):not(.bg-red-500):not([onclick="handleLogout()"]) {
  background-color: rgba(9, 9, 11, 0.03) !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
  color: rgba(9, 9, 11, 0.6) !important;
}
.light .ultra-glass button:not(.bg-\[\#EE2C3C\]):not(.bg-red-500):not([onclick="handleLogout()"]):hover {
  background-color: rgba(9, 9, 11, 0.07) !important;
  color: #09090b !important;
}
.light .ultra-glass input,
.light .ultra-glass textarea,
.light .ultra-glass select {
  color: #09090b !important;
}
.light .ultra-glass input::placeholder,
.light .ultra-glass textarea::placeholder {
  color: rgba(9, 9, 11, 0.4) !important;
}

/* Obo & Bulk Modals specifics */
.light #obo-modal-progress,
.light #bulk-modal-progress {
  color: rgba(9, 9, 11, 0.5) !important;
}
.light #obo-modal-header-from-name,
.light #bulk-modal-header-from-name {
  color: #09090b !important;
}
.light #obo-modal-header-from-email,
.light #bulk-modal-header-from-email {
  color: rgba(9, 9, 11, 0.5) !important;
}
.light #obo-modal-to,
.light #bulk-modal-to {
  color: rgba(9, 9, 11, 0.7) !important;
}

/* Bulk sending console */
.light #bulk-modal-console {
  background-color: rgba(9, 9, 11, 0.02) !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
  color: rgba(9, 9, 11, 0.8) !important;
}
.light #bulk-modal-console .text-white\/40 {
  color: rgba(9, 9, 11, 0.4) !important;
}
.light #bulk-modal-console .text-white\/60 {
  color: rgba(9, 9, 11, 0.6) !important;
}
.light #bulk-modal-console .text-red-400 {
  color: #b91c1c !important;
}

/* Table styling in admin/spoc logs/history lists */
.light table th {
  background-color: rgba(9, 9, 11, 0.03) !important;
  color: rgba(9, 9, 11, 0.5) !important;
  border-bottom: 1px solid rgba(9, 9, 11, 0.08) !important;
}
.light table td {
  color: rgba(9, 9, 11, 0.75) !important;
  border-bottom: 1px solid rgba(9, 9, 11, 0.05) !important;
}
.light tbody tr:hover {
  background-color: rgba(9, 9, 11, 0.02) !important;
}

/* Settings Forms Inner Containers */
.light #settings-form > div > div,
.light #admin-settings-form > div > div {
  background-color: rgba(9, 9, 11, 0.015) !important;
  border-color: rgba(9, 9, 11, 0.06) !important;
}
.light #settings-form p,
.light #admin-settings-form p {
  color: rgba(9, 9, 11, 0.5) !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
}
.light #settings-form label,
.light #admin-settings-form label {
  color: rgba(9, 9, 11, 0.6) !important;
}

/* Admin Dashboard Analytics Panels override */
.light #panel-stats-mgr .bg-white\/\[0\.02\],
.light #panel-stats-mgr .bg-white\/\[0\.01\],
.light #panel-stats-mgr .bg-black\/30 {
  background-color: #ffffff !important;
  border-color: rgba(9, 9, 11, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

/* Status Badges Overrides */
.light .bg-amber-500\/10 {
  background-color: rgba(217, 119, 6, 0.15) !important;
}
.light .text-amber-400 {
  color: #b45309 !important;
}
.light .border-amber-500\/15,
.light .border-amber-500\/20 {
  border-color: rgba(217, 119, 6, 0.25) !important;
}

.light .bg-indigo-500\/10 {
  background-color: rgba(79, 70, 229, 0.15) !important;
}
.light .text-indigo-400 {
  color: #4338ca !important;
}
.light .border-indigo-500\/20 {
  border-color: rgba(79, 70, 229, 0.25) !important;
}

.light .bg-green-500\/10,
.light .bg-green-500\/5 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
.light .text-green-400 {
  color: #065f46 !important;
}
.light .border-green-500\/20,
.light .border-green-500\/10 {
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.light .bg-red-500\/10,
.light .bg-red-500\/5 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}
.light .text-red-400 {
  color: #991b1b !important;
}
.light .border-red-500\/20,
.light .border-red-500\/10 {
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Dashboard custom date range inputs color-scheme and styling overrides */
#dash-start-date, #dash-end-date {
  color-scheme: dark;
}
.light #dash-start-date, .light #dash-end-date {
  color-scheme: light;
}