@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────────────
   Extracted from the literals already used in this file — every token holds
   the exact value it replaced, so nothing renders differently.
   Self-contained on purpose: no shared stylesheet, no base.html change.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Core — hoogah.co/brand-theme, Core palette */
  --app-white:               #ffffff;
  --app-cream:                #faf8f5;  /* brand Cream */
  --app-primary:             #a8198b;  /* brand Magenta — CTAs, links, focus */
  --app-primary-hover:       #6e0f57;  /* brand Magenta Deep */
  --app-navy:                #1a0a5e;  /* brand Navy — large chrome areas (navbar, hero headers) */
  --app-lavender:            #ece7f8;  /* brand Lavender */
  --app-lavender-deep:       #d8cfee;  /* brand Lavender Deep — secondary/inactive button surfaces */

  /* Warm — hoogah.co/brand-theme, Warm palette. Only Cream Warm, Mist and
     Amber are actually drawn on; Ink/Paper/Blush/Peach/Gold were added
     speculatively and never used anywhere — removed rather than kept as
     dead weight (add back if a real use shows up). */
  --app-cream-warm:          #f5edd9;
  --app-mist:                #f3eff8;
  --app-amber:               #e8a23e;

  /* Neutral gray scale — not a brand color; structural necessity for borders/
     muted text/disabled states that magenta/navy/lavender/amber can't carry. */
  --app-border:              #dee2e6;
  --app-gray:                #6c757d;
  --app-gray-dark:           #5a6268;  /* help-icon hover */

  /* Semantic status — the only non-brand hues in the app, by explicit design
     decision: every status/confirmation surface site-wide draws from exactly
     these three (plus the brand set above). Never introduce a fourth. */
  --app-success:             #16a34a;
  --app-success-hover:       #15803d;
  --app-success-bg:          #d1fae5;
  --app-success-text:        #065f46;
  --app-warning:             var(--app-amber);  /* brand Amber doubles as "warning" */
  --app-warning-hover:       #b45309;
  --app-warning-bg:          #fef3c7;
  --app-warning-text:        #92400e;
  --app-danger:              #dc3545;
  --app-danger-hover:        #b91c1c;
  --app-danger-bg:           #fef2f2;
  --app-danger-text:         #b91c1c;

  /* Badges */
  --app-badge-existing-bg:   var(--app-lavender);   /* 'existing' — was off-brand blue */
  --app-badge-existing-text: var(--app-navy);
  --app-badge-new-bg:        var(--app-success-bg); /* 'new' */
  --app-badge-new-text:      var(--app-success-text);
  --app-badge-round-bg:      var(--app-lavender-deep); /* 'round' — was off-brand purple */
  --app-badge-round-text:    var(--app-primary-hover);
  --app-badge-lite-bg:       var(--app-lavender);   /* lite event card: org + host email */
  --app-badge-lite-text:     var(--app-navy);

  /* Lite dashboard */
  --app-muted-icon:          #adb5bd;  /* empty-state glyph */
  --app-section-bg:          #e5e7eb;  /* accordion section header */
  --app-section-border:      #d1d5db;
  --app-section-text:        #374151;

  /* Translucent */
  --app-shadow-08:           rgba(0, 0, 0, 0.08);
  --app-primary-tint:        rgba(168, 25, 139, 0.05);  /* wizard list hover */

  /* Typography — hoogah.co/brand-theme: Inter (body/UI), Plus Jakarta Sans (headings) */
  --app-font-ui:             "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --app-font-heading:        'Plus Jakarta Sans', 'Inter', sans-serif;
}

body {
    background-color: var(--app-cream);
    font-family: var(--app-font-ui);
}

/* ── Bootstrap component overrides ────────────────────────────────────────
   The CDN Bootstrap build (5.1.3) hardcodes #0d6efd into .btn-primary /
   .btn-outline-primary rather than reading its own --bs-primary variable
   (only .text-primary/.bg-primary do), so retinting --app-primary above
   doesn't reach plain `btn btn-primary` markup. This block re-points every
   raw Bootstrap "primary" utility/component at the Hoogah brand tokens in
   one place — any template using stock Bootstrap classes inherits the
   brand automatically, no per-template CSS needed. Headings default to
   Navy (brand rule: "Navy = primary text color") unless a more specific
   rule already sets one. */
:root {
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 168, 25, 139;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--app-navy);
}

a {
    color: var(--app-primary);
}
a:hover {
    color: var(--app-primary-hover);
}

.btn-primary {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.btn-primary:hover {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
    box-shadow: 0 0 0 .25rem rgba(168, 25, 139, .5);
}
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(168, 25, 139, .5);
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--app-white);
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.btn-outline-primary {
    color: var(--app-primary);
    border-color: var(--app-primary);
}
.btn-outline-primary:hover {
    color: var(--app-white);
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .25rem rgba(168, 25, 139, .5);
}
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: var(--app-white);
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.form-check-input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .25rem rgba(168, 25, 139, .25);
}

/* Same fix as .btn-primary above, for the three status colors the app is
   allowed to use outside the brand palette (see --app-success/-warning/-danger).
   .text-*/.bg-* utilities already read --bs-success etc natively; only the
   button/alert *components* hardcode their own hex and need this. */
:root {
  --bs-success: var(--app-success);
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: var(--app-warning);
  --bs-warning-rgb: 232, 162, 62;
  --bs-danger: var(--app-danger);
  --bs-danger-rgb: 220, 53, 69;
}

.btn-success { background-color: var(--app-success); border-color: var(--app-success); }
.btn-success:hover, .btn-success:focus, .btn-success.active, .btn-success:active,
.show > .btn-success.dropdown-toggle {
    background-color: var(--app-success-hover); border-color: var(--app-success-hover);
}
.btn-success.disabled, .btn-success:disabled {
    color: var(--app-white); background-color: var(--app-success); border-color: var(--app-success);
}
.btn-outline-success { color: var(--app-success); border-color: var(--app-success); }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.active, .btn-outline-success:active,
.show > .btn-outline-success.dropdown-toggle {
    color: var(--app-white); background-color: var(--app-success); border-color: var(--app-success);
}
.btn-outline-success.disabled, .btn-outline-success:disabled {
    color: var(--app-success); background-color: transparent;
}

.btn-warning { background-color: var(--app-warning); border-color: var(--app-warning); color: var(--app-warning-text); }
.btn-warning:hover, .btn-warning:focus, .btn-warning.active, .btn-warning:active,
.show > .btn-warning.dropdown-toggle {
    background-color: var(--app-warning-hover); border-color: var(--app-warning-hover); color: var(--app-white);
}
.btn-warning.disabled, .btn-warning:disabled {
    background-color: var(--app-warning); border-color: var(--app-warning); color: var(--app-warning-text);
}
.btn-outline-warning { color: var(--app-warning-hover); border-color: var(--app-warning); }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.active, .btn-outline-warning:active,
.show > .btn-outline-warning.dropdown-toggle {
    color: var(--app-warning-text); background-color: var(--app-warning); border-color: var(--app-warning);
}
.btn-outline-warning.disabled, .btn-outline-warning:disabled {
    color: var(--app-warning-hover); background-color: transparent;
}

.btn-danger { background-color: var(--app-danger); border-color: var(--app-danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger.active, .btn-danger:active,
.show > .btn-danger.dropdown-toggle {
    background-color: var(--app-danger-hover); border-color: var(--app-danger-hover);
}
.btn-danger.disabled, .btn-danger:disabled {
    background-color: var(--app-danger); border-color: var(--app-danger);
}
.btn-outline-danger { color: var(--app-danger); border-color: var(--app-danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.active, .btn-outline-danger:active,
.show > .btn-outline-danger.dropdown-toggle {
    color: var(--app-white); background-color: var(--app-danger); border-color: var(--app-danger);
}
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
    color: var(--app-danger); background-color: transparent;
}

.alert-success { color: var(--app-success-text); background-color: var(--app-success-bg); border-color: var(--app-success); }
.alert-warning { color: var(--app-warning-text); background-color: var(--app-warning-bg); border-color: var(--app-warning); }
/* Flash-message errors (messages.error, e.g. wizard validation gates) use the
   Hoogah brand palette rather than red — red stays reserved for genuinely
   destructive actions (delete/reject buttons) elsewhere in the app. */
.alert-danger  { color: var(--app-primary-hover);  background-color: var(--app-lavender);  border-color: var(--app-lavender-deep); }

/* Bootstrap tabs (nav-link) default to link-blue like plain <a> tags, but as
   <button class="nav-link"> they aren't reached by the `a { color }` rule
   above. */
.nav-link {
    color: var(--app-primary);
}
.nav-tabs .nav-link.active {
    color: var(--app-navy);
}

/* Bootstrap hardcodes .accordion-item to #fff — the expanded body (event
   cards row) should sit on the cream page background, not a white box. */
.accordion-item {
    background-color: var(--app-cream);
}

#wizard-app {
    background-color: var(--app-cream);
}

#wizard-app .card {
    background-color: var(--app-white);
}

.navbar-hoogah {
    background: var(--app-navy);
    padding: 10px 20px;
}

/* .container-fluid's default .75rem gutter stacks on top of the padding
   above, pushing the toggle ~32px from the edge instead of 20px — which
   throws off where the dropdown lands relative to it. */
.navbar-hoogah .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.navbar-hoogah .navbar-brand {
    font-family: var(--app-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-hoogah .navbar-brand::before {
    content: 'h';
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--app-primary);
    color: var(--app-white);
    font-family: var(--app-font-heading);
    font-weight: 700;
    font-size: 0.68rem;
    box-shadow: 0 2px 0 var(--app-primary-hover);
}

.navbar-hoogah .btn-outline-light {
    background: rgba(245, 237, 217, 0.10);
    border-color: rgba(245, 237, 217, 0.28);
    color: var(--app-cream-warm);
    font-family: var(--app-font-heading);
    font-weight: 700;
    border-radius: 999px;
}

.navbar-hoogah .btn-outline-light:hover,
.navbar-hoogah .btn-outline-light:focus {
    background: rgba(245, 237, 217, 0.18);
    border-color: rgba(245, 237, 217, 0.4);
    color: var(--app-cream-warm);
}

/* Navbar account dropdown (Payment Dashboard / Org Access Requests / Logout).
   The `style="width:1.1em"` on each <i> in base.html has no effect — <i> is
   inline, and `width` is a no-op on inline elements — so icons of different
   glyph widths (chart-line vs. building-user vs. arrow) push each label to a
   different starting x. Making the icon column inline-flex fixes that. */
.navbar-hoogah .dropdown-menu {
    padding: 0.5rem;
    border: 1px solid var(--app-lavender-deep);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 10, 94, 0.14);
    margin-top: 10px !important;
}

.navbar-hoogah .dropdown-menu-end {
    right: 0;
    left: auto;
}

.navbar-hoogah .dropdown-item {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--app-navy);
    font-family: var(--app-font-ui);
}

.navbar-hoogah .dropdown-item i {
    display: inline-flex;
    justify-content: center;
    width: 1.25rem;
    flex-shrink: 0;
    color: var(--app-navy);
}

.navbar-hoogah .dropdown-item:hover,
.navbar-hoogah .dropdown-item:focus {
    background: var(--app-badge-lite-bg);
    color: var(--app-primary);
}

.navbar-hoogah .dropdown-item:hover i,
.navbar-hoogah .dropdown-item:focus i {
    color: var(--app-primary);
}

.navbar-hoogah .dropdown-item.text-danger:hover,
.navbar-hoogah .dropdown-item.text-danger:focus {
    background: var(--app-danger-bg);
    color: var(--app-danger);
}

.navbar-hoogah .dropdown-item.text-danger:hover i,
.navbar-hoogah .dropdown-item.text-danger:focus i {
    color: var(--app-danger);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--app-badge-lite-bg) !important;
    color: var(--app-navy) !important;
}

.event-kebab-btn:focus,
.event-kebab-btn:active,
.event-kebab-btn.show {
    box-shadow: none !important;
    outline: none !important;
}

/* Edit Event (Lite) modal — VE-021 redesign */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(20, 12, 40, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lite-edit-content {
    border: 1px solid var(--app-border);
    border-radius: 0.875rem;
    overflow: hidden;
    max-height: 82vh;
}

.lite-edit-header {
    padding: 1.25rem 1.75rem 1rem;
    border-bottom: 1px solid var(--app-border);
}

.lite-edit-header .modal-title {
    font-family: var(--app-font-heading);
    font-size: 1.1875rem;
    color: var(--app-navy);
}

.lite-edit-body {
    padding: 1.5rem 1.75rem 1.75rem;
    overflow-y: auto;
}

.lite-edit-context-strip {
    background: var(--app-mist);
    border: 1px solid var(--app-lavender-deep);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.625rem;
}

.lite-edit-context-name {
    font-family: var(--app-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-navy);
}

.lite-edit-context-schedule {
    font-size: 0.8125rem;
    color: var(--app-gray);
}

.lite-edit-section + .lite-edit-section {
    margin-top: 1.625rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--app-border);
}

.lite-edit-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-gray);
    margin-bottom: 1rem;
}

.lite-edit-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.lite-edit-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    background: var(--app-badge-lite-bg);
    color: var(--app-badge-lite-text);
    border-radius: 999px;
    padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
    font-size: 0.78125rem;
    font-weight: 500;
}

.lite-edit-chip-remove {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--app-badge-lite-text);
    opacity: 0.5;
    font-size: 0.9375rem;
    line-height: 1;
    padding: 0 0.125rem;
    border-radius: 50%;
}

.lite-edit-chip-remove:hover {
    opacity: 1;
}

.lite-edit-chip-empty {
    font-size: 0.75rem;
    color: var(--app-muted-icon);
    margin-top: 0.625rem;
}

.lite-edit-plan-zone {
    border: 1px solid var(--app-border);
    background: var(--app-cream);
    border-radius: 0.625rem;
    margin-top: 1.625rem;
    overflow: hidden;
}

.lite-edit-plan-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 0.8125rem 1rem;
    font-family: inherit;
    font-size: 0.84375rem;
    font-weight: 500;
    color: #343a40;
}

.lite-edit-plan-toggle:hover {
    background: var(--app-mist);
}

.lite-edit-plan-optional {
    color: var(--app-gray);
    font-weight: 400;
}

.lite-edit-plan-caret {
    margin-left: auto;
    color: var(--app-gray);
    transition: transform 0.18s ease;
}

.lite-edit-plan-zone.open .lite-edit-plan-caret {
    transform: rotate(180deg);
}

.lite-edit-plan-body {
    padding: 0 1rem 1rem;
    display: none;
}

.lite-edit-current-plan {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    padding: 0.5625rem 0.75rem;
    margin: 0 0 0.875rem;
    font-size: 0.78125rem;
    color: #343a40;
}

.lite-edit-current-plan svg {
    flex: none;
    color: var(--app-success);
}

.lite-edit-current-plan b {
    color: var(--app-navy);
}

.lite-edit-plan-body .form-label {
    font-size: 0.78125rem;
}

.lite-edit-plan-zone.open .lite-edit-plan-body {
    display: block;
}

.lite-edit-footer {
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--app-border);
    background: var(--app-cream);
}

.lite-edit-cancel-btn {
    color: var(--app-gray);
    background: none;
    border: 0;
    font-weight: 600;
    padding: 0.625rem 0.25rem;
}

.lite-edit-cancel-btn:hover {
    color: var(--app-navy);
    text-decoration: underline;
}

.lite-edit-save-btn {
    font-weight: 600;
    padding: 0.625rem 1.375rem;
}

.navbar-hoogah .dropdown-divider {
    border-top-color: var(--app-lavender-deep);
    margin: 0.4rem 0;
}

.card-hoogah {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background-color: var(--app-white);
}

.card-hoogah .card-header {
    border-bottom: 1px solid var(--app-border);
    background: transparent;
}

/* Django messages framework renders `alert-{{ message.tags }}` — success/
   danger/warning keep their standard semantic colors, but "info" (Bootstrap
   cyan) isn't part of the brand at all, and IS actually used
   (admin_app/views.py: static-huddle "no new groups created" notice). */
.alert-info {
    color: var(--app-navy);
    background-color: var(--app-badge-lite-bg);
    border-color: var(--app-lavender-deep);
}

.card-hoogah-hero .card-header {
    border: none;
    border-radius: 1rem 1rem 0 0;
    background: var(--app-navy);
    color: var(--app-white);
}

.section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-gray);
}

.question-card {
    border-radius: 1rem;
    border: 1px solid var(--app-border);
    background: var(--app-white);
    min-height: 100%;
}

.badge-hoogah-existing {
    background: var(--app-badge-existing-bg);
    color: var(--app-badge-existing-text);
    font-weight: 400;
}

.badge-hoogah-new {
    background: var(--app-badge-new-bg);
    color: var(--app-badge-new-text);
    font-weight: 400;
}

.badge-hoogah-round {
    background: var(--app-badge-round-bg);
    color: var(--app-badge-round-text);
    font-weight: 400;
}

.badge-hoogah-neutral {
    background: var(--app-gray);
    color: var(--app-white);
    font-weight: 400;
}

.btn-hoogah-primary {
    background: var(--app-primary);
    border: none;
    color: var(--app-white);
    font-weight: 400;
}

.btn-hoogah-primary:hover {
    background: var(--app-primary-hover);
    color: var(--app-white);
}

.btn-hoogah-outline {
    border: 1px solid var(--app-primary);
    color: var(--app-primary);
    background: transparent;
    font-weight: 400;
}

.btn-hoogah-outline:hover {
    background: var(--app-primary);
    color: var(--app-white);
}

.list-group-hoogah .list-group-item {
    border: none;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
}

.list-group-hoogah .list-group-item:last-child {
    border-bottom: none;
}

/* Mobile-first responsive design */
.card-sm {
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

/* Improve touch targets for mobile */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Wizard styles */
.wizard-steps .wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.wizard-form .card {
    border: 1px solid var(--app-shadow-08);
    border-radius: 0.75rem;
}

.wizard-form .card-body {
    padding: 1.5rem;
}

.wizard-form .list-group-item {
    cursor: pointer;
}

.wizard-form .list-group-item:hover {
    background-color: var(--app-primary-tint);
}

#wizard-alert {
    transition: opacity 0.2s ease-in-out;
}

/* Optimize wizard container for vertical space */
#wizard-step-container {
    min-height: 500px;
}

@media (min-height: 800px) {
    #wizard-step-container {
        min-height: 600px;
    }
}

.topic-card,
.location-card,
.question-card,
.round-card {
    border-radius: 0.75rem;
}

.mapping-item,
.group-item {
    border-radius: 0.5rem;
}

/* Expanded questions list for better visibility */
.questions-list-expanded {
    max-height: 450px;
    min-height: 300px;
}

@media (min-height: 800px) {
    .questions-list-expanded {
        max-height: 550px;
        min-height: 400px;
    }
}

@media (min-height: 1000px) {
    .questions-list-expanded {
        max-height: 650px;
        min-height: 500px;
    }
}

/* Style for answer labels in groups */
.answer-label.text-muted.fst-italic {
    font-style: italic;
    opacity: 0.6;
}

.answer-checkboxes .form-check-label {
    font-weight: 500;
    user-select: none;
}

/* Organization filter — shared component markup on event_list.html and
   payment_dashboard.html (same IDs/classes, never both on screen at once). */
.org-filter-btn {
    min-width: 220px;
    justify-content: space-between;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    color: var(--app-section-text);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.org-filter-btn:hover {
    border-color: var(--app-primary);
    color: var(--app-primary);
}
.org-filter-btn[aria-expanded="true"] {
    border-color: var(--app-primary);
    color: var(--app-primary);
    box-shadow: 0 0 0 .2rem var(--app-primary-tint);
}
.org-filter-btn .org-filter-caret {
    transition: transform .15s ease;
    flex-shrink: 0;
}
.org-filter-btn[aria-expanded="true"] .org-filter-caret {
    transform: rotate(180deg);
}
.org-filter-panel {
    background: var(--app-white);
    border: 1px solid var(--app-lavender-deep);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(26, 10, 94, 0.12);
    overflow: hidden;
}
.org-filter-option {
    border-radius: 6px;
    margin: 0 .35rem;
    transition: background-color .12s ease;
}
.org-filter-option:hover {
    background: var(--app-lavender);
}

/* Delete button styles */
.delete-draft-btn {
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.delete-draft-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.delete-draft-btn svg {
    pointer-events: none;
}

/* Help icon tooltip styles */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background-color: var(--app-gray);
    color: var(--app-white);
    font-size: 11px;
    font-weight: 600;
    cursor: help;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.help-icon:hover {
    background-color: var(--app-gray-dark);
    color: var(--app-white);
    text-decoration: none;
}

.form-label {
    display: inline-flex;
    align-items: center;
}