/* Base */
body { font-family: 'Inter', system-ui, sans-serif; }

html.dark {
  --ds-bg: #0b0e11;
  --ds-bg2: #0f1318;
  --ds-card: #12161c;
  --ds-border: #1e2329;
  --ds-hover: #1a1f26;
  --ds-muted: #848e9c;
  --ds-text: #f1f5f9;
  --ds-green: #22c55e;
  --ds-red: #ef4444;
}

html:not(.dark) {
  --ds-bg: #f1f5f9;
  --ds-bg2: #e2e8f0;
  --ds-card: #ffffff;
  --ds-border: #e2e8f0;
  --ds-hover: #f8fafc;
  --ds-muted: #64748b;
  --ds-text: #0f172a;
  --ds-green: #16a34a;
  --ds-red: #dc2626;
}

.bg-ds-bg { background-color: var(--ds-bg) !important; }
.bg-ds-bg2 { background-color: var(--ds-bg2) !important; }
.bg-ds-card { background-color: var(--ds-card) !important; }
.bg-ds-hover { background-color: var(--ds-hover) !important; }
.border-ds-border { border-color: var(--ds-border) !important; }
.text-ds-muted { color: var(--ds-muted) !important; }
.text-ds-text { color: var(--ds-text) !important; }
.text-ds-green { color: var(--ds-green) !important; }
.text-ds-red { color: var(--ds-red) !important; }
.bg-ds-green { background-color: var(--ds-green) !important; }

/* Pattern backgrounds — not gradient-only */
.pattern-dots {
  background-color: var(--ds-bg);
  background-image: radial-gradient(var(--ds-border) 1px, transparent 1px);
  background-size: 20px 20px;
}
.pattern-grid {
  background-color: var(--ds-bg);
  background-image:
    linear-gradient(var(--ds-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-border) 1px, transparent 1px);
  background-size: 40px 40px;
}
.pattern-diag {
  background-color: var(--ds-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    var(--ds-border) 12px,
    var(--ds-border) 13px
  );
}

html:not(.dark) body { color: #0f172a; }
html.dark body { color: #f1f5f9; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ds-bg); }
::-webkit-scrollbar-thumb { background: var(--ds-border); border-radius: 3px; }

.table-row:hover { background-color: var(--ds-hover); }

/* Sidebar */
.dash-sidebar {
  width: 240px;
  background: var(--ds-card);
  border-right: 1px solid var(--ds-border);
}
.dash-link.active {
  background: var(--ds-hover);
  color: var(--ds-text);
  border-left: 3px solid var(--ds-green);
}
.dash-link {
  border-left: 3px solid transparent;
}

/* Mobile floating bottom nav */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--ds-card);
    border-top: 1px solid var(--ds-border);
    padding: 0.5rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  }
  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.65rem;
    color: var(--ds-muted);
    text-decoration: none;
    border-radius: 0.5rem;
    min-width: 3.5rem;
  }
  .mobile-bottom-nav a.active {
    color: var(--ds-green);
  }
  .mobile-bottom-nav a svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  /* Space so content is not hidden under bottom nav */
  .dash-main-pad {
    padding-bottom: 5rem !important;
  }
}