:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: rgba(17,24,39,.12);
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --primary: #2563eb;
  --primary-2: rgba(37,99,235,.12);
  --sidebar: #ffffff;
}

:root[data-theme="dark"]{
  --bg: #0b1220;
  --card: rgba(255,255,255,.04);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --border: rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --primary: #60a5fa;
  --primary-2: rgba(96,165,250,.16);
  --sidebar: rgba(255,255,255,.03);
}

body{
  background: var(--bg);
  color: var(--text);
}

.app-header{
  background: var(--card);
  box-shadow: var(--shadow);
}

.app-shell{
  min-height: 100vh;
}

.app-sidebar{
  background: var(--sidebar);
  min-height: calc(100vh - 70px);
}

.app-main{
  min-height: calc(100vh - 70px);
}

.app-brand{
  color: var(--text);
}

.app-nav-link{
  color: var(--text);
  border: 1px solid transparent;
  transition: all .15s ease-in-out;
}

.app-nav-link:hover{
  background: var(--primary-2);
  border-color: var(--border);
}

.card{
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.table{
  color: var(--text);
}

.table thead th{
  color: var(--muted);
  border-bottom-color: var(--border);
}

.table td, .table th{
  border-color: var(--border);
}

.form-control, .form-select{
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.2);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(96,165,250,.2);
}

.btn-outline-secondary{
  border-color: var(--border);
  color: var(--text);
}

.btn-outline-secondary:hover{
  background: var(--primary-2);
  color: var(--text);
  border-color: var(--border);
}

.text-muted{
  color: var(--muted) !important;
}

.badge.text-bg-primary{
  background-color: var(--primary) !important;
}

.app-kpi{
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}

code, pre{
  color: var(--text);
}

a{
  color: var(--primary);
}