/* Public catalogue UI, themed from The Wonderful Company Design System:
 *   ~/Downloads/wonderful-ui/Remix of Wonderful Company Design System/
 *     app-kit.css          (--app-* tokens: neutral chrome, green accent,
 *                            status colors, control sizing, light + dark)
 *     colors_and_type.css  (font-weight and spacing tokens shared with the app-kit
 *                            layer; the --twc-* marketing tokens and their
 *                            128px/56px display type scale are NOT used
 *                            here — this is a dense data UI, not a
 *                            marketing page, so it draws from app-kit's
 *                            tighter 14px scale per that file's own stated
 *                            philosophy: "NEUTRAL chrome, GREEN as the
 *                            primary/accent action color.")
 *
 * Deviation: the source --font-sans stack leads with "Avenir Next" (a
 * licensed face we don't have) and falls back to Nunito Sans loaded from
 * Google Fonts. This app vendors no external font requests (same reasoning
 * as vendoring Chart.js locally for the reports dashboard — no third-party
 * calls from an internal business app), so --font-sans here drops straight
 * to the system-font tail of that same stack instead.
 */

:root {
  --app-n-0:   #ffffff;
  --app-n-25:  #fbfbfc;
  --app-n-50:  #f6f7f8;
  --app-n-100: #eef0f2;
  --app-n-150: #e6e9ec;
  --app-n-200: #dde1e5;
  --app-n-300: #cbd1d6;
  --app-n-400: #9aa1a8;
  --app-n-500: #6b727a;
  --app-n-600: #545b62;
  --app-n-700: #3d434a;
  --app-n-800: #282d32;
  --app-n-900: #181b1e;
  --app-n-950: #0f1113;

  --app-accent:         #046a38;   /* twc-green-700 */
  --app-accent-hover:   #006930;   /* twc-green-900 */
  --app-accent-active:  #00582a;
  --app-accent-soft:    #e7f3ec;
  --app-accent-softer:  #f1f8f4;
  --app-accent-border:  #bfe0cd;
  --app-on-accent:      #ffffff;

  --app-success:        #0e8446;
  --app-success-soft:   #e4f5ec;
  --app-success-border: #b3e2c6;
  --app-warning:        #8f5c02;
  --app-warning-soft:   #fdf3e3;
  --app-warning-border: #f3dcae;
  --app-error:          #c8202a;
  --app-error-soft:     #fdeceb;
  --app-error-border:   #f4c6c4;
  --app-info:           #1f6fdb;
  --app-info-soft:      #e9f1fd;
  --app-info-border:    #c2d8f6;

  --app-bg:           var(--app-n-50);
  --app-surface:      var(--app-n-0);
  --app-surface-2:    var(--app-n-50);
  --app-surface-3:    var(--app-n-100);
  --app-text:         var(--app-n-900);
  --app-text-2:       var(--app-n-500);
  --app-text-3:       var(--app-n-400);
  --app-border:       var(--app-n-200);
  --app-border-2:     var(--app-n-150);
  --app-border-strong: var(--app-n-300);
  --app-field-bg:     var(--app-n-0);
  --app-field-border: var(--app-n-300);

  --app-ring:  rgba(4, 106, 56, 0.65);
  --app-shadow-sm:  0 1px 2px rgba(16,24,40,0.06), 0 1px 1px rgba(16,24,40,0.04);
  --app-shadow-md:  0 4px 12px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06);
  --app-shadow-pop: 0 8px 28px -6px rgba(16,24,40,0.22);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-demi:    600;
  --fw-bold:    700;

  --app-fs-xs:   12px;
  --app-fs-sm:   13px;
  --app-fs-base: 14px;
  --app-fs-md:   15px;
  --app-fs-lg:   16px;
  --app-fs-xl:   18px;
  --app-fs-2xl:  22px;

  --app-h-sm: 30px;
  --app-h-md: 36px;

  --app-r-xs: 4px;
  --app-r-sm: 6px;
  --app-r-md: 8px;
  --app-r-lg: 10px;
  --app-r-pill: 999px;

  --app-dur: 160ms;
  --app-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-accent:         #34b06f;
    --app-accent-hover:   #43c47d;
    --app-accent-active:  #2c9a60;
    --app-accent-soft:    rgba(52,176,111,0.14);
    --app-accent-softer:  rgba(52,176,111,0.08);
    --app-accent-border:  rgba(52,176,111,0.35);
    --app-on-accent:      #06150d;

    --app-success:        #57d98a;
    --app-success-soft:   rgba(87,217,138,0.15);
    --app-success-border: rgba(87,217,138,0.38);
    --app-warning:        #e0a23b;
    --app-warning-soft:   rgba(224,162,59,0.14);
    --app-warning-border: rgba(224,162,59,0.34);
    --app-error:          #f0606a;
    --app-error-soft:     rgba(240,96,106,0.14);
    --app-error-border:   rgba(240,96,106,0.34);
    --app-info:           #5b9bf0;
    --app-info-soft:      rgba(91,155,240,0.14);
    --app-info-border:    rgba(91,155,240,0.34);

    --app-bg:           #0f1113;
    --app-surface:      #181b1e;
    --app-surface-2:    #1e2226;
    --app-surface-3:    #262b30;
    --app-text:         #e9ebed;
    --app-text-2:       #a0a6ac;
    --app-text-3:       #6f767d;
    --app-border:       #2b3137;
    --app-border-2:     #23282d;
    --app-border-strong: #3a4147;
    --app-field-bg:     #1e2226;
    --app-field-border: #3a4147;

    --app-ring: rgba(52,176,111,0.70);
    --app-shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
    --app-shadow-md:  0 4px 12px -2px rgba(0,0,0,0.50);
    --app-shadow-pop: 0 8px 28px -6px rgba(0,0,0,0.62);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-sans);
  font-size: var(--app-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--app-accent);
  text-decoration: none;
}
a:hover { color: var(--app-accent-hover); text-decoration: underline; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 22px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  font-size: var(--app-fs-xl);
  letter-spacing: -0.01em;
  color: var(--app-text);
}
.topbar .brand:hover { color: var(--app-text); text-decoration: none; }
.topbar .brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--app-r-md);
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-size: var(--app-fs-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* ── Topbar actions (right-aligned: Reports link + user menu) ───────── */
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-link {
  font: var(--fw-demi) var(--app-fs-base)/1 var(--font-sans);
  color: var(--app-text-2);
}
.topbar-link:hover { color: var(--app-accent-hover); }

/* ── User menu (topbar, right-aligned) ─────────────────────────────── */
.user-menu {
  position: relative;
}
.user-menu-trigger {
  display: block;
  list-style: none;
  cursor: pointer;
  border-radius: var(--app-r-pill);
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--app-ring);
}
.user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--app-r-pill);
  flex-shrink: 0;
  overflow: hidden;
}
img.user-menu-avatar { object-fit: cover; }
.user-menu-avatar-initials {
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-size: var(--app-fs-sm);
  font-weight: var(--fw-bold);
}
.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-r-lg);
  box-shadow: var(--app-shadow-pop);
  overflow: hidden;
  z-index: 10;
}
.user-menu-identity {
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-border-2);
}
.user-menu-name {
  font: var(--fw-demi) var(--app-fs-base)/1.3 var(--font-sans);
  color: var(--app-text);
}
.user-menu-email {
  font-size: var(--app-fs-sm);
  color: var(--app-text-2);
  margin-top: 2px;
  overflow-wrap: break-word;
}
.user-menu-actions {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.user-menu-actions li + li { margin-top: 2px; }
.user-menu-actions a,
.user-menu-actions button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--app-r-sm);
  background: none;
  color: var(--app-text);
  font: var(--fw-regular) var(--app-fs-base)/1.3 var(--font-sans);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.user-menu-actions a:hover,
.user-menu-actions button:hover {
  background: var(--app-surface-3);
  color: var(--app-text);
  text-decoration: none;
}

/* ── Page shell ─────────────────────────────────────────────────────── */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--app-sp-6, 24px) 22px 64px;
}

/* ── Filter bar (Input + Select + Button, styled to match app-kit) ────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.filter-bar input[type="text"],
.filter-bar select {
  height: var(--app-h-md);
  padding: 0 12px;
  background: var(--app-field-bg);
  border: 1px solid var(--app-field-border);
  border-radius: var(--app-r-md);
  font: var(--fw-regular) var(--app-fs-base)/1 var(--font-sans);
  color: var(--app-text);
  transition: border-color var(--app-dur), box-shadow var(--app-dur);
}
.filter-bar input[type="text"] { width: 280px; max-width: 100%; }
.filter-bar input[type="text"]:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px var(--app-ring);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--app-h-md);
  padding: 0 16px;
  background: var(--app-accent);
  color: var(--app-on-accent);
  border: none;
  border-radius: var(--app-r-md);
  font: var(--fw-demi) var(--app-fs-base)/1 var(--font-sans);
  cursor: pointer;
  box-shadow: var(--app-shadow-sm);
  transition: background var(--app-dur);
  text-decoration: none;
}
.btn:hover { background: var(--app-accent-hover); color: var(--app-on-accent); text-decoration: none; }
.btn-outline {
  background: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-field-border);
  box-shadow: none;
}
.btn-outline:hover { background: var(--app-surface-3); color: var(--app-text); }
.filter-bar .clear {
  font-size: var(--app-fs-sm);
  color: var(--app-text-2);
}

/* ── Result count ───────────────────────────────────────────────────── */
.result-count {
  font-size: var(--app-fs-sm);
  color: var(--app-text-2);
  margin: 0 0 10px;
}

/* ── Data table (mirrors app-kit DataTable.jsx) ────────────────────────*/
.table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-r-lg);
  box-shadow: var(--app-shadow-sm);
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--app-surface-2);
  color: var(--app-text-2);
  font: var(--fw-demi) var(--app-fs-xs)/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--app-border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border-2);
  font: var(--fw-regular) var(--app-fs-base)/1.4 var(--font-sans);
  color: var(--app-text);
}
.data-table tbody tr { transition: background var(--app-dur); }
.data-table tbody tr:hover { background: var(--app-surface-3); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .empty-row td {
  padding: 28px;
  text-align: center;
  color: var(--app-text-3);
}
.data-table a { font-weight: var(--fw-demi); color: var(--app-text); }
.data-table a:hover { color: var(--app-accent); }

/* ── Badge (mirrors app-kit Badge.jsx, soft variant) ───────────────────*/
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--app-r-pill);
  font: var(--fw-demi) var(--app-fs-sm)/1.3 var(--font-sans);
  white-space: nowrap;
}
.badge.badge-success { color: var(--app-success); background: var(--app-success-soft); }
.badge.badge-neutral { color: var(--app-text-2); background: var(--app-surface-3); }

/* ── Pagination ─────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: var(--app-fs-sm);
  color: var(--app-text-2);
}
.pagination a {
  display: inline-flex;
  align-items: center;
  height: var(--app-h-sm);
  padding: 0 12px;
  background: var(--app-surface);
  border: 1px solid var(--app-field-border);
  border-radius: var(--app-r-md);
  color: var(--app-text);
  font-weight: var(--fw-demi);
}
.pagination a:hover { background: var(--app-surface-3); text-decoration: none; }

/* ── Detail page (mirrors app-kit Card.jsx) ────────────────────────────*/
.back-link { display: inline-block; margin-bottom: 18px; font-weight: var(--fw-demi); }

.detail-title {
  font-size: var(--app-fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--app-text);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-r-lg);
  box-shadow: var(--app-shadow-sm);
  overflow: hidden;
  margin-bottom: 18px;
}
.card .card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-border-2);
  font: var(--fw-demi) var(--app-fs-lg)/1.3 var(--font-sans);
  color: var(--app-text);
}
.card .card-body { padding: 18px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 24px;
}
.field-grid dt {
  font: var(--fw-demi) var(--app-fs-xs)/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-3);
  margin: 0 0 4px;
}
.field-grid dd {
  margin: 0;
  font-size: var(--app-fs-md);
  color: var(--app-text);
}

/* ── Auth pages (allauth login/signup/etc — see templates/allauth/) ───── */
.auth-shell {
  max-width: 400px;
  margin: 48px auto;
  padding: 0 22px;
}
.auth-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-r-lg);
  box-shadow: var(--app-shadow-sm);
  padding: 28px;
}
.auth-card h1 {
  font-size: var(--app-fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--app-text);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.auth-card h2 {
  font-size: var(--app-fs-sm);
  font-weight: var(--fw-demi);
  color: var(--app-text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 22px 0 12px;
}
.auth-card p {
  font-size: var(--app-fs-base);
  color: var(--app-text-2);
  margin: 0 0 18px;
}
.auth-card hr {
  border: none;
  border-top: 1px solid var(--app-border-2);
  margin: 22px 0;
}
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
/* Covers both our custom .field (email.html, connections.html, etc — see
   templates/allauth/elements/field.html) and plain form.as_p() output
   (login/signup — allauth's "fields" element renders forms that way and
   isn't overridden), since both end up as a <p>/<div> containing a
   <label>+<input>. */
.auth-card .field, .auth-card form > p {
  margin: 0;
}
.auth-card .field label, .auth-card form label {
  display: block;
  font: var(--fw-demi) var(--app-fs-sm)/1.3 var(--font-sans);
  color: var(--app-text);
  margin-bottom: 6px;
}
.auth-card .field input, .auth-card form input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  height: var(--app-h-md);
  padding: 0 12px;
  background: var(--app-field-bg);
  border: 1px solid var(--app-field-border);
  border-radius: var(--app-r-md);
  font: var(--fw-regular) var(--app-fs-base)/1 var(--font-sans);
  color: var(--app-text);
  transition: border-color var(--app-dur), box-shadow var(--app-dur);
}
.auth-card .field input:focus, .auth-card form input:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px var(--app-ring);
}
.auth-card input[type="checkbox"] { width: auto; height: auto; }
.auth-card .field .helptext, .auth-card .errorlist {
  display: block;
  font-size: var(--app-fs-xs);
  color: var(--app-text-3);
  margin-top: 4px;
  list-style: none;
  padding: 0;
}
.auth-card .errorlist { color: var(--app-error); margin-bottom: 4px; }
.auth-card .btn { width: 100%; }

.provider-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provider-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--app-h-md);
  border-radius: var(--app-r-md);
  border: 1px solid var(--app-field-border);
  background: var(--app-surface);
  color: var(--app-text);
  font: var(--fw-demi) var(--app-fs-base)/1 var(--font-sans);
  text-decoration: none;
}
.provider-list li a:hover { background: var(--app-surface-3); text-decoration: none; }

.auth-menu {
  list-style: none;
  display: flex;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--app-fs-sm);
}

.messages {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.messages li {
  padding: 10px 14px;
  border-radius: var(--app-r-md);
  background: var(--app-info-soft);
  color: var(--app-text);
  font-size: var(--app-fs-sm);
}