/* SolarStream – custom styles */

/* ── Theme variables ─────────────────────────────────────────────────── */
:root {
  --ss-bg:           #0f172a;
  --ss-card:         #1e293b;
  --ss-border:       #334155;
  --ss-border-2:     #475569;
  --ss-hover:        #334155;
  --ss-hover-2:      #475569;
  --ss-body:         #e2e8f0;
  --ss-label:        #cbd5e1;
  --ss-heading:      #ffffff;
  --ss-subtle:       #94a3b8;
  --ss-muted:        #64748b;
  --ss-input-bg:     #0f172a;
  --ss-input-border: #475569;
}

[data-theme="light"] {
  --ss-bg:           #ffffff;
  --ss-card:         #dde4ed;
  --ss-border:       #c8d4e0;
  --ss-border-2:     #b0bfce;
  --ss-hover:        #ccd5e0;
  --ss-hover-2:      #b8c6d4;
  --ss-body:         #334155;
  --ss-label:        #475569;
  --ss-heading:      #0f172a;
  --ss-subtle:       #64748b;
  --ss-muted:        #94a3b8;
  --ss-input-bg:     #f8fafc;
  --ss-input-border: #c8d4e0;
}


/* ── Light mode: invert text-white to dark heading ───────────────────── */
[data-theme="light"] .text-white { color: var(--ss-heading); }


/* ── Light mode: blue color corrections ─────────────────────────────── */
/* text-blue-300/400 are fine on dark backgrounds but too light on white */
[data-theme="light"] .text-blue-300 { color: #1d4ed8; }
[data-theme="light"] .text-blue-400 { color: #2563eb; }

/* semi-transparent blue fills look washed out on light backgrounds */
[data-theme="light"] .bg-blue-600\/20  { background-color: #dbeafe; }
[data-theme="light"] .bg-blue-600\/40  { background-color: #bfdbfe; }
[data-theme="light"] .bg-blue-500\/15  { background-color: #dbeafe; }
[data-theme="light"] .bg-blue-500\/10  { background-color: #eff6ff; }

/* semi-transparent blue borders — make them crisper */
[data-theme="light"] .border-blue-500\/30 { border-color: rgba(37,99,235,0.4); }
[data-theme="light"] .border-blue-500\/50 { border-color: rgba(37,99,235,0.55); }

/* hover border on cards */
[data-theme="light"] .hover\:border-blue-400\/60:hover { border-color: rgba(37,99,235,0.55); }

/* hover bg on the fn-btn (paperclip) */
[data-theme="light"] .hover\:bg-blue-500\/10:hover { background-color: #eff6ff; }
[data-theme="light"] .hover\:bg-blue-600\/40:hover  { background-color: #bfdbfe; }

/* Protect white text on intentionally colored backgrounds */
[data-theme="light"] [class*="bg-blue-"] .text-white,
[data-theme="light"] [class*="bg-blue-"].text-white,
[data-theme="light"] [class*="bg-red-"].text-white,
[data-theme="light"] [class*="bg-emerald-"].text-white,
[data-theme="light"] [class*="bg-green-"].text-white,
[data-theme="light"] [class*="bg-yellow-"].text-white { color: #ffffff; }

/* Avatar initials always stay white (they have inline style bg) */
[data-theme="light"] [style*="background-color"].text-white { color: #ffffff; }

/* ── Logo switching ──────────────────────────────────────────────────── */
.ss-logo-light { display: none; }
[data-theme="light"] .ss-logo-dark  { display: none; }
[data-theme="light"] .ss-logo-light { display: block; }

/* ── Sidebar nav links ───────────────────────────────────────────────── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ss-subtle);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
  border: 1px solid transparent;
}
.nav-link:hover { background-color: var(--ss-hover); color: var(--ss-body); }
.nav-link.active { background-color: rgba(37,99,235,0.2); color: #93c5fd; border-color: rgba(59,130,246,0.25); }
[data-theme="light"] .nav-link.active { background-color: rgba(37,99,235,0.12); color: #1d4ed8; border-color: rgba(37,99,235,0.35); }

/* ── Tab buttons ─────────────────────────────────────────────────────── */
.tab-btn {
  padding-bottom: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 2px solid transparent;
  color: var(--ss-muted);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--ss-body); }
.tab-btn.active { border-bottom-color: #60a5fa; color: #93c5fd; }
[data-theme="light"] .tab-btn.active { border-bottom-color: #2563eb; color: #1d4ed8; }

/* ── Form inputs ─────────────────────────────────────────────────────── */
/* Preserve Tailwind left-padding overrides (e.g. icon insets on search bars).
   .field-input { padding: 0.75rem } in app.css (loaded after tailwind.css)
   overrides pl-8/pl-9 because they share the same specificity — fix with
   a two-class selector that wins. */
.field-input.pl-8  { padding-left: 2rem; }
.field-input.pl-9  { padding-left: 2.25rem; }
.field-input.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.field-input.py-2    { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
/* Tailwind width overrides — field-input's width:100% wins over sm:w-* at same specificity */
.field-input.sm\:w-44 { width: 100%; max-width: 11rem; }
.field-input.sm\:w-48 { width: 100%; max-width: 12rem; }
.field-input.sm\:w-64 { width: 100%; max-width: 16rem; }
.field-input.w-52     { width: 13rem; }
.field-input {
  width: 100%;
  background-color: var(--ss-input-bg);
  border: 1px solid var(--ss-input-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  color: var(--ss-body);
  font-size: 0.875rem;
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
}
[data-theme="light"] .field-input { color-scheme: light; }
.field-input:focus { box-shadow: 0 0 0 2px #3b82f6; border-color: transparent; }
.field-input option { background-color: var(--ss-card); color: var(--ss-body); }
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ss-body);
  -webkit-box-shadow: 0 0 0 1000px var(--ss-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--ss-input-bg) inset;
  caret-color: var(--ss-body);
}

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ss-label);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Section cards ───────────────────────────────────────────────────── */
.section-card { margin-bottom: 1.5rem; background-color: var(--ss-card); border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--ss-border); }
.section-header { padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--ss-border); }
.section-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

/* ── Pipeline filter chips ───────────────────────────────────────────── */
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 0.5rem;
  font-size: 0.7rem; font-weight: 600; border: 1px solid var(--ss-border);
  color: var(--ss-muted); background: transparent;
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--ss-border-2); color: var(--ss-subtle); }
.filter-chip[data-on="true"]   { border-color: #3b82f6; color: #60a5fa; background: rgba(59,130,246,0.1); }
.filter-chip[data-on="done"]   { border-color: #10b981; color: #34d399; background: rgba(16,185,129,0.1); }
.filter-chip[data-on="open"]   { border-color: #f97316; color: #fb923c; background: rgba(249,115,22,0.1); }
[data-theme="light"] .filter-chip[data-on="true"] { color: #2563eb; background: #eff6ff; }
[data-theme="light"] .filter-chip[data-on="done"] { color: #059669; background: #ecfdf5; }
[data-theme="light"] .filter-chip[data-on="open"] { color: #ea580c; background: #fff7ed; border-color: #f97316; }

/* ── Status badges ───────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 0.375rem; font-size: 0.7rem; font-weight: 700; border: 1px solid; }
.badge-blue   { background: rgba(59,130,246,0.15); color:#93c5fd; border-color:rgba(59,130,246,0.3); }
[data-theme="light"] .badge-blue { background: #dbeafe; color: #1d4ed8; border-color: rgba(37,99,235,0.4); }
.badge-yellow { background: rgba(234,179,8,0.15);  color:#fde047; border-color:rgba(234,179,8,0.3); }
.badge-emerald{ background: rgba(16,185,129,0.15); color:#6ee7b7; border-color:rgba(16,185,129,0.3); }
.badge-red    { background: rgba(239,68,68,0.15);  color:#fca5a5; border-color:rgba(239,68,68,0.3); }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ss-bg); }
::-webkit-scrollbar-thumb { background: var(--ss-border); border-radius: 3px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Facade photo thumbnails ─────────────────────────────────────────── */
.facade-thumb {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--ss-border);
  flex-shrink: 0;
}
.facade-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: none) {
  .facade-del-btn, .obj-facade-del-btn { opacity: 1 !important; }
}