/* EventPlanner theme - the SMHS Kirby look (the Leave/Pre-Travel Request app), recreated
   NATIVELY on Bootstrap 5. The tokens below were extracted once from
   razor.med.und.edu/framework/theme/content/style/kirby/1.0/site.min.css; no Kirby CSS is
   imported or vendored and no Kirby selector appears here - the classes are our own. */

:root {
    /* Kirby primary accent: #3fa66f, hover-dark #318156, brand-span tint #c8e6c9. */
    --ep-green: #3fa66f;
    --ep-green-dark: #318156;
    --ep-green-light: #e8f5e9;
    --ep-brand-tint: #c8e6c9;
    --ep-ink: #555;
    --ep-heading-ink: #444;
    --ep-muted: #9e9e9e;
    --ep-border: #e0e0e0;
    --ep-band-bg: #f5f5f5;
    --ep-page-bg: #f5f5f5;
    --ep-header-height: 50px;
    --ep-sidebar-width: 220px;
    --ep-badge-circle: #d6881b;
    --ep-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ep-brand-font: 'Titillium Web', Geneva, sans-serif;

    /* Spacing rhythm: one gap between cards/major blocks, one inside cards between
       sub-sections. Every margin that used to be an improvised 25px or mt-4 reads these. */
    --ep-gap-section: 25px;
    --ep-gap-card: 1.5rem;

    /* THE state palette - defined once, consumed by .ep-state-* and .ep-accent-*.
       blue = action needed from the current user, amber = waiting on someone else,
       green = done/verified, red = needs attention, gray = not applicable/informational.
       Nothing else may claim these meanings. */
    --ep-state-active-fg: #1565c0;
    --ep-state-active-bg: #e8f1fa;
    --ep-state-active-bd: #a9c9e8;
    --ep-state-done-fg: #2e7d32;
    --ep-state-done-bg: #e8f5e9;
    --ep-state-done-bd: #a5d6a7;
    --ep-state-wait-fg: #8a6400;
    --ep-state-wait-bg: #fff7e0;
    --ep-state-wait-bd: #e6cc7a;
    --ep-state-attention-fg: #b23b3b;
    --ep-state-attention-bg: #fdf2f2;
    --ep-state-attention-bd: #e0a3a3;
    --ep-state-muted-fg: #5c6166;
    --ep-state-muted-bg: #f2f3f4;
    --ep-state-muted-bd: #d9dcde;
}

/* ---------- State system ---------- */
/* One tone per state, applied to badges, alerts/banners, and band headers alike. */
.ep-state-active    { color: var(--ep-state-active-fg);    background: var(--ep-state-active-bg);    border: 1px solid var(--ep-state-active-bd); }
.ep-state-done      { color: var(--ep-state-done-fg);      background: var(--ep-state-done-bg);      border: 1px solid var(--ep-state-done-bd); }
.ep-state-wait      { color: var(--ep-state-wait-fg);      background: var(--ep-state-wait-bg);      border: 1px solid var(--ep-state-wait-bd); }
.ep-state-attention { color: var(--ep-state-attention-fg); background: var(--ep-state-attention-bg); border: 1px solid var(--ep-state-attention-bd); }
.ep-state-muted     { color: var(--ep-state-muted-fg);     background: var(--ep-state-muted-bg);     border: 1px solid var(--ep-state-muted-bd); }

/* The login page (spec 3 v2.11): the shell's brand bar over a centered panel on the page
   ground - the leave app's login layout recreated with our tokens, no Kirby selectors. */
.ep-login-page { background: var(--ep-page-bg); margin: 0; font-family: var(--ep-font); }
.ep-login-main { display: flex; justify-content: center; padding: 9vh 16px 0; }
.ep-login-panel { width: 100%; max-width: 400px; }

/* Left accent strip on cards - replaces full colored card borders. */
.ep-accent-active    { border-left: 4px solid var(--ep-state-active-fg); }
.ep-accent-done      { border-left: 4px solid var(--ep-state-done-fg); }
.ep-accent-wait      { border-left: 4px solid var(--ep-state-wait-fg); }
.ep-accent-attention { border-left: 4px solid var(--ep-state-attention-fg); }
.ep-accent-muted     { border-left: 4px solid var(--ep-state-muted-fg); }

/* Role badges stay OUT of the state palette: neutral outline, so state color keeps its meaning. */
.badge.ep-role-badge {
    background: #fff;
    color: var(--ep-ink);
    border: 1px solid #c9ccce;
    font-weight: 600;
}

/* Sub-section header - the h5s that separate content inside a card, and the group
   headers over the checklist items. Small-caps muted voice with a hairline rule,
   top rhythm from the in-card gap. */
.ep-subhead {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-muted);
    border-bottom: 1px solid var(--ep-border);
    padding-bottom: .5rem;
    margin-top: var(--ep-gap-card);
    margin-bottom: 1rem;
}

.ep-subhead:first-child { margin-top: 0; }

/* Required-at-submission marker (spec 4.2 v2.7) - ONE definition, applied to the label of every
   field on the required list, conditional ones included. The asterisk is the whole statement. */
.ep-req::after {
    content: " *";
    color: var(--ep-state-attention-fg);
    font-weight: 700;
}

/* Section-gap utility for page-level blocks that are not cards. */
.ep-gap-top { margin-top: var(--ep-gap-section); }

/* In-card gap utility - between the separate lines inside an item card. */
.ep-gap-card-top { margin-top: var(--ep-gap-card); }

/* Tinted header band across the top of a card (combine with an ep-state-* tone). */
.ep-card-band {
    margin: -24px -24px var(--ep-gap-card);
    padding: .7rem 24px;
    border: 0;
    border-bottom: 1px solid var(--ep-border);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Quiet band holding a filter form, between the loud sections it filters. */
.ep-filter-band {
    background: var(--ep-band-bg);
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    padding: 14px 18px 18px;
    margin-top: var(--ep-gap-section);
}

/* Inside a main-box the filter band is part of the listing it filters: a full-bleed strip
   between the header band and the table, not a free-standing card. */
.ep-main-box .ep-filter-band {
    margin: -10px -20px 16px;
    border: 0;
    border-bottom: 1px solid var(--ep-border);
    border-radius: 0;
    padding: 12px 20px 16px;
}

/* Distinct banner card for the checklist progress summary (combine with ep-state-*). */
.ep-progress-banner {
    border-radius: 6px;
    padding: 14px 18px;
    margin-top: var(--ep-gap-section);
    font-weight: 600;
}

/* Collapsible-card header link (Bootstrap collapse); the chevron turns with the state. */
a.ep-collapse-toggle {
    color: inherit;
    text-decoration: none;
    display: block;
}

.ep-collapse-toggle .fa-chevron-down {
    font-size: .75em;
    color: var(--ep-muted);
    transition: transform .15s ease;
}

.ep-collapse-toggle[aria-expanded="false"] .fa-chevron-down { transform: rotate(-90deg); }

/* Full-width edit panel row beneath a user row (Users page). */
.ep-edit-row > td {
    background: var(--ep-band-bg);
    padding: 1rem 1.25rem;
}

.ep-edit-row .form-check-inline { margin-right: 1.75rem; }

body {
    font-family: var(--ep-font);
    font-size: 13px;
    color: var(--ep-ink);
    padding-top: var(--ep-header-height);
    background: var(--ep-page-bg);
}

/* ---------- Brand bar (Kirby header: 50px, accent green, Titillium brand) ---------- */
.ep-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--ep-header-height);
    background: var(--ep-green);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
}

.ep-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 20px;
}

/* The reference brand pattern: "SMHS" plain white, the app name as the tinted span. */
.ep-brand {
    font-family: var(--ep-brand-font);
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    line-height: var(--ep-header-height);
}

.ep-brand:hover { color: #fff; }

.ep-brand span { color: var(--ep-brand-tint); }

.ep-header-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ep-user {
    font-size: .85rem;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
}

.ep-signout {
    font-size: .8rem;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 4px;
    padding: 3px 10px;
    white-space: nowrap;
}

.ep-signout:hover { color: var(--ep-green-dark); background: #fff; }

.ep-navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 4px;
    padding: 4px 8px;
    background: transparent;
    color: #fff;
}

.ep-navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(63, 166, 111, .25); }

/* ---------- Shell: sidebar left, content right ---------- */
.ep-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--ep-header-height));
}

/* Kirby nav column: 220px on the page ground, light links with the accent left border. */
.ep-sidebar {
    flex: 0 0 var(--ep-sidebar-width);
    width: var(--ep-sidebar-width);
    background: var(--ep-page-bg);
    border-right: 1px solid var(--ep-border);
    padding-top: .5rem;
}

.ep-side-nav { margin: 0; padding: 0; }

/* Kirby nav headers: muted gray small caps, hairline above every group but the first. */
.ep-nav-header {
    padding: 10px 15px 6px 14px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ep-muted);
    border-top: 1px solid var(--ep-border);
    margin-top: .35rem;
}

.ep-nav-header-first { border-top: 0; margin-top: 0; }

/* Kirby sidebar links: 40px rows, a 3px accent strip on hover and active,
   active gray with the accent text. */
.ep-side-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 40px;
    padding: 7px 15px 7px 17px;
    color: var(--ep-ink);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: border-color .1s ease-in-out, background-color .1s ease-in-out;
}

.ep-side-link i {
    font-size: 1.05em;
    width: 1.2em;
    text-align: center;
}

.ep-side-link:hover {
    color: #000;
    background-color: var(--ep-border);
    border-left-color: var(--ep-green);
}

.ep-side-link.active {
    color: var(--ep-green);
    background-color: var(--ep-border);
    border-left-color: var(--ep-green);
}

/* Kirby pending-count circles (warning tone), rendered only when the count is nonzero. */
.ep-count-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ep-badge-circle);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ---------- Content column ---------- */
.ep-content {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ep-page-bg);
}

.ep-content-body { padding: 0 25px 25px; }

@media (max-width: 991.98px) {
    .ep-shell { display: block; }

    .ep-sidebar {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ep-border);
        padding-top: 0;
    }
}

/* ---------- Breadcrumb band ---------- */
.ep-band {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: 18px 25px 12px;
    border-bottom: 1px solid var(--ep-border);
}

.ep-page-title {
    font-family: var(--ep-brand-font);
    font-size: 1.55rem;
    font-weight: 400;
    margin: 0;
    color: var(--ep-heading-ink);
}

.ep-page-title .badge { font-size: .65em; vertical-align: middle; }

.ep-breadcrumbs {
    font-size: .82rem;
    color: var(--ep-muted);
}

.ep-breadcrumbs a {
    color: var(--ep-muted);
    text-decoration: none;
}

.ep-breadcrumbs a:hover { color: var(--ep-green-dark); }

.ep-breadcrumbs .ep-crumb-sep { color: #ccc; margin: 0 .4em; }

.ep-breadcrumbs .ep-crumb-current { color: var(--ep-ink); font-weight: 600; }

/* ---------- Buttons / accent ---------- */
.btn-primary,
.btn-success {
    background-color: var(--ep-green);
    border-color: var(--ep-green);
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background-color: var(--ep-green-dark);
    border-color: var(--ep-green-dark);
}

.btn-outline-primary {
    color: var(--ep-green-dark);
    border-color: var(--ep-green);
}

.btn-outline-primary:hover {
    background-color: var(--ep-green);
    border-color: var(--ep-green);
}

a { color: var(--ep-green-dark); }
a:hover { color: var(--ep-green); }

/* ---------- Fieldset cards ---------- */
.fieldset-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    padding: 24px;
    margin-top: var(--ep-gap-section);
}

.fieldset-card.fieldset-card-nested {
    margin-top: 1rem;
    background: #fafafa;
}

.fieldset-header {
    margin-bottom: 1.25rem;
    padding-right: 44px;
}

.fieldset-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 .25rem 0;
    color: var(--ep-ink);
}

.fieldset-header p {
    font-size: .85rem;
    color: var(--ep-muted);
    margin: 0;
}

.fieldset-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 28px;
    color: var(--ep-green);
    line-height: 1;
}

/* Checklist item titles (h6). The separator h5s carry .ep-subhead instead. */
.fieldset-card h6 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-muted);
    border-bottom: 1px solid var(--ep-border);
    padding-bottom: .5rem;
    margin-top: var(--ep-gap-card);
    margin-bottom: 1rem;
}

.fieldset-card > h6:first-child { margin-top: 0; }

/* The event ID beside the page title (spec 4.7 v2.16). */
.ep-event-id { font-size: .7em; font-weight: 400; color: var(--ep-muted); margin-right: .25rem; }

/* Reference links under form fields (spec 7bis, v2.17 fix): the anchor is sized to its text -
   inline-block, never a full-width block - so only the link itself is clickable. */
a.ep-ref-link { display: inline-block; }

/* ---------- Form layout: inline fields, the Outdoor line, the services grid ---------- */
/* A label to the LEFT of its input, on one line. */
.ep-inline-field { display: flex; align-items: center; gap: .5rem; }
.ep-inline-field .form-label { margin-bottom: 0; }
.ep-inline-field .form-control, .ep-inline-field .form-select { flex: 1 1 auto; min-width: 0; }

/* Outdoor: the checkbox at the left, the backup location revealed beside it on the same line. */
.ep-outdoor-line { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ep-outdoor-line .ep-inline-field { flex: 0 1 26rem; }

/* Services: ONE column definition for every row - column 1 the checkbox and label (fixed, wide
   enough for the longest label on one line so unchecked rows share a height), column 2 the
   service's conditional fields (flexible), column 3 the estimate (fixed, right-aligned). Each
   cell is placed on its column explicitly, so a hidden cell leaves its track empty; a row grows
   downward when its fields reveal, and the column positions never change. */
.ep-services { --ep-svc-col1: 22rem; --ep-svc-col3: 15rem; --ep-svc-gap: 1rem; margin-top: .25rem; }
.ep-service-row {
    display: grid;
    grid-template-columns: var(--ep-svc-col1) minmax(0, 1fr) var(--ep-svc-col3);
    column-gap: var(--ep-svc-gap);
    align-items: start;
    padding: .35rem 0;
    border-top: 1px solid #f0f0f0;
}
.ep-service-row:first-child { border-top-color: transparent; }   /* same box as every other row */
.ep-svc-check { grid-column: 1; padding-top: .2rem; }
.ep-svc-fields { grid-column: 2; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.ep-svc-fields > div:not(.ep-inline-field) { display: flex; flex-direction: column; gap: .35rem; }
.ep-svc-cost { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.ep-svc-cost .input-group { width: 8.5rem; flex: 0 0 auto; }

@media (max-width: 767.98px) {
    .ep-service-row { grid-template-columns: 1fr; row-gap: .35rem; }
    .ep-svc-check, .ep-svc-fields, .ep-svc-cost { grid-column: 1; }
    .ep-svc-cost { justify-content: flex-start; }
}

/* ---------- Event dates picker (spec 5.1 v2.17) ---------- */
.ep-datepicker { border: 1px solid var(--ep-border); border-radius: 6px; padding: .5rem .75rem .75rem; background: #fff; max-width: 22rem; }
.ep-datepicker-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.ep-datepicker-title { font-weight: 600; color: var(--ep-ink); }
.ep-datepicker-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ep-datepicker-grid th { text-align: center; font-size: .7rem; text-transform: uppercase; color: var(--ep-muted); padding: .2rem 0; }
.ep-datepicker-grid td { text-align: center; padding: .1rem; }
.ep-day { width: 100%; padding: .3rem 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ep-ink); font-size: .85rem; }
.ep-day:hover { background: #f4f4f4; }
.ep-day:focus-visible { outline: 2px solid var(--ep-green-dark); outline-offset: 1px; }
.ep-day.selected { background: var(--ep-green); border-color: var(--ep-green-dark); color: #fff; font-weight: 600; }
.ep-date-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ep-date-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border: 1px solid var(--ep-green-dark); border-radius: 999px; background: var(--ep-green-light); font-size: .8rem; color: var(--ep-ink); }
.ep-date-pill-remove { border: 0; background: transparent; color: var(--ep-green-dark); font-weight: 700; line-height: 1; padding: 0 .1rem; }

/* ---------- Information boxes ---------- */
/* ONE sizing treatment (spec 7.1 v2.14) for every information box on a page - today the
   attached rooms requests on the checklist and the Final review screen: the same padding,
   min-height and width rules, so boxes stacked under one item align edge to edge whatever
   each one holds. Inside a flex row (box + Unlink) the box takes the row's width up to the
   cap; standing alone it takes the column's. */
.ep-info-box {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    max-width: 40rem;
    min-height: 6rem;
    padding: 12px 16px;
    margin-top: .75rem;
    font-size: .875em;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    background: #fff;
}

/* ---------- Public listing: agenda list and month grid (spec 4.7 v2.14) ---------- */
.ep-day-header {
    margin: 1rem 0 .25rem;
    padding-bottom: .25rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ep-ink);
    border-bottom: 1px solid var(--ep-border);
}
.ep-day-header:first-child { margin-top: 0; }
.ep-agenda td.ep-agenda-time { white-space: nowrap; width: 11rem; }
.ep-agenda td.ep-agenda-location { color: var(--ep-muted); }

.ep-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.ep-month-title { font-size: 1.1rem; font-weight: 600; color: var(--ep-ink); }

.ep-month {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.ep-month th {
    text-align: center;
    padding: .4rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-muted);
    border: 1px solid var(--ep-border);
}
.ep-month td.ep-month-day {
    vertical-align: top;
    min-height: 6.5rem;
    height: 6.5rem; /* a floor: table cells grow past it to fit their chips */
    padding: .3rem;
    border: 1px solid var(--ep-border);
    background: #fff;
}
.ep-month td.ep-month-other { background: #fafafa; color: var(--ep-muted); }
.ep-month td.ep-today { background: var(--ep-green-light); }
.ep-month td.ep-today .ep-month-daynum { font-weight: 700; color: var(--ep-green-dark); }
.ep-month-daynum { font-size: .8rem; }

/* One event in its day cell (spec 4.7 v2.14): three visible lines - start time, the title on
   up to two lines then an ellipsis, the location muted - in small type. */
.ep-chip {
    display: block;
    margin-top: .2rem;
    padding: .15rem .35rem .2rem;
    font-size: .72rem;
    line-height: 1.3;
    border: 1px solid var(--ep-border);
    border-left: 3px solid var(--ep-type, var(--ep-green));
    border-radius: 3px;
    /* Neutral card white (v2.17): the type color is the left accent only, so a chip never shares a
       fill with the today cell or with any type swatch. */
    background: #fff;
    color: var(--ep-ink);
    overflow: hidden;
}
.ep-chip-time { display: block; font-weight: 600; }
.ep-chip-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.ep-chip-location {
    display: block;
    color: var(--ep-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ep-chip-more { display: block; margin-top: .2rem; font-size: .72rem; }

/* Event-type palette (spec 4.7 v2.16): ONE categorical map, distinct from the state palette and
   legible as an accent beside light or dark text - applied as the chip's left border, the agenda
   row's left border, and the legend swatch. The class names come from EventTypeDisplay.CssClass. */
.ep-type-educational { --ep-type: #2f6fb3; }
.ep-type-social { --ep-type: #c2571a; }
.ep-type-meeting { --ep-type: #6a4fb3; }
.ep-type-banquet { --ep-type: #b3324f; }
.ep-type-programspecialevent { --ep-type: #1f8a70; }
.ep-type-other { --ep-type: #6c757d; }
.ep-type-tour { --ep-type: #6b8e23; }
.ep-type-exam { --ep-type: #a8860a; }
.ep-type-none { --ep-type: #b8b8b8; }

.ep-chip[class*="ep-type-"] { border-left-color: var(--ep-type); }
.ep-agenda tr[class*="ep-type-"] > td:first-child { border-left: 4px solid var(--ep-type); }
.ep-chip-pending { font-size: .6rem; vertical-align: middle; margin-left: .25rem; padding: .15em .4em; }

.ep-type-legend { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .75rem; flex: 1 1 auto; min-width: 0; }
/* The toggle and New event keep their natural size beside the legend; the legend wraps instead. */
.ep-header-actions { flex: 0 0 auto; }
.ep-header-actions .btn { white-space: nowrap; }
/* Narrow screens: title and actions share the first line, the legend takes its own line below. */
@media (max-width: 767.98px) {
    .ep-calendar-header { flex-wrap: wrap; }
    .ep-calendar-header .ep-type-legend { order: 3; flex-basis: 100%; }
}
.ep-type-legend li { display: inline-flex; align-items: center; }
/* Each legend entry is the type FILTER (v2.16): a focusable link chip in its type color; the
   active one is filled, the rest outlined. */
.ep-type-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border: 1px solid var(--ep-type);
    border-radius: 999px;
    color: var(--ep-ink);
    text-decoration: none;
    background: #fff;
}
.ep-type-chip:hover { background: #f4f4f4; color: var(--ep-ink); }
.ep-type-chip:focus-visible { outline: 2px solid var(--ep-green-dark); outline-offset: 2px; }
.ep-type-legend li.active .ep-type-chip { background: var(--ep-type); color: #fff; font-weight: 600; }
.ep-type-legend li.active .ep-type-swatch { background: #fff; }
.ep-type-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; background: var(--ep-type); }

/* Small screens hand the grid off to the agenda list rendered beneath it - CSS, not JS. */
.ep-month-fallback { display: none; }
@media (max-width: 600px) {
    .ep-month-wrap { display: none; }
    .ep-month-fallback { display: block; }
}

/* ---------- Action header ---------- */
.action-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--ep-band-bg);
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    padding: 18px 22px;
    margin-top: var(--ep-gap-section);
}

.action-header.align-top { align-items: flex-start; }

.action-header-msg h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .15rem 0;
    color: var(--ep-ink);
}

.action-header-msg p {
    font-size: .85rem;
    color: var(--ep-muted);
    margin: 0;
}

.action-header-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    /* Keeps the buttons on the right whether or not the band carries a message
       beside them - space-between alone would left-align them when alone. */
    margin-left: auto;
}

.btn-action {
    border-radius: 4px;
    padding: .55rem 1.25rem;
    font-weight: 600;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.btn-action-primary {
    background-color: var(--ep-green);
    border-color: var(--ep-green);
    color: #fff;
}

.btn-action-primary:hover {
    background-color: var(--ep-green-dark);
    border-color: var(--ep-green-dark);
    color: #fff;
}

.btn-action-outline {
    background: #fff;
    border: 1px solid #c9ccce;
    color: var(--ep-ink);
}

.btn-action-outline:hover { border-color: #adb1b4; background: #fbfbfb; }

.btn-action-danger {
    background: #fff;
    border: 1px solid #e0a3a3;
    color: #b23b3b;
}

.btn-action-danger:hover { background: #fdf2f2; }

/* ---------- Wizard step indicator ---------- */
.ep-steps {
    display: flex;
    margin: 0 0 2rem 0;
    padding: 0;
    list-style: none;
}

.ep-step {
    flex: 1;
    position: relative;
    text-align: center;
}

.ep-step::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--ep-border);
    z-index: 0;
}

.ep-step:last-child::after { display: none; }

.ep-step.completed::after { background: var(--ep-green); }

.ep-step-circle {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid var(--ep-border);
    background: #fff;
    color: var(--ep-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}

.ep-step.completed .ep-step-circle {
    background: var(--ep-green);
    border-color: var(--ep-green);
    color: #fff;
}

.ep-step.current .ep-step-circle {
    background: #fff;
    border-color: var(--ep-green);
    color: var(--ep-green-dark);
    box-shadow: 0 0 0 3px var(--ep-green-light);
}

.ep-step-label {
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--ep-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ep-step.current .ep-step-label,
.ep-step.completed .ep-step-label { color: var(--ep-ink); }

@media (max-width: 767.98px) {
    .ep-step-label { display: none; }
}

/* ---------- Tables ---------- */
.table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ep-muted);
    border-bottom-width: 1px;
    font-weight: 700;
}

.table-hover > tbody > tr:hover > * { background-color: var(--ep-green-light); }










/* ---------- Boxed listing (the Kirby main-box pattern, recreated) ---------- */
/* A white box with a titled header band; each table listing sits in one, visually
   distinct from the Pending card and the add/filter bands around it. */
.ep-main-box {
    background: #fff;
    border: 1px solid var(--ep-border);
    border-radius: 4px;
    margin-top: var(--ep-gap-section);
}

.ep-main-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 50px;
    padding: 10px 20px;
    border-bottom: 1px solid #ecf0f1;
}

.ep-main-box-header h2 {
    margin: 0;
    font-size: 1.3em;
    line-height: 29px;
    font-weight: 600;
    color: var(--ep-heading-ink);
}

.ep-main-box-body { padding: 10px 20px 16px; }

.ep-main-box-body > .table { margin-bottom: 0; }

/* ---------- Content-box tiles (the Kirby content-box pattern, recreated) ---------- */
a.ep-tile {
    display: block;
    margin-top: var(--ep-gap-section);
    padding: 15px;
    color: var(--ep-ink);
    text-decoration: none;
    background: var(--ep-band-bg);
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

a.ep-tile:hover { background: #e8e8e8; }

.ep-tile h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 .35rem;
    color: var(--ep-green);
    font-weight: 700;
}

/* The circled icon: a 40px accent ring on a transparent fill. */
.ep-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border: 1px solid var(--ep-green);
    border-radius: 50%;
    color: var(--ep-green);
    flex: 0 0 40px;
}

.ep-tile p { margin: 0 0 0 calc(40px + .6rem); color: var(--ep-ink); }

/* ---------- Misc ---------- */
.ep-lede { color: var(--ep-muted); }