/* VeriFactu by Finateca — brand skin on top of Tabler (graphite / teal) */

:root {
  --tblr-primary: #17a6a0;
  --tblr-primary-rgb: 23, 166, 160;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #0e7a75;
  --tblr-link-color-rgb: 14, 122, 117;

  --tblr-dark: #0b0d10;
  --tblr-dark-rgb: 11, 13, 16;

  --brand-graphite: #0b0d10;
  --brand-graphite-2: #1b1e24;
  --brand-teal: #17a6a0;
}

body {
  background: var(--tblr-body-bg, #f4f6fa);
}

.mono {
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 0.92em;
}

/* ---------- guest / auth pages ---------- */

.guest-wrap {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--tblr-body-bg, #f4f6fa);
}

.guest-card {
  width: 100%;
  max-width: 380px;
}

.guest-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--tblr-body-color, #1a2234);
}

/* ---------- sidebar ---------- */

.navbar-vertical.navbar-dark {
  --tblr-navbar-color: #cfe3df;
  --tblr-navbar-hover-color: #fff;
  --tblr-navbar-active-color: #fff;
  background: var(--brand-graphite);
  display: flex;
  flex-direction: column;
}

/* Tabler's own .navbar-vertical .container-fluid (wrapping the brand +
   nav list) ships with min-height: 100% — sized against the fixed-position
   aside's full viewport height, unconditionally, regardless of how much
   nav content it actually holds. That's fine for a plain Tabler sidebar
   with nothing else in it, but .sidebar-tenant below is a *second* flex
   child of the same column (pushed to the bottom via margin-top: auto) —
   with the nav container already forced to 100%, .sidebar-tenant has no
   room left and just tacks its own height on past the bottom of the
   viewport, overflowing by exactly that much (confirmed in a headless
   browser: 71px overflow, .sidebar-tenant entirely below the fold) —
   independent of how many nav items exist above it, so this was never
   really about the item count or padding. Un-forcing the 100% here lets
   both children size to content, and margin-top: auto on .sidebar-tenant
   correctly pushes it to the actual bottom of whatever room remains. */
.navbar-vertical.navbar-dark > [class^="container"] {
  min-height: 0;
}

.navbar-vertical .nav-item.active .nav-link,
.navbar-vertical .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sidebar-tenant {
  margin-top: auto;
  padding: 14px 20px;
  font-size: 12px;
  color: #9fbcb6;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-tenant form {
  margin-top: 8px;
}

.btn-logout {
  background: none;
  border: none;
  color: #cfe3df;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}

.btn-logout:hover {
  color: #fff;
}

/* ---------- misc ---------- */

.kv dt {
  color: var(--tblr-secondary-color, #6b7480);
}

/* ---------- status badges ---------- */

.badge-pending { background: #fff3cd; color: #a2720f; border-radius: 999px; }
.badge-accepted, .badge-active { background: #d1f2df; color: #1a7f4b; border-radius: 999px; }
.badge-rejected, .badge-error, .badge-failed { background: #fde2e1; color: #b3352b; border-radius: 999px; }
.badge-sent { background: #dbeafe; color: #1d4ed8; border-radius: 999px; }
.badge-replaced, .badge-revoked { background: #e5e7eb; color: #4b5563; border-radius: 999px; }