/*
 * ============================================================
 *  admin-ui.css  —  Bangla-O-Biswa (Admin Section)
 *  Uses ONLY var(--bob-…) tokens. Zero hardcoded colours.
 *  Change ADMIN_PALETTE in config.php to retheme entirely.
 * ============================================================
 */

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--bob-font-body);
    font-size:   1rem;
    line-height: 1.65;
    color:       var(--bob-clr-text);
    background:  var(--bob-clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; outline: none; }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES  (login, setup)
   ══════════════════════════════════════════════════════════ */
.admin-auth-page {
    min-height: 100vh;
    display:    flex;
    align-items: center;
    justify-content: center;
    background: var(--bob-nav-bg);
    padding:    2rem 1.25rem;
}

.login-card {
    display:       flex;
    width:         100%;
    max-width:     880px;
    border-radius: var(--bob-r-lg);
    overflow:      hidden;
    box-shadow:    var(--bob-shadow-lg);
}

.login-card__left {
    flex:            1.15;
    background:      var(--bob-glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border:          1px solid var(--bob-glass-border);
    border-right:    none;
    padding:         3rem 2.5rem;
    color:           var(--bob-glass-clr);
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             2.5rem;
}

.login-card__right {
    flex:           1;
    background:     var(--bob-clr-surface);
    padding:        3rem 2.5rem;
    display:        flex;
    flex-direction: column;
    justify-content: center;
}

.login-brand__name {
    font-family: var(--bob-font-display);
    font-size:   clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color:       var(--bob-glass-clr);
    line-height: 1.15;
}
.login-brand__label {
    font-family:    var(--bob-font-ui);
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--bob-glass-clr-muted);
    margin-top:     0.4rem;
}
.login-brand__tagline {
    font-size:  0.85rem;
    color:      var(--bob-glass-clr-muted);
    margin-top: 0.6rem;
    line-height: 1.5;
}

.login-features { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.25rem; }
.login-feature  { display: flex; align-items: center; gap: 1rem; }
.login-feature__icon {
    width:  40px; height: 40px;
    border-radius: var(--bob-r-sm);
    background: var(--bob-glass-icon-bg);
    border:     1px solid var(--bob-glass-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.88rem; color: var(--bob-glass-clr);
    transition: background var(--bob-ease);
}
.login-feature:hover .login-feature__icon { background: var(--bob-glass-badge-bg); }
.login-feature__title { font-family: var(--bob-font-ui); font-size: 0.875rem; font-weight: 600; color: var(--bob-glass-clr); line-height: 1.2; }
.login-feature__desc  { font-size: 0.75rem; color: var(--bob-glass-clr-muted); margin-top: 0.15rem; }

.login-badges { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.login-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.8rem; border-radius: var(--bob-r-pill);
    background: var(--bob-glass-badge-bg); border: 1px solid var(--bob-glass-border);
    font-family: var(--bob-font-ui); font-size: 0.72rem; font-weight: 500;
    color: var(--bob-glass-clr-muted);
}

.login-form__logo     { font-size: 2rem; margin-bottom: 1.25rem; line-height: 1; }
.login-form__title    { font-family: var(--bob-font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--bob-clr-text); line-height: 1.2; }
.login-form__subtitle { font-size: 0.9rem; color: var(--bob-clr-text-muted); margin-top: 0.4rem; margin-bottom: 2rem; }

.form-alert {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1rem; border-radius: var(--bob-r-sm);
    font-family: var(--bob-font-ui); font-size: 0.85rem; font-weight: 500;
    margin-bottom: 1.25rem; line-height: 1.4;
}
.form-alert--error   { background: var(--bob-clr-error-bg);   color: var(--bob-clr-error);   border: 1px solid var(--bob-clr-error-border); }
.form-alert--success { background: var(--bob-clr-success-bg); color: var(--bob-clr-success); border: 1px solid var(--bob-clr-success-border); }

.form-group   { margin-bottom: 1.25rem; }
.form-label   { display: block; font-family: var(--bob-font-ui); font-size: 0.82rem; font-weight: 600; color: var(--bob-clr-text); margin-bottom: 0.4rem; }
.form-input {
    width: 100%; padding: 0.72rem 0.9rem;
    border: 1.5px solid var(--bob-clr-border); border-radius: var(--bob-r-sm);
    font-size: 0.9rem; color: var(--bob-clr-text); background: var(--bob-clr-surface);
    transition: border-color var(--bob-ease), box-shadow var(--bob-ease);
}
.form-input:focus { border-color: var(--bob-clr-primary); box-shadow: 0 0 0 3px var(--bob-clr-accent-soft); }
.form-input::placeholder { color: var(--bob-clr-text-muted); opacity: 0.55; }

.form-forgot { display: block; text-align: right; font-family: var(--bob-font-ui); font-size: 0.8rem; font-weight: 500; color: var(--bob-clr-secondary); margin-top: 0.5rem; transition: color var(--bob-ease); }
.form-forgot:hover { color: var(--bob-clr-primary); }

.btn-login {
    width: 100%; padding: 0.88rem;
    background: var(--bob-gradient-brand); color: var(--bob-btn-primary-clr);
    border-radius: var(--bob-r-sm); font-family: var(--bob-font-ui);
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    margin-top: 1.5rem; box-shadow: var(--bob-shadow-sm);
    transition: opacity var(--bob-ease), transform var(--bob-ease), box-shadow var(--bob-ease);
}
.btn-login:hover  { opacity: 0.9; transform: translateY(-1px); box-shadow: var(--bob-shadow-md); }
.btn-login:active { transform: translateY(0); box-shadow: var(--bob-shadow-sm); }

.login-footer-note { text-align: center; margin-top: 1.5rem; font-family: var(--bob-font-ui); font-size: 0.73rem; color: var(--bob-clr-text-muted); }

/* ══════════════════════════════════════════════════════════
   ADMIN SHELL  (sidebar + topbar layout)
   ══════════════════════════════════════════════════════════ */

/* Body class added by admin-header.php */
.admin-body {
    display:    flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Sidebar ────────────────────────────────────────────── */
.admin-sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    width:      var(--bob-sidebar-w);
    height:     100vh;
    background: var(--bob-nav-bg);
    display:    flex;
    flex-direction: column;
    z-index:    300;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bob-sidebar-divider) transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Sidebar: Brand ─────────────────────────────────────── */
.sidebar-brand {
    padding:      1.25rem 1rem 1.1rem;
    border-bottom: 1px solid var(--bob-sidebar-divider);
    flex-shrink:  0;
}

.sidebar-brand__link {
    display:     flex;
    align-items: center;
    gap:         0.7rem;
    text-decoration: none;
}

.sidebar-brand__logo-wrap {
    width:           38px;
    height:          38px;
    border-radius:   var(--bob-r-pill);
    background:      var(--bob-glass-icon-bg);
    border:          1.5px solid var(--bob-glass-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
}

.sidebar-brand__logo-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: var(--bob-r-pill);
}

.sidebar-brand__logo-fallback {
    font-family: var(--bob-font-display);
    font-size:   0.85rem;
    font-weight: 700;
    color:       var(--bob-glass-clr);
}

.sidebar-brand__name {
    font-family:  var(--bob-font-display);
    font-size:    0.95rem;
    font-weight:  700;
    color:        var(--bob-glass-clr);
    line-height:  1.2;
}

.sidebar-brand__sub {
    font-family:    var(--bob-font-ui);
    font-size:      0.62rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--bob-glass-clr-muted);
}

/* ── Sidebar: Navigation ────────────────────────────────── */
.sidebar-nav {
    flex:       1;
    padding:    0.85rem 0.65rem;
    overflow-y: auto;
}

.sidebar-section-label {
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    user-select:    none;
    font-family:    var(--bob-font-ui);
    font-size:      0.6rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--bob-glass-clr-muted);
    padding:        0.9rem 0.7rem 0.35rem;
    opacity:        0.8;
}
.sidebar-chevron {
    font-size:  0.55rem;
    opacity:    0.6;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.sidebar-section-label.is-nav-collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}

.sidebar-nav > p.sidebar-section-label + ul + p.sidebar-section-label {
    margin-top:  0.5rem;
    border-top:  1px solid var(--bob-sidebar-divider);
    padding-top: 1.1rem;
}

.sidebar-menu { display: flex; flex-direction: column; gap: 0.15rem; }

.sidebar-menu__item {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    padding:         0.68rem 0.85rem;
    border-radius:   var(--bob-r-sm);
    font-family:     var(--bob-font-ui);
    font-size:       0.865rem;
    font-weight:     500;
    color:           var(--bob-nav-link-clr);
    text-decoration: none;
    transition:      background var(--bob-ease), color var(--bob-ease);
    position:        relative;
    white-space:     nowrap;
}

.sidebar-menu__item i {
    width:      18px;
    font-size:  0.875rem;
    text-align: center;
    flex-shrink: 0;
    opacity:    0.7;
    transition: opacity var(--bob-ease);
}

.sidebar-menu__item:hover {
    background: var(--bob-sidebar-item-hover-bg);
    color:      var(--bob-nav-link-hover-clr);
}
.sidebar-menu__item:hover i { opacity: 1; }

.sidebar-menu__item.is-active {
    background: var(--bob-sidebar-item-active-bg);
    color:      var(--bob-nav-link-hover-clr);
    font-weight: 600;
}
.sidebar-menu__item.is-active i { opacity: 1; }

.sidebar-menu__item.is-active::before {
    content:      '';
    position:     absolute;
    left:         0;
    top:          22%;
    bottom:       22%;
    width:        3px;
    border-radius: 0 var(--bob-r-pill) var(--bob-r-pill) 0;
    background:   var(--bob-glass-clr);
}

/* ── Sidebar: Footer (user + sign out) ──────────────────── */
.sidebar-footer {
    padding:     0.85rem 0.65rem 1rem;
    border-top:  1px solid var(--bob-sidebar-divider);
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-shrink: 0;
}

.sidebar-user { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; }

.sidebar-user__avatar {
    width:           34px;
    height:          34px;
    border-radius:   var(--bob-r-pill);
    background:      var(--bob-glass-icon-bg);
    border:          1.5px solid var(--bob-glass-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--bob-font-ui);
    font-size:       0.9rem;
    font-weight:     700;
    color:           var(--bob-glass-clr);
    flex-shrink:     0;
}

.sidebar-user__name {
    font-family:   var(--bob-font-ui);
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--bob-glass-clr);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.2;
}

.sidebar-user__role {
    font-size:     0.68rem;
    color:         var(--bob-glass-clr-muted);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.sidebar-signout {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   var(--bob-r-sm);
    color:           var(--bob-glass-clr-muted);
    flex-shrink:     0;
    transition:      background var(--bob-ease), color var(--bob-ease);
}
.sidebar-signout:hover { background: var(--bob-sidebar-item-hover-bg); color: var(--bob-glass-clr); }

/* ── Admin main area ────────────────────────────────────── */
.admin-main {
    margin-left:    var(--bob-sidebar-w);
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    min-width:      0;
    background:     var(--bob-clr-bg);
}

/* ── Admin topbar ───────────────────────────────────────── */
.admin-topbar {
    position:     sticky;
    top:          0;
    z-index:      200;
    height:       var(--bob-admin-topbar-h);
    background:   var(--bob-clr-surface);
    border-bottom: 1px solid var(--bob-clr-border);
    display:      flex;
    align-items:  center;
    gap:          1rem;
    padding:      0 1.75rem;
    flex-shrink:  0;
}

.sidebar-toggle {
    display:         none;
    align-items:     center;
    justify-content: center;
    width:  36px;
    height: 36px;
    border-radius: var(--bob-r-sm);
    border:   1.5px solid var(--bob-clr-border);
    color:    var(--bob-clr-text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background var(--bob-ease), color var(--bob-ease);
}
.sidebar-toggle:hover { background: var(--bob-clr-accent-soft); color: var(--bob-clr-primary); }

.admin-topbar__title {
    font-family: var(--bob-font-ui);
    font-size:   1rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
    flex:        1;
}

.admin-topbar__right {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-shrink: 0;
}

.admin-topbar__user {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-family: var(--bob-font-ui);
    font-size:   0.83rem;
    font-weight: 500;
    color:       var(--bob-clr-text-muted);
}

/* ── Admin content area ─────────────────────────────────── */
.admin-content {
    flex:    1;
    padding: 2rem 1.75rem;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* ── Stat cards ─────────────────────────────────────────── */
.stat-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap:                   1.25rem;
    margin-bottom:         2rem;
}

.stat-card {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       1.4rem 1.5rem;
    display:       flex;
    align-items:   flex-start;
    gap:           1rem;
    transition:    box-shadow var(--bob-ease), transform var(--bob-ease);
}
.stat-card:hover { box-shadow: var(--bob-shadow-sm); transform: translateY(-2px); }

.stat-card__icon {
    width:           48px;
    height:          48px;
    border-radius:   var(--bob-r-md);
    background:      var(--bob-clr-accent-soft);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.25rem;
    flex-shrink:     0;
}
.stat-card__icon--a { color: var(--bob-clr-primary); }
.stat-card__icon--b { color: var(--bob-clr-secondary); }
.stat-card__icon--c { color: var(--bob-clr-accent); }
.stat-card__icon--d { color: var(--bob-clr-highlight); }

.stat-card__value {
    font-family: var(--bob-font-display);
    font-size:   2rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.stat-card__label {
    font-family:    var(--bob-font-ui);
    font-size:      0.76rem;
    font-weight:    600;
    color:          var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-card__trend {
    font-family: var(--bob-font-ui);
    font-size:   0.72rem;
    color:       var(--bob-clr-text-muted);
    margin-top:  0.2rem;
}

/* ── Dashboard section panel ────────────────────────────── */
.dash-panel {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    margin-bottom: 1.5rem;
    overflow:      hidden;
}

.dash-panel__head {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       1rem 1.5rem;
    border-bottom: 1px solid var(--bob-clr-border);
}

.dash-panel__title {
    font-family: var(--bob-font-ui);
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}

.dash-panel__link {
    font-family: var(--bob-font-ui);
    font-size:   0.8rem;
    font-weight: 500;
    color:       var(--bob-clr-secondary);
    transition:  color var(--bob-ease);
}
.dash-panel__link:hover { color: var(--bob-clr-primary); }

.dash-panel__body { padding: 0; }

/* ── Admin data table ───────────────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--bob-font-body);
    font-size: 0.875rem;
}

.admin-table th {
    text-align:     left;
    padding:        0.65rem 1.25rem;
    font-family:    var(--bob-font-ui);
    font-size:      0.72rem;
    font-weight:    600;
    color:          var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background:     var(--bob-clr-bg);
    border-bottom:  1px solid var(--bob-clr-border);
}

.admin-table td {
    padding:       0.75rem 1.25rem;
    color:         var(--bob-clr-text);
    border-bottom: 1px solid var(--bob-clr-border);
    vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td { background: var(--bob-clr-bg); }

/* ── Status badges ──────────────────────────────────────── */
.badge {
    display:      inline-flex;
    align-items:  center;
    gap:          0.3rem;
    padding:      0.2rem 0.6rem;
    border-radius: var(--bob-r-pill);
    font-family:  var(--bob-font-ui);
    font-size:    0.72rem;
    font-weight:  600;
}
.badge--success { background: var(--bob-clr-success-bg); color: var(--bob-clr-success); }
.badge--error   { background: var(--bob-clr-error-bg);   color: var(--bob-clr-error); }
.badge--neutral { background: var(--bob-clr-accent-soft); color: var(--bob-clr-primary); }
.badge--muted   { background: var(--bob-clr-bg); color: var(--bob-clr-text-muted); border: 1px solid var(--bob-clr-border); }

/* ── Quick action buttons ───────────────────────────────── */
.quick-actions {
    display:   flex;
    gap:       0.75rem;
    flex-wrap: wrap;
    padding:   1.25rem 1.5rem;
}

.btn-action {
    display:      inline-flex;
    align-items:  center;
    gap:          0.45rem;
    padding:      0.6rem 1.2rem;
    border-radius: var(--bob-r-sm);
    font-family:  var(--bob-font-ui);
    font-size:    0.85rem;
    font-weight:  600;
    transition:   background var(--bob-ease), color var(--bob-ease), box-shadow var(--bob-ease);
    text-decoration: none;
}
.btn-action--primary {
    background: var(--bob-gradient-brand);
    color:      var(--bob-btn-primary-clr);
    box-shadow: var(--bob-shadow-sm);
}
.btn-action--primary:hover { box-shadow: var(--bob-shadow-md); opacity: 0.92; }

.btn-action--outline {
    background: var(--bob-clr-surface);
    color:      var(--bob-clr-primary);
    border:     1.5px solid var(--bob-clr-border);
}
.btn-action--outline:hover { background: var(--bob-clr-accent-soft); border-color: var(--bob-clr-primary); }

/* ── Empty state ────────────────────────────────────────── */
.empty-state {
    text-align:  center;
    padding:     3rem 1.5rem;
    color:       var(--bob-clr-text-muted);
    font-family: var(--bob-font-ui);
    font-size:   0.9rem;
}
.empty-state i { font-size: 2.5rem; opacity: 0.3; margin-bottom: 0.75rem; color: var(--bob-clr-primary); }

/* ══════════════════════════════════════════════════════════
   COMMON PAGE COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* ── Page toolbar ───────────────────────────────────────── */
.page-toolbar {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}
.page-toolbar__actions {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    flex-shrink: 0;
    flex-wrap:   wrap;
}
.page-subtitle {
    font-family: var(--bob-font-body);
    font-size:   0.88rem;
    color:       var(--bob-clr-text-muted);
    margin-top:  0.2rem;
}

/* ── Extra form controls ─────────────────────────────────── */
.form-check {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-family: var(--bob-font-ui);
    font-size:   0.875rem;
    color:       var(--bob-clr-text);
    cursor:      pointer;
    line-height: 1.3;
    user-select: none;
}
.form-check input[type="checkbox"] {
    accent-color: var(--bob-clr-primary);
    width:        1rem;
    height:       1rem;
    flex-shrink:  0;
}
.form-hint {
    font-family: var(--bob-font-body);
    font-size:   0.76rem;
    color:       var(--bob-clr-text-muted);
    margin-top:  0.3rem;
}
.form-select {
    width:              100%;
    padding:            0.72rem 2.5rem 0.72rem 0.9rem;
    border:             1.5px solid var(--bob-clr-border);
    border-radius:      var(--bob-r-sm);
    font-size:          0.9rem;
    color:              var(--bob-clr-text);
    background-color:   var(--bob-clr-surface);
    appearance:         none;
    -webkit-appearance: none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 0.75rem center;
    transition:         border-color var(--bob-ease), box-shadow var(--bob-ease);
}
.form-select:focus { border-color: var(--bob-clr-primary); box-shadow: 0 0 0 3px var(--bob-clr-accent-soft); }
.form-textarea {
    width:         100%;
    padding:       0.72rem 0.9rem;
    border:        1.5px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    font-size:     0.9rem;
    color:         var(--bob-clr-text);
    background:    var(--bob-clr-surface);
    resize:        vertical;
    min-height:    90px;
    line-height:   1.5;
    transition:    border-color var(--bob-ease), box-shadow var(--bob-ease);
}
.form-textarea:focus { border-color: var(--bob-clr-primary); box-shadow: 0 0 0 3px var(--bob-clr-accent-soft); }
.form-textarea::placeholder { color: var(--bob-clr-text-muted); opacity: 0.55; }

/* ── Info box ────────────────────────────────────────────── */
.info-box {
    display:       flex;
    gap:           0.75rem;
    align-items:   flex-start;
    background:    var(--bob-clr-accent-soft);
    border:        1px solid var(--bob-clr-border);
    border-left:   3px solid var(--bob-clr-primary);
    border-radius: var(--bob-r-sm);
    padding:       1rem 1.25rem;
    font-family:   var(--bob-font-body);
    font-size:     0.85rem;
    color:         var(--bob-clr-text);
    line-height:   1.55;
}
.info-box__icon { color: var(--bob-clr-primary); font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.info-box code {
    font-family:   monospace;
    background:    var(--bob-clr-bg);
    padding:       0.1em 0.4em;
    border-radius: 3px;
    font-size:     0.85em;
    border:        1px solid var(--bob-clr-border);
}

/* ── Chip ────────────────────────────────────────────────── */
.chip {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    padding:       0.18rem 0.6rem;
    border-radius: var(--bob-r-pill);
    font-family:   var(--bob-font-ui);
    font-size:     0.72rem;
    font-weight:   500;
    background:    var(--bob-clr-bg);
    border:        1px solid var(--bob-clr-border);
    color:         var(--bob-clr-text-muted);
    white-space:   nowrap;
}
.chip--brand {
    background:  var(--bob-clr-accent-soft);
    border-color: var(--bob-clr-primary);
    color:       var(--bob-clr-primary);
}

/* ── Additional button variants ─────────────────────────── */
.btn-action--danger {
    background: var(--bob-clr-error-bg);
    color:      var(--bob-clr-error);
    border:     1.5px solid var(--bob-clr-error-border);
}
.btn-action--danger:hover { background: var(--bob-clr-error); color: var(--bob-btn-primary-clr); }

.btn-action--sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }

.btn-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   var(--bob-r-sm);
    background:      var(--bob-clr-bg);
    border:          1.5px solid var(--bob-clr-border);
    color:           var(--bob-clr-text-muted);
    font-size:       0.78rem;
    transition:      background var(--bob-ease), color var(--bob-ease), border-color var(--bob-ease);
    text-decoration: none;
    flex-shrink:     0;
    cursor:          pointer;
}
.btn-icon:hover { background: var(--bob-clr-accent-soft); color: var(--bob-clr-primary); border-color: var(--bob-clr-primary); }
.btn-icon--danger:hover { background: var(--bob-clr-error-bg); color: var(--bob-clr-error); border-color: var(--bob-clr-error-border); }

/* ══════════════════════════════════════════════════════════
   MEMBERSHIP TYPES PAGE
   ══════════════════════════════════════════════════════════ */

.memtype-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
    margin-bottom:         1.25rem;
}

.memtype-card {
    background:     var(--bob-clr-surface);
    border:         1px solid var(--bob-clr-border);
    border-radius:  var(--bob-r-md);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     box-shadow var(--bob-ease);
}
.memtype-card:hover { box-shadow: var(--bob-shadow-md); }

/* gradient/color set via inline style — data driven from DB */
.memtype-card__header {
    padding:         1.5rem 1.25rem 1.25rem;
    text-align:      center;
    min-height:      110px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.4rem;
}

.memtype-card__icon {
    font-size:     2.4rem;
    line-height:   1;
    margin-bottom: 0.25rem;
}

.memtype-card__preview-label {
    font-family: var(--bob-font-display);
    font-size:   1rem;
    font-weight: 700;
    color:       var(--bob-btn-primary-clr);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.memtype-card__preview-sub {
    font-family: var(--bob-font-body);
    font-size:   0.75rem;
    color:       var(--bob-btn-primary-clr);
    opacity:     0.82;
    line-height: 1.3;
}

.memtype-card__body {
    padding:        1.25rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.memtype-card__body .form-group { margin-bottom: 1rem; }

.memtype-icon-preview { font-size: 1rem; margin-left: 0.35rem; }

.memtype-checks { display: flex; gap: 1.25rem; margin-bottom: 1rem; flex-wrap: wrap; }

.memtype-bottom {
    display:     flex;
    gap:         0.75rem;
    align-items: flex-end;
    margin-top:  auto;
    padding-top: 0.75rem;
    border-top:  1px solid var(--bob-clr-border);
}

.memtype-key-badge {
    display:       block;
    padding:       0.38rem 0.65rem;
    background:    var(--bob-clr-bg);
    border:        1.5px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    font-family:   monospace;
    font-size:     0.78rem;
    color:         var(--bob-clr-text-muted);
    width:         100%;
    user-select:   all;
}

/* ══════════════════════════════════════════════════════════
   MEMBERSHIP PRICING PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Price input ($ prefix + number) ────────────────────── */
.price-input-wrap {
    display:       flex;
    align-items:   center;
    border:        1.5px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    overflow:      hidden;
    background:    var(--bob-clr-surface);
    transition:    border-color var(--bob-ease), box-shadow var(--bob-ease);
}
.price-input-wrap:focus-within {
    border-color: var(--bob-clr-primary);
    box-shadow:   0 0 0 3px var(--bob-clr-accent-soft);
}
.price-sym {
    padding:      0 0.7rem;
    font-family:  var(--bob-font-display);
    font-size:    1.05rem;
    font-weight:  700;
    color:        var(--bob-clr-text-muted);
    border-right: 1px solid var(--bob-clr-border);
    background:   var(--bob-clr-bg);
    align-self:   stretch;
    display:      flex;
    align-items:  center;
}
.price-input {
    flex:          1;
    border:        none !important;
    box-shadow:    none !important;
    border-radius: 0 !important;
    font-family:   var(--bob-font-display);
    font-size:     1.05rem;
    font-weight:   600;
    color:         var(--bob-clr-text);
    background:    transparent;
    padding:       0.65rem 0.75rem;
}

/* ── Benefits list ──────────────────────────────────────── */
.benefit-list {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    margin-bottom:  0.5rem;
    min-height:     1.5rem;
}
.benefit-item {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    background:    var(--bob-clr-bg);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    padding:       0.35rem 0.45rem 0.35rem 0.75rem;
    font-size:     0.83rem;
}
.benefit-item__text {
    flex:        1;
    min-width:   0;
    font-family: var(--bob-font-body);
    color:       var(--bob-clr-text);
    line-height: 1.35;
}
.benefit-item__del {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    border-radius:   var(--bob-r-sm);
    background:      none;
    border:          none;
    color:           var(--bob-clr-text-muted);
    font-size:       0.68rem;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background var(--bob-ease), color var(--bob-ease);
}
.benefit-item__del:hover { background: var(--bob-clr-error-bg); color: var(--bob-clr-error); }
.benefit-add {
    display:     flex;
    gap:         0.4rem;
    align-items: center;
    margin-top:  0.4rem;
}
.benefit-add__input {
    flex:      1;
    font-size: 0.84rem;
    padding:   0.45rem 0.75rem;
}

/* ── Pricing summary row (below grid) ───────────────────── */
.pricing-summary {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.25rem;
    margin-top:            0.75rem;
}
.pricing-summary__cell {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    padding:       0.75rem 1rem;
    text-align:    center;
    font-family:   var(--bob-font-display);
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--bob-clr-text);
}
.pricing-summary__label {
    font-family: var(--bob-font-ui);
    font-size:   0.72rem;
    color:       var(--bob-clr-text-muted);
    font-weight: 500;
    margin-top:  0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════════════
   MEMBERSHIP YEARS PAGE
   ══════════════════════════════════════════════════════════ */

.memyear-layout {
    display:               grid;
    grid-template-columns: 1.4fr 1fr;
    gap:                   1.5rem;
    align-items:           start;
}

.memyear-panel {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}

.memyear-panel__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.5rem;
    border-bottom:   1px solid var(--bob-clr-border);
}

.memyear-panel__title {
    font-family: var(--bob-font-ui);
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}

.memyear-card {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       0.9rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
    transition:    background var(--bob-ease);
}
.memyear-card:last-child   { border-bottom: none; }
.memyear-card:hover        { background: var(--bob-clr-bg); }

.memyear-card__badge {
    width:           52px;
    height:          52px;
    border-radius:   var(--bob-r-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--bob-font-display);
    font-size:       0.95rem;
    font-weight:     700;
    color:           var(--bob-btn-primary-clr);
    flex-shrink:     0;
    text-shadow:     0 1px 2px rgba(0,0,0,0.2);
    text-align:      center;
    line-height:     1.15;
}
.memyear-card__badge--active { background: var(--bob-clr-success); }
.memyear-card__badge--future { background: var(--bob-clr-primary); }
.memyear-card__badge--closed { background: var(--bob-clr-text-muted); }

.memyear-card__info { flex: 1; min-width: 0; }

.memyear-card__label {
    font-family:   var(--bob-font-ui);
    font-size:     0.935rem;
    font-weight:   600;
    color:         var(--bob-clr-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.memyear-card__dates {
    font-family: var(--bob-font-body);
    font-size:   0.75rem;
    color:       var(--bob-clr-text-muted);
    margin-top:  0.12rem;
}

.memyear-card__chips {
    display:    flex;
    gap:        0.35rem;
    margin-top: 0.35rem;
    flex-wrap:  wrap;
}

.memyear-card__actions {
    display:         flex;
    align-items:     center;
    gap:             0.35rem;
    flex-shrink:     0;
    flex-wrap:       wrap;
    justify-content: flex-end;
}

.memyear-form-body { padding: 1.5rem; }

.status-warning {
    display:    flex;
    gap:        0.4rem;
    font-family: var(--bob-font-body);
    font-size:  0.77rem;
    color:      var(--bob-clr-error);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   PROCESSING FEE PAGE
   ══════════════════════════════════════════════════════════ */
.pfee-panel {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}

.pfee-panel__hdr {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    padding:     0.9rem 1.25rem;
    background:  var(--bob-gradient-brand);
    color:       var(--bob-btn-primary-clr, #fff);
    font-family: var(--bob-font-ui);
    font-size:   1.05rem;
    font-weight: 600;
}

.pfee-panel__hdr-count {
    font-size:   0.8rem;
    font-weight: 400;
    opacity:     0.75;
}

.pfee-panel__body {
    padding: 1.5rem 1.25rem;
}

.pfee-panel__body--table {
    padding: 0;
}

.pfee-row {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1rem;
    margin-bottom:         0.5rem;
}

.pfee-row__cell { margin-bottom: 0; }

.pfee-row__cell--check {
    display:     flex;
    align-items: flex-end;
}

@media (max-width: 900px) {
    .pfee-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .pfee-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MEMBERS LIST PAGE
   ══════════════════════════════════════════════════════════ */

/* Dark gradient stat card variant */
.stat-card--dark {
    position:        relative;
    overflow:        hidden;
    border:          none;
    justify-content: space-between;
    align-items:     flex-start;
}
.stat-card--dark .stat-card__value { color: var(--bob-btn-primary-clr, #fff); font-size: 2.4rem; }
.stat-card--dark .stat-card__label { color: rgba(255,255,255,.72); }
.stat-card__bg-icon {
    font-size: 4rem;
    opacity:   0.18;
    color:     var(--bob-btn-primary-clr, #fff);
    align-self: center;
    flex-shrink: 0;
}

.stat-card--dk-a { background: var(--bob-gradient-brand); }
.stat-card--dk-b { background: linear-gradient(135deg, var(--bob-clr-secondary), var(--bob-clr-accent)); }
.stat-card--dk-c { background: linear-gradient(135deg, var(--bob-clr-primary) 0%, var(--bob-clr-accent) 100%); filter: brightness(0.88); }
.stat-card--dk-d { background: linear-gradient(135deg, var(--bob-clr-accent), var(--bob-clr-highlight)); }

/* Filter bar */
.members-filter-bar {
    display:       grid;
    grid-template-columns: 1fr 180px 160px 160px auto;
    gap:           1rem;
    align-items:   end;
    padding:       1.1rem 1.25rem;
}

/* Members table helpers */
.members-name-link {
    font-family: var(--bob-font-ui);
    font-weight: 600;
    color:       var(--bob-clr-text);
    transition:  color var(--bob-ease);
}
.members-name-link:hover { color: var(--bob-clr-secondary); }

.members-email-link {
    font-size:  0.83rem;
    color:      var(--bob-clr-secondary);
    transition: color var(--bob-ease);
}
.members-email-link:hover { color: var(--bob-clr-primary); }

.members-phone {
    font-size: 0.76rem;
    color:     var(--bob-clr-text-muted);
    margin-top: 0.15rem;
}

.members-type-badge {
    display:       inline-block;
    padding:       0.22rem 0.65rem;
    border-radius: 99px;
    font-family:   var(--bob-font-ui);
    font-size:     0.72rem;
    font-weight:   600;
    white-space:   nowrap;
}

.members-family {
    font-size: 0.8rem;
    color:     var(--bob-clr-text);
}
.members-family--muted { color: var(--bob-clr-text-muted); margin-top: 0.1rem; }

@media (max-width: 1000px) {
    .members-filter-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .members-filter-bar { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MEMBER VIEW PAGE
   ══════════════════════════════════════════════════════════ */

.mem-view-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   1.25rem;
    align-items:           start;
}

.mem-view-card {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}

/* Profile header */
.mem-view-profile {
    display:     flex;
    align-items: flex-start;
    gap:         1rem;
    padding:     1.25rem 1.5rem;
    flex-wrap:   wrap;
}

.mem-view-avatar {
    width:           3rem;
    height:          3rem;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--bob-font-ui);
    font-size:       1.1rem;
    font-weight:     700;
    color:           #fff;
    flex-shrink:     0;
}

.mem-view-profile__info { flex: 1; min-width: 0; }

.mem-view-name {
    font-family:  var(--bob-font-ui);
    font-size:    1.2rem;
    font-weight:  700;
    color:        var(--bob-clr-text);
    margin:       0 0 0.4rem 0;
}

.mem-view-badges {
    display:  flex;
    gap:      0.35rem;
    flex-wrap:wrap;
}

.mem-view-since {
    text-align: right;
    flex-shrink: 0;
}
.mem-view-since__label { font-size: .72rem; color: var(--bob-clr-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.mem-view-since__date  { font-family: var(--bob-font-ui); font-size: .9rem; font-weight: 600; color: var(--bob-clr-primary); }
.mem-view-since__year  { font-size: .76rem; color: var(--bob-clr-text-muted); }

.mem-view-divider {
    border: none;
    border-top: 1px solid var(--bob-clr-border);
    margin: 0;
}

/* Sections within the card */
.mem-view-section { padding: 1rem 1.5rem; }

.mem-view-section__title {
    display:     flex;
    align-items: center;
    gap:         0.45rem;
    font-family: var(--bob-font-ui);
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 0.75rem;
}

.mem-view-sidebar-hdr {
    padding:       .85rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--bob-clr-border);
    color:         var(--bob-clr-primary);
}

/* Field grids */
.mem-view-fields { display: grid; gap: 1rem; }
.mem-view-fields--1 { grid-template-columns: 1fr; }
.mem-view-fields--2 { grid-template-columns: 1fr 1fr; }
.mem-view-fields--3 { grid-template-columns: 1fr 1fr 1fr; }

.mem-view-field__label {
    font-size:   0.72rem;
    color:       var(--bob-clr-text-muted);
    margin-bottom: 0.2rem;
}
.mem-view-field__value {
    font-family: var(--bob-font-ui);
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}

.mem-view-notes {
    background:    var(--bob-clr-bg);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    padding:       0.65rem 0.875rem;
    font-size:     0.83rem;
    color:         var(--bob-clr-text-muted);
    line-height:   1.55;
}

/* Sidebar membership info rows */
.mem-info-row {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       0.7rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.mem-info-row__icon {
    color:      var(--bob-clr-primary);
    opacity:    .65;
    margin-top: .15rem;
    width:      14px;
    flex-shrink:0;
}
.mem-info-row__label {
    font-size:   .68rem;
    color:       var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .15rem;
}
.mem-info-row__value {
    font-family: var(--bob-font-ui);
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}

/* Days until expiry box */
.mem-days-box {
    padding:    1rem 1.25rem;
    text-align: center;
    border-top: 1px solid var(--bob-clr-border);
}
.mem-days-box__label {
    font-size:      .7rem;
    color:          var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom:  .35rem;
}
.mem-days-box__num {
    font-family:  var(--bob-font-display);
    font-size:    2.4rem;
    font-weight:  700;
    line-height:  1;
    margin-bottom:.25rem;
}
.mem-days-box__num--ok      { color: var(--bob-clr-success); }
.mem-days-box__num--caution { color: var(--bob-clr-highlight); }
.mem-days-box__num--warn    { color: var(--bob-clr-error); }
.mem-days-box__num--expired { color: var(--bob-clr-text-muted); }
.mem-days-box__sub {
    font-size: .73rem;
    color:     var(--bob-clr-text-muted);
}

/* Quick actions */
.mem-quick-action,
.mem-quick-action--btn {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.8rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
    font-family:   var(--bob-font-ui);
    font-size:     0.85rem;
    font-weight:   500;
    color:         var(--bob-clr-text);
    transition:    background var(--bob-ease);
    width:         100%;
    text-align:    left;
    background:    transparent;
    border-left:   none;
    border-right:  none;
    border-top:    none;
    cursor:        pointer;
}
.mem-quick-action:hover,
.mem-quick-action--btn:hover { background: var(--bob-clr-accent-soft); }

.mem-quick-action__icon {
    width:           1.75rem;
    height:          1.75rem;
    border-radius:   var(--bob-r-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.85rem;
    flex-shrink:     0;
}
.mem-quick-action__icon--primary { background: var(--bob-clr-accent-soft); color: var(--bob-clr-primary); }
.mem-quick-action__icon--info    { background: #e0f2fe; color: #0369a1; }
.mem-quick-action__icon--warn    { background: #fef9c3; color: #a16207; }
.mem-quick-action__icon--muted   { background: var(--bob-clr-bg); color: var(--bob-clr-text-muted); }

@media (max-width: 900px) {
    .mem-view-layout    { grid-template-columns: 1fr; }
    .mem-view-fields--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .mem-view-fields--2,
    .mem-view-fields--3 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MEMBER REGISTRATION PAGE  (slightly compact)
   ══════════════════════════════════════════════════════════ */

/* Year bar */
.mem-year-bar {
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
    flex-wrap:     wrap;
    padding:       0.875rem 1.25rem;
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    margin-bottom: 1.25rem;
}

.mem-year-bar__left {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-wrap:   wrap;
    flex:        1;
}

.mem-year-bar__mid {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    flex-wrap:   wrap;
}

.mem-year-bar__dates {
    font-family: var(--bob-font-body);
    font-size:   0.82rem;
    color:       var(--bob-clr-text-muted);
}

.mem-year-bar__right { margin-left: auto; }

.mem-year-bar__reset {
    font-family: var(--bob-font-body);
    font-size:   0.8rem;
    color:       var(--bob-clr-secondary);
    white-space: nowrap;
}
.mem-year-bar__reset:hover { color: var(--bob-clr-primary); }

/* Two-column layout */
.mem-reg-layout {
    display:               grid;
    grid-template-columns: 1fr 370px;
    gap:                   1.25rem;
    align-items:           start;
}

/* Section cards */
.mem-reg-section {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
    margin-bottom: 1.25rem;
}
.mem-reg-section:last-child { margin-bottom: 0; }

.mem-reg-section__hdr {
    display:       flex;
    align-items:   center;
    gap:           0.45rem;
    padding:       0.55rem 1rem;
    background:    var(--bob-clr-accent-soft);
    border-bottom: 1px solid var(--bob-clr-border);
    font-family:   var(--bob-font-ui);
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--bob-clr-primary);
}

.mem-reg-section__opt {
    font-size:   0.72rem;
    font-weight: 400;
    color:       var(--bob-clr-text-muted);
    margin-left: 0.25rem;
}

.mem-reg-section__body { padding: 0.9rem 1rem; }

/* Required star */
.req { color: var(--bob-clr-error); margin-left: 0.1rem; }

/* Multi-column form rows */
.form-row-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
    margin-bottom:         0.75rem;
}

.form-row-3 {
    display:               grid;
    grid-template-columns: 1fr 80px 90px;
    gap:                   1rem;
    margin-bottom:         0.75rem;
}

/* Membership type tiles */
.mem-type-tiles {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-bottom:  0.75rem;
}

.mem-type-tile {
    display:       flex;
    align-items:   center;
    gap:           0.7rem;
    padding:       0.5rem 0.75rem;
    border:        1.5px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    cursor:        pointer;
    transition:    border-color var(--bob-ease), background var(--bob-ease);
    background:    var(--bob-clr-surface);
    user-select:   none;
}
.mem-type-tile:hover    { border-color: var(--bob-clr-accent); background: var(--bob-clr-accent-soft); }
.mem-type-tile.is-selected {
    border-color: var(--bob-clr-primary);
    background:   var(--bob-clr-accent-soft);
}

.mem-type-tile__dot {
    width:          1.7rem;
    height:         1.7rem;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      0.85rem;
    flex-shrink:    0;
    opacity:        0.85;
}

.mem-type-tile__info {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    flex:           1;
}

.mem-type-tile__label {
    font-family: var(--bob-font-ui);
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}

.mem-type-tile__price {
    font-family: var(--bob-font-body);
    font-size:   0.76rem;
    color:       var(--bob-clr-secondary);
    font-weight: 500;
}

.mem-type-note {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.75rem;
    color:       var(--bob-clr-text-muted);
    margin:      0;
}

/* Payment method tiles */
.pay-tiles {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.5rem;
    margin-bottom:         1rem;
}

.pay-tile {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.25rem;
    padding:         0.55rem 0.4rem;
    border:          1.5px solid var(--bob-clr-border);
    border-radius:   var(--bob-r-sm);
    cursor:          pointer;
    transition:      all var(--bob-ease);
    background:      var(--bob-clr-surface);
    font-family:     var(--bob-font-ui);
    font-size:       0.77rem;
    color:           var(--bob-clr-text-muted);
    user-select:     none;
}
.pay-tile i          { font-size: 1.15rem; }
.pay-tile:hover      { border-color: var(--bob-clr-accent); color: var(--bob-clr-primary); }
.pay-tile.is-selected {
    border-color: var(--bob-clr-primary);
    background:   var(--bob-clr-accent-soft);
    color:        var(--bob-clr-primary);
    font-weight:  600;
}

@media (max-width: 1100px) {
    .mem-reg-layout { grid-template-columns: 1fr 320px; }
}

@media (max-width: 860px) {
    .mem-reg-layout { grid-template-columns: 1fr; }
    .form-row-3     { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 560px) {
    .form-row-2 { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .admin-sidebar {
        transform: translateX(calc(-1 * var(--bob-sidebar-w)));
    }
    .admin-sidebar.is-open { transform: translateX(0); }

    .admin-main { margin-left: 0; }

    .sidebar-toggle { display: flex; }

    /* Overlay behind open sidebar on mobile */
    .sidebar-overlay {
        display:    none;
        position:   fixed;
        inset:      0;
        background: var(--bob-glass-bg);
        z-index:    299;
    }
    .sidebar-overlay.is-open { display: block; }

    .admin-content { padding: 1.25rem 1rem; }
}

@media (max-width: 600px) {
    .stat-cards { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
    .stat-card__value { font-size: 1.6rem; }
    .admin-topbar { padding: 0 1rem; }
    .admin-topbar__user { display: none; }
}

@media (max-width: 400px) {
    .stat-cards { grid-template-columns: 1fr; }

    /* Auth page */
    .login-card { flex-direction: column; max-width: 480px; border-radius: var(--bob-r-md); }
    .login-card__left { border-right: 1px solid var(--bob-glass-border); border-bottom: none; padding: 2rem 1.5rem 1.5rem; }
    .login-card__right { padding: 1.75rem 1.5rem 2rem; }
    .login-features { margin-top: 1rem; gap: 0.75rem; }
}

@media (max-width: 720px) and (min-width: 401px) {
    .login-card { flex-direction: column; max-width: 480px; border-radius: var(--bob-r-md); }
    .login-card__left { border-right: 1px solid var(--bob-glass-border); border-bottom: none; padding: 2rem 1.75rem 1.75rem; }
    .login-card__right { padding: 2rem 1.75rem 2.5rem; }
}

@media (max-width: 1100px) {
    .memtype-grid    { grid-template-columns: repeat(2, 1fr); }
    .pricing-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .memyear-layout  { grid-template-columns: 1fr; }
    .memtype-grid    { grid-template-columns: repeat(2, 1fr); }
    .pricing-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .memtype-grid              { grid-template-columns: 1fr; }
    .pricing-summary           { grid-template-columns: repeat(2, 1fr); }
    .memyear-card              { flex-wrap: wrap; }
    .memyear-card__actions     { width: 100%; }
    .page-toolbar              { flex-direction: column; align-items: flex-start; }
    .page-toolbar__actions     { width: 100%; }
}

/* ── Year Tabs (pricing page year selector) ──────────────── */
.year-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--bob-r-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bob-clr-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.year-tab:hover {
    background: var(--bob-clr-border);
    color: var(--bob-clr-text);
    text-decoration: none;
}
.year-tab--active {
    background: var(--bob-clr-primary);
    color: #fff;
    border-color: var(--bob-clr-primary);
}
.year-tab--active:hover {
    opacity: 0.9;
    color: #fff;
}
.year-tab__chip {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.3);
    padding: 0.1em 0.35em;
    border-radius: 999px;
    line-height: 1.5;
}
.year-tab__chip--dim {
    background: rgba(0,0,0,0.15);
    color: inherit;
}

/* ══════════════════════════════════════════════════════════
   BADGE VARIANTS  (shared)
   ══════════════════════════════════════════════════════════ */
.badge--primary {
    background: var(--bob-clr-accent-soft);
    color:      var(--bob-clr-primary);
    border:     1px solid color-mix(in srgb, var(--bob-clr-primary) 25%, transparent);
}
.badge--amber {
    background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 12%, transparent);
    color:      var(--bob-clr-caution, #92400e);
    border:     1px solid color-mix(in srgb, var(--bob-clr-caution, #d97706) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════
   EVENT CATEGORIES  (admin/event-categories.php)
   ══════════════════════════════════════════════════════════ */
.evcat-layout {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   1.5rem;
    align-items:           start;
}
@media (max-width: 960px) {
    .evcat-layout { grid-template-columns: 1fr; }
}

.evcat-layout__aside {
    position: sticky;
    top:      1rem;
    display:  flex;
    flex-direction: column;
    gap:      1rem;
}

/* Count chips in the table */
.evcat-count-chip {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       1.8rem;
    height:          1.8rem;
    border-radius:   999px;
    font-family:     var(--bob-font-ui);
    font-size:       .78rem;
    font-weight:     700;
    line-height:     1;
    padding:         0 .45rem;
}
.evcat-count-chip--event {
    background: var(--bob-clr-accent-soft);
    color:      var(--bob-clr-primary);
}
.evcat-count-chip--pkg {
    background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 12%, transparent);
    color:      var(--bob-clr-caution, #92400e);
}
.evcat-count-chip--event[data-zero="1"],
.evcat-count-chip--pkg[data-zero="1"] {
    background: var(--bob-clr-surface);
    color:      var(--bob-clr-text-muted);
}

/* Checkbox blocks in the form */
.evcat-check-block {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    padding:       .75rem 1rem;
    margin-bottom: .75rem;
}
.evcat-check-block__label { font-size: .875rem; }
.evcat-check-block__hint {
    margin:     .35rem 0 0 1.6rem;
    font-size:  .76rem;
    color:      var(--bob-clr-text-muted);
    line-height: 1.45;
}

/* How Categories Work info box */
.evcat-info-box {
    background:    color-mix(in srgb, var(--bob-clr-primary) 6%, var(--bob-clr-surface));
    border:        1px solid color-mix(in srgb, var(--bob-clr-primary) 20%, transparent);
    border-radius: var(--bob-r-md);
    padding:       1rem 1.25rem;
}
.evcat-info-box__title {
    font-family:   var(--bob-font-ui);
    font-size:     .85rem;
    font-weight:   700;
    color:         var(--bob-clr-primary);
    margin-bottom: .65rem;
    display:       flex;
    align-items:   center;
    gap:           .4rem;
}
.evcat-info-box__list {
    list-style:    decimal;
    padding-left:  1.25rem;
    font-size:     .82rem;
    color:         var(--bob-clr-text);
    line-height:   1.7;
}
.evcat-info-box__list li { margin-bottom: .2rem; }
.evcat-info-box__note {
    margin-top:  .75rem;
    font-size:   .78rem;
    color:       var(--bob-clr-text-muted);
    line-height: 1.5;
    border-top:  1px solid color-mix(in srgb, var(--bob-clr-primary) 15%, transparent);
    padding-top: .6rem;
}

/* ══════════════════════════════════════════════════════════
   GENERIC REUSABLE LAYOUT  (admin-2col split)
   ══════════════════════════════════════════════════════════ */
.admin-2col {
    display:               grid;
    grid-template-columns: 1fr 360px;
    gap:                   1.5rem;
    align-items:           start;
}
.admin-2col--comm {
    grid-template-columns: 1fr 340px;
}
@media (max-width: 960px) {
    .admin-2col,
    .admin-2col--comm { grid-template-columns: 1fr; }
}
.admin-2col__aside {
    position:       sticky;
    top:            1rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* ══════════════════════════════════════════════════════════
   EXTRA BADGE VARIANTS  (shared across pages)
   ══════════════════════════════════════════════════════════ */
.badge--secondary {
    background: color-mix(in srgb, var(--bob-clr-accent) 15%, transparent);
    color:      var(--bob-clr-accent);
    border:     1px solid color-mix(in srgb, var(--bob-clr-accent) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════
   MASTER PACKAGES  (admin/master-packages.php)
   ══════════════════════════════════════════════════════════ */
.pkg-filter-bar {
    display:         flex;
    flex-wrap:       wrap;
    gap:             .625rem;
    padding:         .875rem 1.25rem;
    border-bottom:   1px solid var(--bob-clr-border);
    background:      var(--bob-clr-surface);
}
.pkg-filter-bar .form-input,
.pkg-filter-bar .form-select {
    font-size: .83rem;
    padding:   .4rem .7rem;
    height:    auto;
}
.pkg-filter-bar__search {
    position:  relative;
    flex:      1 1 180px;
    min-width: 160px;
}
.pkg-filter-bar__search .form-input { padding-left: 2rem; width: 100%; }
.pkg-filter-bar__search-icon {
    position:       absolute;
    left:           .6rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      .78rem;
    color:          var(--bob-clr-text-muted);
    pointer-events: none;
}
.pkg-filter-bar__select {
    position:  relative;
    flex:      1 1 160px;
    min-width: 140px;
}
.pkg-filter-bar__select .form-select { padding-left: 2rem; width: 100%; }
.pkg-filter-bar__sel-icon {
    position:       absolute;
    left:           .65rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      .75rem;
    color:          var(--bob-clr-text-muted);
    pointer-events: none;
    z-index:        1;
}
.pkg-cat-chip {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    font-size:       .78rem;
    color:           var(--bob-clr-primary);
    background:      var(--bob-clr-accent-soft);
    border-radius:   999px;
    padding:         .18rem .55rem;
    font-family:     var(--bob-font-ui);
    font-weight:     500;
}

/* ══════════════════════════════════════════════════════════
   HOME BANNERS  (admin/home-banners.php)
   ══════════════════════════════════════════════════════════ */
.banner-row {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     .875rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.banner-row:last-child { border-bottom: none; }

.banner-row__thumb {
    width:         88px;
    height:        54px;
    border-radius: var(--bob-r-sm);
    flex-shrink:   0;
    overflow:      hidden;
    background-size:     cover;
    background-position: center;
}
.banner-row__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.banner-row__info {
    flex: 1;
    min-width: 0;
}
.banner-row__title {
    display:       block;
    font-family:   var(--bob-font-ui);
    font-size:     .92rem;
    font-weight:   600;
    color:         var(--bob-clr-text);
    margin-bottom: .25rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.banner-row__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         .4rem;
}
.banner-row__order-chip {
    font-size:     .74rem;
    font-family:   var(--bob-font-ui);
    color:         var(--bob-clr-text-muted);
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: 999px;
    padding:       .1em .5em;
}
.banner-row__actions {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    flex-shrink: 0;
}
.btn-action--ghost {
    background: transparent;
    border:     1px solid transparent;
    color:      var(--bob-clr-text-muted);
}
.btn-action--ghost:hover {
    background:   var(--bob-clr-surface);
    border-color: var(--bob-clr-border);
    color:        var(--bob-clr-text);
}
.banner-meta-row {
    display:               grid;
    grid-template-columns: 80px 1fr 1fr 140px 140px;
    gap:                   .75rem;
}
@media (max-width: 900px) {
    .banner-meta-row { grid-template-columns: 1fr 1fr; }
}
.banner-swatches-row {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   1.25rem;
    margin-bottom:         .875rem;
}
@media (max-width: 700px) {
    .banner-swatches-row { grid-template-columns: 1fr; }
}
.banner-swatches-label {
    font-family:   var(--bob-font-ui);
    font-size:     .78rem;
    font-weight:   600;
    color:         var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
.color-swatches {
    display:   flex;
    flex-wrap: wrap;
    gap:       .35rem;
}
.color-swatch {
    width:         1.65rem;
    height:        1.65rem;
    border-radius: 50%;
    cursor:        pointer;
    outline:       3px solid transparent;
    outline-offset: 2px;
    transition:    outline-color .12s, transform .1s;
    flex-shrink:   0;
}
.color-swatch:hover   { transform: scale(1.12); }
.color-swatch.is-selected {
    outline-color: var(--bob-clr-primary);
    transform:     scale(1.08);
}
.banner-preview {
    width:                 100%;
    min-height:            130px;
    border-radius:         var(--bob-r-md);
    display:               flex;
    flex-direction:        column;
    align-items:           center;
    justify-content:       center;
    padding:               2rem 2.5rem;
    text-align:            center;
    background-size:       cover;
    background-position:   center;
    background-repeat:     no-repeat;
    overflow:              hidden;
    position:              relative;
    transition:            background-color .2s;
}
.banner-preview__title {
    font-family:   var(--bob-font-display);
    font-size:     1.2rem;
    font-weight:   700;
    margin-bottom: .35rem;
    line-height:   1.3;
    color:         #fff;
}
.banner-preview__subtitle {
    font-size:     .82rem;
    margin-bottom: .75rem;
    opacity:       .85;
    color:         rgba(255,255,255,.8);
}
.banner-preview__btn {
    font-family:   var(--bob-font-ui);
    font-size:     .8rem;
    font-weight:   600;
    padding:       .45rem 1.1rem;
    border-radius: 999px;
    border:        none;
    cursor:        default;
    transition:    background-color .2s, color .2s;
}

/* ══════════════════════════════════════════════════════════
   COMMITTEE  (admin/committee.php)
   ══════════════════════════════════════════════════════════ */
.comm-year-bar {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-wrap:   wrap;
}
.comm-year-bar__label {
    font-family:   var(--bob-font-ui);
    font-size:     .82rem;
    font-weight:   600;
    color:         var(--bob-clr-text-muted);
    white-space:   nowrap;
    display:       flex;
    align-items:   center;
    gap:           .35rem;
}
.comm-year-tabs {
    display:   flex;
    flex-wrap: wrap;
    gap:       .4rem;
}
.comm-year-tab {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    font-family:   var(--bob-font-ui);
    font-size:     .8rem;
    font-weight:   500;
    padding:       .35rem .9rem;
    border-radius: 999px;
    border:        1.5px solid var(--bob-clr-border);
    color:         var(--bob-clr-text-muted);
    background:    var(--bob-clr-surface);
    transition:    all var(--bob-ease);
}
.comm-year-tab:hover { border-color: var(--bob-clr-primary); color: var(--bob-clr-primary); }
.comm-year-tab.is-active {
    background:   var(--bob-clr-primary);
    border-color: var(--bob-clr-primary);
    color:        #fff;
    font-weight:  600;
}
.comm-year-tab__chip {
    font-size:   .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background:  rgba(255,255,255,.3);
    padding:     .08em .4em;
    border-radius: 999px;
}
.comm-year-tab:not(.is-active) .comm-year-tab__chip {
    background: color-mix(in srgb, var(--bob-clr-primary) 15%, transparent);
    color:      var(--bob-clr-primary);
}

.comm-groups { display: flex; flex-direction: column; gap: 1.25rem; }

.comm-group {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}
.comm-group__hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    padding:         .875rem 1.25rem;
    border-bottom:   1px solid var(--bob-clr-border);
    background:      var(--bob-clr-surface);
}
.comm-group__hdr-left {
    display:     flex;
    align-items: center;
    gap:         .75rem;
}
.comm-group__icon {
    width:           2.1rem;
    height:          2.1rem;
    border-radius:   var(--bob-r-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       .9rem;
    flex-shrink:     0;
}
.comm-group__icon--executive {
    background: var(--bob-clr-primary);
    color:      #fff;
}
.comm-group__icon--trustee {
    background: color-mix(in srgb, var(--bob-clr-caution, #7c3aed) 85%, #000);
    color:      #fff;
}
.comm-group__icon--advisory {
    background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 85%, transparent);
    color:      #fff;
}
.comm-group__name {
    font-family: var(--bob-font-ui);
    font-size:   .9rem;
    color:       var(--bob-clr-text);
    display:     flex;
    align-items: center;
    gap:         .4rem;
}
.comm-group__opt {
    font-size:     .7rem;
    font-weight:   500;
    color:         var(--bob-clr-text-muted);
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: 999px;
    padding:       .1em .45em;
}
.comm-group__meta {
    font-size: .76rem;
    color:     var(--bob-clr-text-muted);
    display:   block;
    margin-top: .1rem;
}
.comm-group__empty {
    padding:         2rem 1.25rem;
    text-align:      center;
    color:           var(--bob-clr-text-muted);
    font-size:       .85rem;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .5rem;
}
.comm-group__empty i { font-size: 1.75rem; opacity: .25; }

.comm-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    padding:               1rem 1.25rem 1.25rem;
}
@media (max-width: 1100px) {
    .comm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .comm-grid { grid-template-columns: 1fr; }
}

.comm-card {
    background:    var(--bob-clr-bg);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       .875rem .875rem .75rem;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           .4rem;
    position:      relative;
    transition:    box-shadow var(--bob-ease);
}
.comm-card:hover { box-shadow: var(--bob-shadow-sm); }
.comm-card--hidden { opacity: .55; }

.comm-card__top {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .25rem;
}
.comm-card__pos {
    font-size:   .7rem;
    font-weight: 700;
    font-family: var(--bob-font-ui);
    color:       var(--bob-clr-text-muted);
}
.comm-card__arrows { display: flex; flex-direction: column; gap: .05rem; }
.comm-card__arr-btn {
    width:           1.35rem;
    height:          1.15rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       .72rem;
    border-radius:   var(--bob-r-sm);
    color:           var(--bob-clr-text-muted);
    background:      var(--bob-clr-surface);
    border:          1px solid var(--bob-clr-border);
    cursor:          pointer;
    transition:      all .1s;
}
.comm-card__arr-btn:hover:not(:disabled) {
    background:   var(--bob-clr-accent-soft);
    border-color: var(--bob-clr-primary);
    color:        var(--bob-clr-primary);
}
.comm-card__arr-btn:disabled { opacity: .3; cursor: default; }

.comm-card__avatar-wrap { margin: .25rem 0 .35rem; }
.comm-card__avatar {
    width:         72px;
    height:        72px;
    border-radius: 50%;
    border:        2.5px solid var(--bob-clr-border);
}
.comm-card__avatar--photo { object-fit: cover; }
.comm-card__avatar--initials {
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--bob-font-ui);
    font-size:       1.1rem;
    font-weight:     700;
    color:           #fff;
}
.comm-card__avatar--executive { background: var(--bob-clr-primary); }
.comm-card__avatar--trustee   { background: color-mix(in srgb, var(--bob-clr-caution, #7c3aed) 85%, #000); }
.comm-card__avatar--advisory  { background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 85%, transparent); }

.comm-card__name {
    font-family: var(--bob-font-ui);
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
    text-align:  center;
    line-height: 1.3;
}
.comm-card__desig {
    font-size:   .78rem;
    color:       var(--bob-clr-text-muted);
    text-align:  center;
    line-height: 1.35;
    margin-bottom: .25rem;
}
.comm-card__actions {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    flex-wrap:   wrap;
    justify-content: center;
    padding-top: .35rem;
    border-top:  1px solid var(--bob-clr-border);
    width:       100%;
    margin-top:  auto;
}
.btn-action--xs {
    padding:   .22rem .55rem;
    font-size: .72rem;
    gap:       .25rem;
}
.comm-form-photo-preview {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      var(--bob-clr-surface);
    border:          1.5px solid var(--bob-clr-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
}

/* ══════════════════════════════════════════════════════════
   EVENT CREATE / EDIT  (admin/event-add.php)
   ══════════════════════════════════════════════════════════ */
.evt-create-layout {
    display:               grid;
    grid-template-columns: 1fr 310px;
    gap:                   1.25rem;
    align-items:           start;
}
@media (max-width: 920px) {
    .evt-create-layout { grid-template-columns: 1fr; }
}

.evt-create-main  { display: flex; flex-direction: column; gap: 1.25rem; }
.evt-create-aside { position: sticky; top: 1rem; }

.evt-panel { /* extra bottom gap already from flex parent */ }

.evt-create-btn {
    width:           100%;
    justify-content: center;
    padding:         .85rem 1.5rem;
    font-size:       .95rem;
    font-weight:     700;
    letter-spacing:  .01em;
}

/* Event Dates row */
.evt-dates-row {
    display:               grid;
    grid-template-columns: 200px 1fr 1fr;
    gap:                   1rem;
    align-items:           start;
}
@media (max-width: 640px) {
    .evt-dates-row { grid-template-columns: 1fr; }
}

/* Event Features row */
.evt-features-row {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   1rem;
    align-items:           start;
}
@media (max-width: 640px) {
    .evt-features-row { grid-template-columns: 1fr; }
}

/* ── Rich text editor ── */
.richtext-wrap {
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
    transition:    border-color var(--bob-ease);
}
.richtext-wrap:focus-within { border-color: var(--bob-clr-primary); }

.richtext-toolbar {
    display:         flex;
    align-items:     center;
    gap:             .1rem;
    padding:         .4rem .55rem;
    background:      var(--bob-clr-surface);
    border-bottom:   1px solid var(--bob-clr-border);
    flex-wrap:       wrap;
}
.richtext-toolbar__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           1.9rem;
    height:          1.9rem;
    border-radius:   var(--bob-r-sm);
    font-size:       .82rem;
    color:           var(--bob-clr-text);
    background:      transparent;
    border:          none;
    cursor:          pointer;
    transition:      background .12s, color .12s;
    flex-shrink:     0;
}
.richtext-toolbar__btn:hover {
    background: var(--bob-clr-accent-soft);
    color:      var(--bob-clr-primary);
}
.richtext-toolbar__sep {
    width:      1px;
    height:     1.2rem;
    background: var(--bob-clr-border);
    margin:     0 .2rem;
    flex-shrink: 0;
}

.richtext-editor {
    min-height: 180px;
    padding:    .75rem 1rem;
    outline:    none;
    font-size:  .875rem;
    line-height: 1.65;
    color:      var(--bob-clr-text);
    background: var(--bob-clr-card);
    cursor:     text;
}
.richtext-editor:empty::before {
    content: 'Write a description…';
    color:   var(--bob-clr-text-muted);
    pointer-events: none;
}
.richtext-editor ul,
.richtext-editor ol  { padding-left: 1.5rem; margin: .35rem 0; }
.richtext-editor li  { margin-bottom: .2rem; }
.richtext-editor a   { color: var(--bob-clr-primary); text-decoration: underline; }
.richtext-editor img { max-width: 100%; border-radius: var(--bob-r-sm); }
.richtext-editor p   { margin: .35rem 0; }
.richtext-editor h2,
.richtext-editor h3  { margin: .6rem 0 .25rem; font-family: var(--bob-font-ui); }
.richtext-editor blockquote {
    border-left: 3px solid var(--bob-clr-primary);
    padding:     .3rem .75rem;
    margin:      .35rem 0;
    color:       var(--bob-clr-text-muted);
}

/* Benefit text input inside benefit-item flex row */
.benefit-item__input {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    padding: 0.3rem 0.55rem;
}

/* ══════════════════════════════════════════════════════════
   MEMBERSHIP BENEFITS  (admin/membership-benefits.php)
   ══════════════════════════════════════════════════════════ */
.mem-ben-form-row {
    display:     grid;
    grid-template-columns: 1fr 160px auto;
    gap:         1rem;
    margin-bottom: 0.75rem;
    align-items: start;
}
@media (max-width: 640px) {
    .mem-ben-form-row {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   EVENT EDIT  (admin/event-edit.php)
   ══════════════════════════════════════════════════════════ */
.evtedit-days-note {
    margin-top:     .75rem;
    font-size:      .78rem;
    color:          var(--bob-clr-text-muted);
    line-height:    1.5;
    display:        flex;
    align-items:    flex-start;
    gap:            .4rem;
}
.evtedit-days-note i { margin-top: .1rem; color: var(--bob-clr-primary); }
.evtedit-days-note a { color: var(--bob-clr-primary); }

/* ══════════════════════════════════════════════════════════
   EVENT VIEW  (admin/event-view.php)
   ══════════════════════════════════════════════════════════ */

/* Two-column page layout */
.evview-layout {
    display:               grid;
    grid-template-columns: 380px 1fr;
    gap:                   1.5rem;
    align-items:           start;
}
@media (max-width: 1000px) {
    .evview-layout { grid-template-columns: 1fr; }
}

/* Sticky sidebar */
.evview-sidebar {
    position: sticky;
    top:      1rem;
    display:  flex;
    flex-direction: column;
    gap:      0;
    border-radius: var(--bob-r-md);
    overflow: hidden;
    border:   1px solid var(--bob-clr-border);
}
.evview-poster__img {
    width:      100%;
    max-height: 220px;
    object-fit: cover;
    display:    block;
}
.evview-card {
    background: var(--bob-clr-card);
    padding:    1.25rem;
}
.evview-title {
    font-family:   var(--bob-font-ui);
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--bob-clr-text);
    margin:        0 0 .75rem;
    line-height:   1.25;
}
.evview-chips {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .35rem;
    margin-bottom: .875rem;
}

/* Meta list */
.evview-meta {
    list-style:  none;
    padding:     0;
    margin:      0 0 .875rem;
    display:     flex;
    flex-direction: column;
    gap:         .45rem;
}
.evview-meta__item {
    display:     flex;
    align-items: flex-start;
    gap:         .5rem;
    font-size:   .85rem;
    color:       var(--bob-clr-text);
    line-height: 1.4;
}
.evview-meta__icon {
    color:       var(--bob-clr-primary);
    width:       1rem;
    flex-shrink: 0;
    margin-top:  .1rem;
    font-size:   .82rem;
}

/* Feature chips */
.evview-features {
    display:      flex;
    flex-wrap:    wrap;
    gap:          .4rem;
    margin-bottom: .875rem;
}
.evview-feat-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    font-family:   var(--bob-font-ui);
    font-size:     .78rem;
    font-weight:   600;
    padding:       .25rem .65rem;
    border-radius: 999px;
    border:        1.5px solid transparent;
}
.evview-feat-chip--food {
    background:   color-mix(in srgb, var(--bob-clr-success, #16a34a) 12%, transparent);
    border-color: color-mix(in srgb, var(--bob-clr-success, #16a34a) 30%, transparent);
    color:        var(--bob-clr-success, #15803d);
}
.evview-feat-chip--show {
    background:   color-mix(in srgb, var(--bob-clr-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--bob-clr-primary) 25%, transparent);
    color:        var(--bob-clr-primary);
}

/* Rendered description */
.evview-desc {
    border-top:  1px solid var(--bob-clr-border);
    padding-top: .875rem;
    font-size:   .84rem;
    line-height: 1.7;
    color:       var(--bob-clr-text);
}
.evview-desc p   { margin: .3rem 0; }
.evview-desc ul,
.evview-desc ol  { padding-left: 1.25rem; margin: .3rem 0; }
.evview-desc li  { margin-bottom: .15rem; }
.evview-desc strong,
.evview-desc b   { font-weight: 600; }

/* ─ Main area (right) ─ */
.evview-main { display: flex; flex-direction: column; gap: 1rem; }

/* Add Day bar */
.evday-add-bar {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       .75rem 1rem;
}
.evday-add-form {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .6rem;
}
.evday-add-bar__label {
    font-family: var(--bob-font-ui);
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--bob-clr-text-muted);
    white-space: nowrap;
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.evday-add-bar__date { width: 160px; }

/* ─ Day list ─ */
.evday-list { display: flex; flex-direction: column; gap: .75rem; }

/* ─ Day item (accordion) ─ */
.evday-item {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}

.evday-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    padding:         .875rem 1.25rem;
    cursor:          pointer;
    user-select:     none;
    transition:      background var(--bob-ease);
}
.evday-hdr:hover { background: var(--bob-clr-surface); }

.evday-hdr__left {
    display:     flex;
    align-items: center;
    gap:         .65rem;
    flex:        1;
    min-width:   0;
}
.evday-hdr__badge {
    display:       inline-flex;
    align-items:   center;
    font-family:   var(--bob-font-ui);
    font-size:     .75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding:       .2em .65em;
    border-radius: 999px;
    background:    var(--bob-clr-primary);
    color:         #fff;
    flex-shrink:   0;
}
.evday-hdr__date {
    font-family: var(--bob-font-ui);
    font-size:   .9rem;
    font-weight: 500;
    color:       var(--bob-clr-text);
}
.evday-hdr__label {
    font-size:  .78rem;
    color:      var(--bob-clr-text-muted);
    background: var(--bob-clr-surface);
    border:     1px solid var(--bob-clr-border);
    border-radius: 999px;
    padding:    .1em .5em;
}
.evday-hdr__right {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-shrink: 0;
}
.evday-hdr__toggle {
    font-family: var(--bob-font-ui);
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--bob-clr-primary);
    display:     flex;
    align-items: center;
    gap:         .3rem;
    padding:     .3rem .6rem;
    border-radius: var(--bob-r-sm);
    background:  var(--bob-clr-accent-soft);
    white-space: nowrap;
}

/* Collapsible body */
.evday-body {
    display: none;
    border-top: 1px solid var(--bob-clr-border);
}
.evday-item.is-open .evday-body { display: block; }

/* ─ Day sections ─ */
.evday-section {
    border-bottom: 1px solid var(--bob-clr-border);
}
.evday-section:last-child { border-bottom: none; }

.evday-section__hdr {
    display:         flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .65rem 1.25rem;
    background:      var(--bob-clr-surface);
    border-bottom:   1px solid var(--bob-clr-border);
    font-family:     var(--bob-font-ui);
    font-size:       .72rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .06em;
    color:           var(--bob-clr-text-muted);
}
.evday-section__hdr i { color: var(--bob-clr-primary); }

.evday-section__body {
    padding: 1rem 1.25rem;
}

/* Day info row (label + notes side by side) */
.evday-info-row {
    display:   flex;
    gap:       .875rem;
    flex-wrap: wrap;
}
.evday-info-row .form-group { flex: 1 1 160px; }

/* ─ Food meals grid ─ */
.evday-meals {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
}
@media (max-width: 700px) {
    .evday-meals { grid-template-columns: 1fr; }
}

.evday-meal {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}
.evday-meal__hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .65rem .875rem;
    border-bottom:   1px solid var(--bob-clr-border);
    background:      var(--bob-clr-card);
}
.evday-meal__name {
    font-family: var(--bob-font-ui);
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
    display:     flex;
    align-items: center;
    gap:         .4rem;
}
.evday-meal__set-badge {
    font-size:     .68rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background:    color-mix(in srgb, var(--bob-clr-success, #16a34a) 15%, transparent);
    color:         var(--bob-clr-success, #15803d);
    border-radius: 999px;
    padding:       .1em .45em;
}
.evday-meal__toggles {
    display:     flex;
    align-items: center;
    gap:         .2rem;
}
.evday-meal__toggle-btn {
    font-family:   var(--bob-font-ui);
    font-size:     .75rem;
    font-weight:   600;
    padding:       .25rem .6rem;
    border-radius: 999px;
    border:        1.5px solid var(--bob-clr-border);
    background:    var(--bob-clr-surface);
    color:         var(--bob-clr-text-muted);
    cursor:        pointer;
    transition:    all .1s;
}
.evday-meal__toggle-btn--yes-active {
    background:   color-mix(in srgb, var(--bob-clr-success, #16a34a) 15%, transparent);
    border-color: color-mix(in srgb, var(--bob-clr-success, #16a34a) 40%, transparent);
    color:        var(--bob-clr-success, #15803d);
}
.evday-meal__toggle-btn--no-active {
    background:   color-mix(in srgb, var(--bob-clr-danger, #dc2626) 12%, transparent);
    border-color: color-mix(in srgb, var(--bob-clr-danger, #dc2626) 35%, transparent);
    color:        var(--bob-clr-danger, #b91c1c);
}
.evday-meal__empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            .4rem;
    padding:        1.5rem;
    color:          var(--bob-clr-text-muted);
    font-size:      .82rem;
    text-align:     center;
}
.evday-meal__empty i { font-size: 1.5rem; opacity: .25; }
.evday-meal__form { padding: .875rem; }

/* ─ Programs ─ */
.evday-prog-list {
    display:       flex;
    flex-direction: column;
    gap:           .5rem;
    margin-bottom: 1rem;
}
.evday-prog-item {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             .75rem;
    background:      var(--bob-clr-bg);
    border:          1px solid var(--bob-clr-border);
    border-radius:   var(--bob-r-sm);
    padding:         .65rem .875rem;
}
.evday-prog-item__info {
    display:        flex;
    flex-direction: column;
    gap:            .18rem;
    flex:           1;
    min-width:      0;
}
.evday-prog-item__type {
    font-size:     .7rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:         var(--bob-clr-primary);
}
.evday-prog-item__name {
    font-family: var(--bob-font-ui);
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}
.evday-prog-item__artist,
.evday-prog-item__time {
    font-size: .78rem;
    color:     var(--bob-clr-text-muted);
    display:   flex;
    align-items: center;
    gap:       .3rem;
}

/* Add program form */
.evday-prog-form {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       .875rem;
}
.evday-prog-form__row1 {
    display:     flex;
    gap:         .6rem;
    flex-wrap:   wrap;
    margin-bottom: .5rem;
}
.evday-prog-form__row2 {
    display:   flex;
    gap:       .6rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.evday-prog-form__time-icon {
    position:       absolute;
    left:           .55rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      .75rem;
    color:          var(--bob-clr-text-muted);
    pointer-events: none;
}
.evday-prog-form__time-input { padding-left: 1.8rem; width: 120px; }

/* ─ Member benefits table ─ */
.evday-mbf-note {
    font-size:     .8rem;
    color:         var(--bob-clr-text-muted);
    margin-bottom: .75rem;
}
.evday-mbf-wrap { overflow-x: auto; }
.evday-mbf-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .82rem;
    min-width:       560px;
}
.evday-mbf-table th {
    background:    var(--bob-clr-surface);
    font-family:   var(--bob-font-ui);
    font-size:     .7rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:         var(--bob-clr-text-muted);
    padding:       .55rem .75rem;
    text-align:    left;
    border-bottom: 2px solid var(--bob-clr-border);
}
.evday-mbf-row td {
    padding:     .55rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    vertical-align: middle;
}
.evday-mbf-row:last-child td { border-bottom: none; }
.evday-mbf-row__name {
    font-family: var(--bob-font-ui);
    font-size:   .84rem;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         .35rem;
    white-space: nowrap;
}
.evday-mbf-sel {
    font-size: .78rem;
    padding:   .25rem .5rem;
    height:    auto;
    min-width: 100px;
}

/* ══════════════════════════════════════════════════════════
   EVENTS LIST  (admin/events.php)
   ══════════════════════════════════════════════════════════ */

/* Filter bar */
.evt-filter-bar {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       1rem 1.25rem;
}
.evt-filter-bar__form {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-end;
    gap:         .75rem;
}
.evt-filter-bar__search {
    flex:      2 1 200px;
    min-width: 160px;
}
.evt-filter-bar__sel {
    flex:      1 1 140px;
    min-width: 120px;
}
.evt-filter-bar__lbl {
    display:       block;
    font-family:   var(--bob-font-ui);
    font-size:     .74rem;
    font-weight:   600;
    color:         var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .3rem;
}
.evt-filter-bar__actions {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-shrink: 0;
}
.evt-filter-bar__reset {
    font-size:   .82rem;
    color:       var(--bob-clr-text-muted);
    padding:     .3rem .5rem;
    border-radius: var(--bob-r-sm);
    transition:  color var(--bob-ease);
}
.evt-filter-bar__reset:hover { color: var(--bob-clr-text); text-decoration: none; }

/* Event name cell */
.evt-table__name-cell {
    display:     flex;
    align-items: center;
    gap:         .65rem;
}
.evt-table__thumb {
    width:           40px;
    height:          40px;
    border-radius:   var(--bob-r-sm);
    flex-shrink:     0;
    object-fit:      cover;
    border:          1px solid var(--bob-clr-border);
}
.evt-table__thumb--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bob-clr-surface);
    color:           var(--bob-clr-text-muted);
    font-size:       1rem;
}
.evt-table__title {
    display:       block;
    font-family:   var(--bob-font-ui);
    font-size:     .88rem;
    font-weight:   600;
    color:         var(--bob-clr-text);
    line-height:   1.3;
    margin-bottom: .1rem;
}
.evt-table__title:hover { color: var(--bob-clr-primary); text-decoration: none; }
.evt-table__year {
    display:   block;
    font-size: .74rem;
    color:     var(--bob-clr-text-muted);
}

/* Days chip */
.evt-days-chip {
    display:       inline-flex;
    align-items:   center;
    font-family:   var(--bob-font-ui);
    font-size:     .74rem;
    font-weight:   600;
    padding:       .18rem .55rem;
    border-radius: 999px;
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    color:         var(--bob-clr-text-muted);
    white-space:   nowrap;
}

/* Inline status select */
.evt-status-sel {
    font-family:   var(--bob-font-ui);
    font-size:     .78rem;
    font-weight:   600;
    padding:       .25rem .55rem;
    border-radius: 999px;
    border:        1.5px solid transparent;
    cursor:        pointer;
    outline:       none;
    appearance:    none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .45rem center;
    padding-right: 1.5rem;
    transition:    background-color .12s, color .12s;
}
.evt-status-sel--draft {
    background-color: var(--bob-clr-surface);
    border-color:     var(--bob-clr-border);
    color:            var(--bob-clr-text-muted);
}
.evt-status-sel--upcoming {
    background-color: var(--bob-clr-accent-soft);
    border-color:     color-mix(in srgb, var(--bob-clr-primary) 30%, transparent);
    color:            var(--bob-clr-primary);
}
.evt-status-sel--active {
    background-color: color-mix(in srgb, var(--bob-clr-success, #16a34a) 12%, transparent);
    border-color:     color-mix(in srgb, var(--bob-clr-success, #16a34a) 35%, transparent);
    color:            var(--bob-clr-success, #15803d);
}
.evt-status-sel--completed {
    background-color: var(--bob-clr-surface);
    border-color:     var(--bob-clr-border);
    color:            var(--bob-clr-text-muted);
}
.evt-status-sel--cancelled {
    background-color: color-mix(in srgb, var(--bob-clr-danger, #dc2626) 10%, transparent);
    border-color:     color-mix(in srgb, var(--bob-clr-danger, #dc2626) 30%, transparent);
    color:            var(--bob-clr-danger, #b91c1c);
}

/* Visibility toggle button */
.evt-vis-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    font-family:   var(--bob-font-ui);
    font-size:     .78rem;
    font-weight:   600;
    padding:       .3rem .65rem;
    border-radius: 999px;
    border:        1.5px solid transparent;
    cursor:        pointer;
    transition:    all .12s;
    white-space:   nowrap;
    background:    none;
}
.evt-vis-btn--on {
    background-color: color-mix(in srgb, var(--bob-clr-success, #16a34a) 12%, transparent);
    border-color:     color-mix(in srgb, var(--bob-clr-success, #16a34a) 35%, transparent);
    color:            var(--bob-clr-success, #15803d);
}
.evt-vis-btn--on:hover {
    background-color: color-mix(in srgb, var(--bob-clr-success, #16a34a) 20%, transparent);
}
.evt-vis-btn--off {
    background-color: var(--bob-clr-surface);
    border-color:     var(--bob-clr-border);
    color:            var(--bob-clr-text-muted);
}
.evt-vis-btn--off:hover {
    background-color: var(--bob-clr-accent-soft);
    border-color:     color-mix(in srgb, var(--bob-clr-primary) 30%, transparent);
    color:            var(--bob-clr-primary);
}

/* Future action links (not yet built) */
.evt-action-future {
    opacity: .45;
    cursor:  not-allowed;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   EVENT PACKAGES  (admin/event-packages.php)
   ══════════════════════════════════════════════════════════ */

/* Package count chips on the chooser list */
.evpkg-count-chip {
    display:       inline-flex;
    align-items:   center;
    font-family:   var(--bob-font-ui);
    font-size:     .78rem;
    font-weight:   600;
    padding:       .22rem .65rem;
    border-radius: 999px;
}
.evpkg-count-chip--has {
    background: color-mix(in srgb, var(--bob-clr-success, #16a34a) 12%, transparent);
    color:      var(--bob-clr-success, #15803d);
    border:     1px solid color-mix(in srgb, var(--bob-clr-success, #16a34a) 30%, transparent);
}
.evpkg-count-chip--none {
    background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 12%, transparent);
    color:      var(--bob-clr-caution, #92400e);
    border:     1px solid color-mix(in srgb, var(--bob-clr-caution, #d97706) 30%, transparent);
}

/* ─ Hero header bar ─ */
.evpkg-hero {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
    background:      linear-gradient(135deg,
                         color-mix(in srgb, var(--bob-clr-primary) 80%, #000) 0%,
                         var(--bob-clr-primary) 100%);
    border-radius:   var(--bob-r-md);
    padding:         1.25rem 1.5rem;
    color:           #fff;
}
.evpkg-hero__eyebrow {
    font-size:     .74rem;
    font-weight:   500;
    opacity:       .7;
    margin:        0 0 .2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.evpkg-hero__title {
    font-family:  var(--bob-font-display);
    font-size:    1.5rem;
    font-weight:  700;
    margin:       0 0 .5rem;
    line-height:  1.2;
    color:        #fff;
}
.evpkg-hero__meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .75rem;
    font-size:   .82rem;
    opacity:     .85;
}
.evpkg-hero__meta i { margin-right: .25rem; }
.evpkg-hero__actions {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-shrink: 0;
}
.evpkg-hero__btn {
    border-color: rgba(255,255,255,.35) !important;
    color:        #fff !important;
    background:   rgba(255,255,255,.1) !important;
}
.evpkg-hero__btn:hover {
    background: rgba(255,255,255,.22) !important;
}

/* ─ Package card list ─ */
.evpkg-list { display: flex; flex-direction: column; gap: .75rem; }

.evpkg-card {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
    transition:    box-shadow var(--bob-ease);
}
.evpkg-card:hover { box-shadow: var(--bob-shadow-sm); }
.evpkg-card--disabled { opacity: .75; }

.evpkg-card__main {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         .875rem 1.25rem;
    flex-wrap:       wrap;
}
.evpkg-card__left {
    display:     flex;
    align-items: center;
    gap:         .875rem;
    flex:        1;
    min-width:   0;
}
.evpkg-card__icon {
    width:           2.4rem;
    height:          2.4rem;
    border-radius:   var(--bob-r-sm);
    background:      var(--bob-clr-accent-soft);
    color:           var(--bob-clr-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    flex-shrink:     0;
}
.evpkg-card__info { flex: 1; min-width: 0; }
.evpkg-card__name-row {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         .4rem;
    margin-bottom: .3rem;
}
.evpkg-card__name {
    font-family: var(--bob-font-ui);
    font-size:   .92rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}
.evpkg-card__stats {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         .6rem;
}
.evpkg-card__price {
    font-family: var(--bob-font-ui);
    font-size:   .88rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
}
.evpkg-card__stat {
    font-size: .8rem;
    color:     var(--bob-clr-text-muted);
    display:   flex;
    align-items: center;
    gap:       .25rem;
}
.evpkg-card__stat--sold { color: var(--bob-clr-success, #15803d); }
.evpkg-card__stat--sold i { opacity: .7; }

/* Category badges */
.evpkg-cat {
    display:       inline-flex;
    align-items:   center;
    font-family:   var(--bob-font-ui);
    font-size:     .7rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding:       .15em .55em;
    border-radius: 999px;
    border:        1px solid transparent;
}
.evpkg-cat--full {
    background: color-mix(in srgb, var(--bob-clr-primary) 12%, transparent);
    color:      var(--bob-clr-primary);
    border-color: color-mix(in srgb, var(--bob-clr-primary) 25%, transparent);
}
.evpkg-cat--half {
    background: color-mix(in srgb, var(--bob-clr-accent) 15%, transparent);
    color:      var(--bob-clr-accent);
    border-color: color-mix(in srgb, var(--bob-clr-accent) 30%, transparent);
}
.evpkg-cat--custom {
    background: color-mix(in srgb, var(--bob-clr-secondary, #6366f1) 12%, transparent);
    color:      var(--bob-clr-secondary, #4f46e5);
    border-color: color-mix(in srgb, var(--bob-clr-secondary, #6366f1) 28%, transparent);
}
.evpkg-cat--show {
    background: color-mix(in srgb, #8b5cf6 12%, transparent);
    color:      #7c3aed;
    border-color: color-mix(in srgb, #8b5cf6 28%, transparent);
}
.evpkg-cat--food {
    background: color-mix(in srgb, var(--bob-clr-success, #16a34a) 12%, transparent);
    color:      var(--bob-clr-success, #15803d);
    border-color: color-mix(in srgb, var(--bob-clr-success, #16a34a) 28%, transparent);
}
.evpkg-cat--parents {
    background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 12%, transparent);
    color:      var(--bob-clr-caution, #92400e);
    border-color: color-mix(in srgb, var(--bob-clr-caution, #d97706) 28%, transparent);
}

/* Card action links */
.evpkg-card__actions {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-shrink: 0;
    flex-wrap:   wrap;
}
.evpkg-action-link {
    font-family: var(--bob-font-ui);
    font-size:   .8rem;
    font-weight: 500;
    color:       var(--bob-clr-text-muted);
    display:     flex;
    align-items: center;
    gap:         .25rem;
    padding:     .25rem .4rem;
    border-radius: var(--bob-r-sm);
    border:      none;
    background:  none;
    cursor:      pointer;
    transition:  color var(--bob-ease);
}
.evpkg-action-link:hover,
.evpkg-action-link:hover { color: var(--bob-clr-primary); text-decoration: none; }
.evpkg-action-link--enable { color: var(--bob-clr-success, #15803d); }

/* ─ Inline edit panel ─ */
.evpkg-edit-panel {
    border-top:  1px solid var(--bob-clr-border);
    background:  var(--bob-clr-surface);
    padding:     1rem 1.25rem;
}
.evpkg-edit-panel__hdr {
    font-family:   var(--bob-font-ui);
    font-size:     .78rem;
    font-weight:   700;
    color:         var(--bob-clr-primary);
    margin-bottom: .75rem;
    display:       flex;
    align-items:   center;
    gap:           .35rem;
}
.evpkg-edit-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-end;
    gap:         .75rem;
    margin-bottom: .625rem;
}
.evpkg-edit-row2 {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-end;
    gap:         .75rem;
}

/* ─ Benefits panel ─ */
.evpkg-ben-panel {
    border-top:  1px solid var(--bob-clr-border);
    background:  var(--bob-clr-surface);
}
.evpkg-ben-panel__hdr {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .75rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
    font-family: var(--bob-font-ui);
    font-size:   .85rem;
    color:       var(--bob-clr-text);
}
.evpkg-ben-panel__hdr i { color: var(--bob-clr-primary); }

.evpkg-ben-table-wrap { overflow-x: auto; }

.evpkg-ben-table {
    width:           100%;
    border-collapse: collapse;
    min-width:       400px;
}
.evpkg-ben-thead-top th,
.evpkg-ben-thead-sub th {
    font-family:   var(--bob-font-ui);
    text-align:    center;
    font-size:     .72rem;
    font-weight:   700;
    letter-spacing: .04em;
    color:         var(--bob-clr-text-muted);
    padding:       .5rem .75rem;
    border-bottom: 1px solid var(--bob-clr-border);
    background:    var(--bob-clr-card);
}
.evpkg-ben-th-day {
    text-align: left !important;
    min-width:  180px;
}
.evpkg-ben-th-group {
    border-left:  2px solid var(--bob-clr-border);
    color:        var(--bob-clr-primary) !important;
}
.evpkg-ben-th-group--kids {
    color: var(--bob-clr-caution, #92400e) !important;
}
.evpkg-ben-thead-sub th {
    font-weight: 500;
    font-size:   .68rem;
    background:  var(--bob-clr-surface);
    border-bottom: 2px solid var(--bob-clr-border);
}
.evpkg-ben-row td {
    padding:     .55rem .75rem;
    border-bottom: 1px solid var(--bob-clr-border);
    vertical-align: middle;
}
.evpkg-ben-row:last-child td { border-bottom: none; }
.evpkg-ben-row:hover td { background: color-mix(in srgb, var(--bob-clr-primary) 4%, transparent); }
.evpkg-ben-td-day {
    font-size: .84rem;
    color:     var(--bob-clr-text);
}
.evpkg-ben-td-day strong { display: block; font-weight: 600; }
.evpkg-ben-td-day span   { font-size: .74rem; color: var(--bob-clr-text-muted); }
.evpkg-ben-td-cb { text-align: center; }

/* Styled checkboxes for benefits table */
.evpkg-ben-cb {
    width:            1.1rem;
    height:           1.1rem;
    accent-color:     var(--bob-clr-primary);
    cursor:           pointer;
    border-radius:    var(--bob-r-sm);
}
.evpkg-ben-na {
    display:     block;
    text-align:  center;
    color:       var(--bob-clr-text-muted);
    font-size:   .85rem;
    line-height: 1;
    opacity:     .5;
}

/* ─ Add package form ─ */
.evpkg-add-wrap {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}
.evpkg-add-wrap__hdr {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    padding:     .875rem 1.25rem;
    font-family: var(--bob-font-ui);
    font-size:   .88rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
    border-bottom: 1px solid var(--bob-clr-border);
    background:  var(--bob-clr-surface);
}
.evpkg-add-wrap__hdr i { color: var(--bob-clr-primary); }
.evpkg-add-body { padding: 1rem 1.25rem; }
.evpkg-add-row1 {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-end;
    gap:         .75rem;
    margin-bottom: .75rem;
}
.evpkg-add-row2 {
    display:     flex;
    flex-wrap:   wrap;
    align-items: flex-end;
    gap:         .75rem;
}

/* ══════════════════════════════════════════════════════════
   EVENT ATTENDANCE PAGE
   ══════════════════════════════════════════════════════════ */

/* — Top controls bar — */
.evatt-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .75rem;
    background:      var(--bob-clr-surface);
    border:          1px solid var(--bob-clr-border);
    border-radius:   var(--bob-r-md);
    padding:         .875rem 1.25rem;
    margin-bottom:   1.25rem;
}
.evatt-topbar__form  { display: flex; align-items: flex-end; gap: .5rem; }
.evatt-topbar__sel-lbl {
    display:     block;
    font-size:   .72rem;
    font-weight: 600;
    color:       var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .3rem;
}
.evatt-topbar__sel   { min-width: 260px; }
.evatt-topbar__actions { display: flex; gap: .5rem; }

/* — Event header — */
.evatt-event-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .75rem;
    background:      var(--bob-clr-surface);
    border:          1px solid var(--bob-clr-border);
    border-radius:   var(--bob-r-md);
    padding:         1rem 1.5rem;
    margin-bottom:   1.25rem;
}
.evatt-event-hdr__left  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.evatt-event-hdr__right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.evatt-event-hdr__name  {
    font-family: var(--bob-font-display);
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
    margin:      0;
}
.evatt-meta-item {
    font-size:  .82rem;
    color:      var(--bob-clr-text-muted);
    display:    flex;
    align-items: center;
    gap:         .35rem;
}
.evatt-meta-item i { color: var(--bob-clr-primary); }
.evatt-chip {
    display:      inline-flex;
    align-items:  center;
    gap:          .3rem;
    font-size:    .72rem;
    font-weight:  600;
    padding:      .25rem .6rem;
    border-radius: var(--bob-r-full);
}
.evatt-chip--days {
    background: var(--bob-clr-accent-soft);
    color:      var(--bob-clr-primary);
}
.evatt-chip--year {
    background: var(--bob-clr-bg);
    color:      var(--bob-clr-text-muted);
    border:     1px solid var(--bob-clr-border);
}

/* — Stat cards (extend existing stat-card--dark) — */
.evatt-stat-grid { margin-bottom: 1.5rem; }
.evatt-stat-ext  {
    flex-direction: column;
    padding:        0 !important;
    gap:            0 !important;
    align-items:    stretch !important;
}
.evatt-sc-top {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    padding:         1.1rem 1.25rem .8rem;
}
.evatt-stat-ext .stat-card__value {
    font-size:    2rem;
    margin-bottom: 0;
}
.evatt-sc-days {
    background:  rgba(0,0,0,.18);
    padding:     .5rem 1.25rem;
    border-top:  1px solid rgba(255,255,255,.1);
}
.evatt-sc-day-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       .72rem;
    color:           rgba(255,255,255,.75);
    padding:         .14rem 0;
}

/* — Tabs — */
.evatt-tabs {
    display:       flex;
    align-items:   center;
    gap:           .15rem;
    border-bottom: 2px solid var(--bob-clr-border);
    margin-bottom: 1.25rem;
}
.evatt-tab {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    padding:        .65rem 1.1rem;
    font-family:    var(--bob-font-ui);
    font-size:      .83rem;
    font-weight:    500;
    color:          var(--bob-clr-text-muted);
    text-decoration: none;
    border-bottom:  2px solid transparent;
    margin-bottom:  -2px;
    border-radius:  var(--bob-r-sm) var(--bob-r-sm) 0 0;
    transition:     color var(--bob-ease), border-color var(--bob-ease), background var(--bob-ease);
}
.evatt-tab:hover  { color: var(--bob-clr-primary); background: var(--bob-clr-accent-soft); }
.evatt-tab.is-active {
    color:        var(--bob-clr-primary);
    border-color: var(--bob-clr-primary);
    font-weight:  600;
}
.evatt-tab-badge {
    background:    var(--bob-clr-primary);
    color:         var(--bob-clr-on-primary);
    font-size:     .68rem;
    font-weight:   700;
    padding:       .1rem .4rem;
    border-radius: var(--bob-r-full);
    line-height:   1.4;
}

/* — Attendance table — */
.evatt-table-wrap {
    overflow-x:    auto;
    border-radius: var(--bob-r-md);
    border:        1px solid var(--bob-clr-border);
    margin-bottom: 1.5rem;
}
.evatt-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .82rem;
    min-width:       600px;
}
.evatt-table th {
    background:     var(--bob-clr-footer-bg);
    color:          rgba(255,255,255,.85);
    padding:        .5rem .75rem;
    text-align:     center;
    white-space:    nowrap;
    font-family:    var(--bob-font-ui);
    font-size:      .7rem;
    font-weight:    600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-right:   1px solid rgba(255,255,255,.08);
}
.evatt-table th:last-child  { border-right: none; }
.evatt-th-day-grp {
    background: var(--bob-clr-primary) !important;
    color:      var(--bob-clr-on-primary) !important;
    border-right: 1px solid rgba(255,255,255,.2) !important;
}
.evatt-th-sub {
    font-size:   .67rem !important;
    font-weight: 500 !important;
    color:       rgba(255,255,255,.7) !important;
}
.evatt-th-pkg  { text-align: left !important; min-width: 200px; padding-left: 1.1rem !important; }
.evatt-th-num  { min-width: 56px; }
.evatt-th-ord  { min-width: 120px; text-align: left !important; }
.evatt-th-buyer{ min-width: 160px; text-align: left !important; }
.evatt-th-pkgs { min-width: 200px; text-align: left !important; }
.evatt-th-amt  { min-width: 88px; }

.evatt-table td {
    padding:      .6rem .75rem;
    border-bottom: 1px solid var(--bob-clr-border);
    vertical-align: middle;
}
.evatt-table tbody tr:last-child td { border-bottom: none; }
.evatt-table tbody tr:hover { background: var(--bob-clr-bg); }

.evatt-td-pkg  { text-align: left; padding-left: 1.1rem !important; }
.evatt-td-num  { text-align: center; font-variant-numeric: tabular-nums; }
.evatt-td-amt  { font-weight: 600; color: var(--bob-clr-text); }
.evatt-td-ord  { text-align: left; }
.evatt-td-buyer{ text-align: left; }
.evatt-td-pkgs { font-size: .75rem; color: var(--bob-clr-text); }
.evatt-td-date { font-size: .78rem; color: var(--bob-clr-text-muted); white-space: nowrap; }
.evatt-td-date span { font-size: .7rem; }
.evatt-td-pay  { font-size: .76rem; text-transform: capitalize; }

.evatt-td-has  { color: var(--bob-clr-primary); font-weight: 600; }
.evatt-td-zero { color: var(--bob-clr-text-muted); opacity: .55; }

.evatt-pkg-name {
    display:     block;
    font-weight: 600;
    color:       var(--bob-clr-text);
    font-size:   .82rem;
    margin-bottom: .2rem;
}
.evatt-pkg-name--member {
    color: var(--bob-clr-highlight);
    font-weight: 500;
}
.evatt-pkg-name--member i { margin-right: .25rem; }

/* Member row */
.evatt-tr-member td {
    background:  color-mix(in srgb, var(--bob-clr-highlight) 8%, var(--bob-clr-surface));
    border-color: color-mix(in srgb, var(--bob-clr-highlight) 25%, var(--bob-clr-border));
}

/* Grand total footer row */
.evatt-tr-total td {
    background:  var(--bob-clr-footer-bg);
    color:       rgba(255,255,255,.9);
    font-size:   .82rem;
    border-top:  2px solid var(--bob-clr-primary);
    border-bottom: none;
}
.evatt-tr-total .evatt-td-pkg { color: rgba(255,255,255,.9); }

/* Cancelled row dimming */
.evatt-tr-cancelled td { opacity: .55; }

/* Members note */
.evatt-members-note {
    display:    flex;
    align-items: center;
    gap:        .4rem;
    font-size:  .75rem;
    color:      var(--bob-clr-text-muted);
    padding:    0 .25rem;
    margin-top: -.75rem;
    margin-bottom: 1.5rem;
}
.evatt-members-note i { color: var(--bob-clr-primary); flex-shrink: 0; }

/* — Mini stats row (orders tab) — */
.evatt-mini-stats {
    display:         flex;
    flex-wrap:       wrap;
    gap:             .75rem;
    margin-bottom:   1.25rem;
}
.evatt-mini-stat {
    background:    var(--bob-clr-surface);
    border:        2px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       .75rem 1.1rem;
    min-width:     100px;
    text-align:    center;
    flex:          1 1 100px;
}
.evatt-mini-stat__val {
    font-family: var(--bob-font-display);
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
    line-height: 1.1;
}
.evatt-mini-stat__lbl {
    font-size:      .67rem;
    font-weight:    600;
    color:          var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top:     .2rem;
}
.evatt-mini-stat--confirmed { border-color: var(--bob-clr-success); }
.evatt-mini-stat--confirmed .evatt-mini-stat__val { color: var(--bob-clr-success); }
.evatt-mini-stat--pending   { border-color: var(--bob-clr-highlight); }
.evatt-mini-stat--pending   .evatt-mini-stat__val { color: var(--bob-clr-highlight); }
.evatt-mini-stat--cancelled { border-color: var(--bob-clr-error); }
.evatt-mini-stat--cancelled .evatt-mini-stat__val { color: var(--bob-clr-error); }
.evatt-mini-stat--revenue   { border-color: var(--bob-clr-primary); }
.evatt-mini-stat--revenue   .evatt-mini-stat__val { color: var(--bob-clr-primary); font-size: 1.2rem; }
.evatt-mini-stat--members   { border-color: var(--bob-clr-accent); }
.evatt-mini-stat--members   .evatt-mini-stat__val { color: var(--bob-clr-primary); }

/* — Orders search/filter bar — */
.evatt-orders-bar {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .6rem;
    margin-bottom: 1rem;
}
.evatt-orders-bar__search-wrap {
    position:  relative;
    flex:      1 1 220px;
}
.evatt-orders-bar__search-ico {
    position:    absolute;
    left:        .65rem;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   .78rem;
    color:       var(--bob-clr-text-muted);
    pointer-events: none;
}
.evatt-orders-bar__search { padding-left: 2rem; width: 100%; }
.evatt-orders-bar__export { margin-left: auto; }

/* — Order ref link — */
.evatt-ord-ref {
    color:           var(--bob-clr-primary);
    font-family:     var(--bob-font-ui);
    font-size:       .78rem;
    font-weight:     600;
    text-decoration: none;
    white-space:     nowrap;
}
.evatt-ord-ref:hover { text-decoration: underline; }

/* — Member badge (in order row) — */
.evatt-member-badge {
    display:       inline-block;
    font-size:     .65rem;
    font-weight:   600;
    padding:       .1rem .4rem;
    border-radius: var(--bob-r-full);
    background:    var(--bob-clr-accent-soft);
    color:         var(--bob-clr-primary);
    margin-left:   .3rem;
    vertical-align: middle;
}

/* — Buyer cell — */
.evatt-buyer-email {
    display:   block;
    font-size: .71rem;
    color:     var(--bob-clr-text-muted);
    margin-top: .1rem;
}

/* — Member section separator row — */
.evatt-tr-section-hdr td {
    background:    color-mix(in srgb, var(--bob-clr-primary) 8%, var(--bob-clr-surface));
    border-top:    2px solid var(--bob-clr-primary);
    border-bottom: 1px solid var(--bob-clr-border);
    padding:       .55rem 1.1rem;
}
.evatt-section-hdr-cell {
    font-family:    var(--bob-font-ui);
    font-size:      .75rem;
    font-weight:    600;
    color:          var(--bob-clr-primary);
    letter-spacing: .04em;
    text-transform: uppercase;
    display:        flex;
    align-items:    center;
    gap:            .4rem;
}

/* — Member rows in orders tab — */
.evatt-tr-mem-row td {
    background:    color-mix(in srgb, var(--bob-clr-highlight) 5%, var(--bob-clr-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--bob-clr-highlight) 20%, var(--bob-clr-border));
}
.evatt-mem-ref {
    font-family:    var(--bob-font-ui);
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .06em;
    color:          var(--bob-clr-highlight);
    background:     color-mix(in srgb, var(--bob-clr-highlight) 12%, var(--bob-clr-surface));
    padding:        .15rem .45rem;
    border-radius:  var(--bob-r-sm);
    white-space:    nowrap;
}

/* — Responsive — */
@media (max-width: 768px) {
    .evatt-topbar { flex-direction: column; align-items: stretch; }
    .evatt-topbar__sel { min-width: 0; width: 100%; }
    .evatt-topbar__actions { flex-wrap: wrap; }
    .evatt-event-hdr { flex-direction: column; align-items: flex-start; }
    .evatt-stat-grid { grid-template-columns: 1fr 1fr; }
    .evatt-mini-stats { gap: .5rem; }
    .evatt-mini-stat { min-width: 80px; }
    .evatt-mini-stat__val { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════════════════════
   ORDER CREATION PAGE  (admin/orders.php)
   ══════════════════════════════════════════════════════════ */

/* ── Event header bar ── */
.ord-event-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    background:      var(--bob-gradient-brand);
    border-radius:   var(--bob-r-md);
    padding:         1rem 1.5rem;
    margin-bottom:   1.25rem;
}
.ord-event-hdr__info {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         .6rem;
    flex:        1;
    min-width:   0;
}
.ord-event-hdr__name {
    font-family:   var(--bob-font-ui);
    font-size:     1.1rem;
    font-weight:   700;
    color:         #fff;
    margin:        0;
    line-height:   1.25;
}

/* ── Two-column layout ── */
.ord-layout {
    display:               grid;
    grid-template-columns: 3fr 2fr;
    gap:                   1.25rem;
    align-items:           start;
}
@media (max-width: 1000px) {
    .ord-layout { grid-template-columns: 1fr; }
}
.ord-left  { display: flex; flex-direction: column; gap: 1.25rem; }
.ord-right { display: flex; flex-direction: column; gap: 1rem; }

/* ── Step headers ── */
.ord-step-hdr {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    padding:       1rem 1.25rem .875rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.ord-step-num {
    width:           1.9rem;
    height:          1.9rem;
    border-radius:   50%;
    background:      var(--bob-clr-primary);
    color:           #fff;
    font-family:     var(--bob-font-ui);
    font-size:       .85rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.ord-step-hdr__title {
    font-family: var(--bob-font-ui);
    font-size:   .9rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
    line-height: 1.2;
}
.ord-step-hdr__sub {
    font-size:  .76rem;
    color:      var(--bob-clr-text-muted);
    margin-top: .1rem;
}

/* ── Package panel ── */
.ord-pkg-panel { padding: 0 !important; overflow: hidden; }

.ord-pkg-groups {
    display:       flex;
    flex-direction: column;
}
.ord-pkg-group {
    padding:       .875rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.ord-pkg-group:last-child { border-bottom: none; }

.ord-pkg-group__label {
    font-family:    var(--bob-font-ui);
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--bob-clr-text-muted);
    margin-bottom:  .55rem;
}
.ord-pkg-row {
    display:     flex;
    align-items: center;
    gap:         .65rem;
}
.ord-pkg-select { flex: 1; min-width: 0; }

/* ── Qty stepper ── */
.ord-qty {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    border:      1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    overflow:    hidden;
}
.ord-qty__btn {
    width:           2rem;
    height:          2.1rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bob-clr-surface);
    border:          none;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--bob-clr-text-muted);
    cursor:          pointer;
    transition:      background var(--bob-ease), color var(--bob-ease);
    flex-shrink:     0;
    line-height:     1;
}
.ord-qty__btn:hover {
    background: var(--bob-clr-accent-soft);
    color:      var(--bob-clr-primary);
}
.ord-qty__input {
    width:       3rem;
    height:      2.1rem;
    border:      none;
    border-left: 1px solid var(--bob-clr-border);
    border-right: 1px solid var(--bob-clr-border);
    text-align:  center;
    font-family: var(--bob-font-ui);
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
    background:  var(--bob-clr-card);
    outline:     none;
    -moz-appearance: textfield;
}
.ord-qty__input::-webkit-outer-spin-button,
.ord-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Order summary card ── */
.ord-summary-card {
    background:    var(--bob-clr-card);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}
.ord-summary-card__hdr {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    padding:       .875rem 1.1rem;
    border-bottom: 1px solid var(--bob-clr-border);
    font-family:   var(--bob-font-ui);
    font-size:     .85rem;
    font-weight:   700;
    color:         var(--bob-clr-text);
    background:    var(--bob-clr-surface);
}
.ord-summary-card__hdr i { color: var(--bob-clr-primary); }
.ord-summary-body { padding: .5rem 0; min-height: 3rem; }
.ord-summary-empty {
    padding:    1rem 1.1rem;
    color:      var(--bob-clr-text-muted);
    font-size:  .82rem;
    text-align: center;
}
.ord-summary-item {
    display:     flex;
    align-items: baseline;
    gap:         .5rem;
    padding:     .45rem 1.1rem;
    font-size:   .83rem;
}
.ord-summary-item + .ord-summary-item {
    border-top: 1px solid var(--bob-clr-border);
}
.ord-summary-item__name {
    flex:        1;
    color:       var(--bob-clr-text);
    font-weight: 500;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ord-summary-item__qty {
    color:      var(--bob-clr-text-muted);
    font-size:  .78rem;
    flex-shrink: 0;
}
.ord-summary-item__price {
    font-family: var(--bob-font-ui);
    font-weight: 700;
    color:       var(--bob-clr-text);
    flex-shrink: 0;
}
.ord-summary-item--fee {
    background:  color-mix(in srgb, var(--bob-clr-caution, #d97706) 6%, var(--bob-clr-card));
    border-top:  1px dashed color-mix(in srgb, var(--bob-clr-caution, #d97706) 30%, transparent) !important;
}
.ord-summary-item--fee .ord-summary-item__name { color: var(--bob-clr-caution, #92400e); font-style: italic; }
.ord-summary-item--fee .ord-summary-item__price { color: var(--bob-clr-caution, #92400e); }

.ord-summary-total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         .75rem 1.1rem;
    border-top:      2px solid var(--bob-clr-border);
    background:      var(--bob-clr-surface);
    font-family:     var(--bob-font-ui);
    font-size:       .85rem;
    font-weight:     600;
    color:           var(--bob-clr-text-muted);
}
.ord-summary-total strong {
    font-size: 1.05rem;
    color:     var(--bob-clr-primary);
}

/* ── Info / form panels ── */
.ord-form-panel { padding: 0 !important; overflow: hidden; }
.ord-form-body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .875rem 1rem;
    padding:               1.1rem 1.25rem 1.25rem;
}
@media (max-width: 640px) {
    .ord-form-body { grid-template-columns: 1fr; }
}
.ord-form-row { display: flex; flex-direction: column; gap: .35rem; }
.ord-form-row--full { grid-column: 1 / -1; }

/* ── Member checkbox ── */
.ord-member-chk {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    cursor:      pointer;
    font-size:   .85rem;
    color:       var(--bob-clr-text);
    user-select: none;
}
.ord-member-chk input[type="checkbox"] { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── Payment grid ── */
.ord-pay-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   .625rem;
    padding:               1rem 1.25rem;
}
@media (max-width: 700px) {
    .ord-pay-grid { grid-template-columns: repeat(3, 1fr); }
}
.ord-pay-opt {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            .3rem;
    padding:        .75rem .4rem;
    border:         1.5px solid var(--bob-clr-border);
    border-radius:  var(--bob-r-md);
    background:     var(--bob-clr-surface);
    cursor:         pointer;
    transition:     border-color var(--bob-ease), background var(--bob-ease), box-shadow var(--bob-ease);
    font-size:      1.1rem;
    color:          var(--bob-clr-text-muted);
    text-align:     center;
    user-select:    none;
}
.ord-pay-opt:hover {
    border-color: var(--bob-clr-primary);
    color:        var(--bob-clr-primary);
    background:   var(--bob-clr-accent-soft);
}
.ord-pay-opt.is-active {
    border-color: var(--bob-clr-primary);
    background:   var(--bob-clr-accent-soft);
    color:        var(--bob-clr-primary);
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--bob-clr-primary) 25%, transparent);
}
.ord-pay-opt__label {
    font-family: var(--bob-font-ui);
    font-size:   .72rem;
    font-weight: 700;
    line-height: 1;
    color:       inherit;
}
.ord-pay-opt__sub {
    font-size: .65rem;
    color:     var(--bob-clr-text-muted);
    line-height: 1;
}

/* ── Fee info panel (shown below payment grid) ── */
.ord-fee-info {
    margin-top:    .65rem;
    padding:       .6rem .85rem;
    border-radius: var(--bob-r-sm);
    background:    color-mix(in srgb, var(--bob-clr-caution) 10%, transparent);
    border:        1px solid color-mix(in srgb, var(--bob-clr-caution) 35%, transparent);
    font-size:     .78rem;
    color:         var(--bob-clr-text);
    display:       none;
}
.ord-fee-info.is-visible { display: block; }
.ord-fee-info__row {
    display:         flex;
    justify-content: space-between;
    gap:             .5rem;
    padding:         .15rem 0;
}
.ord-fee-info__label { color: var(--bob-clr-text-muted); }
.ord-fee-info__rate  { font-weight: 600; color: var(--bob-clr-caution); }
.ord-fee-info__none  { color: var(--bob-clr-success); font-weight: 500; }

/* ── Submit row ── */
.ord-submit-row {
    display:        flex;
    flex-direction: column;
    gap:            .65rem;
    padding:        1rem 1.25rem 1.25rem;
    border-top:     1px solid var(--bob-clr-border);
}
.ord-place-btn {
    width:           100%;
    justify-content: center;
    padding:         .8rem 1.5rem;
    font-size:       .95rem;
    font-weight:     700;
}
.ord-submit-note {
    font-size:   .76rem;
    color:       var(--bob-clr-text-muted);
    display:     flex;
    align-items: center;
    gap:         .35rem;
    margin:      0;
    text-align:  center;
    justify-content: center;
}

/* ── Confirmation success banner ── */
.ord-confirm-banner {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    background:      color-mix(in srgb, var(--bob-clr-success, #16a34a) 12%, var(--bob-clr-card));
    border:          1.5px solid color-mix(in srgb, var(--bob-clr-success, #16a34a) 35%, transparent);
    border-radius:   var(--bob-r-md);
    padding:         1rem 1.25rem;
    margin-bottom:   1.25rem;
    flex-wrap:       wrap;
}
.ord-confirm-banner > i {
    font-size:   1.75rem;
    color:       var(--bob-clr-success, #16a34a);
    flex-shrink: 0;
}
.ord-confirm-banner > div {
    flex:        1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         .2rem;
}
.ord-confirm-banner strong {
    font-family: var(--bob-font-ui);
    font-size:   1rem;
    font-weight: 700;
    color:       var(--bob-clr-success, #15803d);
}
.ord-confirm-banner span {
    font-size: .83rem;
    color:     var(--bob-clr-text-muted);
}
.ord-confirm-banner__actions {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

/* ── Confirmation two-column layout ── */
.ord-confirm-layout {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   1.25rem;
    align-items:           start;
}
@media (max-width: 900px) {
    .ord-confirm-layout { grid-template-columns: 1fr; }
}

/* ── Confirmation card ── */
.ord-confirm-card { padding: 0 !important; overflow: hidden; }
.ord-confirm-card__hdr {
    display:       flex;
    align-items:   center;
    gap:           .55rem;
    padding:       .875rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
    font-family:   var(--bob-font-ui);
    font-size:     .9rem;
    font-weight:   700;
    color:         var(--bob-clr-text);
    background:    var(--bob-clr-surface);
}
.ord-confirm-card__hdr i { color: var(--bob-clr-primary); }

/* ── Meta rows ── */
.ord-confirm-meta {
    padding:        .5rem 0;
}
.ord-confirm-meta__row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             1rem;
    padding:         .5rem 1.25rem;
    font-size:       .83rem;
}
.ord-confirm-meta__row + .ord-confirm-meta__row {
    border-top: 1px solid var(--bob-clr-border);
}
.ord-confirm-meta__row > span:first-child { color: var(--bob-clr-text-muted); flex-shrink: 0; }
.ord-confirm-meta__row > strong,
.ord-confirm-meta__row > span:last-child  { color: var(--bob-clr-text); text-align: right; }

/* ── Confirmed items table ── */
.ord-confirm-items {
    width:           100%;
    border-collapse: collapse;
    font-size:       .83rem;
    margin-top:      .5rem;
}
.ord-confirm-items thead th {
    background:    var(--bob-clr-surface);
    border-bottom: 2px solid var(--bob-clr-border);
    padding:       .55rem 1.25rem;
    font-family:   var(--bob-font-ui);
    font-size:     .72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:         var(--bob-clr-text-muted);
}
.ord-confirm-items tbody td {
    padding:       .55rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
    color:         var(--bob-clr-text);
}
.ord-confirm-items tbody tr:last-child td { border-bottom: none; }
.ord-confirm-total-row td {
    background:  var(--bob-clr-surface);
    border-top:  2px solid var(--bob-clr-border) !important;
    padding:     .65rem 1.25rem !important;
    font-size:   .88rem;
}

/* ── Email card ── */
.ord-email-card {
    padding:        1.25rem !important;
    display:        flex;
    flex-direction: column;
    gap:            .875rem;
}
.ord-email-sent {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--bob-clr-success, #15803d);
    background:  color-mix(in srgb, var(--bob-clr-success, #16a34a) 10%, transparent);
    border:      1px solid color-mix(in srgb, var(--bob-clr-success, #16a34a) 30%, transparent);
    border-radius: var(--bob-r-sm);
    padding:     .65rem .875rem;
}
.ord-email-desc {
    font-size:   .84rem;
    color:       var(--bob-clr-text-muted);
    margin:      0;
    line-height: 1.55;
}
.ord-email-addr {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
    background:  var(--bob-clr-surface);
    border:      1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    padding:     .55rem .875rem;
    word-break:  break-all;
}
.ord-email-addr i { color: var(--bob-clr-primary); flex-shrink: 0; }
.ord-email-chk {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    cursor:      pointer;
    font-size:   .84rem;
    color:       var(--bob-clr-text);
    user-select: none;
}
.ord-email-chk input[type="checkbox"] { width: 1rem; height: 1rem; flex-shrink: 0; }
.ord-email-note {
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;
    font-size:   .76rem;
    color:       var(--bob-clr-text-muted);
    line-height: 1.5;
    margin:      0;
}
.ord-email-note i { margin-top: .1rem; color: var(--bob-clr-primary); flex-shrink: 0; }

/* ── Form error list ── */
.form-error-list {
    display:         flex;
    align-items:     flex-start;
    gap:             .75rem;
    background:      color-mix(in srgb, var(--bob-clr-error, #dc2626) 8%, var(--bob-clr-card));
    border:          1.5px solid color-mix(in srgb, var(--bob-clr-error, #dc2626) 30%, transparent);
    border-radius:   var(--bob-r-md);
    padding:         .875rem 1.1rem;
    margin-bottom:   1rem;
}
.form-error-list > i {
    font-size:   1rem;
    color:       var(--bob-clr-error, #dc2626);
    margin-top:  .1rem;
    flex-shrink: 0;
}
.form-error-list ul {
    list-style:  disc;
    padding-left: 1.1rem;
    margin:      0;
    font-size:   .84rem;
    color:       var(--bob-clr-error, #b91c1c);
    line-height: 1.6;
}
.form-error-list li { margin-bottom: .15rem; }
.form-error-list li:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   ORDERS LIST PAGE  (admin/orders.php)
   ══════════════════════════════════════════════════════════ */

/* ── Page header ── */
.ord-list-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.25rem;
}
.ord-list-hdr__title {
    font-family:   var(--bob-font-ui);
    font-size:     1.35rem;
    font-weight:   700;
    color:         var(--bob-clr-text);
    margin:        0 0 .2rem;
    line-height:   1.2;
}
.ord-list-hdr__sub {
    font-size:  .82rem;
    color:      var(--bob-clr-text-muted);
    margin:     0;
    line-height: 1.4;
}

/* ── Filter bar ── */
.ord-filter-wrap {
    padding:       0 !important;
    overflow:      hidden;
    margin-bottom: 1rem;
}
.ord-filter-bar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         .625rem;
    padding:     .875rem 1.25rem;
}
.ord-filter-bar__search {
    position:  relative;
    flex:      1 1 200px;
    min-width: 160px;
}
.ord-filter-bar__search .form-input { padding-left: 2rem; width: 100%; }
.ord-filter-bar__search-icon {
    position:       absolute;
    left:           .65rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      .78rem;
    color:          var(--bob-clr-text-muted);
    pointer-events: none;
}
.ord-filter-bar__sel {
    position:  relative;
    flex:      1 1 160px;
    min-width: 130px;
}

/* ── Table header ── */
.ord-table-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .75rem 1.25rem;
    border-bottom:   1px solid var(--bob-clr-border);
    background:      var(--bob-clr-surface);
    font-family:     var(--bob-font-ui);
    font-size:       .83rem;
    font-weight:     600;
    color:           var(--bob-clr-text);
}
.ord-table-hdr i { color: var(--bob-clr-primary); margin-right: .35rem; }

/* ── Table row ── */
.ord-list-row { transition: background var(--bob-ease); }
.ord-list-row:hover td { background: color-mix(in srgb, var(--bob-clr-primary) 4%, var(--bob-clr-card)); }

/* ── Cell helpers ── */
.ord-items-chip {
    display:       inline-block;
    font-size:     .68rem;
    font-weight:   600;
    color:         var(--bob-clr-text-muted);
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: 999px;
    padding:       .08rem .45rem;
    margin-left:   .35rem;
    vertical-align: middle;
}
.ord-buyer-name {
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}
.ord-event-cell {
    font-size: .82rem;
    color:     var(--bob-clr-text-muted);
    max-width: 180px;
}
.ord-amount-cell {
    text-align:  right;
    font-family: var(--bob-font-ui);
    font-weight: 700;
    font-size:   .92rem;
    color:       var(--bob-clr-text);
    white-space: nowrap;
}
.ord-date-cell {
    font-size:  .78rem;
    color:      var(--bob-clr-text-muted);
    white-space: nowrap;
    line-height: 1.4;
}
.ord-date-cell span {
    font-size: .72rem;
    display:   block;
}

/* ══════════════════════════════════════════════════════════
   ORDER DETAIL PAGE  (admin/order-detail.php)
   ══════════════════════════════════════════════════════════ */

/* ── Top action bar ── */
.ord-detail-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem;
    flex-wrap:       wrap;
    background:      var(--bob-clr-card);
    border:          1px solid var(--bob-clr-border);
    border-radius:   var(--bob-r-md);
    padding:         .75rem 1.25rem;
    margin-bottom:   1rem;
}
.ord-detail-bar__left {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    flex-wrap:   wrap;
}
.ord-detail-bar__right {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
    flex-shrink: 0;
}
.ord-detail-ref {
    font-family:    var(--bob-font-ui);
    font-size:      .95rem;
    font-weight:    700;
    color:          var(--bob-clr-text);
    letter-spacing: .01em;
}

/* ── Alert banners ── */
.ord-detail-alert {
    display:       flex;
    align-items:   center;
    gap:           .65rem;
    border-radius: var(--bob-r-md);
    padding:       .75rem 1.1rem;
    font-size:     .84rem;
    margin-bottom: 1rem;
    font-weight:   500;
}
.ord-detail-alert--success {
    background: color-mix(in srgb, var(--bob-clr-success, #16a34a) 10%, var(--bob-clr-card));
    border:     1.5px solid color-mix(in srgb, var(--bob-clr-success, #16a34a) 30%, transparent);
    color:      var(--bob-clr-success, #15803d);
}
.ord-detail-alert--info {
    background: color-mix(in srgb, var(--bob-clr-primary) 8%, var(--bob-clr-card));
    border:     1.5px solid color-mix(in srgb, var(--bob-clr-primary) 25%, transparent);
    color:      var(--bob-clr-primary);
}

/* ── Layout columns ── */
.ord-detail-left  { display: flex; flex-direction: column; gap: 0; }
.ord-detail-right {
    position:       sticky;
    top:            1rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* ── Status management body ── */
.ord-detail-status-body {
    display:        flex;
    flex-direction: column;
    gap:            .875rem;
    padding:        1.1rem 1.25rem 1.25rem;
}
.ord-detail-save-btn {
    width:           100%;
    justify-content: center;
    padding:         .75rem;
    font-size:       .9rem;
    font-weight:     700;
    margin-top:      .25rem;
}

/* ── Email card inside detail page ── */
.ord-detail-email-card {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}
.ord-detail-email-btns { display: flex; flex-direction: column; gap: .5rem; }

/* ── Edit hint in card header ── */
.ord-detail-edit-hint {
    font-size:   .72rem;
    color:       var(--bob-clr-text-muted);
    font-weight: 400;
    margin-left: auto;
    font-family: var(--bob-font-body);
}

/* ── Quick links ── */
.ord-detail-links {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}
.ord-detail-link {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .83rem;
    color:       var(--bob-clr-text-muted);
    text-decoration: none;
    padding:     .35rem .5rem;
    border-radius: var(--bob-r-sm);
    transition:  background var(--bob-ease), color var(--bob-ease);
}
.ord-detail-link:hover {
    background: var(--bob-clr-accent-soft);
    color:      var(--bob-clr-primary);
}
.ord-detail-link i {
    width:      1rem;
    text-align: center;
    font-size:  .8rem;
    color:      var(--bob-clr-primary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ord-list-hdr { flex-direction: column; align-items: flex-start; }
    .ord-filter-bar { flex-direction: column; align-items: stretch; }
    .ord-detail-bar { flex-direction: column; align-items: flex-start; }
    .ord-detail-bar__right { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   CONTRIBUTIONS
   ══════════════════════════════════════════════════════════ */

/* ── Type toggle tabs (add/edit form) ── */
.contrib-type-tabs {
    display:       grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:           0;
    border-radius: var(--bob-r-md);
    overflow:      hidden;
    border:        1px solid var(--bob-clr-border);
    margin-bottom: 1.1rem;
}
.contrib-type-tab {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .45rem;
    padding:         .75rem 1rem;
    font-size:       .84rem;
    font-weight:     500;
    cursor:          pointer;
    border:          none;
    background:      var(--bob-clr-surface);
    color:           var(--bob-clr-text-muted);
    border-right:    1px solid var(--bob-clr-border);
    transition:      background var(--bob-ease), color var(--bob-ease);
    user-select:     none;
}
.contrib-type-tab:last-child { border-right: none; }
.contrib-type-tab:hover { background: var(--bob-clr-accent-soft); color: var(--bob-clr-primary); }
.contrib-type-tab.is-active--donation     { background: var(--bob-clr-success); color: #fff; }
.contrib-type-tab.is-active--advertisement{ background: var(--bob-nav-bg);      color: #fff; }
.contrib-type-tab.is-active--stall        { background: var(--bob-clr-error);   color: #fff; }

/* ── Collapsible-style section headers ── */
.contrib-section-hdr {
    display:        flex;
    align-items:    center;
    gap:            .55rem;
    padding:        .55rem 1.1rem;
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom:  1px solid var(--bob-clr-border);
}
.contrib-section-hdr--org,
.contrib-section-hdr--contact,
.contrib-section-hdr--advert {
    background: color-mix(in srgb, var(--bob-clr-primary) 8%, transparent);
    color:      var(--bob-clr-primary);
}
.contrib-section-hdr--payment {
    background: color-mix(in srgb, var(--bob-clr-success) 10%, transparent);
    color:      var(--bob-clr-success);
}
.contrib-section-hdr--stall {
    background: color-mix(in srgb, var(--bob-clr-error) 10%, transparent);
    color:      var(--bob-clr-error);
}
.contrib-section-body { padding: 1rem 1.25rem; }

/* ── Form grids ── */
.contrib-form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.contrib-form-2col { display: grid; grid-template-columns: 1fr 1fr;     gap: .75rem; }
.contrib-form-4col { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr 1.4fr; gap: .75rem; }
.contrib-form-row-mt { margin-top: .65rem; }
@media (max-width: 700px) {
    .contrib-form-3col,
    .contrib-form-2col,
    .contrib-form-4col { grid-template-columns: 1fr; }
}
.contrib-upload-hint {
    font-size:  .72rem;
    color:      var(--bob-clr-text-muted);
    margin-top: .3rem;
}

/* ── Add/Edit page layout ── */
.contrib-add-layout {
    display:               grid;
    grid-template-columns: 1fr 280px;
    gap:                   1.25rem;
    align-items:           start;
}
@media (max-width: 960px) {
    .contrib-add-layout { grid-template-columns: 1fr; }
}
.contrib-add-left  { display: flex; flex-direction: column; gap: 0; }
.contrib-add-right { display: flex; flex-direction: column; gap: .85rem; }

/* ── Info sidebar card ── */
.contrib-info-card {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}
.contrib-info-hdr {
    padding:        .6rem 1rem;
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background:     color-mix(in srgb, var(--bob-clr-primary) 10%, transparent);
    color:          var(--bob-clr-primary);
    display:        flex;
    align-items:    center;
    gap:            .4rem;
}
.contrib-info-body {
    padding:     .85rem 1rem;
    font-size:   .79rem;
    color:       var(--bob-clr-text-muted);
    line-height: 1.6;
}
.contrib-info-note {
    display:       flex;
    align-items:   flex-start;
    gap:           .45rem;
    padding:       .5rem .7rem;
    border-radius: var(--bob-r-sm);
    font-size:     .76rem;
    line-height:   1.5;
    margin-top:    .6rem;
}
.contrib-info-note--blue {
    background: color-mix(in srgb, var(--bob-clr-primary) 10%, transparent);
    color:      var(--bob-clr-primary);
}
.contrib-info-note--amber {
    background: color-mix(in srgb, var(--bob-clr-caution) 12%, transparent);
    color:      var(--bob-clr-caution);
}
.contrib-info-note i { flex-shrink: 0; margin-top: .1rem; font-size: .82rem; }

/* ── Form panel (main card) ── */
.contrib-form-card {
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    overflow:      hidden;
}
.contrib-form-card-hdr {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     .8rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.contrib-form-card-hdr h2 {
    font-size:   1rem;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.contrib-save-row {
    display:     flex;
    align-items: center;
    gap:         1rem;
    padding:     1rem 1.25rem;
    border-top:  1px solid var(--bob-clr-border);
    background:  var(--bob-clr-bg);
}
.contrib-save-row .btn-action--primary { min-width: 180px; justify-content: center; }
.contrib-cancel-link {
    font-size:  .84rem;
    color:      var(--bob-clr-text-muted);
    text-decoration: none;
    transition: color var(--bob-ease);
}
.contrib-cancel-link:hover { color: var(--bob-clr-primary); }

/* ── Manage page list tabs ── */
.contrib-list-tabs {
    display:     flex;
    gap:         .4rem;
    margin-bottom: 1rem;
    flex-wrap:   wrap;
}
.contrib-list-tab {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    padding:       .38rem .85rem;
    border-radius: var(--bob-r-full);
    font-size:     .8rem;
    font-weight:   500;
    text-decoration: none;
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    color:         var(--bob-clr-text-muted);
    transition:    background var(--bob-ease), color var(--bob-ease), border-color var(--bob-ease);
}
.contrib-list-tab:hover { background: var(--bob-clr-accent-soft); color: var(--bob-clr-primary); border-color: var(--bob-clr-primary); }
.contrib-list-tab.is-active { background: var(--bob-clr-primary); color: #fff; border-color: var(--bob-clr-primary); }
.contrib-list-tab.is-active--donation     { background: var(--bob-clr-success); border-color: var(--bob-clr-success); color: #fff; }
.contrib-list-tab.is-active--advertisement{ background: var(--bob-nav-bg);      border-color: var(--bob-nav-bg);      color: #fff; }
.contrib-list-tab.is-active--stall        { background: var(--bob-clr-error);   border-color: var(--bob-clr-error);   color: #fff; }

/* ── Manage filter bar ── */
.contrib-filter-bar {
    display:     flex;
    align-items: center;
    gap:         .65rem;
    flex-wrap:   wrap;
    padding:     .85rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.contrib-search-wrap {
    position: relative;
    flex:     1;
    min-width: 180px;
}
.contrib-search-ico {
    position:   absolute;
    left:       .75rem;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--bob-clr-text-muted);
    font-size:  .8rem;
    pointer-events: none;
}
.contrib-search-wrap .form-input { padding-left: 2.1rem; }

/* ── Manage table header ── */
.contrib-table-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .7rem 1.25rem;
    border-bottom:   1px solid var(--bob-clr-border);
    gap:             .5rem;
    flex-wrap:       wrap;
}
.contrib-table-hdr__title {
    font-size:   .88rem;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         .4rem;
    color:       var(--bob-clr-text);
}
.contrib-table-hdr__title span {
    font-weight: 400;
    color:       var(--bob-clr-text-muted);
}
.contrib-table-hdr__actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Type badges (table) ── */
.contrib-badge {
    display:     inline-flex;
    align-items: center;
    gap:         .28rem;
    padding:     .16rem .55rem;
    border-radius: var(--bob-r-full);
    font-size:   .71rem;
    font-weight: 600;
    white-space: nowrap;
    border:      1px solid transparent;
}
.contrib-badge--donation {
    background:   color-mix(in srgb, var(--bob-clr-success) 12%, transparent);
    color:        var(--bob-clr-success);
    border-color: color-mix(in srgb, var(--bob-clr-success) 30%, transparent);
}
.contrib-badge--advertisement {
    background:   color-mix(in srgb, var(--bob-clr-primary) 10%, transparent);
    color:        var(--bob-clr-primary);
    border-color: color-mix(in srgb, var(--bob-clr-primary) 25%, transparent);
}
.contrib-badge--stall {
    background:   color-mix(in srgb, var(--bob-clr-error) 10%, transparent);
    color:        var(--bob-clr-error);
    border-color: color-mix(in srgb, var(--bob-clr-error) 25%, transparent);
}
.contrib-badge__year {
    font-size:  .65rem;
    font-weight: 400;
    color:      var(--bob-clr-text-muted);
    display:    block;
    margin-top: .15rem;
}

/* ── Contributor cell ── */
.contrib-cell-name  { font-weight: 600; font-size: .86rem; color: var(--bob-clr-primary); }
.contrib-cell-email { font-size: .74rem; color: var(--bob-clr-text-muted); margin-top: .08rem; }
.contrib-cell-ref   { font-size: .69rem; color: var(--bob-clr-text-muted); font-family: var(--bob-font-ui); margin-top: .05rem; letter-spacing: .02em; }

/* ── Payment status badge ── */
.pstatus-badge {
    display:       inline-block;
    padding:       .2rem .65rem;
    border-radius: var(--bob-r-full);
    font-size:     .72rem;
    font-weight:   600;
}
.pstatus-badge--completed { background: color-mix(in srgb, var(--bob-clr-success) 12%, transparent); color: var(--bob-clr-success); }
.pstatus-badge--pending   { background: color-mix(in srgb, var(--bob-clr-caution) 12%, transparent); color: var(--bob-clr-caution); }
.pstatus-badge--failed    { background: color-mix(in srgb, var(--bob-clr-error) 12%, transparent);   color: var(--bob-clr-error); }
.pstatus-badge--refunded  { background: color-mix(in srgb, var(--bob-clr-text-muted) 15%, transparent); color: var(--bob-clr-text-muted); }

/* ── Page header row (manage page) ── */
.contrib-page-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.25rem;
    gap:             1rem;
    flex-wrap:       wrap;
}
.contrib-page-hdr__title { font-size: 1.1rem; font-weight: 700; }
.contrib-page-hdr__sub   { font-size: .82rem; color: var(--bob-clr-text-muted); margin-top: .15rem; }

/* ── Table row hover (reuse evatt-table on manage page) ── */
.contrib-tr { cursor: default; }
.contrib-tr:hover td { background: var(--bob-clr-accent-soft); }

/* ── Responsive contributions ── */
@media (max-width: 768px) {
    .contrib-add-layout { grid-template-columns: 1fr; }
    .contrib-form-4col  { grid-template-columns: 1fr 1fr; }
    .contrib-table-hdr  { flex-direction: column; align-items: flex-start; }
    .contrib-table-hdr__actions { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════ */

/* ── Greeting banner ──────────────────────────────────── */
.dash-banner {
    background:      var(--bob-gradient-brand);
    border-radius:   var(--bob-r-md);
    padding:         1.5rem 2rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
}
.dash-banner__left {}
.dash-banner__greeting {
    font-family:    var(--bob-font-ui);
    font-size:      0.72rem;
    font-weight:    600;
    color:          rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom:  0.2rem;
}
.dash-banner__name {
    font-family:   var(--bob-font-display);
    font-size:     1.8rem;
    font-weight:   700;
    color:         #fff;
    margin-bottom: 0.4rem;
    line-height:   1.15;
}
.dash-banner__meta {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    font-family: var(--bob-font-ui);
    font-size:   0.78rem;
    color:       rgba(255,255,255,.65);
}
.dash-banner__meta i { opacity: .8; }
.dash-banner__meta-sep { opacity: .35; }
.dash-banner__right {
    display:    flex;
    gap:        0.75rem;
    flex-shrink: 0;
}
.dash-banner__btn {
    display:      inline-flex;
    align-items:  center;
    gap:          0.45rem;
    padding:      0.55rem 1.15rem;
    border-radius: var(--bob-r-sm);
    font-family:  var(--bob-font-ui);
    font-size:    0.82rem;
    font-weight:  600;
    text-decoration: none;
    transition:   background var(--bob-ease), transform var(--bob-ease);
    white-space:  nowrap;
}
.dash-banner__btn--primary {
    background: rgba(255,255,255,.2);
    color:      #fff;
    border:     1px solid rgba(255,255,255,.28);
}
.dash-banner__btn--primary:hover {
    background: rgba(255,255,255,.3);
    transform:  translateY(-1px);
}
.dash-banner__btn--outline {
    background: transparent;
    color:      rgba(255,255,255,.88);
    border:     1px solid rgba(255,255,255,.22);
}
.dash-banner__btn--outline:hover {
    background: rgba(255,255,255,.1);
    color:      #fff;
}

/* ── Sub-label on dark stat cards ─────────────────────── */
.stat-card--dark .dash-stat-sub {
    font-family:  var(--bob-font-ui);
    font-size:    0.72rem;
    color:        rgba(255,255,255,.65);
    margin-top:   0.35rem;
    display:      flex;
    align-items:  center;
    gap:          0.4rem;
    flex-wrap:    wrap;
}
.dash-stat-sub__paid { color: rgba(255,255,255,.88); }
.dash-stat-sub__sep  { opacity: .5; }

/* ── Main two-column layout ───────────────────────────── */
.dash-layout {
    display:               grid;
    grid-template-columns: 3fr 2fr;
    gap:                   1.25rem;
    align-items:           start;
    margin-bottom:         1.5rem;
}
.dash-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

/* ── Upcoming events list ─────────────────────────────── */
.dash-event-item {
    display:     flex;
    align-items: flex-start;
    gap:         0.85rem;
    padding:     0.75rem 1rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.dash-event-item:last-child { border-bottom: none; }

.dash-date-chip {
    background:     var(--bob-clr-accent-soft);
    color:          var(--bob-clr-primary);
    border-radius:  var(--bob-r-sm);
    padding:        0.25rem 0.5rem;
    text-align:     center;
    font-family:    var(--bob-font-ui);
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    min-width:      36px;
    flex-shrink:    0;
    line-height:    1.3;
}
.dash-date-chip__day {
    font-size:   1.05rem;
    font-weight: 800;
    display:     block;
    line-height: 1.1;
}

.dash-event-info { flex: 1; min-width: 0; }
.dash-event-info__title {
    font-weight:   600;
    font-size:     0.86rem;
    color:         var(--bob-clr-text);
    margin-bottom: 0.15rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.dash-event-info__venue {
    font-size: 0.73rem;
    color:     var(--bob-clr-text-muted);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.dash-event-info__venue i { margin-right: 0.2rem; }

/* ── Recent members list ──────────────────────────────── */
.dash-member-item {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     0.65rem 1rem;
    border-bottom: 1px solid var(--bob-clr-border);
}
.dash-member-item:last-child { border-bottom: none; }

.dash-avatar {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    var(--bob-clr-accent-soft);
    color:         var(--bob-clr-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   var(--bob-font-ui);
    font-size:     0.72rem;
    font-weight:   700;
    flex-shrink:   0;
    text-transform: uppercase;
    border:        1px solid var(--bob-clr-border);
}

.dash-member-info { flex: 1; min-width: 0; }
.dash-member-info__name {
    font-weight:   600;
    font-size:     0.86rem;
    color:         var(--bob-clr-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.dash-member-info__type {
    font-size:  0.72rem;
    color:      var(--bob-clr-text-muted);
    margin-top: 0.05rem;
}

/* ── Quick Access ─────────────────────────────────────── */
.dash-qa-section { margin-top: 0; }
.dash-qa-grid {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   1rem;
}
.dash-qa-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.6rem;
    padding:         1.25rem 0.75rem;
    background:      var(--bob-clr-surface);
    border:          1px solid var(--bob-clr-border);
    border-radius:   var(--bob-r-md);
    text-decoration: none;
    transition:      box-shadow var(--bob-ease), transform var(--bob-ease), border-color var(--bob-ease);
    cursor:          pointer;
}
.dash-qa-card:hover {
    box-shadow:   var(--bob-shadow-sm);
    transform:    translateY(-2px);
    border-color: var(--bob-clr-primary);
}

.dash-qa-icon {
    width:           44px;
    height:          44px;
    border-radius:   var(--bob-r-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
}
.dash-qa-icon--primary { background: var(--bob-clr-accent-soft);  color: var(--bob-clr-primary); }
.dash-qa-icon--success { background: var(--bob-clr-success-bg);   color: var(--bob-clr-success); }
.dash-qa-icon--info    { background: color-mix(in srgb, var(--bob-clr-secondary) 12%, transparent); color: var(--bob-clr-secondary); }
.dash-qa-icon--accent  { background: color-mix(in srgb, var(--bob-clr-accent) 18%, transparent);   color: var(--bob-clr-accent); filter: brightness(.85); }
.dash-qa-icon--caution { background: color-mix(in srgb, var(--bob-clr-caution, #d97706) 12%, transparent); color: var(--bob-clr-caution, #92400e); }
.dash-qa-icon--muted   { background: var(--bob-clr-bg); color: var(--bob-clr-text-muted); }

.dash-qa-label {
    font-family:    var(--bob-font-ui);
    font-size:      0.72rem;
    font-weight:    600;
    color:          var(--bob-clr-text);
    text-align:     center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Dashboard responsive ─────────────────────────────── */
@media (max-width: 1024px) {
    .dash-qa-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .dash-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dash-banner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .dash-banner__right { width: 100%; }
    .dash-banner__btn { flex: 1; justify-content: center; }
    .dash-banner__name { font-size: 1.4rem; }
    .dash-qa-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   EMAIL BLASTS
   ══════════════════════════════════════════════════════════ */

/* ── Stat row (3 cards) ───────────────────────────────── */
.email-stats-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.25rem;
    margin-bottom:         1.5rem;
}
.email-stat-card {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    background:    var(--bob-clr-surface);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-md);
    padding:       1.1rem 1.4rem;
}
.email-stat-card__icon {
    width:           46px;
    height:          46px;
    border-radius:   var(--bob-r-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.15rem;
    flex-shrink:     0;
}
.email-stat-card--a .email-stat-card__icon { background: var(--bob-clr-accent-soft);  color: var(--bob-clr-primary); }
.email-stat-card--b .email-stat-card__icon { background: var(--bob-clr-success-bg);   color: var(--bob-clr-success); }
.email-stat-card--c .email-stat-card__icon { background: color-mix(in srgb, var(--bob-clr-secondary) 12%, transparent); color: var(--bob-clr-secondary); }
.email-stat-card__value {
    font-family: var(--bob-font-display);
    font-size:   1.8rem;
    font-weight: 700;
    color:       var(--bob-clr-text);
    line-height: 1;
    margin-bottom: 0.2rem;
}
.email-stat-card__label {
    font-family:    var(--bob-font-ui);
    font-size:      0.72rem;
    font-weight:    600;
    color:          var(--bob-clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── From + Fiscal Year 2-col row ─────────────────────── */
.email-from-year-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.25rem;
    margin-bottom:         1.25rem;
    align-items:           start;
}

/* ── From read-only display ───────────────────────────── */
.email-from-field {
    background:    var(--bob-clr-bg);
    border:        1px solid var(--bob-clr-border);
    border-radius: var(--bob-r-sm);
    padding:       0.55rem 0.85rem;
    font-size:     0.875rem;
    color:         var(--bob-clr-text-muted);
    font-family:   var(--bob-font-ui);
}

/* ── Template picker row ──────────────────────────────── */
.email-tpl-row {
    display:     flex;
    gap:         0.75rem;
    align-items: center;
}
.email-tpl-row .form-select { flex: 1; }
.email-tpl-link {
    display:      inline-flex;
    align-items:  center;
    gap:          0.35rem;
    font-family:  var(--bob-font-ui);
    font-size:    0.8rem;
    font-weight:  500;
    color:        var(--bob-clr-secondary);
    white-space:  nowrap;
    text-decoration: none;
    transition:   color var(--bob-ease);
}
.email-tpl-link:hover { color: var(--bob-clr-primary); }

/* ── Form hint ────────────────────────────────────────── */
.form-hint {
    font-size:  0.72rem;
    color:      var(--bob-clr-text-muted);
    margin-top: 0.3rem;
    margin-bottom: 0;
}
.req { color: var(--bob-clr-error); margin-left: 1px; }

/* ── Actions row (bottom of compose) ─────────────────── */
.email-actions-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      1.25rem;
    padding-top:     1rem;
    border-top:      1px solid var(--bob-clr-border);
    gap:             1rem;
    flex-wrap:       wrap;
}
.email-recipient-hint {
    font-family: var(--bob-font-ui);
    font-size:   0.8rem;
    font-weight: 500;
    color:       var(--bob-clr-text-muted);
}

/* ── Send-to group badges (history table) ─────────────── */
.email-group-badge {
    display:        inline-flex;
    align-items:    center;
    font-family:    var(--bob-font-ui);
    font-size:      0.72rem;
    font-weight:    600;
    padding:        0.2rem 0.65rem;
    border-radius:  var(--bob-r-pill);
    white-space:    nowrap;
}
.ebadge--all      { background: var(--bob-clr-accent-soft);  color: var(--bob-clr-primary); }
.ebadge--members  { background: var(--bob-clr-success-bg);   color: var(--bob-clr-success); }
.ebadge--ec       { background: color-mix(in srgb, var(--bob-clr-secondary) 12%, transparent); color: var(--bob-clr-secondary); }
.ebadge--advisory { background: color-mix(in srgb, var(--bob-clr-highlight) 18%, transparent); color: color-mix(in srgb, var(--bob-clr-highlight) 70%, #000); }
.ebadge--subs     { background: var(--bob-clr-bg); color: var(--bob-clr-text-muted); border: 1px solid var(--bob-clr-border); }

/* ── Danger button modifier ───────────────────────────── */
.btn-action--danger { color: var(--bob-clr-error) !important; border-color: color-mix(in srgb, var(--bob-clr-error) 30%, transparent) !important; }
.btn-action--danger:hover { background: var(--bob-clr-error-bg) !important; border-color: var(--bob-clr-error) !important; }

/* ── Preview modal ────────────────────────────────────── */
.email-preview-modal {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         900;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--bob-ease);
    padding:         1.5rem;
}
.email-preview-modal.is-open {
    opacity:        1;
    pointer-events: all;
}
.email-preview-modal__inner {
    background:    var(--bob-clr-surface);
    border-radius: var(--bob-r-md);
    box-shadow:    var(--bob-shadow-lg);
    width:         100%;
    max-width:     700px;
    max-height:    90vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
}
.email-preview-modal__head {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       0.85rem 1.25rem;
    border-bottom: 1px solid var(--bob-clr-border);
    flex-shrink:   0;
}
.email-preview-modal__title {
    font-family: var(--bob-font-ui);
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--bob-clr-text);
}
.email-preview-modal__close {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--bob-clr-text-muted);
    font-size:     1rem;
    padding:       0.25rem 0.4rem;
    border-radius: var(--bob-r-sm);
    transition:    background var(--bob-ease), color var(--bob-ease);
}
.email-preview-modal__close:hover { background: var(--bob-clr-error-bg); color: var(--bob-clr-error); }
.email-preview-modal__frame {
    flex:   1;
    border: none;
    width:  100%;
}

/* ── Template form grid ───────────────────────────────── */
.email-tpl-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
    margin-bottom:         0;
}

/* ── Email responsive ─────────────────────────────────── */
@media (max-width: 900px) {
    .email-stats-row     { grid-template-columns: 1fr 1fr; }
    .email-from-year-row { grid-template-columns: 1fr; }
    .email-tpl-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .email-stats-row { grid-template-columns: 1fr; }
    .email-tpl-row   { flex-direction: column; align-items: stretch; }
}