/* Organic design tokens — vendored from design_handoff_sponsor_page/organic-tokens.css,
   with one deliberate departure: the neutral ramp (page background, card
   surfaces, text-box fills, borders) is true achromatic grey/white instead of
   Organic's warm tan-tinted neutrals — an explicit ask for the admin site,
   which reads better neutral on a dense, form-heavy dashboard. The accent
   colors (terracotta/sage) are untouched and still vendored as-is.
   Fonts are loaded from index.html's <link> tags (same pattern as sponsor-site),
   not an @import here, so the browser can start fetching them immediately. */
:root {
  --color-bg: #f2f2f2;
  --color-surface: #eeeeee;
  --color-text: #1c1c1c;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;

  --color-neutral-100: #ffffff;
  --color-neutral-200: #f2f2f2;
  --color-neutral-300: #e2e2e2;
  --color-neutral-400: #cfcfcf;
  --color-neutral-500: #a8a8a8;
  --color-neutral-600: #838383;
  --color-neutral-700: #5f5f5f;
  --color-neutral-800: #3f3f3f;
  --color-neutral-900: #242424;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-700: #56633f;

  /* Not part of the Organic system (it has no dedicated error hue) — picked to
     read as "error" against the warm ground while staying in the same family
     as the Managed Login branding applied to the Cognito login page, so the
     two surfaces feel like one experience. */
  --color-error: #b3261e;
  --color-error-bg: #fdf1ef;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

* { box-sizing: border-box; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0 0 4px;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  border-bottom: 1px solid var(--color-neutral-300);
  color: var(--color-text);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header strong {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 400;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.app-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 160px;
  flex-shrink: 0;
}

.tab {
  margin-top: 0;
  background: var(--color-neutral-100);
  color: var(--color-text);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.tab:hover { background: var(--color-neutral-200); }

.tab.active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.tab.active:hover { background: var(--color-accent); }

.tab-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .app-layout { flex-direction: column; }
  .sidebar { flex-direction: row; width: 100%; }
  .tab { flex: 1; text-align: center; }
}

section {
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-800);
  margin: 14px 0 5px;
}

input,
select {
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-400);
  background: var(--color-surface);
  font: inherit;
  color: var(--color-text);
}

input:focus-visible,
select:focus-visible { border-color: var(--color-accent); }

input:disabled,
select:disabled {
  background: var(--color-neutral-200);
  color: var(--color-neutral-600);
}

input[type="file"] {
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  padding: 0;
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-neutral-200);
  flex-shrink: 0;
}

.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

input[type="color"] {
  width: 48px;
  height: 36px;
  padding: 2px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.editor-toolbar {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.editor-toolbar button {
  margin-top: 0;
  background: var(--color-neutral-200);
  color: var(--color-text);
  border: 1px solid var(--color-neutral-300);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
}
.editor-toolbar button:hover { background: var(--color-neutral-300); }

.explainer-editor {
  min-height: 100px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-400);
  background: var(--color-surface);
  margin-top: 6px;
}

.explainer-editor ul {
  margin: 0.4rem 0;
  padding-left: 1.4rem;
}

.explainer-editor p {
  margin: 0 0 0.5rem;
}

.hint {
  font-size: 13px;
  color: var(--color-neutral-700);
  margin: 5px 0 0;
}

button {
  margin-top: 1rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
}
button:hover { background: var(--color-accent-600); }
button:active { background: var(--color-accent-700); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-neutral-400);
}
button.secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
button.secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.message { color: var(--color-accent-2-700); font-weight: 600; }
.error { color: var(--color-error); font-weight: 600; }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-neutral-300);
  font-size: 14px;
}

th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  font-weight: 600;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: var(--color-neutral-200);
}

.add-row {
  margin-top: 4px;
  width: 100%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  border: 1px dashed var(--color-accent-600);
  border-radius: var(--radius-md);
}
.add-row:hover { background: var(--color-accent-200); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.row-actions {
  white-space: nowrap;
}

.icon-button {
  margin-top: 0;
  background: none;
  border: none;
  padding: 3px 6px;
  font-size: 15px;
  cursor: pointer;
}
.icon-button:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: var(--radius-sm); }

.preview-table-wrap {
  max-height: 40vh;
  overflow-y: auto;
  margin: 12px 0;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
}

.modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.modal-header-row h3 {
  margin: 0;
}

.bulk-goal-input {
  flex-shrink: 0;
  width: 160px;
}

.bulk-goal-input label {
  margin: 0 0 0.2rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

.modal {
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal.modal-wide {
  max-width: 600px;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.modal-actions button {
  margin-top: 0;
  flex: 1;
}