/* Tenant Connect — visual language matches the Derilinx document brand
   (see docs/tenant-connect-two-paths.html and tenant-connect-pitch.html):
   warm white background, ink body text, gold-underlined headings, teal as
   the secondary/action accent, panelled sections on a soft off-white with
   thin borders, restrained radii, generous line-height. System font stack
   only — no webfonts, no CDN, no inline styles (CSP-clean). */

:root {
  color-scheme: light;
  --color-bg: #ffffff;
  --ink: #3a3a3a;
  --heading: #5a5a5a;
  --gold: #b8912a;
  --teal: #0b6e6e;
  --teal-dark: #084f4f;
  --panel: #f7f6f3;
  --line: #ddd;
  --muted: #6b6b6b;
  --success: #1a7f37;
  --warning: #9a6700;
  --danger: #a02c2c;
  --danger-bg: #fbefef;
  --focus: #2f6fa0;

  /* legacy alias kept so any un-migrated rule still resolves sensibly */
  --color-text: var(--ink);
  --color-accent: var(--teal);
  --color-border: var(--line);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--color-bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  color: var(--heading);
  font-weight: bold;
  line-height: 1.3;
}

h1 {
  font-size: 1.8rem;
  margin: 0 0 0.3rem;
}

h2 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--gold);
}

h3 {
  font-size: 1.05rem;
  color: var(--teal);
  margin: 1.2rem 0 0.6rem;
}

p {
  margin: 0 0 0.9rem;
}

a {
  color: var(--teal-dark);
}

a:hover {
  color: var(--gold);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
  background: var(--panel);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid var(--line);
}

pre {
  display: block;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 1.5rem 0;
}

/* ---------------------------------------------------------------------- */
/* Header / nav                                                            */
/* ---------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: #ffffff;
  border-bottom: 3px solid var(--gold);
}

.site-header__brand {
  display: inline-block;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--heading);
  letter-spacing: 0.01em;
}

.site-header__identity {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}

.site-header__signout {
  margin: 0;
}

.site-header__signout button {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
}

/* ---------------------------------------------------------------------- */
/* Page layout                                                             */
/* ---------------------------------------------------------------------- */

.site-main {
  padding: 2.2rem 1.5rem 4rem;
  max-width: 52rem;
  margin: 0 auto;
}

.operator {
  max-width: 68rem;
}

/* ---------------------------------------------------------------------- */
/* Cards / panelled sections                                              */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

.card--plain {
  background: #ffffff;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.button,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  font-weight: bold;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}

/* Primary action: solid teal. Used across the portal for the main call to
   action on a page (sign in, activate, add a library, grant access). */
.button {
  background: var(--teal);
  color: #ffffff;
  border: 1px solid var(--teal);
}

.button:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #ffffff;
}

/* Secondary action: outline teal. Used for bare form submits (search,
   save, re-run checks, enable/disable, regenerate key) that are not the
   page's single primary call to action. */
button[type="submit"],
input[type="submit"] {
  background: #ffffff;
  color: var(--teal-dark);
  border: 1px solid var(--teal);
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--panel);
}

/* Destructive action: outline in the danger colour. Applied explicitly via
   this class on Remove/Disconnect controls — never the default for a bare
   submit button. Selectors repeat the element+attribute forms above so
   this beats the `button[type="submit"]` specificity, regardless of
   source order. */
.button--danger,
button[type="submit"].button--danger,
input[type="submit"].button--danger {
  background: #ffffff;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.button--danger:hover,
button[type="submit"].button--danger:hover,
input[type="submit"].button--danger:hover {
  background: var(--danger-bg);
}

/* ---------------------------------------------------------------------- */
/* Status badges / pills                                                   */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.6;
}

.badge--active {
  background: #e7f3ea;
  color: var(--success);
  border: 1px solid #bfe0c8;
}

.badge--pending {
  background: #fbf1de;
  color: var(--warning);
  border: 1px solid #eeddb0;
}

.badge--removed,
.badge--disconnected,
.badge--revoked {
  background: #f2f2f2;
  color: var(--muted);
  border: 1px solid var(--line);
}

.badge--granted {
  background: #eaf5f5;
  color: var(--teal-dark);
  border: 1px solid #bfe0e0;
}

.badge--realtime {
  background: #eaf5f5;
  color: var(--teal-dark);
  border: 1px solid #bfe0e0;
}

.badge--polling {
  background: #f2f2f2;
  color: var(--muted);
  border: 1px solid var(--line);
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

label {
  display: block;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 0.88rem;
  color: var(--heading);
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="search"],
input[type="url"],
select {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
}

input[type="text"],
input[type="search"],
input[type="url"] {
  min-width: 20rem;
  max-width: 100%;
}

form {
  margin: 0 0 0.9rem;
}

.url-form,
.site-search,
.operator-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.url-form label,
.site-search label,
.operator-search label {
  margin-bottom: 0.3rem;
  width: 100%;
}

.error,
.scan-error,
.coverage-warning {
  color: var(--danger);
}

p.error {
  background: var(--danger-bg);
  border-left: 4px solid var(--danger);
  padding: 0.7rem 1rem;
  border-radius: 0 4px 4px 0;
}

/* ---------------------------------------------------------------------- */
/* Tables                                                                  */
/* ---------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  background: var(--panel);
  font-family: Tahoma, "Segoe UI", sans-serif;
  color: var(--heading);
  font-weight: bold;
  white-space: nowrap;
}

th a {
  color: var(--heading);
  text-decoration: none;
}

th a:hover {
  color: var(--gold);
}

.operator-table,
table.ladder {
  width: 100%;
  border-collapse: collapse;
}

/* ---------------------------------------------------------------------- */
/* Lists                                                                   */
/* ---------------------------------------------------------------------- */

.drive-list,
.site-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.drive-list li,
.site-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.drive-list form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.dashboard ul,
.capabilities,
.insights-toggle-list {
  padding-left: 0;
  list-style: none;
}

.dashboard > ul > li,
.capabilities > li {
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.insights-toggle-list {
  margin-top: 0.6rem;
}

.insights-toggle-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}

.insights-toggle-list li:last-child {
  border-bottom: 0;
}

.capabilities-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist__item {
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 0 4px 4px 0;
}

.checklist__item--ok {
  border-left-color: var(--success);
}

.checklist__item--fail {
  border-left-color: var(--danger);
}

/* ---------------------------------------------------------------------- */
/* Landing page                                                            */
/* ---------------------------------------------------------------------- */

.landing__logo {
  display: block;
  width: 200px;
  height: auto;
  margin-bottom: 1.4rem;
}

.landing__tagline {
  font-size: 1.15rem;
  color: var(--heading);
  margin-bottom: 1rem;
}

.landing__cta {
  font-size: 1.05rem;
  padding: 0.7rem 1.5rem;
  margin: 0.4rem 0 1rem;
}

.faq {
  margin-top: 2.5rem;
}

.faq__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 0.7rem;
}

.faq__item summary {
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-weight: bold;
  color: var(--heading);
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  list-style-position: inside;
}

.faq__item summary:hover {
  color: var(--gold);
}

.faq__item[open] summary {
  border-bottom: 1px solid var(--line);
  color: var(--teal-dark);
}

.faq__body {
  padding: 1rem 1.3rem 0.4rem;
}

.faq__body ol,
.faq__body ul {
  padding-left: 1.3rem;
  margin: 0 0 0.9rem;
}

.faq__body li {
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------- */
/* Misc content blocks                                                     */
/* ---------------------------------------------------------------------- */

.connected-by {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: -0.2rem;
}

.payoff {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
}

.payoff code,
.payoff pre {
  display: block;
  margin: 0.4rem 0 1rem;
}

.onboarding-tier {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
}

.onboarding-tier h2 {
  margin-top: 0;
}

.deployment-option {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
}

.deployment-option h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.deployment-self-hosted__status {
  display: inline-block;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: bold;
  color: var(--warning);
  background: #fbf1de;
  border: 1px solid #eeddb0;
  border-radius: 10px;
  padding: 0.2rem 0.7rem;
}

.muted-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--muted);
}

.quote {
  border-left: 4px solid var(--teal);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background: var(--panel);
  font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Library Insights — CSP forbids inline style="width: ..." attributes, so
   each bar's fill is one of these precomputed 5%-step width classes rather
   than a computed inline width. See apps.tenants.templatetags.insights_tags
   .bar_width_class, which picks the nearest step. */
/* ---------------------------------------------------------------------- */

.insights-purpose-note {
  color: var(--muted);
  font-style: italic;
  font-size: 0.92rem;
}

.insights-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}

.insights-panel > h2,
.insights-panel > h3 {
  margin-top: 0;
}

.insights-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
}

.insights-row__label {
  width: 11rem;
  flex-shrink: 0;
  font-size: 0.92rem;
}

.insights-row__count {
  width: 7rem;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.88em;
  text-align: right;
}

.bar-track {
  flex-grow: 1;
  background: #eaeaea;
  border-radius: 3px;
  height: 0.85rem;
  overflow: hidden;
}

.bar-fill {
  /* spans are inline by default, which ignores width/height — the fill
     must be a block for the .bar-wNN width classes to take effect */
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
}

.bar-fill--open {
  background: var(--success);
}

.bar-fill--closed {
  background: var(--warning);
}

.bar-w0 { width: 0%; }
.bar-w5 { width: 5%; }
.bar-w10 { width: 10%; }
.bar-w15 { width: 15%; }
.bar-w20 { width: 20%; }
.bar-w25 { width: 25%; }
.bar-w30 { width: 30%; }
.bar-w35 { width: 35%; }
.bar-w40 { width: 40%; }
.bar-w45 { width: 45%; }
.bar-w50 { width: 50%; }
.bar-w55 { width: 55%; }
.bar-w60 { width: 60%; }
.bar-w65 { width: 65%; }
.bar-w70 { width: 70%; }
.bar-w75 { width: 75%; }
.bar-w80 { width: 80%; }
.bar-w85 { width: 85%; }
.bar-w90 { width: 90%; }
.bar-w95 { width: 95%; }
.bar-w100 { width: 100%; }

.insights-open-format {
  color: var(--success);
  font-size: 0.85em;
}

.insights-closed-format {
  color: var(--warning);
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------- */
/* Print                                                                   */
/* ---------------------------------------------------------------------- */

@media print {
  .site-header {
    border-bottom: 1px solid #ccc;
  }
  .button,
  button[type="submit"],
  input[type="submit"],
  form {
    display: none;
  }
  .card,
  .insights-panel,
  .onboarding-tier,
  .deployment-option,
  .payoff {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1px solid #ccc;
  }
}

/* ---------------------------------------------------------------------- */
/* Small screens                                                          */
/* ---------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .site-main {
    padding: 1.5rem 1rem 3rem;
  }
  .drive-list li,
  .site-list li {
    flex-direction: column;
    align-items: stretch;
  }
  input[type="text"],
  input[type="search"],
  input[type="url"] {
    min-width: 0;
    width: 100%;
  }
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}