/* =================================================================
   OctaDeploy · Light Theme v2
   Palette: #fff bg · #F7F8FC sections · #6366f1 accent · #e8eaf0 border
================================================================= */

body.light {
  --od-bg:        #ffffff;
  --od-surface:   #F7F8FC;
  --od-border:    #e8eaf0;
  --od-accent:    #6366f1;
  --od-accent-bg: rgba(99,102,241,.08);
  --od-text:      #0f172a;
  --od-muted:     #64748b;
  --od-dim:       #94a3b8;
  background-color: var(--od-surface);
  color: var(--od-text);
}

/* BACKGROUNDS */
body.light .bg-zinc-950,
body.light .bg-zinc-900 { background-color: var(--od-bg) !important; }
body.light .bg-zinc-800,
body.light .bg-zinc-700 { background-color: var(--od-surface) !important; }
body.light .bg-zinc-600 { background-color: #e2e8f0 !important; }
body.light [class*="bg-slate-8"],body.light [class*="bg-slate-9"],
body.light [class*="bg-gray-8"],body.light [class*="bg-gray-9"],
body.light [class*="bg-neutral-8"],body.light [class*="bg-neutral-9"] { background-color: var(--od-bg) !important; }
body.light [class*="bg-slate-6"],body.light [class*="bg-slate-7"],
body.light [class*="bg-gray-6"],body.light [class*="bg-gray-7"] { background-color: var(--od-surface) !important; }
body.light .bg-white\/5,
body.light .hover\:bg-white\/5:hover  { background-color:rgba(15,23,42,.03) !important; }
body.light .bg-white\/10,
body.light .hover\:bg-white\/10:hover { background-color:rgba(15,23,42,.06) !important; }

/* TEXT */
body.light .text-white               { color: var(--od-text) !important; }
body.light .text-zinc-50,
body.light .text-zinc-100,
body.light .text-zinc-200            { color: #1e293b !important; }
body.light .text-zinc-300            { color: #334155 !important; }
body.light .text-zinc-400            { color: var(--od-muted) !important; }
body.light .text-zinc-500,
body.light .text-zinc-600            { color: var(--od-dim) !important; }
body.light [class*="text-slate-"],
body.light [class*="text-gray-"]     { color: #334155 !important; }
body.light .hover\:text-white:hover  { color: var(--od-accent) !important; }
body.light .font-mono                { color: #334155 !important; }

/* BORDERS */
body.light .border-zinc-800,
body.light .border-zinc-700,
body.light [class*="border-slate-"],
body.light [class*="border-gray-"]  { border-color: var(--od-border) !important; }
body.light .border-white\/5,
body.light .border-white\/10        { border-color: var(--od-border) !important; }

/* SIDEBAR */
body.light aside#sidebar,
body.light aside {
  background-color: var(--od-bg) !important;
  border-right: 1px solid var(--od-border) !important;
  box-shadow: none !important;
}
body.light aside a,
body.light aside nav a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--od-muted) !important;
  border-radius: 8px !important;
}
body.light aside a:hover,
body.light aside nav a:hover {
  background: var(--od-surface) !important;
  color: var(--od-text) !important;
}
body.light aside a[aria-current="page"],
body.light aside nav a[aria-current="page"] {
  background: var(--od-accent-bg) !important;
  color: var(--od-accent) !important;
  border: none !important;
  box-shadow: inset 3px 0 0 var(--od-accent) !important;
  border-radius: 0 8px 8px 0 !important;
}
body.light aside a[aria-current="page"] svg,
body.light aside nav a[aria-current="page"] svg { color: var(--od-accent) !important; }
body.light aside a svg { color: var(--od-dim) !important; }
body.light aside .border-t { border-color: var(--od-border) !important; }

/* STAT CARDS — white, thin border, minimal shadow */
body.light .grid > div {
  background-color: var(--od-bg) !important;
  border: 1px solid var(--od-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}

/* STATUS BADGES — darker more serious green */
body.light .text-emerald-400,
body.light .text-emerald-300 { color: #16a34a !important; }
body.light .bg-emerald-400\/10,
body.light .bg-emerald-500\/10 { background-color: rgba(22,163,74,.10) !important; }
body.light .border-emerald-400\/20 { border-color: rgba(22,163,74,.25) !important; }

/* MAIN CONTENT AREA */
body.light main,
body.light .flex-1.overflow-y-auto { background-color: var(--od-surface) !important; }
body.light .border-b {
  background-color: var(--od-bg) !important;
  border-color: var(--od-border) !important;
}
body.light .sticky.top-0 {
  background-color: var(--od-bg) !important;
  border-bottom: 1px solid var(--od-border) !important;
}

/* CONTENT CARDS */
body.light .rounded-xl,
body.light .rounded-lg,
body.light .rounded-2xl,
body.light .rounded-3xl {
  background-color: var(--od-bg) !important;
  border: 1px solid var(--od-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* Login/register auth card uses .glass, which hardcodes a dark translucent
   background (#18181b99) independent of the rounded-* utilities above. */
body.light .glass {
  background-color: rgba(255,255,255,.92) !important;
  border-color: var(--od-border) !important;
}

/* HEADINGS in panels */
body.light h2,body.light h3 { color: var(--od-text) !important; }

/* LIST HOVER */
body.light li:hover,
body.light tbody tr:hover { background-color: var(--od-surface) !important; }

/* TABLE */
body.light thead tr,
body.light thead { background-color: var(--od-surface) !important; }
body.light thead th { color: var(--od-muted) !important; border-color: var(--od-border) !important; font-weight:600; }
body.light tbody tr { border-color: #f1f5f9 !important; }

/* INPUTS */
body.light input,body.light textarea,body.light select {
  background-color: var(--od-bg) !important;
  color: var(--od-text) !important;
  border-color: var(--od-border) !important;
}
body.light input::placeholder,
body.light textarea::placeholder { color: var(--od-dim) !important; }
body.light input:focus,body.light textarea:focus {
  border-color: var(--od-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
  outline: none;
}

/* TERMINAL / LOGS — stay dark */
body.light pre,body.light code {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

/* SCROLLBAR */
body.light ::-webkit-scrollbar-track { background: var(--od-surface); }
body.light ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius:4px; }
body.light ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* THEME TOGGLE BUTTON — now an inline icon in the sidebar user row, not a floating circle */
#od-theme-btn:hover { opacity:.8; }

/* =================================================================
   FORM QUALITY v3  —  B2B SaaS feel
================================================================= */

/* INPUT HEIGHT CONSISTENCY — 42-44px */
body.light input[type=text],
body.light input[type=email],
body.light input[type=password],
body.light input[type=url],
body.light input[type=number],
body.light input[type=search] {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid #dde1ea !important;
  background: #fff !important;
  color: #0f172a !important;
  transition: border-color .15s, box-shadow .15s;
}
body.light select {
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid #dde1ea !important;
}
body.light textarea {
  padding: 10px 12px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid #dde1ea !important;
  line-height: 1.55 !important;
  min-height: 80px;
}
body.light input:focus,
body.light select:focus,
body.light textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10) !important;
  outline: none !important;
}

/* LABELS */
body.light label {
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .01em;
}

/* uppercase small caps */
body.light [class*="text-xs"][class*="uppercase"] {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em;
}

/* HELPER TEXT */
body.light p[class*="text-xs"],
body.light span[class*="text-xs"] {
  color: #6b7280 !important;
  font-size: 12px !important;
}

/* SECTION SPACING */
body.light .space-y-6 > * + * { margin-top: 28px !important; }
body.light .space-y-4 > * + * { margin-top: 24px !important; }
body.light .gap-4 { gap: 24px !important; }
body.light .gap-6 { gap: 28px !important; }

/* SECTION HEADERS */
body.light h2.text-lg,
body.light h3.text-lg {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -.01em;
}

/* FRAMEWORK SELECTOR CARDS */
body.light [class*="cursor-pointer"][class*="rounded"][class*="border"] {
  background: #fff !important;
  border-color: #dde1ea !important;
  transition: border-color .15s, box-shadow .15s;
}
body.light [class*="cursor-pointer"][class*="rounded"][class*="border"]:hover {
  border-color: #a5b4fc !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08) !important;
}
body.light [class*="border-indigo"],
body.light [class*="border-violet"] {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

/* SUBMIT BUTTON */
body.light button[type=submit] {
  background: #6366f1 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.25) !important;
}
body.light button[type=submit]:hover {
  background: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.30) !important;
}

/* TOGGLE SWITCH */
body.light button[role=switch] {
  background-color: #e2e8f0 !important;
  border: none !important;
  box-shadow: none !important;
}
body.light button[role=switch][aria-checked=true] {
  background-color: #6366f1 !important;
}

/* DATABASE BADGES — keep dark terminal feel */
body.light code,
body.light .font-mono.text-xs {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-radius: 4px;
  padding: 2px 6px;
}

/* MOBILE — single column */
@media (max-width: 768px) {
  body.light .grid-cols-2 { grid-template-columns: 1fr !important; }
}