/* ============================================================
   3J & D Construction Services — SaaS theme layered on Bootstrap 5.3
   Brand accent: amber. Dark mode via [data-bs-theme="dark"].
   ============================================================ */
:root {
  --brand: #F59E0B;
  --brand-hover: #D97706;
  --brand-ink: #1f1300;
  --c-material: #2563EB;
  --c-labor: #10B981;
  --c-other: #8B5CF6;
  --c-family: #F97316;
  --c-health: #EC4899;
  --sidebar-w: 264px;

  --bs-primary: #F59E0B;
  --bs-primary-rgb: 245, 158, 11;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: #F4F6FA;
  --bs-border-color: #E6EAF0;
  --bs-border-radius: .8rem;
  --bs-border-radius-lg: 1rem;
  --bs-body-color: #0F172A;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #0B0F1A;
  --bs-border-color: #1F2937;
  --bs-body-color: #F1F5F9;
  --bs-emphasis-color: #F8FAFC;
  --bs-secondary-color: #94A3B8;
  --brand-hover: #FBBF24;
}

body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; }
.tnum { font-variant-numeric: tabular-nums; }
a { text-decoration: none; }

/* ---- brand primary button ---- */
.btn-primary {
  --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-active-color: var(--brand-ink);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-disabled-color: var(--brand-ink);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-hover); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-active-color: var(--brand-ink);
  font-weight: 600;
}
.text-brand { color: var(--brand-hover) !important; }
.link-brand { color: var(--c-material); font-weight: 600; }
.link-brand:hover { text-decoration: underline; }

/* ---- app shell ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: var(--bs-tertiary-bg);
  border-right: 1px solid var(--bs-border-color);
}
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: 0 0 var(--sidebar-w); }
}
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: 20px 24px 56px; width: 100%; max-width: 1680px; margin: 0 auto; }

.sidebar .brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--brand), var(--brand-hover));
  box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
}
.brand-logo svg { width: 22px; height: 22px; }
.brand-name { font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.brand-sub { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); font-weight: 600; }

.side-nav { padding: 8px 12px 20px; }
.side-nav .nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); font-weight: 700; padding: 14px 12px 6px; }
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: .6rem; margin-bottom: 2px;
  color: var(--bs-secondary-color); font-weight: 500; font-size: .92rem;
  transition: background .15s, color .15s;
}
.side-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.side-link:hover { background: color-mix(in srgb, var(--bs-emphasis-color) 7%, transparent); color: var(--bs-emphasis-color); }
.side-link.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-hover); font-weight: 600; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: 62px; display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--bs-border-color);
}
.topbar h1 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }

/* ---- stat cards ---- */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand); }
.stat-card.accent-material::before { background: var(--c-material); }
.stat-card.accent-labor::before { background: var(--c-labor); }
.stat-card.accent-other::before { background: var(--c-other); }
.stat-card.accent-family::before { background: var(--c-family); }
.stat-card.accent-health::before { background: var(--c-health); }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.stat-sub { font-size: .8rem; color: var(--bs-secondary-color); }

.card { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.card-title { font-size: 1rem; font-weight: 600; }

/* ---- tables ---- */
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }
.table > :not(caption) > * > * { padding: .7rem .85rem; }

/* ---- category + status pills ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: capitalize; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-material { color: var(--c-material); background: color-mix(in srgb, var(--c-material) 13%, transparent); }
.pill-labor { color: var(--c-labor); background: color-mix(in srgb, var(--c-labor) 14%, transparent); }
.pill-other { color: var(--c-other); background: color-mix(in srgb, var(--c-other) 14%, transparent); }
.pill-family { color: var(--c-family); background: color-mix(in srgb, var(--c-family) 14%, transparent); }
.pill-health { color: var(--c-health); background: color-mix(in srgb, var(--c-health) 14%, transparent); }
.pill-active { color: var(--c-labor); background: color-mix(in srgb, var(--c-labor) 14%, transparent); }
.pill-inactive, .pill-not_active { color: var(--bs-secondary-color); background: color-mix(in srgb, var(--bs-emphasis-color) 8%, transparent); }
.status-toggle { cursor: pointer; border: 1px solid transparent; }
.status-toggle:hover { border-color: currentColor; }

/* ---- chart wraps ---- */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap.h-bar { height: 320px; }
.chart-wrap.h-donut { height: 300px; }
.chart-wrap.h-line { height: 300px; }

/* ---- rank list ---- */
.ranklist { display: flex; flex-direction: column; gap: 12px; }
.rank { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.rank-name { font-weight: 500; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-weight: 700; font-size: .85rem; }
.rank-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--bs-emphasis-color) 8%, transparent); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 999px; background: var(--brand); }
.rank-fill.material { background: var(--c-material); }
.rank-fill.payee { background: var(--c-labor); }

/* ---- feed ---- */
.feed-item { display: flex; align-items: center; gap: 13px; padding: 11px 2px; border-bottom: 1px solid var(--bs-border-color); }
.feed-item:last-child { border-bottom: 0; }
.feed-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.feed-ico.material { color: var(--c-material); background: color-mix(in srgb, var(--c-material) 13%, transparent); }
.feed-ico.labor { color: var(--c-labor); background: color-mix(in srgb, var(--c-labor) 14%, transparent); }
.feed-ico.other { color: var(--c-other); background: color-mix(in srgb, var(--c-other) 14%, transparent); }
.feed-main { min-width: 0; flex: 1; }
.feed-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-meta { font-size: .78rem; color: var(--bs-secondary-color); }

/* ---- skeleton ---- */
.skel { position: relative; overflow: hidden; background: color-mix(in srgb, var(--bs-emphasis-color) 8%, transparent); border-radius: 8px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-line { height: 13px; margin: 8px 0; }
.skel-value { height: 28px; width: 70%; margin-top: 6px; }
.skel-row { height: 42px; margin: 8px 0; }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent),
  var(--bs-body-bg); }
.login-card { width: 100%; max-width: 410px; }

/* ---- misc ---- */
.empty-state { text-align: center; padding: 44px 20px; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.2rem; opacity: .5; }
.cursor-pointer { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .skel::after { display: none; } * { transition: none !important; } }