:root {
 --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 --accent: #3a80d8;
 --primary: #3a80d8;
 --primary-hover: #2c66b8;
 --success: #22c55e;
 --warning: #f8714a;
 --gold: #facc15;
 --muted: #9ca3af;
 --text: #e5e7eb;
 --bg: #121212;
 --surface: #1f2937;
 --surface-light: #374151;
 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --radius: 0.5rem;
}


/* Base reset */
* { box-sizing: border-box; }

/* Match viewport canvas to body so short pages (e.g. dashboard) show no second “black” below content. */
html {
 background: var(--bg);
}

body {
 font-family: var(--font-stack);
 background: var(--bg);
 color: var(--text);
 margin: 0;
 padding: 0;
 line-height: 1.5;
}

/* Headings and hierarchy */
h1 {
 font-size: 1.75rem;
 font-weight: 600;
 margin: 0.5rem 0;
 text-align: center;
}
h2, h3, h4, h5, h6 { margin: 1.5rem 0 0.75rem 0; }

/* ======================================================
 GLOBAL BANNER / NOTIFICATIONS
 ======================================================
 Non-disruptive top-of-page banner used to display warnings and
 informational messages (replaces modal popups for plan/repo limits).
 - Target container: #global-banner (replaced via hx-swap-oob)
 - Close button uses data-htmx-close which is handled by modal-close.js
*/
.banner {
 width: 100%;
 box-sizing: border-box;
 padding: 0.75rem 1rem;
 border-radius: 6px;
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
}
.banner__content { color: var(--text); flex: 1; }
.banner--warning {
 background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
 border: 1px solid var(--accent);
 color: var(--text);
}
.banner--error {
 background: linear-gradient(90deg, rgba(220,38,38,0.04), rgba(220,38,38,0.02));
 border: 1px solid var(--warning);
 color: var(--text);
}
.banner__close {
 background: transparent;
 border: none;
 color: var(--text);
 font-weight: 700;
 cursor: pointer;
 padding: 0.25rem 0.5rem;
 border-radius: 4px;
}
.banner__close:hover { background: rgba(255,255,255,0.03); color: var(--primary); }

.banner--success {
 /* Soft green success banner matching theme variables */
 background: linear-gradient(90deg, rgba(34,197,94,0.06), rgba(34,197,94,0.03));
 border: 1px solid var(--success);
 color: var(--text);
}

h3 {
 color: var(--accent);
 text-align: center;
 font-size: 1.25rem;
 font-weight: 600;
}

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

/* Containers and common card visuals */
.container { max-width: 1000px; margin: 0 auto; }

/* Apply card visuals to all card-like blocks to avoid duplication */
.card,
.login-card,
.onboard-card,
.core-hub,
.check-back-section,
.sponsorship-card,
.billing-card {
 background: var(--surface);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 1.5rem;
}

/* Generic card spacing defaults */
.card { margin: 1rem auto; }
.login-card { margin: 1rem auto; }

.billing-card {
 background: var(--surface-light);
 border: 1px solid rgba(255, 255, 255, 0.06);
 padding: 1.25rem 1.5rem;
}
.billing-card h3 {
 margin-top: 0;
 margin-bottom: 0.75rem;
 font-size: 1.15rem;
 color: var(--accent);
}
.billing-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 align-items: center;
 margin-top: 0.75rem;
}
.billing-actions form {
 display: inline-flex;
 margin: 0;
}
.billing-actions .btn {
 margin: 0;
}

.integration-card {
 background: var(--surface);
 box-shadow: var(--shadow);
 padding: 1.25rem;
 min-width: 0; /* allow grid shrink; long <pre> snippets must not overflow the column */
}
.integration-card pre {
 background: var(--surface-light);
 border-radius: 6px;
 padding: 0.5rem;
 font-size: 0.85rem;
 overflow-x: auto;
 max-width: 100%;
 white-space: pre-wrap;
 word-break: break-word;
}
.integration-card .btn--sm {
 margin-top: 0.5rem;
}

/* ======================================================
 GENERIC CARD-GRID CONTAINER (for Integrations & Billing)
 ====================================================== */
.card-grid {
 display: grid;
 gap: 1rem;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 align-items: start;
 margin-top: 1rem;
 margin-bottom: 1rem;
 min-width: 0;
}

@media (max-width: 640px) {
 .card-grid {
 grid-template-columns: 1fr;
 gap: 0.75rem;
 }
}

/* ======================================================
 SETTINGS TAB — Layout alignment
 ====================================================== */
.settings-panel .card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
 gap: 1rem;
 align-items: start;
}
.settings-panel .card {
 margin-top: 0.25rem;
}
.settings-panel h3.static-title,
.settings-panel h4.static-title {
 margin-top: 0;
 margin-bottom: 0.75rem;
 color: var(--accent);
}

/* Tagline and stars */
.tagline {
 font-size: 1.125rem;
 font-style: italic;
 color: var(--primary);
 text-align: center;
 margin-bottom: 1.5rem;
}
.stars { display: flex; gap: 0.2rem; color: var(--gold); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }

/* ======================================================
 BUTTON SYSTEM
 ====================================================== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 padding: 0.5rem 1rem;
 border-radius: var(--radius);
 cursor: pointer;
 font-weight: 700;
 font-size: 1rem;
 line-height: 1.2;
 text-decoration: none;
 transition: background 0.2s, border-color 0.2s, color 0.2s;
 border: none;
 margin: 0.25rem 0;
}

.btn,
.btn--primary,
.btn-blue,
.btn-switch,
.login-button,
.cta-btn {
 background: var(--primary);
 color: #fff;
 border: 1px solid transparent;
}
.btn:hover,
.btn--primary:hover,
.btn-blue:hover,
.btn-switch:hover,
.login-button:hover,
.cta-btn:hover {
 background: var(--primary-hover);
}

.btn--danger,
.btn-red,
.btn-delete {
 background: var(--warning);
 color: #fff;
}
.btn--danger:hover,
.btn-red:hover,
.btn-delete:hover {
 background: var(--warning-hover);
}

.btn--success,
.btn-green,
.btn-apply {
 background: var(--success);
 color: #fff;
}
.btn--success:hover,
.btn-green:hover,
.btn-apply:hover {
 background: #16a34a;
}

.btn--outline-accent,
.btn-logout {
 background: var(--bg);
 color: var(--text);
 border: 1px solid var(--accent);
}
.btn--outline-accent:hover,
.btn-logout:hover {
 background: var(--accent);
 color: var(--bg);
}

.btn--sm, .btn-small { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn:disabled { background-color: var(--muted); cursor: not-allowed; }

/* Visually-disabled but clickable buttons
 - We render clickable forms for "disabled" plan selects so the server can
 return an explanatory top-banner (OOB). Use aria-disabled="true" to indicate
 state while keeping the control actionable for accessibility and consistent UX.
*/
.btn[aria-disabled="true"],
.btn.btn--disabled {
 opacity: 0.6;
 cursor: not-allowed;
 color: var(--muted);
 background: var(--bg);
 border: 1px solid rgba(255,255,255,0.03);
}
.btn[aria-disabled="true"]:hover,
.btn.btn--disabled:hover {
 background: var(--bg);
 color: var(--muted);
}

.btn-icon--danger,
.delete-btn {
 background: none;
 border: none;
 color: var(--warning);
 cursor: pointer;
 font-size: 1rem;
 padding: 0.25rem;
 border-radius: 4px;
 transition: background 0.2s;
}
.btn-icon--danger:hover,
.delete-btn:hover { background: rgba(248, 113, 113, 0.1); }

.btn svg {
 width: 1em;
 height: 1em;
 flex-shrink: 0;
 fill: currentColor;
}

/* ======================================================
 KMF TABS (scoped reusable tabs)
 ====================================================== */
.kmf-tabs {
 display: flex;
 margin-bottom: 1rem;
 border-bottom: 1px solid var(--accent);
 position: relative;
 pointer-events: auto;
 z-index: 1;
 min-width: 0;
 max-width: 100%;
}
.kmf-tab {
 flex: 0 0 auto;
 padding: 0.5rem 1rem;
 cursor: pointer;
 border: 1px solid var(--accent);
 border-bottom: none;
 border-radius: var(--radius) var(--radius) 0 0;
 font-weight: 600;
 background: var(--surface-light);
 color: var(--text);
 transition: background 0.2s, border-color 0.2s, color 0.2s;
 position: relative;
}
/* Later siblings paint on top in a row; raise inactive tabs so their hit targets
 are not covered by the active tab at the shared border (e.g. sponsor Benefits vs Communications). */
.kmf-tab:not(.is-active) { z-index: 2; }
.kmf-tabs button.kmf-tab {
 font: inherit;
 /* font: inherit resets weight to the parent (e.g. body 500); match anchor tabs */
 font-weight: 600;
 line-height: inherit;
 margin: 0;
 appearance: none;
 -webkit-appearance: none;
 text-align: center;
}
.kmf-tab + .kmf-tab { margin-left: 0; border-left: none; }
.kmf-tab:hover { background: var(--accent); color: var(--bg); }
.kmf-tab.is-active {
 z-index: 1;
 background: var(--primary);
 border-color: var(--primary);
 color: #fff;
}
.kmf-tab.is-active:hover { background: var(--primary-hover); }

/* ======================================================
 ICONS
 ====================================================== */
.icon {
 width: 1.25em;
 height: 1.25em;
 flex-shrink: 0;
 fill: currentColor;
 vertical-align: middle;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5em; height: 1em; }

/* ======================================================
 SELECTION STATE
 ====================================================== */
.account-item.active,
.is-selected {
 border-left: 4px solid var(--success);
 background: rgba(34, 197, 94, 0.05);
}
table tr.is-selected > td { background: rgba(34, 197, 94, 0.05); }
table tr.is-selected > td:first-child { border-left: 4px solid var(--success); }

.active-label {
 color: var(--success);
 font-size: 0.75rem;
 font-weight: 600;
 background: rgba(34, 197, 94, 0.2);
 padding: 0.2rem 0.4rem;
 border-radius: 4px;
 white-space: nowrap;
}

/* ======================================================
 BADGES
 ====================================================== */
.badge,
.status-badge {
 padding: 0.25rem 0.5rem;
 border-radius: 4px;
 font-size: 0.875rem;
 font-weight: 600;
}
.badge--success,
.status-badge.found {
 background: rgba(34, 197, 94, 0.2);
 color: var(--success);
}
.badge--danger,
.status-badge.missing,
.status-badge.extra {
 background: rgba(248, 113, 113, 0.2);
 color: var(--warning);
}

/* ======================================================
 FORMS
 ====================================================== */
select,
input[type='text'],
input[type='number'],
textarea {
 padding: 0.5rem;
 border: 1px solid var(--accent);
 border-radius: var(--radius);
 background: var(--surface);
 color: var(--text);
 font-size: 1rem;
 transition: background 0.2s, border-color 0.2s;
}
select:hover,
input[type='text']:hover,
input[type='number']:hover,
textarea:hover {
 background: var(--surface-light);
}
select:focus,
input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
 outline: none;
 border-color: var(--primary);
}
textarea {
 min-height: 100px;
 resize: vertical;
 font-family: inherit;
}
input[type='checkbox'] {
 transform: scale(1.2);
 margin-right: 0.5rem;
}

/* ======================================================
 TABLES
 ====================================================== */
table {
 width: 100%;
 border-collapse: collapse;
 background: var(--surface);
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow);
}
th, td {
 padding: 0.75rem 1rem;
 text-align: left;
 border-bottom: 1px solid var(--accent);
}
th {
 background: var(--surface-light);
 font-weight: 600;
}

/* ======================================================
 LAYOUT HELPERS
 ====================================================== */
.header-bar {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 align-items: center;
 margin-bottom: 1.5rem;
}
.header-bar > * { flex: 1 1 auto; }

.top-bar-oval {
 display: flex;
 align-items: center;
 background: var(--surface-light);
 border-radius: 999px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.10);
 border: 1px solid var(--accent);
 padding: 0.75rem 1.5rem;
 margin-bottom: 1.5rem;
 width: 100%;
 box-sizing: border-box;
 gap: 1.5rem;
 overflow: hidden;
}
.top-bar-oval > div {
 min-width: 0;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.top-bar-oval > div:first-child { flex: 0 0 auto; max-width: max-content; }
.top-bar-oval > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.top-bar-oval > div:last-child { max-width: 460px; flex: 0 1 400px; }
.top-bar-oval select,
.top-bar-oval span {
 width: 100%;
 min-width: 0;
 max-width: 100%;
 box-sizing: border-box;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
}
.top-bar-oval select.repo-selector { width: 100%; max-width: 100%; }
.top-bar-oval select.account-selector {
 width: auto; min-width: 0; max-width: max-content;
}
.top-bar-oval > div.icon-slot {
 margin-left: auto;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 flex: 0 0 auto;
}

.owner-card { max-width: var(--owner-card-max); margin: 0 auto; padding-inline: 1rem; }
.owner-card > .card { width: 100%; margin-left: auto; margin-right: auto; }
.owner-settings-grid {
 display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start;
}
@media (min-width: 900px) {
 .owner-settings-grid { grid-template-columns: 1fr 1fr; }
}
.tier-gifts-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1.5rem;
 align-items: start;
}
.gifting-section .static-title {
 margin-top: 0;
 margin-bottom: 0.75rem;
 color: var(--accent);
}
.gift-form {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 align-items: end;
}
.gift-form .form-group {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 min-width: 0;
 flex: 0 1 auto;
}
.gift-form .form-group:first-child {
 flex: 1 1 14rem;
 min-width: 12rem;
}
.gift-form .form-group select,
.gift-form .form-group input {
 width: 100%;
 min-width: 0;
 box-sizing: border-box;
}
.gift-form .form-group > div {
 width: 100%;
 min-width: 0;
}
.gift-form > .btn {
 flex: 0 1 auto;
 align-self: end;
}
.random-gift-config {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 margin-top: 1rem;
 align-items: end;
}
.random-gift-config .form-group {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 flex: 1 1 10rem;
 min-width: 0;
}
.random-gift-config .form-group select,
.random-gift-config .form-group input {
 width: 100%;
 min-width: 0;
 box-sizing: border-box;
}
.settings-actions {
 display: flex; gap: 0.75rem; flex-wrap: wrap;
 margin-top: 1rem; margin-bottom: 0.5rem; justify-content: flex-end;
}
.settings-note { margin-top: 0.25rem; color: var(--muted); font-size: 0.875rem; }

/* ------------------------------------------------------------------
 Owner Settings → Repository Leaderboards
 Left‑aligned rows with fixed‑width action button
 ------------------------------------------------------------------ */
.repo-row {
 display: flex;
 align-items: center;
 justify-content: flex-start; /* left‑justify inside the card */
 gap: 0.75rem;
 padding: 0.35rem 0;
}

.repo-row .btn {
 min-width: 110px; /* keeps width equal on toggle */
 text-align: center;
 justify-content: center;
}

.repo-name {
 flex: 1 1 auto;
 text-align: left;
 overflow-wrap: anywhere;
}

@media (max-width: 640px) {
 .repo-row {
 flex-direction: column;
 align-items: flex-start;
 }
 .repo-row .btn {
 width: 100%;
 }
 .repo-name { text-align: left; }
}

@media (max-width: 640px) {
 .repo-row { grid-template-columns: 1fr; }
 .repo-name { text-align: left; }
}

.accounts-section { margin-bottom: 1.5rem; text-align: left; }
.accounts-section h2 {
 font-size: 1.125rem; margin: 0 0 0.75rem 0; color: var(--text);
}
.accounts-list {
 list-style: none; padding: 0; margin: 0;
 display: flex; flex-direction: column; gap: 1rem;
}
.account-item {
 display: flex; align-items: center; gap: 0.75rem;
 padding: 0.75rem 1rem; background: var(--bg);
 border-radius: var(--radius); box-shadow: var(--shadow);
}
.account-avatar {
 width: 40px; height: 40px; border-radius: 50%;
 background: var(--accent); color: #fff;
 display: flex; align-items: center; justify-content: center;
 font-weight: bold; font-size: 1rem; flex-shrink: 0;
}
.account-avatar img {
 width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.account-info {
 flex: 1; font-size: 0.95rem; display: flex;
 align-items: center; gap: 0.5rem; min-width: 0;
}
.account-name {
 font-weight: 600; color: var(--text);
 display: inline-flex; align-items: center; gap: 0.5rem;
 white-space: nowrap;
}
.account-actions { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }

.vote-controls { display: flex; gap: 0.5rem; align-items: center; }
.vote-controls select { padding: 0.25rem 0.5rem; font-size: 0.9rem; }
.vote-controls form { display: inline; }

.pagination {
 display: flex; justify-content: center; align-items: center;
 margin-top: 1rem; gap: 0.5rem;
}
.pagination button {
 background-color: var(--surface);
 border: 1px solid var(--accent);
 padding: 0.5rem 1rem;
}
.pagination button:hover { background-color: var(--primary); }
.pagination button:disabled { background-color: var(--bg); color: var(--muted); }
.page-info { font-size: 0.9rem; color: var(--muted); margin: 0 0.5rem; }
.loading-indicator { text-align: center; padding: 2rem; color: var(--muted); }

.htmx-indicator {
 display: none;
 font-size: 0.8rem;
 color: var(--muted);
 margin-left: 0.5rem;
}
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { display: inline; }
.controls.search-busy {
 opacity: 0.6; pointer-events: none; filter: grayscale(0.2);
 transition: opacity 0.15s ease-in-out;
}
.controls.search-busy input,
.controls.search-busy button { cursor: not-allowed; }

.modal-backdrop {
 position: fixed; top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(18, 18, 18, 0.9); z-index: 9;
}

/* Voting options section width limit */
#custom-options-section {
 max-width: 360px;
}

/* Extra padding between help text and control buttons in voting options */
#custom-options-section .help {
 margin-bottom: 0.5rem;
 display: block;
}

/* Settings grid for side-by-side layout on wider screens */
.settings-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
}
.settings-grid > * {
 flex: 1 1 300px;
 min-width: 250px;
}

@media (max-width: 600px) {
 body { padding: 0.75rem; }
 .stars svg { width: 16px; height: 16px; }
 .header-bar { flex-direction: column; align-items: stretch; }
 th, td { padding: 0.5rem; font-size: 0.9rem; }
 .form-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
 .form-row label { min-width: auto; }

 /* Dashboard owner/sponsor tabs: wrap within the card on phone-width viewports */
 .kmf-tabs {
 flex-wrap: wrap;
 gap: 0.35rem;
 }
 .kmf-tab {
 flex: 1 1 calc(50% - 0.35rem);
 min-width: 0;
 padding: 0.4rem 0.5rem;
 font-size: 0.85rem;
 text-align: center;
 }
}