: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 font overrides for dashboard - dashboard font tightening */
body {
 font-size: 1rem;
 font-weight: 500;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Fix: Remove double-wrapping of owner dashboard */
body.owner-dashboard .dashboard-wrapper {
 max-width: 100%;
 margin: 0;
 padding: 0;
 box-shadow: none;
 border-radius: 0;
}

/* Fix: Simplify owner dashboard header and reduce height */
.owner-dashboard .top-bar-oval {
 margin-bottom: 1rem;
 padding: 0.5rem 1.25rem; 
 border-radius: 8px;
 box-shadow: none;
 border: 1px solid var(--accent);
}

.top-bar-oval select {
 font-size: 0.9rem;
 padding: 0.35rem;
}

/* Fix: Ensure tab container doesn't inherit parent styles */
.owner-dashboard .kmf-tabs {
 margin-bottom: 1rem;
 border-bottom: 1px solid var(--accent);
}

/* Fix: Ensure content area has proper spacing */
.owner-dashboard .tab-content {
 margin-top: 1rem;
}

/* Fix: Reset card styles within owner dashboard */
.owner-dashboard .card {
 margin: 1rem 0;
 border-radius: var(--radius);
}

/* Remove the pointer-events: none from kmf-tabs to fix clickability */
.kmf-tabs {
 pointer-events: auto;
 z-index: 1;
}

.tab-unread-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.25rem;
 height: 1.25rem;
 margin-left: 0.35rem;
 padding: 0 0.35rem;
 border-radius: 999px;
 background: var(--danger, #c0392b);
 color: #fff;
 font-size: 0.7rem;
 font-weight: 700;
 line-height: 1;
 vertical-align: middle;
}

/* Fix: Ensure the dashboard wrapper doesn't interfere with owner dashboard */
.dashboard-wrapper {
 position: relative;
}

/* Fix: Prevent double borders on nested cards */
.owner-dashboard .card .card {
 border: none;
 box-shadow: none;
 margin: 0;
 padding: 0;
}

/* Fix: Ensure proper spacing for owner dashboard content */
.owner-dashboard .card {
 margin: 1rem 0;
}

/* Fix: Ensure the active tab is properly highlighted */
.kmf-tab.is-active {
 background: var(--primary);
 border-color: var(--primary);
 color: #fff;
}
.full-height { height: 100%; }
.inline-form { display: inline; }
.account-compact { flex: 0 0 auto; max-width: max-content; display: flex; align-items: center; gap: 0.5rem; }
.small-label { font-size: 0.875rem; color: var(--muted); margin-right: 0.5rem; }
.avatar-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; text-decoration: none; background: none; border: none; border-radius: 50%; overflow: hidden; }
.avatar-img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }

/* Typography (override where needed) */
h1 {
 font-size: 2.5rem;
 font-weight: bold;
 margin: 0.5rem 0;
 text-align: center;
 color: var(--text);
}
h2 {
 font-size: 1.8rem;
 font-weight: bold;
 margin: 1rem 0 0.5rem 0;
}
h3 {
 font-size: 1.5rem;
 font-weight: bold;
 margin: 1rem 0 0.5rem 0;
}
p {
 font-size: 1.1rem;
 font-weight: 600;
 line-height: 1.5;
 color: var(--text);
}

/* Tagline */
.tagline {
 font-size: 1.25rem;
 font-style: italic;
 color: var(--primary);
 text-align: center;
 margin-bottom: 1.5rem;
}

/* Dashboard wrapper */
.dashboard-container {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 background: #475569;
 margin: 0;
}
.dashboard-wrapper {
 max-width: 1200px;
 width: 100%;
 margin: 0 auto;
 background: var(--surface);
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0,0,0,.35);
 padding: 2.5rem 2rem;
}
.dashboard-title {
 margin-top: 0;
 margin-bottom: 1rem;
 text-align: center;
}

/* Overrides for onboarding-like sections used inside dashboard */
.onboard-subtitle {
 text-align: center;
 margin-bottom: 2rem;
}
.hub-subtitle {
 margin: 0 0 1rem 0;
}
.step-link {
 color: var(--primary);
 text-decoration: none;
 font-weight: 600;
 font-size: 0.9rem;
 transition: color 0.2s;
}
.step-link:hover {
 color: var(--primary-hover);
 text-decoration: underline;
}
.refresh-cta {
 margin-top: 1rem;
}
.help {
 margin-top: 0.25rem; /* tighter alignment under headings */
 margin-bottom: 0.25rem; /* keep spacing compact in card lists */
 font-size: 0.875rem;
 color: var(--muted);
}

/* ---- Fix: normalize plan menu selected height & right-justify "Max Leaderboards" ---- */
.plan-item {
 box-sizing: border-box;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 0.75rem 1rem;
 border: 1px solid rgba(255,255,255,0.04);
 border-radius: 8px;
 background: transparent;
 line-height: 1.2;
}

.plan-item.is-selected,
.plan-item.selected,
.plan-item.active {
 /* Keep the same border width; change color + add overlay highlight */
 border-color: var(--primary);
 background: var(--surface-light);
 /* Highlight without affecting layout */
 box-shadow: 0 0 0 3px rgba(58, 128, 216, 0.08);
}

/* Ensure inner content doesn't introduce extra vertical spacing */
.plan-item > * { margin: 0; }

/* Right-align "Max Leaderboards" column (preferred: add class="max-leaderboards" in template) */
.plan-table th.max-leaderboards,
.plan-table td.max-leaderboards {
 text-align: right;
 white-space: nowrap;
}

/* Fallback if template does not set a class: target the likely column index (adjust nth-child as needed) */
.plan-table th:nth-child(4),
.plan-table td:nth-child(4) {
 text-align: right;
}

/* Minor tweak: if the number cell uses small secondary text, ensure vertical centering and right alignment for plan menu numeric cells */
.plan-table td .meta-number {
 display: inline-block;
 vertical-align: middle;
 margin-left: auto;
 text-align: right;
}
/* Ensure numeric meta within flexed .plan-item rows aligns to the far right */
.plan-item .meta-number,
.plan-item .max-leaderboards {
 margin-left: auto;
 text-align: right;
 min-width: 0;
}

/* Prevent selection-induced wrapping that increases height:
 Ensure plan-item and its info columns can shrink and avoid line-wrap when a left border is added */
.plan-item {
 min-width: 0;
}
.plan-item .account-info,
.plan-item .plan-content,
.plan-item .plan-title {
 min-width: 0;
}

/* Override generic .is-selected border-left for plan items to keep consistent layout */
.plan-item.is-selected,
.plan-item.active,
.plan-item.selected {
 border-left: 1px solid var(--primary);
}

/* Ensure right-alignment for selected table rows or items */
.plan-item.is-selected .meta-number,
.plan-item.is-selected .max-leaderboards,
.plan-table tr.is-selected td.max-leaderboards,
.plan-table tr.is-selected td .meta-number {
 text-align: right !important;
 margin-left: auto !important;
 white-space: nowrap;
}

/* ======================================================
 OWNER SETTINGS — SPONSOR TABLE FIXES
 ====================================================== */
.sponsor-table {
 width: 100%;
 border-collapse: collapse;
 table-layout: fixed;
 margin-top: 1rem;
}

.sponsor-table th,
.sponsor-table td {
 padding: 0.75rem 1rem;
 border-bottom: 1px solid var(--accent);
 overflow-wrap: anywhere;
}

.sponsor-table th {
 background: var(--surface-light);
 font-weight: 600;
 text-align: left;
 /* Allow long headings to wrap to two lines */
 white-space: normal;
 line-height: 1.3;
 vertical-align: bottom;
}

/* Center align headers and data for columns 2-5 */
.sponsor-table th:nth-child(2),
.sponsor-table th:nth-child(3),
.sponsor-table th:nth-child(4),
.sponsor-table th:nth-child(5) {
 text-align: center;
}

.sponsor-table td:nth-child(2),
.sponsor-table td:nth-child(3),
.sponsor-table td:nth-child(4),
.sponsor-table td:nth-child(5) {
 text-align: center; /* numeric columns */
}

.sponsor-table th:nth-child(6) {
 text-align: center;
}

.sponsor-table td:nth-child(6) {
 text-align: center; /* action buttons */
}

/* --- FIX: Normalize active row height --- */
/* Selected tier row: green highlight (KMF Support tab plan table) */
.sponsor-table tr.active {
 background: rgba(34, 197, 94, 0.10);
 border-left: none;
}

.sponsor-table tr.active td {
 padding-top: 0.75rem;
 padding-bottom: 0.75rem; /* keep same vertical rhythm as others */
 line-height: 1.2; /* prevent expansion */
}

.sponsor-table tr.active td:first-child {
 border-left: 4px solid var(--success);
}

/* Suggested tier row: amber highlight (where usage says they should be) */
.sponsor-table tr.recommended {
 background: rgba(250, 204, 21, 0.10);
}

.sponsor-table tr.recommended td:first-child {
 border-left: 4px solid var(--gold);
}

.badge--recommended {
 background: rgba(250, 204, 21, 0.2);
 color: var(--gold);
}

.kmf-support-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 margin-top: 1rem;
}

.kmf-support-summary {
 margin-bottom: 0.75rem;
}

.kmf-support-contact {
 margin-top: 1rem;
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 0.75rem;
}
.kmf-support-version {
 flex-shrink: 0;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
}

/* --- FIX: Center columns 2-5 --- */
.sponsor-table td:nth-child(4) {
 font-variant-numeric: tabular-nums; /* neat alignment of numbers */
}

/* ======================================================
 IN-CARD MODALS (constrained to parent .card)
 - Used for inline confirmation and upgrade dialogs so they
 do not cover the entire viewport.
 ====================================================== */
.in-card-modal-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(27,31,42,0.55);
 z-index: 20;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius);
 padding: 1rem;
}
.in-card-modal-backdrop .modal-content {
 max-width: 640px;
 width: 100%;
 box-shadow: var(--shadow);
}

/* Ensure cards are positioned relative so in-card modals are contained */
.card { position: relative; }

/* Custom scrollbar for repo leaderboards */
#owner-repos::-webkit-scrollbar {
 width: 8px;
}

#owner-repos::-webkit-scrollbar-track {
 background: var(--accent); /* orange */
}

#owner-repos::-webkit-scrollbar-thumb {
 background: var(--primary); /* light blue */
 border-radius: 4px;
}

#owner-repos::-webkit-scrollbar-thumb:hover {
 background: var(--primary-hover);
}

/* Owner/sponsor dashboard cards: keep tab panels inside the card outline */
.card > .kmf-tabs {
 margin-bottom: 1rem;
}
.card > .tab-content {
 min-width: 0;
 max-width: 100%;
 margin-top: 1rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
 h1 { font-size: 2rem; }
 h2 { font-size: 1.5rem; }
 .dashboard-wrapper { padding: 1.5rem 1rem; }
 .container > .card {
 padding: 1rem;
 }
}

/* Phase 1: Communications helper rules */
.communications-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 1rem;
 min-width: 0;
 max-width: 100%;
}
.communications-grid > .card {
 min-width: 0;
 max-width: 100%;
 box-sizing: border-box;
}
.broadcasts-list ul {
 list-style: none;
 padding: 0;
 margin: 0; 
}
.broadcasts-list .broadcast-row {
 padding: 0.6rem 0.4rem;
 border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Small accessibility helpers */
.kmf-tab:focus { outline: none; }

/* End of Phase 1 CSS additions */