:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --shadow: 0 10px 30px rgba(26,39,68,0.10);
  --radius: 18px;
  --accent: #1d4ed8;
  --blue:   linear-gradient(135deg,#dbeafe,#bfdbfe);
  --green:  linear-gradient(135deg,#dcfce7,#bbf7d0);
  --gold:   linear-gradient(135deg,#fef3c7,#fde68a);
  --pink:   linear-gradient(135deg,#fce7f3,#fbcfe8);
  --purple: linear-gradient(135deg,#ede9fe,#ddd6fe);
  --teal:   linear-gradient(135deg,#ccfbf1,#99f6e4);
  --orange: linear-gradient(135deg,#ffedd5,#fed7aa);
  --red:    linear-gradient(135deg,#fee2e2,#fecaca);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Inter, Arial, Helvetica, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.5; font-size: 15px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.admin-header {
  background: rgba(17,24,39,0.95); color: #f9fafb;
  padding: 10px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.admin-header .brand { font-weight: 800; font-size: 1.05rem; color: #fff; }
.admin-header .brand span { color: #a5b4fc; }
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-nav a {
  color: #e5e7eb; padding: 7px 11px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
}
.admin-nav a:hover { background: rgba(255,255,255,0.14); text-decoration: none; }
/* Sprint 69: stronger active navigation styling. The current page is a solid
   blue pill with bold white text, so it stands out clearly from a plain hover.
   Applies to both HOA Admin and Master Admin (same header). */
.admin-nav a.active {
  background: #2563eb; color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 1px 5px rgba(37,99,235,0.55);
}
.admin-nav a.active:hover { background: #1d4ed8; }
.admin-header .who { margin-left: auto; font-size: 0.84rem; color: #d1d5db; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hoa-switch select { border-radius: 999px; border: none; padding: 6px 10px; font-size: 0.84rem; }

.admin-main { max-width: 1080px; margin: 22px auto; padding: 0 14px 60px; }
h1.page-title { font-size: 1.5rem; margin: 0 0 4px; }
p.page-sub { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 12px; font-size: 1.08rem; }

.flash { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; font-size: 0.92rem; }
.flash-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

label { display: block; font-weight: 600; font-size: 0.86rem; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 0.94rem; background: #fff; color: var(--text);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bfdbfe; border-color: #93c5fd; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.hint { font-size: 0.8rem; color: var(--muted); margin-top: 3px; }

.btn {
  display: inline-block; border: none; cursor: pointer; font-family: inherit;
  background: rgba(17,24,39,0.92); color: #fff; font-weight: 700; font-size: 0.9rem;
  padding: 10px 16px; border-radius: 999px;
}
.btn:hover { background: rgba(17,24,39,1); text-decoration: none; color: #fff; }
.btn-light { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn-light:hover { background: #f3f4f6; color: var(--text); }
.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-ai { background: linear-gradient(135deg,#c4b5fd,#f9a8d4); color: #1f2937; }
.btn-ai:hover { color: #1f2937; filter: brightness(1.03); }

table.list { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.list th { text-align: left; padding: 8px 10px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--line); }
table.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tr.draggable { cursor: grab; }
table.list tr.dragging { opacity: 0.4; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.pill-published { background: #dcfce7; color: #166534; }
.pill-draft { background: #f3f4f6; color: #4b5563; }
.pill-pending { background: #fef3c7; color: #92400e; }
.pill-active { background: #dbeafe; color: #1e40af; }
.pill-requested { background: #fef3c7; color: #92400e; }
.pill-inactive { background: #f3f4f6; color: #6b7280; }
.pill-sample { background: #fce7f3; color: #9d174d; }

.color-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.color-pick label { display: inline-flex; margin: 0; cursor: pointer; }
.color-pick input { display: none; }
.color-swatch {
  width: 44px; height: 32px; border-radius: 10px; border: 2px solid transparent;
  display: inline-block; box-shadow: 0 2px 6px rgba(17,24,39,0.12);
}
.color-pick input:checked + .color-swatch { border-color: #111827; }
.sw-blue { background: var(--blue); } .sw-green { background: var(--green); }
.sw-gold { background: var(--gold); } .sw-pink { background: var(--pink); }
.sw-purple { background: var(--purple); } .sw-teal { background: var(--teal); }
.sw-orange { background: var(--orange); } .sw-red { background: var(--red); }

.lang-tabs { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.lang-tab {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px;
  cursor: pointer; font-weight: 700; font-size: 0.84rem; font-family: inherit;
}
.lang-tab.active { background: rgba(17,24,39,0.9); color: #fff; }
.lang-pane { display: none; }
.lang-pane.active { display: block; }

.box-edit {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 12px;
  background: #fafbfd;
}
.box-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drag-handle { cursor: grab; font-size: 1.1rem; color: var(--muted); user-select: none; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.stat .num { font-size: 1.6rem; font-weight: 800; }
.stat .lbl { color: var(--muted); font-size: 0.82rem; }

/* Sprint 28: clickable pastel dashboard boxes */
.stat-link { display: block; text-decoration: none; color: inherit; border-radius: 14px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; }
.stat-link .stat { transition: inherit; }
.stat-link:hover .stat { filter: brightness(0.96); box-shadow: 0 6px 14px rgba(15,23,42,0.10); transform: translateY(-2px); }
.stat-link:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; border-radius: 14px; }
.stat-link:active .stat { transform: translateY(0); filter: brightness(0.92); }
.stat-pastel-blue .stat { background: #DDEEFF; border-color: #b9d7f0; }
.stat-pastel-green .stat { background: #DDF4E5; border-color: #b7e6c6; }
.stat-pastel-purple .stat { background: #E9E2FF; border-color: #cdbdf7; }
.stat-pastel-peach .stat { background: #FFE7D5; border-color: #f5c9a3; }
.stat-pastel-pink .stat { background: #FCE1EC; border-color: #f3bdd4; }
.stat-pastel-yellow .stat { background: #FFF3C9; border-color: #f0dd8a; }
.stat-pastel-gray .stat { background: #E9EDF2; border-color: #cfd8e3; }
/* Sprint 34: the small color-picker squares in Appearance Settings and
   HOA Settings are bare spans (no inner .stat), so they need direct rules. */
.pastel-swatch.stat-pastel-blue { background: #DDEEFF; border: 1px solid #b9d7f0; }
.pastel-swatch.stat-pastel-green { background: #DDF4E5; border: 1px solid #b7e6c6; }
.pastel-swatch.stat-pastel-purple { background: #E9E2FF; border: 1px solid #cdbdf7; }
.pastel-swatch.stat-pastel-peach { background: #FFE7D5; border: 1px solid #f5c9a3; }
.pastel-swatch.stat-pastel-pink { background: #FCE1EC; border: 1px solid #f3bdd4; }
.pastel-swatch.stat-pastel-yellow { background: #FFF3C9; border: 1px solid #f0dd8a; }
.pastel-swatch.stat-pastel-gray { background: #E9EDF2; border: 1px solid #cfd8e3; }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }

.email-preview {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #eef1f6; padding: 18px;
}
.email-shell { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(17,24,39,0.08); }
.email-hero { background: linear-gradient(135deg,#dbeafe,#ede9fe); padding: 26px 22px; text-align: center; }
.email-hero h2 { margin: 0 0 6px; }
.email-hero p { margin: 0; color: #4b5563; }
.email-body { padding: 22px; font-size: 0.94rem; color: #374151; }
.email-btn { display: inline-block; margin: 14px 0; background: #1d4ed8; color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.email-img { width: 100%; display: block; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(circle at top left, rgba(191,219,254,0.75), transparent 32%),
    radial-gradient(circle at top right, rgba(251,207,232,0.65), transparent 28%),
    radial-gradient(circle at bottom left, rgba(187,247,208,0.55), transparent 28%),
    var(--bg);
}
.login-card { width: 100%; max-width: 400px; background: rgba(255,255,255,0.95); border-radius: 24px; box-shadow: 0 20px 50px rgba(31,41,55,0.14); padding: 30px 26px; border: 1px solid rgba(255,255,255,0.9); }
.login-card h1 { margin: 0 0 4px; font-size: 1.4rem; }
.login-card .sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 10px; }

@media (max-width: 720px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .admin-header .who { margin-left: 0; }
  /* Sprint 70: mobile and tablet polish for the newer screens. */
  .cm-sec > summary { font-size: 1.02rem; padding: 13px 14px; gap: 10px; }
  .cm-sec > summary .cm-arrow { width: 30px; height: 30px; font-size: 1.2rem; }
  .cm-sec-body { padding: 14px; }
  .cm-sec-sub { display: none; }               /* keep the section header line uncluttered */
  .tlang-btn { padding: 6px 12px; font-size: 0.85rem; }
  .genbox { padding: 12px; }
  /* Wide admin tables scroll sideways inside their card instead of breaking the page. */
  .card { overflow-x: auto; }
}

/* ── Sprint 2C: AI progress popup with rotating pastel pie ── */
.ai-progress-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  background: rgba(31,41,55,0.45); backdrop-filter: blur(2px);
}
.ai-progress-overlay.active { display: flex; }
.ai-progress-card {
  background: #fff; border-radius: 24px; padding: 34px 40px; text-align: center;
  box-shadow: 0 24px 60px rgba(17,24,39,0.25); max-width: 340px;
}
.ai-progress-pie {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  background: conic-gradient(#bfdbfe 0deg 120deg, #fbcfe8 120deg 240deg, #bbf7d0 240deg 360deg);
  box-shadow: inset 0 0 0 3px #ffffff, 0 6px 18px rgba(17,24,39,0.15);
  animation: aiPieSpin 4.5s linear infinite;
}
@keyframes aiPieSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ai-progress-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.ai-progress-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* ── Sprint 2G: drag-and-drop zones + email asset grid ── */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed #cbd5e1; border-radius: 16px; padding: 26px 16px; cursor: pointer;
  background: #f8fafc; text-align: center; transition: all .15s;
}
.dropzone:hover, .dropzone.drag { border-color: #22c55e; background: #f0fdf4; }
.dropzone .dz-icon { font-size: 1.6rem; }
.dropzone .dz-text { font-size: 0.88rem; color: var(--muted); }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.asset-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.asset-card img { width: 100%; height: 90px; object-fit: cover; display: block; }
.asset-card .meta { padding: 6px 8px; font-size: 0.72rem; color: var(--muted); word-break: break-all; }
.asset-card .row { display: flex; gap: 6px; padding: 0 8px 8px; }

/* ── Sprint 2K (FIX v1): pill controls are native radio inputs styled as
   pills. Saving works with JavaScript completely disabled: the radio inside
   each label carries the value, the label is the pill, and :checked drives
   the styling. No script needs to run for any of these to work. ── */
.pillset { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pillset .pbtn { position: relative; margin: 0; cursor: pointer; }
.pillset .pbtn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pillset .pbtn span { display: inline-block; border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 6px 14px; font-size: 0.84rem; font-weight: 700; line-height: 1.2; user-select: none; }
.pillset .pbtn input:checked + span { background: #1f2937; color: #fff; border-color: #1f2937; }
.pillset .pbtn input:focus-visible + span { outline: 3px solid rgba(37,99,235,0.45); outline-offset: 1px; }
.pillset.onoff .pbtn input[value="1"]:checked + span { background: #22c55e; border-color: #16a34a; color: #fff; }
.pillset.onoff .pbtn input[value="0"]:checked + span { background: #ef4444; border-color: #dc2626; color: #fff; }
.imcheck { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.imcheck input { width: 15px; height: 15px; accent-color: #7c3aed; cursor: pointer; }
.imcard:has(.imcheck input:checked) { border-color: #7c3aed; }
.imcard:has(input[type="radio"]:checked) { border-color: #16a34a; }
.dz-fileline { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dz-fileline input[type="file"] { font-size: 0.8rem; max-width: 100%; }
.imgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.imcard { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.imcard.current { border-color: #22c55e; }
.imcard.inshow { border-color: #7c3aed; }
.imcard img { width: 100%; height: 84px; object-fit: cover; display: block; cursor: pointer; }
.imcard .imrow { display: flex; gap: 5px; padding: 6px; flex-wrap: wrap; }
.imcard .tag { font-size: 0.66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.imcard .tag.hero { background: #dcfce7; color: #166534; }
.imcard .tag.show { background: #ede9fe; color: #5b21b6; }

/* ── Sprint 2K REPAIR: big page-open buttons ── */
.btn-open { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 800; padding: 12px 24px;
  color: #fff; background: linear-gradient(180deg, #34d399 0%, #22c55e 45%, #16a34a 100%);
  border: 1px solid #15803d; border-radius: 999px; text-decoration: none;
  box-shadow: 0 5px 14px rgba(34,197,94,0.35), inset 0 1px 0 rgba(255,255,255,0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.btn-open:active { transform: translateY(1px); }

/* Sprint 31: uploads list: long content wraps inside the card instead of pushing buttons out */
table.list td { max-width: 340px; overflow-wrap: anywhere; }
table.list td .btn { white-space: normal; }

/* Sprint 39: the meeting Go live button. Bright green means one thing
   everywhere: residents can see it. Topics keep Publish/Unpublish. */
.btn-golive { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: #15803d; color: #fff; font-weight: 800; }
.btn-golive:hover { background: linear-gradient(180deg, #16a34a, #15803d); color: #fff; }

/* Sprint 47: pastel action buttons (match the Sprint 28 dashboard pastels) */
.btn-pastel-blue { background: #DDEEFF; border: 1px solid #b9d7f0; color: #1d4ed8; font-weight: 800; }
.btn-pastel-blue:hover { background: #cfe4fb; color: #1d4ed8; }
.btn-pastel-green { background: #DDF4E5; border: 1px solid #b7e6c6; color: #15803d; font-weight: 800; }
.btn-pastel-green:hover { background: #cdeed9; color: #15803d; }

/* Sprint 47: admin tables always stay INSIDE their card. On a narrow
   screen the card scrolls sideways instead of the table spilling out. */
.card { overflow-x: auto; }
.card table.list, .card table.tbl { width: 100%; }
.card table.list td, .card table.tbl td { overflow-wrap: anywhere; }