:root {
  /* Neutral defaults. Per-instance colours are overridden by /brand.css (see docs/BRANDING.md). */
  --bg: #0b1020;
  --panel: #111a33;
  --panel2: #0e1530;
  --border: #243055;
  --text: #e8ecf6;
  --muted: #9aa7c7;

  /* Primary accent */
  --primary: #2443a8;
  --primaryBorder: #3856aa;

  --danger: #8b1d1d;
  --dangerBorder: #c23a3a;
}

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); margin: 0; }
.container { padding: 20px; max-width: 1200px; margin: 0 auto; }
.container.wide { max-width: 1400px; }

/* Standard page header */
.page-header {
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.page-title {
  margin: 0;
}

.page-subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.page-actions {
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 760px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: flex-start; }
}
.container h1, .container h2, .container h3 { letter-spacing: 0.2px; }
.container h2 { margin: 10px 0 6px 0; }
.container h3 { margin: 0 0 8px 0; font-size: 15px; }
.container p { line-height: 1.5; }
.card { max-width: 420px; margin: 10vh auto; background: var(--panel); padding: 24px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
label { display:block; margin-top: 12px; font-size: 14px; color: #cdd6f4; }
input { width: 100%; padding: 10px; margin-top: 6px; border-radius: 8px; border: 1px solid #2a3a68; background: var(--bg); color: var(--text); }

button { margin-top: 16px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--primaryBorder); background: var(--primary); color: #fff; cursor: pointer; font-weight: 600; }
button.secondary { background: transparent; border: 1px solid #3a4a77; color: var(--text); }
button.danger { background: var(--danger); border: 1px solid var(--dangerBorder); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Button polish: subtle hover/active states */
button:hover, a.button:hover { filter: brightness(1.08); }
button:active, a.button:active { transform: translateY(1px); }
button.secondary:hover, a.button.secondary:hover { filter: brightness(1.10); }
button.danger:hover, a.button.danger:hover { filter: brightness(1.06); }

.notice { background: #1a2f3b; border: 1px solid #2a4c6a; padding: 10px; border-radius: 8px; margin: 12px 0; }
.error { background: #3b1a1a; border: 1px solid #6a2a2a; padding: 10px; border-radius: 8px; margin: 12px 0; }

.topbar { display:flex; justify-content: space-between; align-items:center; padding: 10px 18px; background: var(--panel2); border-bottom: 1px solid var(--border); }
.brand { display:flex; align-items:center; gap: 10px; min-height: 28px; }
.brand img { height: 40px; width: auto; display:block; }
.brand-title { font-weight: 750; letter-spacing: 0.2px; font-size: 15px; line-height: 1.1; }

.topbar-right { display:flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.topbar-right form { margin: 0; }
.topbar-right button { margin-top: 0; }

.row { display:flex; align-items:center; justify-content: space-between; gap: 12px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items:start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.actions { display:flex; flex-wrap:wrap; gap: 10px; }
.actions form { margin: 0; }
.actions button { margin-top: 0; }

.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap: 6px; font-size: 13px; margin-top: 10px; }

.tenant-nav { margin-top: 10px; margin-bottom: 6px; display:flex; gap: 10px; flex-wrap: wrap; }

/* Consistent vertical rhythm */
.page-header { margin-top: 12px; }
.card2 { margin-top: 14px; }

/* Keep the new modern tenant-nav button style */
.tenant-nav a.tenant-tab {
  display:inline-block;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(180, 200, 255, 0.18);
  color: #fff;
  text-decoration:none;
  font-weight: 700;
  background: rgba(17, 26, 51, 0.92);
}

.tenant-nav a.tenant-tab:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

/* Unique colors per tab (subtle modern chips) */
.tenant-nav a.tenant-tab.users { background: rgba(36,67,168,0.30); border-color: rgba(158,184,255,0.50); }
.tenant-nav a.tenant-tab.groups { background: rgba(22,122,132,0.28); border-color: rgba(150,255,241,0.38); }
.tenant-nav a.tenant-tab.security { background: rgba(176,106,18,0.24); border-color: rgba(255,221,160,0.38); }
.tenant-nav a.tenant-tab.audit { background: rgba(106,42,165,0.24); border-color: rgba(221,190,255,0.38); }
.tenant-nav a.tenant-tab.details { background: rgba(58,74,119,0.28); border-color: rgba(220,230,255,0.32); }

/* Active state */
.tenant-nav a.tenant-tab.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) inset;
}

.badge { display:inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid #3a4a77; color: var(--muted); }
.badge.live { border-color: #2a4c6a; color: #b9d6ff; }
.badge.synced { border-color: #3a4a77; }

code { background: var(--bg); border: 1px solid var(--border); padding: 2px 6px; border-radius: 6px; }

hr.sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.card2 { margin-top: 16px; background: var(--panel); padding: 16px; border-radius: 10px; border: 1px solid var(--border); }
.tabs { margin-top: 12px; display:flex; gap: 10px; }
a.tab { display:inline-block; padding: 8px 12px; border-radius: 8px; border: 1px solid #3a4a77; color: var(--text); text-decoration:none; }
a.tab:hover { border-color: var(--primaryBorder); }

.small { max-width: 420px; word-break: break-word; color: #c7cfe9; }
.muted { color: var(--muted); }

/* links */
a { color: inherit; }
a:visited { color: inherit; }

a.link { color: #c7d4ff; text-decoration: none; }
a.link:visited { color: #c7d4ff; }
a.link:hover { text-decoration: underline; }

a.button { display:inline-block; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--primaryBorder); background: var(--primary); color: #fff; text-decoration:none; font-weight: 600; }
/* Allow combining .button with tenant-tab styles: tenant-tab should win for background/border */
a.button.tenant-tab { background: #1a244a; border-color: rgba(255,255,255,0.16); }
a.button.tenant-tab.users { background: #2443a8; border-color: rgba(158,184,255,0.55); }
a.button.tenant-tab.groups { background: #167a84; border-color: rgba(150,255,241,0.40); }
a.button.tenant-tab.security { background: #b06a12; border-color: rgba(255,221,160,0.45); }
a.button.tenant-tab.audit { background: #6a2aa5; border-color: rgba(221,190,255,0.45); }
a.button.tenant-tab.details { background: #3a4a77; border-color: rgba(220,230,255,0.35); }
a.button.secondary { background: transparent; border: 1px solid #3a4a77; color: var(--text); }
a.button.danger { background: var(--danger); border: 1px solid var(--dangerBorder); }
a.link.button { color: #fff; }
a.link.button.secondary { color: var(--text); }

/* Make tenant-list page buttons match the tenant-nav pill style */
a.button.tenant-tab {
  border-radius: 14px;
  border: 1px solid rgba(180, 200, 255, 0.18);
  background: rgba(17, 26, 51, 0.92);
}

a.button.tenant-tab.users { background: rgba(36,67,168,0.30); border-color: rgba(158,184,255,0.50); }
a.button.tenant-tab.groups { background: rgba(22,122,132,0.28); border-color: rgba(150,255,241,0.38); }
a.button.tenant-tab.security { background: rgba(176,106,18,0.24); border-color: rgba(255,221,160,0.38); }
a.button.tenant-tab.audit { background: rgba(106,42,165,0.24); border-color: rgba(221,190,255,0.38); }
/* Tenants list: make Organization Name (Overview) button stand out */
a.button.tenant-tab.details { background: #000; border-color: rgba(255,255,255,0.28); }

/* table */
table { width:100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  background: var(--panel2);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #cdd6f4;
}
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.012); }
tbody tr:hover td { background: rgba(59, 102, 246, 0.10); }

/* Force Organization Name button on /tenants list */
table.tenants-table a.button.tenant-tab.details {
  background: #000 !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #fff !important;
}
td { font-size: 13px; }

/* Table readability utilities */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-variant-numeric: tabular-nums; }

/* Tenants list: optional “card rows” style */
table.tenants-table {
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
  border: none;
}

table.tenants-table thead th {
  position: static;
  background: transparent;
  border-bottom: none;
  padding: 6px 10px;
  color: var(--muted);
  font-weight: 700;
}

table.tenants-table tbody tr td {
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

table.tenants-table tbody tr td:first-child {
  border-left: 1px solid var(--border);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

table.tenants-table tbody tr td:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

table.tenants-table tbody tr:hover td {
  background: rgba(59, 102, 246, 0.20);
}

table.tenants-table tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 rgba(59, 102, 246, 0.70);
}

/* Tenants list: keep action buttons on one line */
table.tenants-table td .actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
table.tenants-table td .actions form { margin: 0; }
table.tenants-table td .actions button {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

/* tables in cards: keep rounded corners crisp */
table tr:last-child td { border-bottom: none; }

/* nice “pill” chips for small statuses if we add them later */
.chip { display:inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* High-contrast status chips */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid rgba(255,255,255,0.22);
}

.status.ok { background: #1f7a43; border-color: rgba(46, 255, 144, 0.35); color: #effff6; }
.status.warn { background: #9a6b12; border-color: rgba(255, 205, 92, 0.35); color: #fff8e6; }
.status.err { background: #8b1d1d; border-color: rgba(255, 104, 104, 0.35); color: #fff0f0; }
.status.neutral { background: #2b3555; border-color: rgba(210, 225, 255, 0.22); color: #eef2ff; }

/* License SKU palette (avoid green; deterministic classes set by JS) */
.status.sku1 { background: #2b4aa7; border-color: rgba(120, 170, 255, 0.38); color: #edf3ff; }
.status.sku2 { background: #5b2aa7; border-color: rgba(200, 150, 255, 0.36); color: #f4edff; }
.status.sku3 { background: #a84a1d; border-color: rgba(255, 170, 110, 0.36); color: #fff0e8; }
.status.sku4 { background: #b81b6d; border-color: rgba(255, 140, 205, 0.34); color: #ffeaf4; }
.status.sku5 { background: #0b6f79; border-color: rgba(120, 240, 255, 0.30); color: #eaffff; }
.status.sku6 { background: #8b6b1a; border-color: rgba(255, 225, 130, 0.30); color: #fff9e8; }

/* Security tools indicator boxes */
.toolbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,0.18);
}

.toolbox.avanan { background: #d11b78; border-color: rgba(255, 130, 210, 0.45); color: #fff0f8; }
.toolbox.huntress { background: #a84a1d; border-color: rgba(255, 170, 110, 0.36); color: #fff0e8; }
.toolbox.unknown { background: #4a516a; border-color: rgba(210,225,255,0.20); color: #eef2ff; opacity: 0.85; }
.toolbox.off { background: transparent; border-color: rgba(210,225,255,0.18); color: rgba(210,225,255,0.45); }

/* Skeleton loaders (dark mode) */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
  animation: sk 1.2s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes sk {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.sk-line { height: 12px; margin: 8px 0; }
.sk-line.sm { width: 35%; }
.sk-line.md { width: 55%; }
.sk-line.lg { width: 80%; }

.sk-table td { padding: 10px 12px; }

/* Empty states */
.empty {
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(210,225,255,0.25);
  background: rgba(43, 53, 85, 0.18);
  color: var(--text);
}
.empty-title { font-weight: 800; letter-spacing: 0.2px; margin-bottom: 6px; }
.empty .muted { color: var(--muted); }

/* optional: make row-based pages feel less cramped */
.row h2 { margin: 0; }

/* Tenant inventory: compact on desktop; scroll deliberately on narrow viewports. */
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #b9d6ff;
  outline-offset: 2px;
}
table.tenants-table { min-width: 1080px; table-layout: auto; border-spacing: 0 6px; }
table.tenants-table thead th { padding: 6px 8px; white-space: nowrap; }
table.tenants-table tbody td { padding: 8px; vertical-align: middle; }
table.tenants-table td.tenant-identity { min-width: 290px; max-width: 420px; }
.tenant-links { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
table.tenants-table a.tenant-action {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid rgba(180, 200, 255, 0.36);
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  line-height: 1.3;
}
table.tenants-table a.tenant-action:hover { filter: brightness(1.18); }
table.tenants-table a.tenant-action.org {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  background: #273864;
  border-color: #657cb5;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tenant-quicklinks { display: flex; flex: none; gap: 5px; }
table.tenants-table a.tenant-action.users,
table.tenants-table a.tenant-action.security { padding: 4px 7px; font-size: 11px; }
table.tenants-table a.tenant-action.users { background: #2443a8; border-color: #829bdf; }
table.tenants-table a.tenant-action.security { background: #805017; border-color: #c19052; }
table.tenants-table td.domain-cell { overflow-wrap: anywhere; max-width: 175px; }
table.tenants-table td .actions { white-space: nowrap; }
table.tenants-table td .actions a.button { white-space: nowrap; padding: 6px 10px; font-size: 12px; line-height: 1.1; }
.cell-meta { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; white-space: nowrap; }
.cell-details { display: inline-block; text-align: left; max-width: 280px; vertical-align: middle; }
.cell-details summary { cursor: pointer; color: #c7d4ff; }
.cell-details span { display: block; overflow-wrap: anywhere; white-space: normal; padding-top: 5px; color: var(--text); }