/* public/stylesheets/main.css or similar */

@font-face {
  font-family: 'Feather';
  src:  url('../assets/fonts/feather/fonts/feather.ttf') format('truetype'),
        url('../assets/fonts/feather/fonts/feather.woff') format('woff'),
        url('../assets/fonts/feather/fonts/feather.svg#feather') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.fe {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Feather' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================
   Theme Color Variables
================================== */
:root {
  --color-mocha: #724C3D; /* Dark brown shade */
  --color-orange: #2f4b36; /* Dark greenish shade */
  --color-metallic-blue: #FFF0DE; /* Lighter shade for better contrast */
  --color-charcoal: #1a1a1a;
  --color-footer-text: #46624D; /* Dark greenish shade for footer text */
  --color-white: #ffffff;
  --color-muted-text: #b9a59d;
  --color-secondary: #7d3cff;
  --color-test-red: #ff4d4d;
  --color-info: #ffffff;
}

.bg-dark {
  background-color: var(--color-mocha) !important;
}

.form-label {
  color: var(--color-metallic-blue) !important;
}

.custom-survey-text {
  color: var(--color-metallic-blue) !important;
}

.custom-checkbox-text {
  color: var(--color-metallic-blue) !important;
}

.custom-modal-bg {
  background-color: var(--color-mocha) !important; /* or any other color you want */
  color: var(--color-metallic-blue) !important; /* Optional: make text light for contrast */
}

.custom-form-label-text {
  color: var(--color-orange) !important;
}

.custom-text-danger {
  color: var(--color-info) !important;
}

.custom-muted-text {
  color: var(--color-muted-text) !important;
}

.custom-info-text {
  color: var(--color-info) !important;
  font-style: italic !important;
}

.custom-info-text2 {
  color: var(--color-info) !important;
}

.bg-light {
  background-color: var(--color-metallic-blue) !important;
}

.custom-footer-heading-text {
    color: var(--color-footer-text) !important;
    font-weight: bold;
}

/* public/stylesheets/style.css */
.btn-primary {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-white) !important;
}

.btn-primary:hover {
  background-color: var(--color-orange) !important;  /* slightly darker on hover */
  border-color: var(--color-orange) !important;
  color: var(--color-white) !important;
}

.btn-secondary {
  background-color: var(--color-metallic-blue) !important;
  border-color: var(--color-metallic-blue) !important;
  color: var(--color-mocha) !important;
}

.btn-secondary:hover {
  background-color: var(--color-metallic-blue) !important;
  border-color: var(--color-metallic-blue) !important;
  color: var(--color-mocha) !important;
}

.navbar {
  background-color: var(--color-metallic-blue) !important;
}

.navbar.border-primary.border-top {
  border-top-color: var(--color-metallic-blue) !important;
}

.navbar.navbar-default-collapse {
  background-color: var(--color-metallic-blue) !important; 
  transition: background-color 0.3s ease;
}

footer.bg-dark {
  background-color: var(--color-metallic-blue) !important;
}

footer .list-group-item-link {
  color: var(--color-footer-text) !important;
  text-decoration: none;
}

footer .list-inline-item {
  color: var(--color-footer-text)!important;
}

footer .list-group-item-link:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.text-charcoal {
    color: var(--color-charcoal) !important;
}

.bg-charcoal {
  background-color: var(--color-charcoal) !important;
}

/* Base color applied across all screen sizes */
.text-orange {
  color: var(--color-orange) !important;
}

/* Responsive variations for medium screens and up */
@media (min-width: 768px) {
  .text-orange-italic {
    color: var(--color-orange) !important;
    font-style: italic;
  }

  .text-orange-bold-italic {
    color: var(--color-orange) !important;
    font-style: italic;
    font-weight: bold;
  }

  .text-orange-bold {
    color: var(--color-orange) !important;
    font-weight: bold;
  }
}

/* Base style for all screen sizes */
.text-metallic-blue {
  color: var(--color-metallic-blue) !important;
}

/* Responsive variations (default: regular, large: styled) */
@media (min-width: 768px) {
  .text-metallic-blue-italic {
    color: var(--color-metallic-blue) !important;
    font-style: italic;
  }

  .text-metallic-blue-bold-italic {
    color: var(--color-metallic-blue) !important;
    font-style: italic;
    font-weight: bold;
  }

  .text-metallic-blue-bold {
    color: var(--color-metallic-blue) !important;
    font-weight: bold;
  }
}

@media (max-width: 767.98px) {
  .hero-title {
    font-size: 1.5rem !important;
    color: var(--color-metallic-blue) !important;
    font-weight: bold;
  }

  .hero-subtitle {
    font-size: 0.675rem !important;
    color: var(--color-orange) !important;
    font-style: italic;
  }

  .curation-input {
    width: 100%;
    max-width: 100%;
  }
}

.hero-section {
  background-image: url('/assets/images/Curation/landingPage4.jpg');
  background-size: cover;       /* ensures image covers the container */
  background-repeat: no-repeat;
  background-position: center;  /* centers image regardless of screen size */
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-shrink: 0;            /* ensure it doesn't collapse */
  position: relative;        /* helpful for stacking content */
  z-index: 1;
}

/* Optional: fine-tune position for smaller devices */
@media (max-width: 767.98px) {
  .hero-section {
    background-image: url('/assets/images/Curation/landingPage4-mobile.jpg');
    background-size: cover;     /* ensures no distortion */
    background-repeat: no-repeat;
    background-position: center center; /* you can tweak to 'center center' or 'top' if needed */
  }
}

.hero-section-survey {
  background-image: url('/assets/images/Curation/curatebg2.jpg');
  background-size: cover;       /* ensures image covers the container */
  background-repeat: no-repeat;
  background-position: center;  /* centers image regardless of screen size */
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-shrink: 0;            /* ensure it doesn't collapse */
  position: relative;        /* helpful for stacking content */
  z-index: 1;
}

/* Optional: fine-tune position for smaller devices */
@media (max-width: 767.98px) {
  .hero-section-survey {
    background-image: url('/assets/images/Curation/curatebg2.jpg');
    background-size: cover;     /* ensures no distortion */
    background-repeat: no-repeat;
    background-position: center center; /* you can tweak to 'center center' or 'top' if needed */
  }
}

#questionText {
  font-size: 1rem;            /* Adjust size as needed (e.g., 2rem or 28px) */
  color: var(--color-metallic-blue); /* Use theme color or replace with any hex */
  font-weight: 700;              /* bold for emphasis */
  /* line-height: 1.4; */
}

@media (max-width: 767.98px) {
  #questionText {
    font-size: 1.3rem;
  }
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#questionCountLabel.animate {
  animation: fadeSlide 0.4s ease-in-out;
}

#questionText::after {
  content: "|";
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

#charCount {
    font-size: 0.875rem;
}

/* ================================
   Responsive adjustments for small screens
================================== */

/* Hero sections: drop min-height on phones so content doesn't stretch
   into a tall empty box (mobile browser chrome shrinks 100vh visibly).
   The py-10 utility on the section already provides vertical padding. */
@media (max-width: 767.98px) {
  .hero-section,
  .hero-section-survey {
    min-height: auto;
  }
}

/* Shrink large display headings on small screens so they don't wrap awkwardly. */
@media (max-width: 575.98px) {
  .display-1, .display-2, .display-3 { font-size: calc(1.625rem + 1.5vw); }
  .display-4 { font-size: calc(1.475rem + 1vw); }
  .display-5 { font-size: calc(1.4rem + 0.75vw); }
}

/* Language selector: shrink and tuck to the corner on phones so it doesn't
   overlap form fields or buttons. */
@media (max-width: 575.98px) {
  .lang-selector {
    bottom: 10px !important;
    left: 10px !important;
  }
  .lang-selector .btn {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }
}

/* Logos rendered with inline width:300px should never overflow their container. */
.responsive-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* ============================================================================
   Self-Intake page (light cream theme + Heroku-style sections)
   ----------------------------------------------------------------------------
   Used by views/pages/selfIntake.ejs. ALL theme palette + layout rules for
   that page live here so colors/spacing can be tuned from a single file.
   Scoped under `.intake-light` so the existing dark-themed admin / curator
   pages that share the `custom-*` utility classes are not affected.
   ============================================================================ */

:root {
  --intake-bg:             #fdfbf6;
  --intake-tint:           #f4ebda;
  --intake-text:           #674335;
  --intake-text-hint:      #8b6d5a;
  --intake-heading:        #29422f;
  --intake-heading-hover:  #1f3122;
  --intake-tan:            #a0794e;
  --intake-input-border:   #c9b9a3;
  --intake-input-text:     #2e1f17;
  --intake-danger:         #b8392b;
  --intake-pc-blue:        #0041D7;
  --intake-pc-blue-hover:  #003BB8;
}

.intake-light {
  background-color: var(--intake-bg);
  color: var(--intake-text);
  padding: 6rem 0 3rem 0;
}
.intake-light h1, .intake-light h2 { color: var(--intake-heading); }
.intake-light h2.text-metallic-blue-bold { color: var(--intake-heading) !important; }
.intake-light p, .intake-light li, .intake-light ol { color: var(--intake-text); }
.intake-light strong { color: var(--intake-heading); }
.intake-light a { color: var(--intake-heading); }
.intake-light a:hover { color: var(--intake-heading-hover); }

/* Override the global dark-page utility classes inside the light scope. */
.intake-light .custom-survey-text { color: var(--intake-text) !important; }
.intake-light .custom-info-text { color: var(--intake-text) !important; font-style: italic !important; }
.intake-light label,
.intake-light .form-label,
.intake-light .form-check-label,
.intake-light .custom-checkbox-text { color: var(--intake-text) !important; }
.intake-light .custom-text-danger { color: var(--intake-danger) !important; }

.intake-light .form-control,
.intake-light .form-select {
  background-color: #ffffff;
  border: 1px solid var(--intake-input-border);
  color: var(--intake-input-text);
}
.intake-light .form-control:focus,
.intake-light .form-select:focus {
  border-color: var(--intake-heading);
  box-shadow: 0 0 0 0.2rem rgba(41,66,47,0.2);
}

/* Heroku-style sections: title + hint on the left, fields on the right,
   thin tan dividers between sections. */
.intake-section { padding: 1.25rem 0; }
.intake-section-title {
  color: var(--intake-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.intake-section-hint {
  color: var(--intake-text-hint);
  font-size: 0.875rem;
  margin: 0;
}
.intake-divider {
  border: 0;
  border-top: 1px solid var(--intake-tan);
  opacity: 0.35;
  margin: 0;
}
.intake-email-helper {
  color: var(--intake-text);
  margin-top: 0.4rem;
  font-size: 0.875rem;
  display: block;
}

.intake-submit {
  background-color: var(--intake-heading);
  color: var(--intake-bg);
  border: 0;
  padding: 0.65rem 2.5rem;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.intake-submit:hover { background-color: var(--intake-heading-hover); color: var(--intake-bg); }

/* Inline Planning Center notice (rendered by selfIntake.ejs on email blur). */
.pco-notice-found {
  background: var(--intake-tint);
  border-left: 4px solid var(--intake-heading);
  color: var(--intake-text);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
}
.pco-notice-notfound {
  background: var(--intake-tint);
  color: var(--intake-text);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
}
/* "Verify with Planning Center" button. White surface + PC blue border lets
   PC's full lockup (blue mark + dark wordmark) read clearly without colour
   clash; "Verify with" is the only text — the wordmark is the rest. */
.pco-verify-btn {
  background-color: #ffffff;
  color: #2e2e2e;
  border: 1.5px solid var(--intake-pc-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 120ms ease;
}
.pco-verify-btn:hover {
  background-color: #f3f6ff;
  color: #2e2e2e;
  border-color: var(--intake-pc-blue-hover);
}
.pco-verify-btn img { height: 28px; width: auto; display: block; }

/* ============================================================================
   Public legal pages — Terms, Privacy, Disclaimer
   ----------------------------------------------------------------------------
   Single-column readable layout on the intake-cream palette so the pages
   feel like part of the candidate-facing experience. The SMS-consent and
   SMS-data callouts use a tan-bordered cream block so they read as
   distinct from the surrounding prose (and so a reviewer can spot the
   TCPA-flavored clauses at a glance).
   ============================================================================ */
.legal-page {
  background: var(--intake-bg, #fdfbf6);
  color: var(--intake-text, #674335);
}
.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  font-size: 1rem;
  line-height: 1.6;
}
.legal-header { margin-bottom: 2rem; }
.legal-header h1 {
  color: var(--intake-heading, #29422f);
  font-weight: 700;
  font-size: 2rem;
  margin: 0.4rem 0 0.3rem;
  letter-spacing: 0.01em;
}
.legal-effective {
  color: var(--intake-text-hint, #8b6d5a);
  font-size: 0.9rem;
  margin: 0;
}
.legal-back {
  display: inline-block;
  color: var(--intake-text-hint, #8b6d5a);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.legal-back:hover { color: var(--intake-heading, #29422f); }

.legal-intro {
  padding: 1rem 1.2rem;
  background: var(--intake-tint, #f4ebda);
  border-left: 3px solid var(--intake-tan, #a0794e);
  border-radius: 6px;
  margin-bottom: 1.5rem;
}
.legal-intro p { margin: 0; color: var(--intake-text, #674335); }

.legal-container section { margin-bottom: 1.8rem; }
.legal-container h2 {
  color: var(--intake-heading, #29422f);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
}
.legal-container h3 {
  color: var(--intake-heading, #29422f);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1rem 0 0.4rem;
}
.legal-container p { margin: 0 0 0.7rem; color: var(--intake-text, #674335); }
.legal-container ul { margin: 0 0 0.7rem 1.2rem; padding: 0; color: var(--intake-text, #674335); }
.legal-container li { margin-bottom: 0.35rem; }
.legal-container a {
  color: var(--intake-heading, #29422f);
  text-decoration: underline;
  text-decoration-color: var(--intake-tan, #a0794e);
}
.legal-container a:hover { color: var(--intake-heading-hover, #1f3122); }

/* Callout block for SMS-consent and SMS-data sections — visually
   distinct so a legal reviewer can locate TCPA/CTIA-relevant clauses
   without combing the body text. */
.legal-callout {
  background: #fff;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  border-left: 3px solid var(--intake-heading, #29422f);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin-top: 0.4rem;
}
.legal-callout p { margin-bottom: 0.5rem; }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout strong { color: var(--intake-heading, #29422f); }

.legal-footer {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--intake-input-border, #c9b9a3);
  text-align: center;
}
.legal-footer p { color: var(--intake-text-hint, #8b6d5a); font-size: 0.9rem; margin: 0; }
.legal-footer a { color: var(--intake-text-hint, #8b6d5a); text-decoration: none; }
.legal-footer a:hover {
  color: var(--intake-heading, #29422f);
  text-decoration: underline;
  text-decoration-color: var(--intake-tan, #a0794e);
}

/* Footer link strip at the bottom of /selfIntake — keeps the legal
   pages discoverable from the candidate-facing form without competing
   with the primary Submit CTA above. */
.intake-legal-footer {
  text-align: center;
  margin: 2rem 0 1rem;
  font-size: 0.85rem;
  color: var(--intake-text-hint, #8b6d5a);
}
.intake-legal-footer a {
  color: var(--intake-text-hint, #8b6d5a);
  text-decoration: none;
  margin: 0 0.4rem;
}
.intake-legal-footer a:hover {
  color: var(--intake-heading, #29422f);
  text-decoration: underline;
  text-decoration-color: var(--intake-tan, #a0794e);
}

/* Verified — solid confirmation that the candidate has linked their session
   to a specific PC profile. Green left rule reads as "good to go". */
.pco-notice-verified {
  background: var(--intake-tint);
  border-left: 4px solid #2e7d32;
  color: var(--intake-text);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
}
/* Stale — the user has edited their email after verifying. Amber rule
   plus an alert-toned background draws attention without screaming. */
.pco-notice-stale {
  background: #fff7e0;
  border-left: 4px solid #c98a05;
  color: var(--intake-text);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
}
/* Lightweight in-flight indicator during /auth/pco/check-email so the field
   doesn't feel laggy on blur. */
.pco-notice-checking {
  background: var(--intake-tint);
  color: var(--intake-muted, var(--intake-text));
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  font-style: italic;
  opacity: 0.85;
}
/* Inline text-style button used by "Use a different account" and "Revert
   to verified email". Avoids competing with the primary Verify button. */
.pco-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--intake-pc-blue);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: underline;
}
.pco-link-btn:hover { color: var(--intake-pc-blue-hover); }
/* Step-by-step recovery list inside the mismatch notice. Padding matches the
   notice's left rule so steps line up cleanly under the prompt. */
.pco-mismatch-steps {
  padding-left: 1.25rem;
  font-size: 0.95rem;
}
.pco-mismatch-steps li { margin-bottom: 0.2rem; }

/* ── Responsive: tablets and below ────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .intake-light { padding: 4.5rem 0 2.5rem 0; }
}

/* ── Responsive: phones (Bootstrap < md, so the section row already stacks) ─ */
@media (max-width: 767.98px) {
  .intake-light { padding: 4rem 1rem 2rem 1rem; }
  .intake-section { padding: 1rem 0; }
  .intake-section-title {
    font-size: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .intake-section-hint {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }
  /* Touch-friendly inputs + a comfortably wide Submit. */
  .intake-light .form-control,
  .intake-light .form-select { padding: 0.6rem 0.75rem; font-size: 1rem; }
  .intake-submit { width: 100%; max-width: 320px; padding: 0.75rem 1.5rem; }
  /* PC notice stacks the button below the text instead of overflowing. */
  .pco-notice-found,
  .pco-notice-verified,
  .pco-notice-stale { flex-direction: column; align-items: flex-start !important; }
  .pco-notice-found .pco-verify-btn,
  .pco-notice-verified .pco-link-btn,
  .pco-notice-stale .pco-verify-btn,
  .pco-notice-stale .pco-link-btn { margin-top: 0.4rem; }
}

@media (max-width: 575.98px) {
  .intake-light { padding: 3.5rem 1rem 2rem 1rem; }
  .intake-light .responsive-logo { max-width: 220px; }
}

/* ============================================================================
   Admin tables (allCandidateList, allCurationResults)
   ----------------------------------------------------------------------------
   The .table-responsive wrapper already handles horizontal scroll. These rules
   tune cell padding/font for narrow viewports and hide the Campus column on
   very small phones to keep the most-scanned columns visible without scroll.
   ============================================================================ */

/* Candidate name -> Planning Center profile deep-link in the Name column.
   The h5 inherits the default link colour from Bootstrap which is too loud
   in a row of names — keep the heading colour, add a subtle underline on
   hover so it reads as interactive. */
.pc-profile-link,
.pc-profile-link:visited { color: inherit; text-decoration: none; }
.pc-profile-link:hover,
.pc-profile-link:focus { color: var(--intake-pc-blue, #0041D7); text-decoration: underline; }

@media (max-width: 991.98px) {
  .table-responsive .table > :not(caption) > * > * { padding: 0.5rem 0.6rem; }
  .table-responsive .table .avatar-lg { width: 36px; height: 36px; }
  .table-responsive .table h5.mb-0 { font-size: 0.95rem; }
  .table-responsive .table .font-12 { font-size: 0.75rem; }
}

@media (max-width: 575.98px) {
  .table-responsive .table > :not(caption) > * > * { padding: 0.4rem 0.5rem; }
  .table-responsive .table { font-size: 0.875rem; }
  /* Hide the Campus + Date columns on phones so Name / Phone / Code / Action
     stay visible without horizontal scroll. The data is still in the row,
     just not rendered — scroll right or use a tablet to see it. */
  .table-responsive .table .col-campus,
  .table-responsive .table .col-date { display: none; }
}

/* ============================================================================
   Sortable column headers (admin tables)
   ----------------------------------------------------------------------------
   Click toggles direction; switching to a different column resets to the
   column's natural default (DESC for dates, ASC for names). The chevron is
   neutral until the column is the active sort, then orients up/down.
   Intake-cream palette + tan hover accent so the affordance is discoverable
   without dominating the header row.
   ============================================================================ */
.sortable-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 120ms ease, background-color 120ms ease;
}
.sortable-header:hover,
.sortable-header:focus {
  color: var(--intake-heading, #29422f);
  background-color: var(--intake-tint, #f4ebda);
  outline: none;
}
.sortable-header .sort-indicator {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.7rem;
  color: var(--intake-input-border, #c9b9a3);
  transition: color 120ms ease, transform 120ms ease;
  vertical-align: middle;
}
.sortable-header.is-sorted .sort-indicator {
  color: var(--intake-tan, #a0794e);
}
.sortable-header.is-sorted-desc .sort-indicator::before { content: "\F282"; /* bi-chevron-down */ }
.sortable-header.is-sorted-asc  .sort-indicator::before { content: "\F286"; /* bi-chevron-up   */ }
.sortable-header:not(.is-sorted) .sort-indicator::before { content: "\F28F"; /* bi-chevron-expand */ }
.sortable-header .sort-indicator::before {
  font-family: "bootstrap-icons";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* ============================================================================
   Icon-only action buttons (admin tables: Summary / Curation Plan / Delete)
   ----------------------------------------------------------------------------
   Restrained, intake-cream palette in idle state so a row of 5+ icons doesn't
   read as visual noise. Semantic accent only appears on hover/focus — keeps
   the table scannable while still hinting at each action's intent.
   ============================================================================ */
.btn-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  background: #fff;
  color: var(--intake-text, #674335);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-icon-action:hover,
.btn-icon-action:focus {
  background: var(--intake-tint, #f4ebda);
  border-color: var(--intake-tan, #a0794e);
  color: var(--intake-heading, #29422f);
  outline: none;
}
.btn-icon-action i { font-size: 1rem; line-height: 1; }
.btn-icon-action.is-view:hover,
.btn-icon-action.is-view:focus      { color: var(--intake-pc-blue, #0041D7); border-color: var(--intake-pc-blue, #0041D7); }
.btn-icon-action.is-manage:hover,
.btn-icon-action.is-manage:focus    { color: var(--intake-heading, #29422f); border-color: var(--intake-heading, #29422f); }
.btn-icon-action.is-download:hover,
.btn-icon-action.is-download:focus  { color: #2e7d32; border-color: #2e7d32; }
.btn-icon-action.is-regenerate:hover,
.btn-icon-action.is-regenerate:focus{ color: #c98a05; border-color: #c98a05; background: #fff7e0; }
.btn-icon-action.is-delete:hover,
.btn-icon-action.is-delete:focus    { color: var(--intake-danger, #b8392b); border-color: var(--intake-danger, #b8392b); background: #fdecea; }
.btn-icon-action[disabled],
.btn-icon-action.disabled { opacity: 0.4; pointer-events: none; }

/* Text-label sibling of .btn-icon-action — same intake-cream palette and
   hover-only semantic accent, but with room for a word label. Used on
   pages where there are few enough row actions that text labels remain
   the more discoverable choice (e.g. /allCandidateList). Modifier
   classes (.is-view / .is-manage / .is-delete / etc.) apply the same
   semantic colour palette as their .btn-icon-action counterparts. */
.btn-intake {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  min-height: 34px;
  border-radius: 6px;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  background: #fff;
  color: var(--intake-text, #674335);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-intake:hover,
.btn-intake:focus {
  background: var(--intake-tint, #f4ebda);
  border-color: var(--intake-tan, #a0794e);
  color: var(--intake-heading, #29422f);
  outline: none;
}
.btn-intake.is-view:hover,
.btn-intake.is-view:focus      { color: var(--intake-pc-blue, #0041D7); border-color: var(--intake-pc-blue, #0041D7); }
.btn-intake.is-manage:hover,
.btn-intake.is-manage:focus    { color: var(--intake-heading, #29422f); border-color: var(--intake-heading, #29422f); }
.btn-intake.is-download:hover,
.btn-intake.is-download:focus  { color: #2e7d32; border-color: #2e7d32; }
.btn-intake.is-regenerate:hover,
.btn-intake.is-regenerate:focus{ color: #c98a05; border-color: #c98a05; background: #fff7e0; }
.btn-intake.is-delete:hover,
.btn-intake.is-delete:focus    { color: var(--intake-danger, #b8392b); border-color: var(--intake-danger, #b8392b); background: #fdecea; }
.btn-intake[disabled],
.btn-intake.disabled { opacity: 0.4; pointer-events: none; }

/* ============================================================================
   Admin search bar (allCurationResults, allCandidateList)
   ----------------------------------------------------------------------------
   Field-scoped search built on Bootstrap's input-group: a small Name / Email
   / Phone / Campus picker on the left, then either a text input or a campus
   dropdown depending on the picker. Status pills sit below (Candidate List
   only). Intake-cream palette, tan-accent focus state.
   ============================================================================ */
.admin-search-wrap { min-width: 280px; }
.admin-search {
  background: #fff;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  border-radius: 6px;
  overflow: hidden;
}
.admin-search .admin-search-field {
  flex: 0 0 auto;
  width: 7.5rem;
  border: 0;
  border-right: 1px solid var(--intake-input-border, #c9b9a3);
  background: var(--intake-tint, #f4ebda);
  color: var(--intake-heading, #29422f);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: none;
}
.admin-search .admin-search-input {
  border: 0;
  background: #fff;
  color: var(--intake-input-text, #2e1f17);
  font-size: 0.9rem;
  box-shadow: none;
}
.admin-search .admin-search-input::placeholder { color: var(--intake-text-hint, #8b6d5a); }
.admin-search :focus { outline: none; box-shadow: none; }
.admin-search:focus-within {
  border-color: var(--intake-tan, #a0794e);
  box-shadow: 0 0 0 0.15rem rgba(160, 121, 78, 0.18);
}

/* Status pill group (All / Completed / Not Completed). */
.admin-status-pills {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  border-radius: 999px;
  padding: 2px;
}
.admin-status-pill {
  border: 0;
  background: transparent;
  color: var(--intake-text, #674335);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: background-color 120ms ease, color 120ms ease;
}
.admin-status-pill:hover { color: var(--intake-heading, #29422f); }
.admin-status-pill.active {
  background: var(--intake-heading, #29422f);
  color: var(--intake-bg, #fdfbf6);
}
.admin-status-pill:focus { outline: 2px solid var(--intake-tan, #a0794e); outline-offset: 2px; }

/* "N/A" placeholder when an action isn't available (no S3 key yet, etc). */
.icon-action-na {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px dashed var(--intake-input-border, #c9b9a3);
  border-radius: 6px;
  color: var(--intake-text-hint, #8b6d5a);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
}

/* ============================================================================
   Regenerate Plan modal — intake-cream theme
   ----------------------------------------------------------------------------
   Visually anchored to /selfIntake and the plan PDF (same dark-green headings,
   cream surfaces, tan accents). Reads as content authoring, not generic admin
   CRUD. Stronger typography hierarchy than the v1 ad-hoc styling.
   ============================================================================ */
#regeneratePlanModal .modal-content {
  background: var(--intake-bg, #fdfbf6);
  color: var(--intake-text, #674335);
  border: 1px solid var(--intake-input-border, #c9b9a3);
  border-radius: 10px;
}
#regeneratePlanModal .modal-header {
  background: var(--intake-tint, #f4ebda);
  border-bottom: 1px solid var(--intake-input-border, #c9b9a3);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#regeneratePlanModal .modal-title {
  color: var(--intake-heading, #29422f);
  font-weight: 700;
  letter-spacing: 0.01em;
}
#regeneratePlanModal .modal-header small {
  color: var(--intake-text-hint, #8b6d5a);
  font-weight: 500;
}
#regeneratePlanModal .modal-footer {
  background: var(--intake-tint, #f4ebda);
  border-top: 1px solid var(--intake-input-border, #c9b9a3);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#regeneratePlanModal .modal-body > p.text-muted {
  color: var(--intake-text-hint, #8b6d5a) !important;
}

/* Category panel — bordered cream card per discipleship sphere. */
.regen-category {
  background: #fff;
  border: 1px solid var(--intake-input-border, #c9b9a3) !important;
  border-radius: 8px !important;
  padding: 1rem 1.1rem !important;
}
.regen-category-title {
  color: var(--intake-heading, #29422f);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}
.regen-meta {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.regen-meta-chip {
  display: inline-flex;
  align-items: center;
  background: var(--intake-tint, #f4ebda);
  color: var(--intake-text, #674335);
  border: 1px solid var(--intake-input-border, #c9b9a3);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.regen-meta-chip.is-positive { background: #e7f1ea; color: #29422f; border-color: #c1d6c7; }
.regen-meta-chip.is-negative { background: #fdfbf6; color: var(--intake-text-hint, #8b6d5a); border-style: dashed; }

/* Radio row — clearer labels, tan accent on checked. */
.regen-category .form-check-label {
  color: var(--intake-text, #674335);
  font-weight: 500;
}
.regen-category .form-check-label.text-muted {
  color: var(--intake-text-hint, #8b6d5a) !important;
}
.regen-category .form-check-input:checked {
  background-color: var(--intake-tan, #a0794e);
  border-color: var(--intake-tan, #a0794e);
}
.regen-category .form-check-input:focus {
  border-color: var(--intake-tan, #a0794e);
  box-shadow: 0 0 0 0.2rem rgba(160, 121, 78, 0.2);
}

/* Target count row. */
.regen-count-row {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--intake-input-border, #c9b9a3);
}
.regen-count-label {
  color: var(--intake-heading, #29422f);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}
.regen-count {
  width: 5rem !important;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  color: var(--intake-input-text, #2e1f17);
  font-weight: 600;
}
.regen-count:focus {
  border-color: var(--intake-tan, #a0794e);
  box-shadow: 0 0 0 0.2rem rgba(160, 121, 78, 0.15);
}

/* Curator notes block. !important because a global rule earlier in this
   file (`.form-label { color: var(--color-metallic-blue) !important; }`)
   sets every form label to a cream tone meant for dark admin surfaces —
   on our cream modal background it's invisible. The override is scoped
   to the modal so other admin pages are unaffected. */
#regeneratePlanModal label.form-label[for="regenCuratorNotes"] {
  color: var(--intake-heading, #29422f) !important;
  font-weight: 700;
}
/* Same problem affects the helper <small> immediately under the label. */
#regeneratePlanModal label.form-label[for="regenCuratorNotes"] + small {
  color: var(--intake-text-hint, #8b6d5a) !important;
}
#regenCuratorNotes {
  background: #fff;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  color: var(--intake-input-text, #2e1f17);
}
#regenCuratorNotes:focus {
  border-color: var(--intake-tan, #a0794e);
  box-shadow: 0 0 0 0.2rem rgba(160, 121, 78, 0.15);
}

/* Footer actions. Regenerate is the primary CTA, Cancel is the de-emphasized
   escape. Matches the intake-submit button style on /selfIntake. */
#regenSubmitBtn {
  background-color: var(--intake-heading, #29422f);
  border-color: var(--intake-heading, #29422f);
  color: var(--intake-bg, #fdfbf6);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
#regenSubmitBtn:hover:not(:disabled),
#regenSubmitBtn:focus:not(:disabled) {
  background-color: var(--intake-heading-hover, #1f3122);
  border-color: var(--intake-heading-hover, #1f3122);
  color: var(--intake-bg, #fdfbf6);
}
#regenSubmitBtn:disabled { opacity: 0.7; }
#regeneratePlanModal .btn-light {
  background: #fff;
  border: 1px solid var(--intake-input-border, #c9b9a3);
  color: var(--intake-text, #674335);
  font-weight: 500;
}
#regeneratePlanModal .btn-light:hover { background: var(--intake-tint, #f4ebda); }