:root {
  --ign-accent: #0a7d6b;
  --ign-accent-2: #12b39a;
  --ign-sidebar-bg: #0f2d28;
  --ign-sidebar-bg-2: #123a33;
  --ign-bg: #f4f6f6;
  --ign-card-bg: #fff;
  --ign-table-head-bg: #fafbfb;
  --ign-table-head-fg: #6b7676;
  --ign-code-bg: #eef2f2;
  --ign-code-fg: inherit;
  --ign-shadow: 0 1px 2px rgba(16,24,24,.06), 0 2px 8px rgba(16,24,24,.06);
  --bs-link-color: var(--ign-accent);
  --bs-link-hover-color: var(--ign-accent-2);
}

[data-bs-theme="dark"] {
  --ign-bg: #12181a;
  --ign-card-bg: var(--bs-body-bg);
  --ign-table-head-bg: rgba(255,255,255,.03);
  --ign-table-head-fg: var(--bs-secondary-color);
  --ign-code-bg: rgba(255,255,255,.08);
  --ign-code-fg: #e6e6e6;
  --ign-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
}

body { background: var(--ign-bg); }

/* ---- shell layout: sidebar + main ---- */
.ign-shell { min-height: 100vh; }

.ign-sidebar {
  width: 240px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--ign-sidebar-bg), var(--ign-sidebar-bg-2));
  color: #fff;
  border: none;
}
/* Without an explicit height here, .offcanvas-body's flex column only
   stretches to fit its own content (the nav links), not the sidebar's full
   height — so the version footer just sat right under the last link instead
   of at the bottom of the screen. Pins it there regardless of how few nav
   items there are or how tall the page content is. */
.ign-sidebar .offcanvas-body { height: 100%; }
.ign-sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.08); padding: 1.1rem 1rem; }
.ign-sidebar .brand {
  display: flex; align-items: center; gap: .7rem;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem;
}
/* the mark's own fill is teal-on-teal against this sidebar — a light backdrop
   is what actually makes it read as a logo instead of disappearing */
.ign-brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .6rem;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ign-sidebar .nav-link {
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem 1rem; margin: .15rem .7rem; border-radius: .5rem;
  font-size: .95rem;
}
.ign-sidebar .nav-link i { font-size: 1.1rem; }
.ign-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.ign-sidebar .nav-link.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

.ign-main { min-width: 0; }
.ign-topbar {
  background: var(--ign-card-bg); border-bottom: 1px solid var(--bs-border-color);
  padding: .6rem 1rem; position: sticky; top: 0; z-index: 10;
}

/* ---- material-ish elevation ---- */
.card, .table-card {
  border: none;
  border-radius: .75rem;
  box-shadow: var(--ign-shadow);
  background: var(--ign-card-bg);
}
.table-card { overflow: hidden; }
.table-card > .table { margin-bottom: 0; }
.table thead th {
  text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
  color: var(--ign-table-head-fg); background: var(--ign-table-head-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.table td, .table th { vertical-align: middle; }

.btn-accent { background: var(--ign-accent); border-color: var(--ign-accent); color: #fff; }
.btn-accent:hover { background: var(--ign-accent-2); border-color: var(--ign-accent-2); color: #fff; }

.page-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.page-title i { color: var(--ign-accent); }

code { background: var(--ign-code-bg); color: var(--ign-code-fg); padding: .1rem .35rem; border-radius: 4px; }

/* ---- auth pages (login/setup/signup/...) ---- */
.ign-auth-page { min-height: 100vh; padding: 1.5rem; background: var(--ign-bg); }
.ign-auth-card { width: 100%; max-width: 26rem; }
.ign-auth-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.3rem; color: var(--ign-sidebar-bg);
}
[data-bs-theme="dark"] .ign-auth-brand { color: #fff; }