/* Theme variables (global) */
:root{
  --gl-bg:#ffffff;
  --gl-text:#111111;
  --gl-muted:#444444;
  --gl-border:rgba(0,0,0,.08);
  --gl-soft:rgba(0,0,0,.04);
  --gl-card:#ffffff;
}

html[data-theme="dark"]{
  --gl-bg:#0f1115;
  --gl-text:#f1f3f5;
  --gl-muted:#c2c7cf;
  --gl-border:rgba(255,255,255,.14);
  --gl-soft:rgba(255,255,255,.08);
  --gl-card:#151923;
}

/* Minimal global overrides so the whole app follows theme without rewriting all CSS */
body{background:var(--gl-bg);color:var(--gl-text)}
.card, .panel, .box, .glCard{background:var(--gl-card)}
input, select, textarea{background:var(--gl-bg);color:var(--gl-text);border-color:var(--gl-border)}
a{color:inherit}

/* Deeper theming: cards & tables without touching base CSS */
.card, .panel, .box, .glCard, .stat, .stats, .widget {
  background: var(--gl-card);
  border-color: var(--gl-border);
  color: var(--gl-text);
}

.card, .panel, .box, .glCard {
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gl-card);
  color: var(--gl-text);
}

th, td {
  border-bottom: 1px solid var(--gl-border);
  padding: 10px 12px;
}

thead th {
  background: var(--gl-soft);
  color: var(--gl-text);
  font-weight: 700;
}

tbody tr:hover {
  background: var(--gl-soft);
}

hr { border-color: var(--gl-border); }

/* Inputs already themed; add subtle focus */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gl-soft);
  outline-offset: 2px;
}

.gl-card,.card,.panel,.gl-panel{background:var(--gl-card);border-color:var(--gl-border);}