/* ================================================================
   PRO WRESTLING ZENITH — Admin Panel
   Sidebar: dark navy/purple brand
   Content: light (#f1f5f8) with white cards, dark text
   All colours overridable via Settings CSS vars
   ================================================================ */

/* ── Rupert Display — local font for headings and nav ─────────── */
@font-face {
    font-family: 'RupertDisplay';
    src: url('../fonts/Rupert-Display.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Fonts loaded dynamically by Settings::renderCssVars() */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── Sidebar (always dark — brand colours) ── */
    --brand-dark:    #1d1238;
    --brand-mid:     #2a1a52;
    --brand-purple:  #3A2470;
    --brand-accent:  #6c3fc5;
    --brand-light:   #a07ee8;

    /* ── Content area (light defaults) ── */
    --bg:            #f1f5f8;
    --surface:       #ffffff;
    --surface-2:     #f8f9fa;
    --border:        #dee2e6;
    --border-2:      #ced4da;
    --text:          #212529;
    --text-muted:    #6c757d;
    --heading-color: #1a1a2e;

    /* ── Topbar ── */
    --topbar-bg:     #1d1238;
    --topbar-border: rgba(255,255,255,0.08);

    /* ── Typography ── */
    --body-font:      'Inter', sans-serif;
    --heading-font:   'Saira', sans-serif;
    --body-font-size: 14px;

    /* ── Layout ── */
    --sidebar-w:  280px;
    --topbar-h:   54px;
    --radius:     8px;
    --radius-sm:  5px;
    --ease:       0.22s ease;
}

/* ── Base ─────────────────────────────────────────────────────── */
html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body-font);
    font-size: var(--body-font-size);
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--heading-font);
    font-weight: 600;
    color: var(--heading-color);
}

a { color: var(--brand-accent); text-decoration: none; }
a:hover { color: var(--brand-purple); }

/* ── Layout ───────────────────────────────────────────────────── */
#wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────── */
#sidebar-wrapper {
    position: fixed; top: 0; left: 0; z-index: 1050;
    width: var(--sidebar-w); height: 100%;
    background: var(--brand-dark);
    background-image: url('../img/bg.png');
    background-size: cover; background-blend-mode: multiply;
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(calc(-1 * var(--sidebar-w)));
    transition: transform var(--ease);
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
}
#wrapper.sidebar-open #sidebar-wrapper { transform: translateX(0); }

.sidebar-brand {
    padding: 22px 20px 16px; text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.sidebar-brand img {
    width: 200px; display: block; margin: 0 auto;
    filter: drop-shadow(0 0 8px rgba(160,126,232,0.25));
}

/* Accordion nav */
#accordian { flex: 1; list-style: none; margin: 8px 0 0; padding: 0; }
#accordian > li { border-bottom: 1px solid rgba(255,255,255,0.05); }
#accordian > li > h3 {
    margin: 0; padding: 0; font-size: 11px; font-weight: 700;
    font-family: var(--heading-font); letter-spacing: 0.07em; text-transform: uppercase;
}
#accordian > li > h3 > a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px 12px 15px;                  /* 3px border + 15 = 18 text inset */
    color: rgba(255,255,255,0.75);
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
#accordian > li > h3 > a:hover {
    background: var(--brand-purple); color: #fff;
}
/* Top-level .active state — see active-state highlight system below */
.nav-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }

/* Bootstrap puts padding-left on <ul>; cancel it here and move the indent
   onto the sub-menu <li> instead so the indent belongs to each row. */
#accordian ul { list-style: none; display: none; background: rgba(0,0,0,0.18); padding-left: 0; }
#accordian ul li {  }
#accordian li.active > ul { display: block; }
#accordian ul li a {
    display: block; 
	padding: 8px 18px 8px 46px;
    font-size: 12.5px; color: rgba(255,255,255,0.6);
    font-family: var(--body-font);
    border-left: 3px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
#accordian ul li a:hover { background: rgba(255,255,255,0.05); color: #fff; }
#accordian ul li a.active {
    background: rgba(108,63,197,0.25); color: #fff;
    border-left-color: var(--brand-accent);
}

.sidebar-footer {
    padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px; color: rgba(255,255,255,0.35);
    display: flex; justify-content: space-between; flex-shrink: 0;
}

/* ── Top bar ──────────────────────────────────────────────────── */
#page-content-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#wrapper.sidebar-open #page-content-wrapper { margin-left: var(--sidebar-w); }

#admin-topbar {
    height: var(--topbar-h);
    background: var(--brand-dark);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px; position: sticky; top: 0; z-index: 100; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

#member-topbar {
    background: var(--brand-dark);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; gap: 14px;
    padding: 10px 20px; position: sticky; top: 0; z-index: 100; flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.btn-menu-toggle {
    background: transparent; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px; padding: 6px 8px; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px;
    transition: background var(--ease);
}
.btn-menu-toggle:hover { background: var(--brand-purple); border-color: var(--brand-purple); }
.btn-menu-toggle span {
    display: block; width: 17px; height: 2px;
    background: rgba(255,255,255,0.8); border-radius: 1px;
}

.topbar-title {
    font-family: var(--heading-font); font-size: 14px;
    font-weight: 600; color: rgba(255,255,255,0.9);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 5px; }

/* ── Topbar icon buttons ──────────────────────────────────────── */
.topbar-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 33px; height: 33px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12); background: transparent;
    color: rgba(255,255,255,0.65); cursor: pointer;
    transition: all var(--ease); text-decoration: none; position: relative;
}
.topbar-icon-btn:hover {
    background: var(--brand-purple); color: #fff;
    border-color: var(--brand-purple);
}
.topbar-icon-btn svg {
    width: 16px; height: 16px; fill: none;
    stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.topbar-icon-btn .notif-dot {
    position: absolute; top: 5px; right: 5px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #e84393; border: 1.5px solid var(--brand-dark);
}

/* ── Content area ─────────────────────────────────────────────── */
#page-content-inner { flex: 1; padding: 24px 28px; }

/* ── Content header ───────────────────────────────────────────── */
.content-header { margin-bottom: 22px; }
.content-header .d-flex { display: flex; }
.content-header h2 { font-size: 20px; margin: 0 0 3px; color: var(--heading-color); }
.content-header .subtitle { color: var(--text-muted); font-size: 13px; }
.header-actions { display: flex; gap: 8px; align-items: flex-start; }
.d-flex { display: flex; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }

/* ── Flash messages ───────────────────────────────────────────── */
.flash-message {
    padding: 11px 15px; border-radius: var(--radius);
    margin-bottom: 18px; font-size: 13px; font-weight: 500;
    border-left: 4px solid;
}
.flash-success {
    background: #d1fae5; color: #065f46;
    border-color: #10b981;
}
.flash-error {
    background: #fee2e2; color: #991b1b;
    border-color: #ef4444;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-admin {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px;
    font-weight: 500; cursor: pointer; border: 1px solid transparent;
    transition: all var(--ease); white-space: nowrap; text-decoration: none;
    font-family: var(--body-font);
}
.btn-primary-admin {
    background: var(--brand-accent); color: #fff; border-color: var(--brand-accent);
}
.btn-primary-admin:hover { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }

.btn-secondary-admin {
    background: #fff; color: #495057; border-color: var(--border-2);
}
.btn-secondary-admin:hover { background: var(--surface-2); color: var(--heading-color); }

.btn-danger-admin {
    background: #fff5f5; color: #c0392b; border-color: #f5c6cb;
}
.btn-danger-admin:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

.btn-sm-admin { padding: 4px 10px; font-size: 12px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card-admin {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.card-title {
    font-family: var(--heading-font); font-size: 13px; font-weight: 700;
    color: var(--heading-color); margin-bottom: 16px; padding-bottom: 11px;
    border-bottom: 1px solid var(--border); text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Stat cards ───────────────────────────────────────────────── */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
    position: relative; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow var(--ease);
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--accent-color, var(--brand-accent));
}
.stat-label {
    font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 6px; font-weight: 600;
}
.stat-value {
    font-family: var(--heading-font); font-size: 26px;
    font-weight: 700; line-height: 1; color: var(--heading-color);
}
.stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.stat-icon {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); font-size: 26px; opacity: 0.08;
}

.accent-events    { --accent-color: #f0a500; }
.accent-matches   { --accent-color: #e84393; }
.accent-venues    { --accent-color: #00b894; }
.accent-social    { --accent-color: #1877F2; }
.accent-wrestlers { --accent-color: var(--brand-accent); }
.accent-green     { --accent-color: #00b894; }
.accent-amber     { --accent-color: #f0a500; }
.accent-red       { --accent-color: #e84393; }

/* ── Tables ───────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto; border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.table-admin { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-admin thead th {
    background: #f8f9fa; color: #495057;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; padding: 10px 13px;
    border-bottom: 2px solid var(--border); white-space: nowrap;
    text-align: left;
}
.table-admin tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background var(--ease);
}
.table-admin tbody tr:last-child { border-bottom: none; }
.table-admin tbody tr:hover { background: #f8f9ff; cursor: pointer; }
.table-admin td { padding: 10px 13px; vertical-align: middle; color: var(--text); }
.table-admin td.text-right { text-align: right; }
.table-admin td.text-center { text-align: center; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge-status {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    white-space: nowrap;
}
.badge-upcoming  { background: #ede9fe; color: #5b21b6; }
.badge-past      { background: #f3f4f6; color: #6b7280; }
.badge-yes       { background: #d1fae5; color: #065f46; }
.badge-no        { background: #f3f4f6; color: #6b7280; }
.badge-draft     { background: #fef3c7; color: #92400e; }
.badge-singles   { background: #fef3c7; color: #92400e; }
.badge-tag       { background: #d1fae5; color: #065f46; }
.badge-triple    { background: #fce7f3; color: #9d174d; }
.badge-fatal4    { background: #fee2e2; color: #991b1b; }
.badge-other     { background: #f3f4f6; color: #6b7280; }

/* ── Helper status badges (cycle) ────────────────────────────── */
.helper-status {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;
    cursor: pointer; user-select: none; border: none; outline: none;
    transition: opacity var(--ease), transform var(--ease);
    white-space: nowrap;
}
.helper-status:hover  { opacity: 0.8; transform: scale(0.97); }
.helper-status:active { transform: scale(0.93); }
.helper-status.hs-not_joined { background: rgba(0,0,0,0.06); color: #64748b; }
.helper-status.hs-pending    { background: #fef3c7; color: #92400e; }
.helper-status.hs-joined     { background: #d1fae5; color: #065f46; }
.helper-status.hs-banned     { background: #fee2e2; color: #991b1b; }

/* Legacy .helper-badge alias (profile page) */
.helper-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;
    cursor: pointer; user-select: none; border: none; outline: none;
    transition: opacity var(--ease), transform var(--ease);
    white-space: nowrap;
}
.helper-badge:hover  { opacity: 0.8; transform: scale(0.97); }
.helper-badge:active { transform: scale(0.93); }
.helper-badge[data-status="not_joined"] { background: rgba(0,0,0,0.06); color: #64748b; }
.helper-badge[data-status="pending"]    { background: #fef3c7; color: #92400e; }
.helper-badge[data-status="joined"]     { background: #d1fae5; color: #065f46; }
.helper-badge[data-status="banned"]     { background: #fee2e2; color: #991b1b; }

/* Helper column header */
.th-helper {
    text-align: center !important;
    min-width: 90px; max-width: 110px;
}
.helper-th-inner {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.helper-colour-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; border: 1px solid rgba(0,0,0,0.15);
}
.helper-td { text-align: center; padding: 8px 6px !important; }

/* ── Helper toggle pills (above table) ───────────────────────── */
.helper-toggles {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: 12px;
}
.helper-toggle-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
    cursor: pointer; border: 2px solid transparent;
    transition: all var(--ease); user-select: none;
    opacity: 0.45;
}
.helper-toggle-pill.active { opacity: 1; border-color: rgba(0,0,0,0.2); }
.helper-toggle-pill .pill-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
}
.helper-toggle-label { font-size: 11px; color: var(--text-muted); margin-right: 4px; }

/* ── Area filter bar ──────────────────────────────────────────── */
.filter-bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.filter-bar label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.filter-bar select {
    padding: 6px 28px 6px 10px; border: 1px solid var(--border-2);
    border-radius: var(--radius-sm); background: #fff; color: var(--text);
    font-size: 13px; font-family: var(--body-font); cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.filter-bar select:focus { outline: none; border-color: var(--brand-accent); }

/* ── Row actions ──────────────────────────────────────────────── */
.row-actions { display: flex; gap: 5px; align-items: center; }
.action-link {
    font-size: 12px; padding: 3px 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-2); color: #495057;
    transition: all var(--ease); white-space: nowrap; background: #fff;
}
.action-link:hover {
    color: #fff; background: var(--brand-accent);
    border-color: var(--brand-accent);
}
.action-link.danger { color: #c0392b; border-color: #f5c6cb; background: #fff5f5; }
.action-link.danger:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

/* ── Forms ────────────────────────────────────────────────────── */
.form-grid { display: grid; gap: 0 22px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: #495057; margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="color"],
.form-group textarea,
.form-group select {
    width: 100%; background: #fff; border: 1px solid var(--border-2);
    border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px;
    font-size: 13px; font-family: var(--body-font);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none; border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(108,63,197,0.12);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
    padding-right: 30px; background-color: #fff;
}
.form-group input[type="color"] {
    padding: 2px 4px; height: 38px; cursor: pointer;
}

.form-help { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.form-section-title {
    font-family: var(--heading-font); font-size: 12px; font-weight: 700;
    color: var(--brand-accent); text-transform: uppercase; letter-spacing: 0.07em;
    margin: 22px 0 12px; padding-bottom: 7px; border-bottom: 2px solid #ede9fe;
    grid-column: 1 / -1;
}
.form-actions {
    display: flex; gap: 8px; align-items: center;
    padding-top: 6px; grid-column: 1 / -1;
}

/* ── Match competitor rows ────────────────────────────────────── */
.competitor-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 40px;
    gap: 10px; align-items: end; margin-bottom: 8px;
    padding: 11px; background: var(--surface-2);
    border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.competitor-row .form-group { margin-bottom: 0; }
.btn-remove-competitor {
    background: #fff5f5; border: 1px solid #f5c6cb;
    color: #c0392b; border-radius: var(--radius-sm); padding: 7px;
    cursor: pointer; font-size: 13px; transition: all var(--ease);
    align-self: flex-end; height: 36px;
}
.btn-remove-competitor:hover { background: #c0392b; color: #fff; }

/* ── Profile sections ─────────────────────────────────────────── */
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.meta-chip {
    font-size: 12px; padding: 4px 10px; border-radius: 20px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-muted);
}
.meta-chip strong { color: var(--text); }

.match-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow var(--ease);
}
.match-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.match-card-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 8px;
}
.match-number {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 3px; font-weight: 600;
}
.match-name {
    font-family: var(--heading-font); font-size: 14px;
    font-weight: 600; color: var(--heading-color);
}
.match-competitors { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.match-winner { color: #f0a500; font-weight: 600; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination { display: flex; gap: 3px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm);
    font-size: 13px; border: 1px solid var(--border-2);
    background: #fff; color: #495057; transition: all var(--ease);
}
.page-btn:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.page-current {
    background: var(--brand-accent); color: #fff;
    border-color: var(--brand-accent); font-weight: 600;
}
.page-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.page-ellipsis { color: var(--text-muted); padding: 0 3px; }
.pagination-info { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 44px 24px; color: var(--text-muted); }
.empty-state-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.35; }
.empty-state p { margin-bottom: 14px; font-size: 14px; }

/* ── Danger zone ──────────────────────────────────────────────── */
.danger-zone {
    border: 1px solid #f5c6cb; border-radius: var(--radius);
    padding: 16px 18px; margin-top: 22px; background: #fff5f5;
}
.danger-zone h4 {
    color: #c0392b; font-size: 12px; margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.danger-zone p { font-size: 13px; color: #6b7280; margin-bottom: 10px; }

/* ── Settings drawer ──────────────────────────────────────────── */
#settings-drawer {
    position: fixed; top: 0; right: 0; z-index: 2000;
    width: 380px; height: 100vh;
    background: #fff; border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--ease);
    box-shadow: -6px 0 24px rgba(0,0,0,0.12);
}
#settings-drawer.open { transform: translateX(0); }

.settings-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
    flex-shrink: 0; background: var(--brand-dark);
}
.settings-drawer-header h3 {
    font-family: var(--heading-font); font-size: 14px;
    font-weight: 700; margin: 0; color: #fff;
}
.settings-drawer-close {
    background: transparent; border: none; color: rgba(255,255,255,0.6);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 2px;
    transition: color var(--ease);
}
.settings-drawer-close:hover { color: #fff; }

.settings-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }

.settings-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--brand-accent);
    margin: 18px 0 10px; padding-bottom: 5px;
    border-bottom: 2px solid #ede9fe;
}
.settings-section-label:first-child { margin-top: 0; }

.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 10px;
}
.settings-row label {
    font-size: 12px; color: var(--text-muted);
    flex-shrink: 0; min-width: 120px;
}
.settings-color-wrap { display: flex; align-items: center; gap: 7px; flex: 1; }
.settings-color-wrap input[type="color"] {
    width: 34px; height: 34px; padding: 2px; border-radius: 5px;
    border: 1px solid var(--border-2); cursor: pointer; flex-shrink: 0;
}
.settings-color-wrap input[type="text"] {
    flex: 1; border: 1px solid var(--border); border-radius: 5px;
    color: var(--text); padding: 5px 9px; font-size: 12px;
    font-family: monospace; background: #fff;
}
.settings-color-wrap input[type="text"]:focus { outline: none; border-color: var(--brand-accent); }

.settings-select {
    flex: 1; background: #fff; border: 1px solid var(--border);
    border-radius: 5px; color: var(--text); padding: 6px 9px;
    font-size: 12px; appearance: none; cursor: pointer;
}
.settings-select:focus { outline: none; border-color: var(--brand-accent); }

.settings-number {
    width: 65px; background: #fff; border: 1px solid var(--border);
    border-radius: 5px; color: var(--text); padding: 6px 9px;
    font-size: 12px; text-align: center;
}
.settings-number:focus { outline: none; border-color: var(--brand-accent); }

.logo-upload-area {
    border: 2px dashed var(--border-2); border-radius: var(--radius);
    padding: 14px; text-align: center; cursor: pointer;
    transition: border-color var(--ease); position: relative;
}
.logo-upload-area:hover { border-color: var(--brand-accent); }
.logo-upload-area input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.logo-upload-area img { max-height: 48px; max-width: 170px; display: block; margin: 0 auto 6px; }
.logo-upload-label { font-size: 11px; color: var(--text-muted); }

.settings-drawer-footer {
    padding: 14px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
    display: flex; gap: 8px;
}
.settings-drawer-footer button { flex: 1; }

#settings-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 1999; display: none;
}
#settings-backdrop.open { display: block; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    #page-content-inner { padding: 14px; }
    #wrapper.sidebar-open #page-content-wrapper { margin-left: 0; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    #settings-drawer { width: 100vw; }
}
.hs-not_joined { background: rgba(0,0,0,0.06); color: #64748b; }
.hs-pending    { background: #fef3c7; color: #92400e; }
.hs-joined     { background: #d1fae5; color: #065f46; }
.hs-banned     { background: #fee2e2; color: #991b1b; }

/* ── Helper column header ────────────────────────────────────── */
.helper-col-header { min-width:85px; max-width:110px; text-align:center !important; }
.helper-col-cell   { text-align:center; padding:8px 6px !important; }

/* ── Helper pill selector ────────────────────────────────────── */
.helper-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:center; }
.helper-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:2px solid transparent; transition:all var(--ease); user-select:none; color:#fff; opacity:.4; }
.helper-pill.active { opacity:1; border-color:rgba(0,0,0,0.18); box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.helper-pill.at-max { cursor:not-allowed; }
.helper-pills-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-right:4px; flex-shrink:0; }

/* ── Filter bar ──────────────────────────────────────────────── */
.filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; background:#fff; padding:12px 16px; border-radius:var(--radius); border:1px solid var(--border); box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.filter-bar label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.filter-bar select { background:#fff; border:1px solid var(--border-2); border-radius:6px; color:var(--text); padding:6px 28px 6px 10px; font-size:13px; appearance:none; cursor:pointer; font-family:var(--body-font); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.filter-bar select:focus { outline:none; border-color:var(--brand-accent); }

/* ── Row actions ─────────────────────────────────────────────── */
.row-actions { display:flex; gap:5px; align-items:center; }
.action-link { font-size:12px; padding:3px 9px; border-radius:5px; border:1px solid var(--border-2); color:var(--text-muted); background:#fff; transition:all var(--ease); white-space:nowrap; }
.action-link:hover { color:var(--brand-accent); border-color:var(--brand-accent); background:#f5f3ff; }
.action-link.danger { color:#dc2626; border-color:#fca5a5; background:#fef2f2; }
.action-link.danger:hover { background:#dc2626; color:#fff; border-color:#dc2626; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-grid { display:grid; gap:0 24px; }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-grid-3 { grid-template-columns:1fr 1fr 1fr; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; }
.form-group input[type="text"],.form-group input[type="url"],.form-group input[type="number"],.form-group input[type="date"],.form-group input[type="datetime-local"],.form-group input[type="color"],.form-group textarea,.form-group select { width:100%; background:#fff; border:1px solid var(--border-2); border-radius:6px; color:var(--text); padding:9px 12px; font-size:13px; font-family:var(--body-font); transition:border-color var(--ease),box-shadow var(--ease); }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(108,63,197,.1); }
.form-group input[type="color"] { padding:2px; height:38px; cursor:pointer; }
.form-group textarea { resize:vertical; min-height:100px; }
.form-group select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.form-help { font-size:11px; color:var(--text-muted); margin-top:5px; }
.form-section-title { font-family:var(--heading-font); font-size:12px; font-weight:700; color:var(--brand-accent); text-transform:uppercase; letter-spacing:.07em; margin:24px 0 14px; padding-bottom:8px; border-bottom:2px solid #ede9fe; grid-column:1/-1; }
.form-actions { display:flex; gap:10px; align-items:center; padding-top:8px; grid-column:1/-1; }

/* ── Competitor rows ─────────────────────────────────────────── */
.competitor-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 40px; gap:10px; align-items:end; margin-bottom:10px; padding:12px; background:var(--surface-2); border-radius:7px; border:1px solid var(--border); }
.competitor-row .form-group { margin-bottom:0; }
.btn-remove-competitor { background:#fef2f2; border:1px solid #fca5a5; color:#dc2626; border-radius:6px; padding:8px; cursor:pointer; font-size:14px; transition:all var(--ease); align-self:flex-end; height:38px; }
.btn-remove-competitor:hover { background:#dc2626; color:#fff; border-color:#dc2626; }

/* ── Profile meta ────────────────────────────────────────────── */
.profile-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.meta-chip { font-size:12px; padding:4px 10px; border-radius:20px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); }
.meta-chip strong { color:var(--text); }

/* ── Match cards ─────────────────────────────────────────────── */
.match-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:10px; transition:box-shadow var(--ease); box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.match-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
.match-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.match-number { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.match-name { font-family:var(--heading-font); font-size:15px; font-weight:600; color:var(--heading-color); }
.match-competitors { font-size:13px; color:var(--text-muted); margin-top:4px; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; gap:4px; align-items:center; margin-top:20px; flex-wrap:wrap; }
.page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:6px; font-size:13px; border:1px solid var(--border); background:#fff; color:var(--text-muted); transition:all var(--ease); }
.page-btn:hover { border-color:var(--brand-accent); color:var(--brand-accent); background:#f5f3ff; }
.page-current { background:var(--brand-accent); color:#fff; border-color:var(--brand-accent); font-weight:600; }
.page-disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
.page-ellipsis { color:var(--text-muted); padding:0 4px; }
.pagination-info { font-size:12px; color:var(--text-muted); margin-top:8px; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-state-icon { font-size:36px; margin-bottom:12px; opacity:.3; }
.empty-state p { margin-bottom:16px; }

/* ── Danger zone ─────────────────────────────────────────────── */
.danger-zone { border:1px solid #fca5a5; border-radius:var(--radius); padding:18px 20px; margin-top:24px; background:#fef2f2; }
.danger-zone h4 { color:#dc2626; font-size:13px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; }
.danger-zone p { font-size:13px; color:#7f1d1d; margin-bottom:12px; }

/* ── Settings drawer ─────────────────────────────────────────── */
#settings-drawer { position:fixed; top:0; right:0; z-index:2000; width:380px; height:100vh; background:#fff; border-left:1px solid var(--border); display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--ease); box-shadow:-8px 0 32px rgba(0,0,0,.12); }
#settings-drawer.open { transform:translateX(0); }
.settings-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0; background:var(--brand-dark); }
.settings-drawer-header h3 { font-family:var(--heading-font); font-size:15px; font-weight:600; margin:0; color:#fff; }
.settings-drawer-close { background:transparent; border:none; color:rgba(255,255,255,.6); font-size:22px; cursor:pointer; line-height:1; padding:2px 6px; transition:color var(--ease); border-radius:4px; }
.settings-drawer-close:hover { color:#fff; background:rgba(255,255,255,.1); }
.settings-drawer-body { flex:1; overflow-y:auto; padding:20px; }
.settings-section-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-accent); margin:20px 0 10px; padding-bottom:6px; border-bottom:2px solid #ede9fe; }
.settings-section-label:first-child { margin-top:0; }
.settings-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.settings-row label { font-size:12px; color:var(--text-muted); flex-shrink:0; min-width:130px; }
.settings-color-wrap { display:flex; align-items:center; gap:8px; flex:1; }
.settings-color-wrap input[type="color"] { width:36px; height:34px; padding:2px; border-radius:5px; border:1px solid var(--border-2); cursor:pointer; flex-shrink:0; }
.settings-color-wrap input[type="text"] { flex:1; background:#fff; border:1px solid var(--border-2); border-radius:5px; color:var(--text); padding:6px 10px; font-size:12px; font-family:monospace; }
.settings-color-wrap input[type="text"]:focus { outline:none; border-color:var(--brand-accent); }
.settings-select { flex:1; background:#fff; border:1px solid var(--border-2); border-radius:6px; color:var(--text); padding:7px 10px; font-size:12px; appearance:none; cursor:pointer; }
.settings-select:focus { outline:none; border-color:var(--brand-accent); }
.settings-number { width:70px; background:#fff; border:1px solid var(--border-2); border-radius:6px; color:var(--text); padding:7px 10px; font-size:12px; text-align:center; }
.settings-number:focus { outline:none; border-color:var(--brand-accent); }
.logo-upload-area { border:1.5px dashed var(--border-2); border-radius:8px; padding:16px; text-align:center; cursor:pointer; transition:border-color var(--ease); position:relative; background:var(--surface-2); }
.logo-upload-area:hover { border-color:var(--brand-accent); }
.logo-upload-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.logo-upload-area img { max-height:50px; max-width:180px; display:block; margin:0 auto 8px; }
.logo-upload-label { font-size:12px; color:var(--text-muted); }
.settings-drawer-footer { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; display:flex; gap:10px; }
.settings-drawer-footer button { flex:1; }
#settings-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:1999; display:none; }
#settings-backdrop.open { display:block; }

/* ── Settings defaults update ────────────────────────────────── */
/* Update Settings::defaults() to use light theme values:
   bg=#f1f5f8, surface=#ffffff, surface2=#f8f9fa, text=#1e293b, heading=#0f172a */

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:768px) {
    .form-grid-2,.form-grid-3 { grid-template-columns:1fr; }
    #page-content-inner { padding:16px; }
    #wrapper.sidebar-open #page-content-wrapper { margin-left:0; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    #settings-drawer { width:100vw; }
    .competitor-row { grid-template-columns:1fr 1fr; }
}

/* ── Nav divider / section label ─────────────────────────────── */
#accordian li.nav-divider {
    padding: 12px 16px 4px;
    pointer-events: none;
}
#accordian li.nav-divider span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.35);
    display: block;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 10px;
}

/* ── Nav sub-groups (second level accordion) ─────────────────── */
li.nav-group { list-style: none; }

.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 8px 16px 6px;
    cursor: pointer;
    transition: color var(--ease);
    font-family: var(--body-font);
}
.nav-group-toggle:hover { color: rgba(255,255,255,.85); }
.nav-group.open .nav-group-toggle { color: #fff; }

.nav-group-arrow {
    font-size: 9px;
    transition: transform .2s ease;
    display: inline-block;
}
.nav-group.open .nav-group-arrow { transform: rotate(90deg); }

.nav-group-items {
    list-style: none;
    padding: 0 0 4px;
}
.nav-group-items li a {
    display: block;
    padding: 6px 16px 6px 26px;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color var(--ease), background var(--ease);
    border-left: 2px solid transparent;
    margin-left: 8px;
}
.nav-group-items li a:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
.nav-group-items li a.active { color: #fff; border-left-color: var(--brand-light); background: rgba(255,255,255,.06); }

/* ── Nav restyling: font sizes, group toggle, sub-items ─────── */

/* Top-level H3 items: 16px, less aggressive uppercase */
#accordian > li > h3 {
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}
#accordian > li > h3 > a {
    /* full row width so the WHOLE row is the clickable target, not just text */
    width: 100%;
    box-sizing: border-box;
    padding: 13px 18px 13px 15px;   /* 3px border + 15 = 18px text inset */
}

/* Sub-menu direct links: 14px. Indent is owned by the parent <li>
   (padding-left:2em) so the hover/active highlight spans the full row;
   the 15px here is the inner gap between that indent and the text. */
#accordian ul li a {
    font-size: 16px !important;
    padding: 5px 18px 5px 41px !important;
}

/* Group toggle — match standard sub-item style, not bold uppercase H3.
   No border-left on the toggle, so padding-left:18px lands text at 18px. */
.nav-group-toggle {
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: rgba(255,255,255,.6) !important;
    padding: 7px 18px 7px 44px !important;
    font-family: var(--body-font) !important;
}
.nav-group.open .nav-group-toggle { color: rgba(255,255,255,.9) !important; }
.nav-group-toggle:hover             { color: rgba(255,255,255,.9) !important; }

/* Group child items: one clear step in from the flush first level.
   margin-left:8px + 2px border + 24px padding = 34px text inset. */
.nav-group-items li a {
    font-size: 13px !important;
    padding: 6px 18px 6px 24px !important;
}

/* Arrow size to match new font size */
.nav-group-arrow { font-size: 10px; }

/* ── Active-state highlight system ────────────────────────────────────────────
   One consistent visual language for "you are here" across all three nav
   levels. Active = a solid brand-accent fill. Hover = the lighter brand-purple
   shift — distinct because accent (#6c3fc5) is brighter/more saturated than
   purple (#3A2470), so active reads as clearly "lit" and hover as a soft shift.

   The resting state carries a 3px transparent left border purely so the box
   metrics are stable; the active fill spans the whole row including it.
   ───────────────────────────────────────────────────────────────────────── */

/* Level 1 — top-level module item */
#accordian > li.active > h3 > a {
    background: var(--brand-accent) !important;
    color: #fff !important;
    border-left-color: var(--brand-accent);
}
/* Hover — lighter shift, stays visibly different from the brighter active */
#accordian > li > h3 > a:hover {
    background: var(--brand-purple);
    color: #fff;
}

/* Level 2 — direct sub-menu link */
#accordian ul li a.active {
    background: var(--brand-accent) !important;
    color: #fff !important;
    border-left-color: var(--brand-accent) !important;
}

/* Level 3 — group child item */
.nav-group-items li a.active {
    background: var(--brand-accent) !important;
    color: #fff !important;
    border-left-color: var(--brand-accent) !important;
}

/* Leaf modules (no children) — childless top-level items are real links.
   Same hover affordance as accordion parents. */
#accordian > li.nav-leaf > h3 > a:hover {
    background: var(--brand-purple);
    color: #fff;
}


/* ================================================================
   PROMOTION SCHEDULE v2.x
   All schedule-page styles consolidated here from the inline
   <style> blocks that previously lived in _subnav.php and the
   individual schedule pages. Scoped via `body.sched-page` (set by
   _subnav.php) wherever bleed risk exists.
   ================================================================ */


/* ── Sub-nav tabs (matches postinator .posti-tabs pattern) ────── */
.sched-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
}
.sched-tab {
    padding: 9px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-family: var(--heading-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.sched-tab:hover  { color: var(--text); }
.sched-tab.active {
    color: var(--brand-accent);
    border-bottom-color: var(--brand-accent);
}
.sched-tab .sched-tab-badge {
    display: inline-block;
    min-width: 18px; height: 18px;
    padding: 0 6px;
    background: var(--brand-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}
.sched-tab:not(.active) .sched-tab-badge { background: var(--text-muted); }
.sched-tab svg { width: 14px; height: 14px; flex-shrink: 0; }


/* ── Sticky header / tabs / filter bar (schedule pages only) ───
   Body.sched-page is set by _subnav.php on load. The body / html
   is the scroll container, so position:sticky against the viewport
   works cleanly without wrapper divs. */
body.sched-page #page-content-inner > .content-header,
body.sched-page #page-content-inner .content-header:first-child {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    margin: -24px -28px 0;
    padding: 18px 28px 12px 28px;
    border-bottom: 1px solid transparent;
}
body.sched-page .sched-tabs {
    position: sticky;
    top: 80px;
    z-index: 49;
    background: var(--bg);
    margin: 0 -28px 18px;
    padding: 0 28px;
}
body.sched-page .filter-bar {
    position: sticky;
    top: 132px;
    z-index: 48;
    margin: 0 -28px 18px !important;
    padding: 12px 28px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.03) !important;
}
@media (max-width: 992px) {
    body.sched-page #page-content-inner > .content-header,
    body.sched-page #page-content-inner .content-header:first-child,
    body.sched-page .sched-tabs,
    body.sched-page .filter-bar { position: static; }
}


/* ── Platform-coloured cell cards (timeline + variant) ───────── */
.pcard {
    display: flex; flex-direction: column; gap: 5px;
    padding: 8px 10px;
    border-radius: 6px;
    min-height: 80px;
    position: relative;
    transition: transform var(--ease), box-shadow var(--ease);
}
.pcard:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
}
.pcard-header { display: flex; align-items: flex-start; gap: 6px; }
.pcard-platform-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.pcard-posttype {
    font-size: 11px; font-weight: 600; line-height: 1.3;
    flex: 1; word-break: break-word;
}
.pcard-status-pill {
    display: inline-block;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 9px;
    align-self: flex-start;
    white-space: nowrap;
}
.pcard-actions { display: flex; align-items: center; gap: 4px; margin-top: auto; }
.pcard-btn {
    background: transparent; border: none; border-radius: 50%;
    width: 22px; height: 22px; padding: 0;
    font-size: 11px; line-height: 1;
    cursor: pointer; text-decoration: none; color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--ease);
}
.pcard-btn:hover { background: rgba(0,0,0,.10); }
.pcard.state-final .pcard-btn:hover { background: rgba(255,255,255,.20); }
.pcard-help {
    background: rgba(0,0,0,.10); color: var(--text); border: none;
    border-radius: 50%; width: 14px; height: 14px;
    font-size: 9px; font-weight: 700;
    cursor: help; line-height: 14px; text-align: center;
    padding: 0; flex-shrink: 0;
}
.pcard-help:hover { background: rgba(0,0,0,.18); }
.pcard.state-final .pcard-help { background: rgba(255,255,255,.25); color: #fff; }
.pcard.state-final .pcard-help:hover { background: rgba(255,255,255,.40); }
.pcard-tick {
    position: absolute; top: 6px; right: 6px;
    width: 16px; height: 16px;
    background: rgba(255,255,255,.95);
    color: var(--accent-color);
    border-radius: 50%;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Per-platform accent colour driven via CSS variable */
.pcard.plat-fb { --accent-color: #1877F2; }
.pcard.plat-ig { --accent-color: #E4405F; }
.pcard.plat-tt { --accent-color: #FE2C55; }
.pcard.plat-sc { --accent-color: #FFFC00; }
.pcard.plat-yt { --accent-color: #FF0000; }

/* State: nothing — soft tinted background */
.pcard.state-nothing {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface));
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
}
.pcard.state-nothing .pcard-status-pill {
    background: color-mix(in srgb, var(--accent-color) 16%, var(--surface));
    color: color-mix(in srgb, var(--accent-color) 65%, var(--text-muted));
}

/* State: draft — solid border, white interior */
.pcard.state-draft {
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--accent-color);
    padding: 7px 9px;
}
.pcard.state-draft .pcard-status-pill { background: var(--accent-color); color: #fff; }

/* State: final — accent-coloured fill, white text, tick */
.pcard.state-final {
    background: var(--accent-color); color: #fff;
    border: 1px solid var(--accent-color);
}
.pcard.state-final .pcard-posttype { color: #fff; }
.pcard.state-final .pcard-platform-icon { filter: brightness(0) invert(1); }
.pcard.state-final .pcard-status-pill { background: rgba(255,255,255,.22); color: #fff; }

/* Snapchat exception: yellow background needs dark text */
.pcard.plat-sc.state-final                      { color: #1d1238; }
.pcard.plat-sc.state-final .pcard-posttype      { color: #1d1238; }
.pcard.plat-sc.state-final .pcard-platform-icon { filter: none; }
.pcard.plat-sc.state-final .pcard-status-pill   { background: rgba(0,0,0,.15); color: #1d1238; }
.pcard.plat-sc.state-final .pcard-tick          { color: #1d1238; }


/* ── v2 variant cards (concept × variant) ────────────────────── */
.variant-card {
    display: inline-flex; flex-direction: column;
    gap: 2px; padding: 6px 10px;
    border-radius: 6px;
    min-width: 38px;
    text-decoration: none;
    font-size: 11px; font-weight: 600;
    line-height: 1.2; text-align: center;
    border: 1px solid transparent;
    transition: transform var(--ease);
    position: relative;
    align-items: center;
}
.variant-card:hover { transform: translateY(-1px); }
.variant-card .vc-letter { font-size: 13px; font-weight: 700; }
.variant-card.state-nothing {
    background: color-mix(in srgb, var(--accent-color, var(--brand-accent)) 10%, var(--surface));
    color: color-mix(in srgb, var(--accent-color, var(--brand-accent)) 65%, var(--text-muted));
    border-color: color-mix(in srgb, var(--accent-color, var(--brand-accent)) 22%, transparent);
}
.variant-card.state-draft {
    background: var(--surface);
    color: var(--accent-color, var(--brand-accent));
    border: 2px solid var(--accent-color, var(--brand-accent));
    padding: 5px 9px;
}
.variant-card.state-final {
    background: var(--accent-color, var(--brand-accent));
    color: #fff;
    border-color: var(--accent-color, var(--brand-accent));
}
.variant-card.state-final::after {
    content: '✓'; position: absolute; top: 2px; right: 4px;
    font-size: 9px; font-weight: 700;
}
.variant-card.state-retired {
    background: var(--surface-2); color: var(--text-muted);
    border: 1px dashed var(--border);
    text-decoration: line-through; opacity: 0.6;
}
.variant-card.distinct {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, .35);
}


/* ── Assignment chips, popover, bulk-action bar ──────────────── */
.assign-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px 1px 2px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    border-radius: 11px;
    font-size: 10px; font-weight: 600;
    color: var(--text); line-height: 1.5;
    margin-right: 2px; margin-bottom: 2px;
}
.assign-chip .assign-chip-avatar {
    width: 14px; height: 14px;
    background: var(--brand-accent);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase;
}
.assign-chip.completed { opacity: 0.55; text-decoration: line-through; }
.assign-chip.overdue   { border-color: #dc2626; color: #991b1b; }
.pcard.state-final .assign-chip {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}
.pcard.state-final .assign-chip .assign-chip-avatar {
    background: rgba(255,255,255,.28);
}

.assign-trigger {
    background: transparent; border: none; border-radius: 50%;
    width: 22px; height: 22px; padding: 0;
    font-size: 11px; cursor: pointer; color: inherit;
    opacity: 0.7;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--ease), opacity var(--ease);
}
.assign-trigger:hover { background: rgba(0,0,0,.10); opacity: 1; }
.pcard.state-final .assign-trigger { color: #fff; }
.pcard.state-final .assign-trigger:hover { background: rgba(255,255,255,.20); }
.pcard.plat-sc.state-final .assign-trigger { color: #1d1238; }

.assign-popover {
    position: absolute; z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 12px; min-width: 240px;
    font-size: 12px; color: var(--text);
}
.assign-popover h5 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 700;
}
.assign-popover select,
.assign-popover input[type=date],
.assign-popover input[type=text] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px; font-size: 12px;
    margin-bottom: 6px;
}
.assign-popover .assign-actions { display: flex; gap: 6px; margin-top: 4px; }
.assign-popover button {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 4px; font-size: 11px;
    cursor: pointer;
}
.assign-popover button.primary {
    background: var(--brand-accent);
    color: #fff;
    border-color: var(--brand-accent);
}
.assign-popover-existing {
    margin: 0 -12px 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.assign-popover-existing-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 0; font-size: 11px;
}

/* Fixed-bottom bulk-action bar */
.bulk-bar {
    position: fixed;
    bottom: 0; left: var(--sidebar-w); right: 0;
    background: var(--brand-dark); color: #fff;
    padding: 12px 24px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    display: flex; align-items: center; gap: 14px;
    z-index: 60;
    transform: translateY(100%);
    transition: transform 0.22s ease;
}
.bulk-bar.visible { transform: translateY(0); }
.bulk-bar .bulk-count          { font-size: 13px; font-weight: 600; }
.bulk-bar .bulk-count strong   { font-size: 16px; margin-right: 6px; }
.bulk-bar select,
.bulk-bar input[type=date] {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 4px; font-size: 12px;
}
.bulk-bar select option { color: #1d1238; }
.bulk-bar button {
    padding: 7px 14px; border: none;
    background: var(--brand-accent); color: #fff;
    border-radius: 4px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; margin-left: auto;
}
.bulk-bar .bulk-cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    margin-left: 0;
}
@media (max-width: 992px) {
    .bulk-bar { left: 0; flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
}

/* Hover-revealed bulk checkbox on cells */
.bulk-checkbox {
    position: absolute; top: 4px; left: 4px;
    width: 14px; height: 14px;
    cursor: pointer; z-index: 5;
    opacity: 0;
    transition: opacity var(--ease);
}
.pcard:hover .bulk-checkbox,
.variant-card:hover .bulk-checkbox,
body.bulk-mode .bulk-checkbox,
.pcard.bulk-selected .bulk-checkbox,
.variant-card.bulk-selected .bulk-checkbox { opacity: 1; }
.pcard.bulk-selected,
.variant-card.bulk-selected { box-shadow: 0 0 0 3px var(--brand-accent); }


/* ── Bold stat-card variant (used on budget headline) ────────── */
.stat-card.bold {
    background: var(--accent-color, var(--brand-accent));
    color: #fff;
    border: none;
    padding: 18px 20px;
}
.stat-card.bold::before        { display: none; }
.stat-card.bold .stat-label    { color: rgba(255,255,255,.85); }
.stat-card.bold .stat-value    { color: #fff; }
.stat-card.bold .stat-sub      { color: rgba(255,255,255,.78); }
.stat-card.bold .stat-icon     { color: #fff; opacity: 0.4; }


/* ── Hover tooltip (used by .pcard-help) ─────────────────────── */
.pwz-tooltip {
    position: fixed; z-index: 9999;
    background: var(--brand-dark); color: #e2e8f0;
    border: 1px solid var(--brand-mid); border-radius: 8px;
    padding: 12px 14px; max-width: 320px;
    font-size: 12px; line-height: 1.6;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    pointer-events: none;
    opacity: 0; transition: opacity .15s;
}
.pwz-tooltip.visible       { opacity: 1; }
.pwz-tooltip-title {
    font-weight: 700; font-size: 12px;
    color: var(--brand-light); margin-bottom: 6px;
}


/* ── Phase badges — used by both planner and creative views ──── */
.pphase-badge {
    display: inline-block;
    padding: 2px 7px; border-radius: 4px;
    font-size: 10px; font-weight: 600;
    white-space: nowrap;
}
.pphase-go_home    { background: #fee2e2; color: #991b1b; }
.pphase-payday_push{ background: #ede9fe; color: #6d28d9; }
.pphase-build      { background: #dbeafe; color: #1e40af; }
.pphase-foundation { background: var(--surface-2); color: var(--text-muted); }
.cv-pphase-foundation { background: var(--surface-2); color: #64748b; }
.cv-pphase-build      { background: #dbeafe; color: #1e40af; }
.cv-pphase-conversion { background: #ede9fe; color: #6d28d9; }
.cv-pphase-urgency    { background: #fef3c7; color: #b45309; }
.cv-pphase-go_home    { background: #fee2e2; color: #991b1b; }


/* ── Page-specific: Timeline (legacy day×platform planner) ─── */
.planner-table              { min-width: 1100px; font-size: 12px; }
.planner-table td           { padding: 6px 7px !important; vertical-align: top; }
.pth-date                   { width: 78px; }
.pth-phase                  { width: 84px; }
.pth-platform               { width: 170px; min-width: 160px; }
.pth-platform .pth-icon     { display: inline-flex; vertical-align: middle; margin-right: 5px; }
.pth-plat-fb .pth-icon      { color: #1877F2; }
.pth-plat-ig .pth-icon      { color: #E4405F; }
.pth-plat-tt .pth-icon      { color: #FE2C55; }
.pth-plat-sc .pth-icon      { color: #d4a900; } /* darker yellow for header on light bg */
.pth-plat-yt .pth-icon      { color: #FF0000; }
.planner-month-row td {
    background: var(--brand-dark) !important;
    color: #fff !important;
    font-family: var(--heading-font);
    font-size: 15px; font-weight: 700;
    padding: 10px 14px !important;
}
.planner-week-row td {
    background: var(--surface-2);
    font-weight: 600; font-size: 12px;
    padding: 7px 14px !important;
    border-bottom: 2px solid var(--border-2);
}
.pw-phase  { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 8px; }
.pcd-date  { padding: 6px 8px !important; }
.pcd-day   { color: var(--text-muted); font-size: 11px; }
.pcd-flag  { font-size: 10px; color: #dc2626; margin-top: 2px; }


/* ── Page-specific: Creative Campaign View (v2) ──────────────── */
.cv-header-strip {
    display: flex; gap: 24px; align-items: stretch;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
}
.cv-tier {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 240px;
}
.cv-tier-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text-muted); text-transform: uppercase;
}
.cv-tier-name {
    font-size: 22px; font-weight: 800;
    color: var(--text); line-height: 1.05;
    font-family: var(--heading-font);
}
.cv-tier-band   { font-size: 12px; color: var(--text-muted); }
.cv-readiness   { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cv-readiness-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text-muted); text-transform: uppercase;
}
.cv-readiness-bar {
    height: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden;
}
.cv-readiness-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #10b981);
    transition: width .25s;
}
.cv-readiness-val { font-size: 12px; color: var(--text-muted); }

.creative-table  { font-size: 12px; min-width: 1100px; }
.cv-th-letter    { width: 40px; }
.cv-th-concept   { width: 320px; }
.cv-th-phase     { width: 110px; }
.cv-th-angle     { width: 120px; }
.cv-th-platforms { width: 160px; }
.cv-th-variants  { width: 200px; }
.cv-th-actions   { width: 130px; }

.cv-phase-row td {
    background: var(--surface-2) !important;
    font-size: 11px; padding: 6px 14px !important;
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 2px solid var(--border-2);
}
.cv-phase-foundation td { color: #64748b; }
.cv-phase-build td      { color: #1e40af; }
.cv-phase-conversion td { color: #6d28d9; }
.cv-phase-urgency td    { color: #b45309; }
.cv-phase-go_home td    { color: #991b1b; }

.cv-letter-badge {
    display: inline-block;
    width: 24px; height: 24px; line-height: 24px;
    background: var(--brand-accent); color: #fff;
    border-radius: 50%; text-align: center;
    font-weight: 700; font-size: 12px;
}
.cv-concept-label { font-weight: 600; font-size: 12px; }
.cv-concept-brief { color: var(--text-muted); font-size: 11px; line-height: 1.4; margin-top: 2px; }
.cv-angle         { font-size: 11px; color: var(--text-muted); }
.cv-variants {
    display: flex; gap: 8px;
    align-items: flex-start;
    padding: 8px !important;
    flex-wrap: wrap;
}
.cv-plat-mini {
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-right: 4px;
    vertical-align: middle;
}
.cv-plat-mini.cv-plat-fb { color: #1877F2; }
.cv-plat-mini.cv-plat-ig { color: #E4405F; }
.cv-plat-mini.cv-plat-tt { color: #FE2C55; }
.cv-plat-mini.cv-plat-sc { color: #d4a900; }
.cv-plat-mini.cv-plat-yt { color: #FF0000; }


/* ── Page-specific: Variant editor (Andromeda distinctness box) ── */
.distinctness-box {
    background: #fff4e6;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
}
.distinctness-title {
    font-weight: 700; font-size: 13px;
    color: #92400e; margin-bottom: 4px;
}
.distinctness-help {
    font-size: 12px; color: #78350f;
    line-height: 1.5; margin-bottom: 10px;
}
.distinctness-checks { display: flex; flex-direction: column; gap: 6px; }
.distinctness-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text);
    cursor: pointer;
}
.distinctness-check input { width: 16px; height: 16px; cursor: pointer; }


/* ── Page-specific: Budget tracker ───────────────────────────── */
.bg-headline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 992px) { .bg-headline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bg-headline { grid-template-columns: 1fr; } }
.budget-table th { font-size: 11px; }
.budget-table td { font-size: 12px; }
.bg-phase-foundation td:first-child { border-left: 3px solid #64748b; }
.bg-phase-build      td:first-child { border-left: 3px solid #1e40af; }
.bg-phase-conversion td:first-child { border-left: 3px solid #6d28d9; }
.bg-phase-urgency    td:first-child { border-left: 3px solid #b45309; }
.bg-phase-go_home    td:first-child { border-left: 3px solid #991b1b; }
.bg-edit-row td      { background: var(--surface-2) !important; padding: 14px !important; }
.bg-edit-row label   { font-size: 11px; color: var(--text-muted); }
.bg-edit-row input[type=number],
.bg-edit-row input[type=text] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px; font-size: 12px;
}


/* ── Page-specific: Bulk Assign (3-column form grid) ─────────── */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 768px) { .form-grid-3 { grid-template-columns: 1fr; } }


/* ── Page-specific: My Tasks (overdue / due-today highlight) ── */
.overdue   { color: #dc2626; font-weight: 600; }
.due-today { color: #d97706; font-weight: 600; }


/* ── Shared utility: small button modifier ───────────────────── */
.btn-sm-admin { padding: 3px 8px; font-size: 11px; }

/* =============================================================================
   BOOTSTRAP 4 → 5 BRIDGE
   =============================================================================
   This file provides backwards-compatibility aliases for Bootstrap 4 class names
   that may still exist in your codebase. Bootstrap 5 renamed several utility
   classes; this file translates the old names so existing code keeps working.

   APPEND this CSS at the end of admin.css. Do not delete it until the codebase
   has been fully audited and refactored to use BS5 class names directly.

   Once you're confident no .ml-*, .mr-*, .pl-*, .pr-*, .form-row, .text-left,
   .text-right, .float-left, .float-right etc. remain in any code, this whole
   block can be removed.
   ============================================================================= */


/* ── Margin utilities (BS4 used l/r for left/right; BS5 uses s/e for start/end) ── */

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }


/* ── Padding utilities ──────────────────────────────────────────────────── */

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }


/* ── Responsive variants for the above ───────────────────────────────────── */

@media (min-width: 576px) {
    .ml-sm-0 { margin-left: 0 !important; } .ml-sm-1 { margin-left: 0.25rem !important; }
    .ml-sm-2 { margin-left: 0.5rem !important; } .ml-sm-3 { margin-left: 1rem !important; }
    .ml-sm-4 { margin-left: 1.5rem !important; } .ml-sm-5 { margin-left: 3rem !important; }
    .ml-sm-auto { margin-left: auto !important; }
    .mr-sm-0 { margin-right: 0 !important; } .mr-sm-1 { margin-right: 0.25rem !important; }
    .mr-sm-2 { margin-right: 0.5rem !important; } .mr-sm-3 { margin-right: 1rem !important; }
    .mr-sm-4 { margin-right: 1.5rem !important; } .mr-sm-5 { margin-right: 3rem !important; }
    .mr-sm-auto { margin-right: auto !important; }
}
@media (min-width: 768px) {
    .ml-md-0 { margin-left: 0 !important; } .ml-md-1 { margin-left: 0.25rem !important; }
    .ml-md-2 { margin-left: 0.5rem !important; } .ml-md-3 { margin-left: 1rem !important; }
    .ml-md-4 { margin-left: 1.5rem !important; } .ml-md-5 { margin-left: 3rem !important; }
    .ml-md-auto { margin-left: auto !important; }
    .mr-md-0 { margin-right: 0 !important; } .mr-md-1 { margin-right: 0.25rem !important; }
    .mr-md-2 { margin-right: 0.5rem !important; } .mr-md-3 { margin-right: 1rem !important; }
    .mr-md-4 { margin-right: 1.5rem !important; } .mr-md-5 { margin-right: 3rem !important; }
    .mr-md-auto { margin-right: auto !important; }
}
@media (min-width: 992px) {
    .ml-lg-0 { margin-left: 0 !important; } .ml-lg-1 { margin-left: 0.25rem !important; }
    .ml-lg-2 { margin-left: 0.5rem !important; } .ml-lg-3 { margin-left: 1rem !important; }
    .ml-lg-4 { margin-left: 1.5rem !important; } .ml-lg-5 { margin-left: 3rem !important; }
    .ml-lg-auto { margin-left: auto !important; }
    .mr-lg-0 { margin-right: 0 !important; } .mr-lg-1 { margin-right: 0.25rem !important; }
    .mr-lg-2 { margin-right: 0.5rem !important; } .mr-lg-3 { margin-right: 1rem !important; }
    .mr-lg-4 { margin-right: 1.5rem !important; } .mr-lg-5 { margin-right: 3rem !important; }
    .mr-lg-auto { margin-right: auto !important; }
}


/* ── Text alignment (BS4: left/right; BS5: start/end) ──────────────────── */

.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }


/* ── Float utilities ───────────────────────────────────────────────────── */

.float-left  { float: left  !important; }
.float-right { float: right !important; }


/* ── Form row (BS4 had gutter -5px; BS5 dropped it. Use a regular row instead) ── */

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > [class*="col-"],
.form-row > .col {
    padding-right: 5px;
    padding-left: 5px;
}


/* ── Badge pill (BS4 used .badge-pill; BS5 uses .rounded-pill on badge) ── */

.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
}


/* ── Screen-reader-only (BS4 .sr-only; BS5 renamed to .visually-hidden) ── */

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


/* ── Close button (BS4 .close; BS5 renamed to .btn-close with different styling) ── */

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background: transparent;
    border: 0;
}
.close:hover { opacity: 0.75; cursor: pointer; }


/* =============================================================================
   END BS4 → BS5 BRIDGE
   ============================================================================= */
/* ── 11. Type-size utilities ──────────────────────────────────────────────────
   Small, fixed type steps for admin UI. Bootstrap's `.small` (0.875em) doesn't
   map cleanly to the panel's px scale and offers nothing at 11px/13px, so these
   give explicit, reusable steps instead of inline `font-size` declarations.
   Body text is 14px (--body-font-size). */
.fs-11 { font-size: 11px !important; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }

/* Near-the-school pills. One control, two answers, saved on click. */
.near-pills{
    display:inline-flex;border:1px solid #c9cfd6;border-radius:20px;overflow:hidden;
}
.near-pill{
    border:0;background:#fff;color:#6b7280;
    font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:5px 16px;cursor:pointer;transition:background .12s,color .12s;
    border-right:1px solid #c9cfd6;
}
.near-pill:last-child{ border-right:0; }
.near-pill:hover{ background:#f7f8fa;color:#17150f; }
.near-yes.is-on{ background:#15803d;color:#fff; }
.near-no.is-on{ background:#6b7280;color:#fff; }
.near-yes.is-on:hover{ background:#15803d;color:#fff; }
.near-no.is-on:hover{ background:#6b7280;color:#fff; }

/* Near-the-school pills. One control, two answers, saved on click. */
.near-pills{
    display:inline-flex;border:1px solid #c9cfd6;border-radius:20px;overflow:hidden;
}
.near-pill{
    border:0;background:#fff;color:#6b7280;
    font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:5px 16px;cursor:pointer;transition:background .12s,color .12s;
    border-right:1px solid #c9cfd6;
}
.near-pill:last-child{ border-right:0; }
.near-pill:hover{ background:#f7f8fa;color:#17150f; }
.near-yes.is-on{ background:#15803d;color:#fff; }
.near-no.is-on{ background:#6b7280;color:#fff; }
.near-yes.is-on:hover{ background:#15803d;color:#fff; }
.near-no.is-on:hover{ background:#6b7280;color:#fff; }

/* Membership: the colour says how it is PAID, not whether it is healthy.
   Red for cash, blue for Stripe. At a glance that answers "who do I have to
   chase?", which is the question the column exists for. */
.badge-status.pill-persession{ background:#4b5563;color:#fff; }
.badge-status.pill-cash{       background:#e4181c;color:#fff; }
.badge-status.pill-stripe{     background:#1d4ed8;color:#fff; }

/* Payment states, which take priority over how it is paid. */
.badge-status.pill-missed{     background:#fee2e2;color:#b91c1c; }
.badge-status.pill-ending{     background:#e5e7eb;color:#4b5563; }
.badge-status.pill-pending{    background:#fef3c7;color:#92400e; }

/* Levels colour as a progression, so the column reads as a ladder rather than
   a set of unrelated labels. */
.badge-status.pill-unclassified{ background:#e5e7eb;color:#6b7280; }
.badge-status.pill-beginner{     background:#4b5563;color:#fff; }
.badge-status.pill-intermediate{ background:#f5c518;color:#000; }
.badge-status.pill-advanced{     background:#e4181c;color:#fff; }