/* SproutLink — Smart Links. Trackable Results. */
:root {
  --lk-primary: #186635;
  --lk-primary-dark: #124f28;
  --lk-primary-soft: #e8f3ec;
  --lk-bg: #f5f6f7;
  --lk-surface: #ffffff;
  --lk-border: #e3e6e8;
  --lk-text: #15191c;
  --lk-muted: #5b666f;
  --lk-sidebar-w: 248px;
  --bs-primary: #186635;
  --bs-primary-rgb: 24, 102, 53;
  --bs-link-color: #186635;
  --bs-link-color-rgb: 24, 102, 53;
  --bs-link-hover-color: #124f28;
  --bs-body-color: var(--lk-text);
  --bs-body-bg: var(--lk-bg);
  --bs-border-color: var(--lk-border);
  --bs-border-radius: .625rem;
  --bs-font-sans-serif: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--lk-bg); color: var(--lk-text); font-size: .95rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(24, 102, 53, .45); outline-offset: 2px; }

.btn-primary { --bs-btn-bg: #186635; --bs-btn-border-color: #186635; --bs-btn-hover-bg: #124f28; --bs-btn-hover-border-color: #124f28;
  --bs-btn-active-bg: #0f4322; --bs-btn-active-border-color: #0f4322; --bs-btn-disabled-bg: #186635; --bs-btn-disabled-border-color: #186635;
  --bs-btn-focus-shadow-rgb: 24, 102, 53; }
.btn-outline-primary { --bs-btn-color: #186635; --bs-btn-border-color: #186635; --bs-btn-hover-bg: #186635; --bs-btn-hover-border-color: #186635;
  --bs-btn-active-bg: #124f28; --bs-btn-active-border-color: #124f28; --bs-btn-focus-shadow-rgb: 24, 102, 53; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #4f9a6a; box-shadow: 0 0 0 .2rem rgba(24, 102, 53, .2); }
.form-check-input:checked { background-color: #186635; border-color: #186635; }
.text-primary { color: var(--lk-primary) !important; }
.bg-primary-soft { background: var(--lk-primary-soft); }
.text-muted, .form-text { color: var(--lk-muted) !important; }

/* Layout */
.lk-sidebar { width: var(--lk-sidebar-w); background: var(--lk-surface); border-right: 1px solid var(--lk-border); }
@media (min-width: 992px) {
  .lk-sidebar { position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; }
  .lk-main { margin-left: var(--lk-sidebar-w); }
}
.lk-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; font-weight: 700; font-size: 1.25rem; color: var(--lk-text); letter-spacing: -.02em; }
.lk-brand img { width: 32px; height: 32px; }
.lk-brand:hover { text-decoration: none; }
.lk-nav { padding: .5rem .75rem; flex: 1; overflow-y: auto; }
.lk-nav .nav-link { display: flex; align-items: center; gap: .65rem; color: #2b343a; padding: .55rem .75rem; border-radius: .5rem; font-weight: 500; }
.lk-nav .nav-link:hover { background: #f0f2f3; text-decoration: none; }
.lk-nav .nav-link.active { background: var(--lk-primary-soft); color: var(--lk-primary-dark); }
.lk-nav .nav-link i { font-size: 1.1rem; }
.lk-user { border-top: 1px solid var(--lk-border); padding: .9rem 1.1rem; }
.lk-topbar { background: var(--lk-surface); border-bottom: 1px solid var(--lk-border); }
.lk-content { padding: 1.5rem; max-width: 1280px; }
@media (max-width: 575.98px) { .lk-content { padding: 1rem; } }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }

/* Cards, stats */
.card { border: 1px solid var(--lk-border); border-radius: .875rem; background: var(--lk-surface); box-shadow: 0 1px 2px rgba(16, 24, 28, .03); }
.card-header { background: transparent; border-bottom: 1px solid var(--lk-border); font-weight: 600; padding: .85rem 1.1rem; }
.stat { padding: 1rem 1.1rem; }
.stat .label { color: var(--lk-muted); font-size: .8rem; font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.stat .value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.stat .hint { color: var(--lk-muted); font-size: .75rem; }
.stat .icon { width: 2rem; height: 2rem; border-radius: .55rem; background: var(--lk-primary-soft); color: var(--lk-primary); display: inline-flex; align-items: center; justify-content: center; }

/* Tables */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem 1rem; vertical-align: middle; }
.table thead th { color: var(--lk-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; background: #fafbfb; border-bottom: 1px solid var(--lk-border); white-space: nowrap; }
.table-hover tbody tr:hover { background: #fafcfb; }
.truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; }
.short-pill { display: inline-flex; align-items: center; gap: .35rem; background: var(--lk-primary-soft); color: var(--lk-primary-dark); border-radius: 2rem; padding: .15rem .65rem; font-weight: 600; font-size: .85rem; }

/* Bars (breakdowns) */
.bar-row { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; gap: .6rem; align-items: center; padding: .3rem 0; font-size: .875rem; }
.bar-track { height: .55rem; background: #eef0f1; border-radius: 1rem; overflow: hidden; }
.bar-fill { height: 100%; background: var(--lk-primary); border-radius: 1rem; width: 0; transition: width .4s ease; }
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 210px; }

/* Empty / loading states */
.empty { text-align: center; padding: 2.25rem 1rem; color: var(--lk-muted); }
.empty i { font-size: 2rem; color: #9aa6ae; display: block; margin-bottom: .4rem; }
.btn-loading .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }
.skeleton { background: linear-gradient(90deg, #eceff0 25%, #f6f7f8 37%, #eceff0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: .5rem; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.qr-preview { background: #fff; border: 1px solid var(--lk-border); border-radius: .75rem; padding: .75rem; display: inline-block; }
.qr-preview img { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.public-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; }
.public-card { width: 100%; max-width: 420px; padding: 2rem; }
.public-card.wide { max-width: 560px; }
.err-code { font-size: 3.25rem; font-weight: 800; color: var(--lk-primary); letter-spacing: -.04em; line-height: 1; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 2000; }
.skip-link:focus { left: 0; }
.range-pills .btn { --bs-btn-padding-y: .3rem; --bs-btn-font-size: .85rem; }
code.snippet, pre.snippet { background: #101417; color: #e6edf0; border-radius: .6rem; }
pre.snippet { padding: 1rem; overflow-x: auto; font-size: .8rem; margin: 0; }

/* Team, roles, permissions */
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--lk-primary-soft); color: var(--lk-primary-dark); font-weight: 700; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar-owner { background: #15191c; color: #fff; }
.min-w-0 { min-width: 0; }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--lk-primary-dark); --bs-nav-link-color: var(--lk-muted); --bs-nav-link-hover-color: var(--lk-primary); border-bottom-color: var(--lk-border); }
.nav-tabs .nav-link.active { border-color: var(--lk-border) var(--lk-border) var(--lk-bg); background: var(--lk-bg); font-weight: 600; }
.role-option { display: flex; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--lk-border); border-radius: .75rem; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.role-option:hover { border-color: #9cc4aa; }
.role-option.selected, .role-option:has(input:checked) { border-color: var(--lk-primary); background: var(--lk-primary-soft); }
.role-card { transition: box-shadow .15s, transform .15s; }
.role-card:hover { box-shadow: 0 6px 18px rgba(16, 24, 28, .08); }
.perm-chip { background: #f0f2f3; color: #2b343a; border-radius: 1rem; padding: .12rem .6rem; font-size: .75rem; font-weight: 500; }
.perm-more { background: var(--lk-primary-soft); color: var(--lk-primary-dark); }
.perm-row { padding: .85rem 1.1rem; }
.perm-row .form-check-input { margin-top: .35rem; }
.perm-row:has(input:checked) { background: #f6fbf8; }
.matrix th, .matrix td { white-space: nowrap; font-size: .85rem; }
.matrix thead th { background: #fafbfb; }
.matrix .group-row th { background: #f0f2f3; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lk-muted); }
.tile { transition: box-shadow .15s, transform .15s; }
.tile:hover { box-shadow: 0 8px 20px rgba(16, 24, 28, .09); transform: translateY(-2px); text-decoration: none; }
.icon-lg { width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: var(--lk-primary-soft); color: var(--lk-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.lk-user .avatar { width: 2.2rem; height: 2.2rem; }