/* =============================================================
   Branwell Dashboard — New Design System
   Branwell Agent Branwell Child Theme
   ============================================================= */

:root {
    --bg-deep: #f3f4f6;
    --bg-surface: #ffffff;
    --bg-elevated: #f7f7f9;
    --bg-hover: #ecedf1;
    --border: #e2e3e8;
    --border-subtle: #eef0f2;
    --text-primary: #1a1d26;
    --text-secondary: #5f6370;
    --text-muted: #9196a1;
    --accent: #dc2626;
    --accent-soft: #dc262610;
    --green: #059669;
    --green-soft: #05966914;
    --amber: #d97706;
    --amber-soft: #d9770614;
    --red: #dc2626;
    --red-soft: #dc262614;
    --blue: #3b82f6;
    --purple: #7c3aed;
    --teal: #0891b2;
    --sidebar-w: 268px;
    --header-h: 58px;
    --radius: 10px;
    --radius-sm: 6px;
    --transition: 0.18s cubic-bezier(.4, 0, .2, 1);
}

/* ── Layout ─────────────────────────────────────────────────── */
html.branwell-locked, html.branwell-locked body {
    margin: 0; padding: 0;
    height: 100%; overflow: hidden;
}
.branwell-body {
    margin: 0; padding: 0;
    height: 100vh; overflow: hidden;
}
.branwell-app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.branwell-sidebar {
    grid-row: 1 / -1;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.branwell-sidebar__brand {
    height: var(--header-h);
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}

.branwell-sidebar__logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #ef4444);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    box-shadow: 0 2px 8px #dc262625;
}

.branwell-sidebar__title {
    font-weight: 700; font-size: 15px; letter-spacing: -0.3px;
}

.branwell-sidebar__nav {
    flex: 1; padding: 8px 10px; overflow-y: auto;
}

/* Nav items generated by wp_nav_menu */
.branwell-nav-list { list-style: none; margin: 0; padding: 0; }
.branwell-nav-list li { margin: 1px 0; }
.branwell-nav-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    text-decoration: none; transition: all var(--transition);
}
.branwell-nav-list a:hover { background: var(--bg-hover); color: var(--text-primary); }
.branwell-nav-list .current-menu-item > a,
.branwell-nav-list .current_page_item > a {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}

/* Chevron rotation on open */
.branwell-nav-chevron { transition: transform 0.25s ease; }
.branwell-nav-list .menu-item-has-children.open > a .branwell-nav-chevron { transform: rotate(90deg); }

/* Sub-menus */
.branwell-nav-list .sub-menu {
    list-style: none; margin: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.branwell-nav-list .menu-item-has-children.open > .sub-menu { max-height: 600px; }

/* Sub-menu items aligned to parent text start (after icon) */
.branwell-nav-list .sub-menu > li > a {
    padding-left: 40px; font-size: 13px; font-weight: 450;
}

/* Level 3: slightly indented */
.branwell-nav-list .sub-menu .sub-menu > li > a {
    padding-left: 52px; font-size: 12.5px;
}

/* Active state on sub-menu items — contained within border radius */
.branwell-nav-list .sub-menu .current-menu-item > a,
.branwell-nav-list .sub-menu .current_page_item > a {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
    border-radius: var(--radius-sm);
}

/* Section dividers and labels */
.branwell-nav-divider {
    height: 1px; background: var(--border); margin: 10px 12px;
    list-style: none;
}
.branwell-nav-section { list-style: none; }
.branwell-nav-section__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.2px;
    padding: 14px 12px 6px;
}
.branwell-nav-section__title svg { opacity: .4; }
/* Children under a nav-label section render as normal items */
.branwell-nav-section > .sub-menu {
    max-height: none !important; list-style: none; margin: 0; padding: 0;
}
/* Section children with icons: normal padding */
.branwell-nav-section > .sub-menu > li > a {
    padding-left: 12px; font-size: 13px; font-weight: 500;
}
/* Section grandchildren: align to chevron position */
.branwell-nav-section > .sub-menu .sub-menu {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    list-style: none; margin: 0; padding: 0;
}
.branwell-nav-section > .sub-menu .menu-item-has-children.open > .sub-menu {
    max-height: 600px;
}
.branwell-nav-section > .sub-menu .menu-item-has-children.open > a .branwell-nav-chevron {
    transform: rotate(90deg);
}
.branwell-nav-section > .sub-menu .sub-menu > li > a {
    padding-left: 40px; font-size: 13px; font-weight: 450;
}


/* Sidebar footer */
.branwell-sidebar__footer {
    padding: 12px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}

.branwell-user-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: var(--radius-sm);
}
.branwell-user-card__avatar,
.branwell-user-card__avatar-img {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
}
.branwell-user-card__avatar {
    background: linear-gradient(135deg, #64748b, #334155);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; color: #fff;
}
.branwell-user-card__avatar-img { object-fit: cover; }
.branwell-user-card__info { flex: 1; min-width: 0; }
.branwell-user-card__name { font-size: 13px; font-weight: 500; }
.branwell-user-card__role { font-size: 11px; color: var(--text-muted); }
.branwell-user-card__dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.branwell-user-card__dot.status-avail { background: var(--green); box-shadow: 0 0 4px var(--green); }
.branwell-user-card__dot.status-speaking { background: var(--red); }
.branwell-user-card__dot.status-break { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.branwell-user-card__dot.status-offline { background: var(--text-muted); }

.branwell-logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 8px; padding: 7px; border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--border);
    cursor: pointer; font-size: 12px; color: var(--text-muted);
    text-decoration: none; transition: all var(--transition); width: 100%;
}
.branwell-logout-btn:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.branwell-logout-btn svg { width: 14px; height: 14px; }

/* ── Overlay ────────────────────────────────────────────────── */
.branwell-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.35); z-index: 90;
    backdrop-filter: blur(2px);
}
.branwell-overlay.active { display: block; }

/* ── Header ─────────────────────────────────────────────────── */
.branwell-header {
    display: flex; align-items: center; gap: 16px;
    padding: 0 28px; background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    grid-column: 2; grid-row: 1;
    min-height: var(--header-h);
    z-index: 90;
    overflow: hidden;
}
.branwell-header__title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.branwell-header__title span { color: var(--text-muted); font-weight: 400; }

.branwell-hamburger {
    display: none; width: 60px; height: 60px; border-radius: var(--radius-sm);
    align-items: center; justify-content: center; cursor: pointer;
    background: none; border: none; color: var(--text-primary); flex-shrink: 0;
}
.branwell-hamburger svg { width: 32px; height: 32px; }

.branwell-header__search {
    margin-left: 28px; display: flex; align-items: center; gap: 8px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 7px 14px; width: 240px;
    transition: border-color var(--transition);
}
.branwell-header__search:focus-within { border-color: var(--accent); }
.branwell-header__search svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.branwell-header__search input {
    background: none; border: none; outline: none;
    color: var(--text-primary); font-size: 13px; font-family: inherit; width: 100%;
}
.branwell-header__search input::placeholder { color: var(--text-muted); }

.branwell-header__actions { margin-left: auto; display: flex; align-items: center; gap: 0; }
.branwell-header__btn {
    width: 60px; height: 60px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: none; border: none;
    color: var(--text-secondary); transition: all var(--transition);
    overflow: visible;
}
.branwell-header__btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.branwell-header__btn svg { width: 28px; height: 28px; stroke-width: 1.8; overflow: visible; }
.branwell-header__btn--notif { position: relative; }
.branwell-header__dot {
    position: absolute; top: 12px; right: 10px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 8px var(--red);
    border: 2px solid var(--bg-surface);
}
.branwell-search-toggle { display: none; }

/* ── Main Content ───────────────────────────────────────────── */
.branwell-main {
    grid-column: 2; grid-row: 2;
    overflow-y: auto; overflow-x: hidden;
    padding: 24px 28px; background: var(--bg-deep);
    min-height: 0; /* critical — allows grid child to scroll */
}

/* ── Agent Card (first card — status + actions) ─────────────── */
.agent-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    margin-bottom: 20px; box-shadow: 0 1px 3px #0000000a;
}

.agent-card__header {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.agent-card__avatar-wrap { position: relative; flex-shrink: 0; }
.agent-card__avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--border);
}
.agent-card__avatar.status-avail { border-color: var(--green); box-shadow: 0 0 12px #05966930; }
.agent-card__avatar.status-speaking { border-color: var(--red); }
.agent-card__avatar.status-break { border-color: var(--amber); box-shadow: 0 0 12px #d9770630; }

.agent-card__dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2.5px solid var(--bg-surface);
}
.agent-card__dot.status-avail { background: var(--green); }
.agent-card__dot.status-speaking { background: var(--red); animation: pulse-dot 1.6s ease-in-out infinite; }
.agent-card__dot.status-break { background: var(--amber); }
.agent-card__dot.status-offline { background: var(--text-muted); }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }

.agent-card__info { flex: 1; min-width: 0; }
.agent-card__greeting { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.agent-card__name { font-size: 18px; font-weight: 600; margin: 2px 0; }
.agent-card__meta { font-size: 12px; color: var(--text-muted); }

.agent-card__status { flex-shrink: 0; }
.agent-card__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 500;
}
.agent-card__badge-dot { width: 7px; height: 7px; border-radius: 50%; }
.agent-card__badge.status-avail { background: var(--green-soft); color: var(--green); }
.agent-card__badge.status-avail .agent-card__badge-dot { background: var(--green); }
.agent-card__badge.status-speaking { background: var(--red-soft); color: var(--red); }
.agent-card__badge.status-speaking .agent-card__badge-dot { background: var(--red); }
.agent-card__badge.status-break { background: var(--amber-soft); color: var(--amber); }
.agent-card__badge.status-break .agent-card__badge-dot { background: var(--amber); }
.agent-card__badge.status-offline { background: var(--bg-elevated); color: var(--text-muted); }
.agent-card__badge.status-offline .agent-card__badge-dot { background: var(--text-muted); }

.agent-card__actions {
    display: flex; gap: 8px; margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--border-subtle); flex-wrap: wrap;
}

.agent-card__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 50px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid transparent; transition: all var(--transition);
    font-family: inherit;
}
.agent-card__btn svg { width: 16px; height: 16px; }
.agent-card__btn:active { transform: scale(0.96); }

.agent-card__btn--login { background: var(--green-soft); color: var(--green); border-color: #05966930; }
.agent-card__btn--login:hover { background: #05966920; }
.agent-card__btn--logout { background: var(--red-soft); color: var(--red); border-color: #dc262630; }
.agent-card__btn--logout:hover { background: #dc262620; }
.agent-card__btn--break { background: var(--amber-soft); color: var(--amber); border-color: #d9770630; }
.agent-card__btn--break:hover { background: #d9770620; }

.agent-card__feedback {
    margin-top: 10px; padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; text-align: center;
    transition: opacity 0.5s ease; opacity: 0;
}
.agent-card__feedback.success { background: var(--green-soft); color: var(--green); opacity: 1; }
.agent-card__feedback.error { background: var(--red-soft); color: var(--red); opacity: 1; }

/* ── Period Tabs ────────────────────────────────────────────── */
.branwell-period-tabs {
    display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap;
}

.branwell-pill {
    padding: 7px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-surface);
    color: var(--text-secondary); transition: all var(--transition);
    font-family: inherit;
}
.branwell-pill:hover { background: var(--bg-hover); color: var(--text-primary); }
.branwell-pill.active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.branwell-pill--admin { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.branwell-pill--admin.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Tab Panels ─────────────────────────────────────────────── */
.branwell-tab-panel { display: none; }
.branwell-tab-panel.active { display: block; }

/* ── Data Sections ──────────────────────────────────────────── */
.branwell-data-section {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 3px #0000000a; margin-bottom: 14px;
}

.branwell-data-section__header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.branwell-data-section__dot { width: 10px; height: 3px; border-radius: 2px; }
.branwell-data-section__title {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.8px;
}
.branwell-data-section__body { padding: 16px 18px; }

/* ── Metric Cards ───────────────────────────────────────────── */
.branwell-metric-row { display: grid; gap: 12px; }
.branwell-metric-row.cols-2 { grid-template-columns: 1fr 1fr; }
.branwell-metric-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.branwell-metric {
    position: relative; padding: 14px 16px; border-radius: 8px;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    overflow: hidden; transition: all var(--transition);
}
.branwell-metric:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: 0 4px 12px #0000000a; }
.branwell-metric__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.branwell-metric__label {
    font-size: 11px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.branwell-metric__value { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }

/* ── Usage Table ────────────────────────────────────────────── */
.branwell-usage-table { width: 100%; }
.branwell-usage-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px;
}
.branwell-usage-row:last-child { border-bottom: none; }
.branwell-usage-row__label { color: var(--text-secondary); }
.branwell-usage-row__value { font-weight: 500; }
.branwell-usage-row--warn .branwell-usage-row__value { color: var(--amber); }

/* ── Tier Badge ─────────────────────────────────────────────── */
.branwell-tier-badge {
    display: inline-block; padding: 4px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
}

/* ── Admin Table ────────────────────────────────────────────── */
.branwell-admin-table-wrap {
    overflow-x: auto; border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 14px;
}
.branwell-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 800px; }
.branwell-admin-table thead tr { background: var(--bg-elevated); }
.branwell-admin-table th {
    padding: 11px 14px; text-align: left;
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
}
.branwell-admin-table td {
    padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle;
}
.branwell-admin-table tbody tr:hover { background: var(--bg-elevated); }

/* ── Custom Login Page ──────────────────────────────────────── */
.branwell-login {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-deep);
    padding: 24px;
}

.branwell-login__card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.branwell-login__logo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 28px;
}
.branwell-login__logo-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), #ef4444);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; color: #fff;
    box-shadow: 0 2px 8px #dc262625;
}
.branwell-login__logo-text {
    font-weight: 700; font-size: 17px; letter-spacing: -0.3px;
}

.branwell-login__title {
    font-size: 22px; font-weight: 700; margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.branwell-login__subtitle {
    font-size: 14px; color: var(--text-muted); margin-bottom: 24px;
    line-height: 1.5;
}

.branwell-login__alert {
    padding: 12px 14px; border-radius: var(--radius-sm);
    font-size: 13px; margin-bottom: 20px; line-height: 1.5;
}
.branwell-login__alert p { margin: 0; }
.branwell-login__alert--error {
    background: var(--red-soft); color: var(--red);
    border: 1px solid #dc262620;
}
.branwell-login__alert--success {
    background: var(--green-soft); color: var(--green);
    border: 1px solid #05966920;
}

.branwell-login__form { display: flex; flex-direction: column; gap: 16px; }

.branwell-login__field label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 6px;
}
.branwell-login__field input {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit;
    color: var(--text-primary); background: var(--bg-surface);
    transition: border-color var(--transition);
    outline: none;
}
.branwell-login__field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.branwell-login__options {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px;
}
.branwell-login__remember {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-secondary); cursor: pointer;
}
.branwell-login__remember input { width: auto; margin: 0; }
.branwell-login__forgot {
    color: var(--accent); text-decoration: none; font-weight: 500;
}
.branwell-login__forgot:hover { text-decoration: underline; }

.branwell-login__submit {
    width: 100%; padding: 12px;
    background: var(--text-primary); color: #fff;
    border: none; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all var(--transition);
    margin-top: 4px;
}
.branwell-login__submit:hover { opacity: 0.9; transform: translateY(-1px); }
.branwell-login__submit:active { transform: scale(0.98); }

.branwell-login__back {
    text-align: center; margin-top: 16px; font-size: 13px;
}
.branwell-login__back a {
    color: var(--text-muted); text-decoration: none;
}
.branwell-login__back a:hover { color: var(--text-primary); }

.branwell-login__footer {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.branwell-login__footer p {
    font-size: 11px; color: var(--text-muted); line-height: 1.6;
    text-align: center; margin: 0;
}

/* 2FA code inputs */
.branwell-2fa-inputs {
    display: flex; justify-content: center; gap: 10px; margin-bottom: 20px;
}
.branwell-2fa-digit {
    width: 48px; height: 56px; text-align: center;
    font-size: 24px; font-weight: 700; font-family: inherit;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elevated); color: var(--text-primary);
    outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.branwell-2fa-digit:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-surface);
}
.branwell-2fa-resend { text-align: center; margin-top: 16px; }
.branwell-2fa-resend p { font-size: 13px; color: var(--text-muted); }
.branwell-2fa-resend a { color: var(--accent); text-decoration: none; font-weight: 500; }
.branwell-2fa-resend a:hover { text-decoration: underline; }
.branwell-2fa-msg { margin-top: 8px; font-size: 13px; font-weight: 500; }

.branwell-2fa-alert {
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
}
.branwell-2fa-alert--success { background: var(--green-soft); color: var(--green); }
.branwell-2fa-alert--error { background: var(--red-soft); color: var(--red); }

@media (max-width: 479px) {
    .branwell-login__card { padding: 28px 20px; }
    .branwell-login__title { font-size: 20px; }
    .branwell-login { padding: 16px; }
}

/* ── Page Intro (shared across all pages) ───────────────────── */
.branwell-page-intro {
    margin-bottom: 20px;
}
.branwell-page-intro__title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.3px;
    margin: 0 0 6px;
}
.branwell-page-intro__desc {
    font-size: 14px; color: var(--text-muted); line-height: 1.6;
    margin: 0;
}

/* ── Client Feedback / Reviews ──────────────────────────────── */
.branwell-reviews { display: flex; flex-direction: column; gap: 14px; }

.branwell-reviews__badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--red-soft); border: 1px solid #dc262620;
    border-radius: var(--radius-sm); padding: 5px 12px;
}
.branwell-reviews__badge-dot {
    width: 6px; height: 6px; background: var(--red);
    border-radius: 50%; flex-shrink: 0;
}
.branwell-reviews__badge-text {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--red);
}

.branwell-review { margin-bottom: 0; }

.branwell-review__stars {
    margin-left: auto; display: flex; gap: 1px;
}
.branwell-review__star {
    font-size: 14px; color: var(--border);
}
.branwell-review__star--filled {
    color: #f59e0b;
}

.branwell-review__content {
    font-size: 14px; color: var(--text-primary); line-height: 1.75;
    padding-bottom: 16px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.branwell-review__reply-section { margin-bottom: 16px; }
.branwell-review__reply-label {
    display: block; font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 8px;
}

.branwell-review__textarea {
    width: 100%; min-height: 90px; padding: 12px 14px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: inherit;
    font-size: 14px; color: var(--text-primary);
    resize: vertical; line-height: 1.65;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}
.branwell-review__textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-surface);
}

.branwell-review__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid var(--border-subtle);
}
.branwell-review__footer-note {
    font-size: 12px; color: var(--text-muted);
}
.branwell-review__submit {
    padding: 9px 20px; background: var(--accent); border: none;
    border-radius: var(--radius-sm); color: #fff;
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all var(--transition);
}
.branwell-review__submit:hover { opacity: 0.9; }
.branwell-review__submit:active { transform: scale(0.97); }
.branwell-review__submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Review loading */
.branwell-reviews__loading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 48px; font-size: 14px; color: var(--text-muted);
}
.branwell-reviews__spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: branwell-spin 0.6s linear infinite;
}
@keyframes branwell-spin { to { transform: rotate(360deg); } }

/* Review empty state */
.branwell-reviews__empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 56px 24px; text-align: center;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.branwell-reviews__empty-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.branwell-reviews__empty-icon svg {
    width: 20px; height: 20px; stroke: var(--text-muted);
}
.branwell-reviews__empty-title {
    font-size: 15px; font-weight: 700; margin-bottom: 6px;
}
.branwell-reviews__empty p {
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
    max-width: 520px; margin: 0;
}

@media (max-width: 767px) {
    .branwell-review__footer { flex-direction: column; gap: 10px; align-items: flex-start; }
    .branwell-review__submit { width: 100%; text-align: center; }
    .branwell-page-intro__title { font-size: 19px; }
}

/* ── Bank Details ────────────────────────────────────────────── */
.abdu-bank-badge {
    width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
    background: #D3001A; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 9px; font-weight: 600; color: #fff; letter-spacing: 0.02em;
}
#message .success,
#ape-message .success,
.branwell-msg-success {
    display: block; padding: 12px 16px; font-size: 13px; font-weight: 500;
    background: var(--green-soft); border-left: 3px solid var(--green);
    border-radius: var(--radius-sm); color: var(--green);
}
#message .error,
#ape-message .error,
.branwell-msg-error {
    display: block; padding: 12px 16px; font-size: 13px; font-weight: 500;
    background: var(--red-soft); border-left: 3px solid var(--red);
    border-radius: var(--radius-sm); color: var(--red);
}

/* ── Form Fields (shared across templates) ──────────────────── */
.branwell-form-field { margin-bottom: 0; }
.branwell-form-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 6px;
}
.branwell-form-input,
.branwell-form-select {
    width: 100%; height: 42px; padding: 0 14px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 14px;
    color: var(--text-primary); font-family: inherit; outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.branwell-form-select { appearance: none; cursor: pointer; padding-right: 36px; }
.branwell-form-input:focus,
.branwell-form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-surface);
}
.branwell-form-hint {
    display: block; font-size: 11px; color: var(--text-muted); margin-top: 5px;
}
.branwell-form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.branwell-form-info {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
    margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
.branwell-form-submit {
    width: 100%; height: 44px; padding: 0 20px;
    background: var(--accent); border: none; border-radius: var(--radius-sm);
    color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all var(--transition);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
}
.branwell-form-submit:hover { opacity: 0.9; color: #fff; text-decoration: none; }
.branwell-form-submit:visited { color: #fff; }
.branwell-form-submit:active { transform: scale(0.98); color: #fff; }
.branwell-form-submit:focus { color: #fff; outline: none; }
a.branwell-form-submit, a.branwell-form-submit:link, a.branwell-form-submit:visited, a.branwell-form-submit:hover, a.branwell-form-submit:active { color: #fff; text-decoration: none; }
.branwell-form-footer {
    font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 12px;
}

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

/* ── Reporting Tables ────────────────────────────────────────── */
.branwell-report-wrap {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 3px #0000000a;
}

.branwell-report-thead-light {
    display: flex; padding: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.branwell-report-thead-light span {
    padding: 12px 16px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}

.branwell-report-row {
    display: flex; align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition);
}
.branwell-report-row:last-child { border-bottom: none; }
.branwell-report-row:hover { background: var(--bg-elevated); }

.branwell-report-cell {
    padding: 12px 16px; font-size: 13px; color: var(--text-primary);
}
.branwell-report-cell--right { text-align: right; }

.branwell-report-doc {
    display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
}
.branwell-report-doc__dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

.branwell-report-link {
    color: var(--accent); text-decoration: none;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    letter-spacing: 0.03em; border-bottom: 1px solid var(--accent-soft);
}
.branwell-report-link:hover { border-bottom-color: var(--accent); }

.branwell-report-status {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 20px; padding: 3px 10px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.branwell-report-status--ok { background: var(--green-soft); color: var(--green); }
.branwell-report-status--pending { background: var(--amber-soft); color: var(--amber); }
.branwell-report-status__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.branwell-report-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
.branwell-report-footer__val {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    text-transform: none; letter-spacing: 0;
}

/* Report pagination */
.branwell-report-pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; flex-wrap: wrap; gap: 8px;
}
.branwell-report-pagination__info { font-size: 12px; color: var(--text-muted); }
.branwell-report-pagination__btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.branwell-report-pagination__dots { font-size: 13px; color: var(--text-muted); padding: 0 4px; }

.branwell-report-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 10px; font-size: 13px; min-width: 32px;
    background: var(--bg-surface); color: var(--accent);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; text-decoration: none; font-family: inherit;
    transition: all var(--transition);
}
.branwell-report-page-btn:hover { background: var(--accent-soft); }
.branwell-report-page-btn.active {
    background: var(--accent); color: #fff;
    border-color: var(--accent); font-weight: 600;
}
.branwell-report-page-btn.disabled {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

/* Mobile: stack report rows into cards */
@media (max-width: 767px) {
    .branwell-report-thead-light { display: none; }
    .branwell-report-row {
        flex-direction: column; align-items: stretch;
        padding: 12px 16px; gap: 6px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        margin: 8px 16px;
    }
    .branwell-report-cell {
        display: flex; justify-content: space-between; padding: 4px 0;
        text-align: left !important;
    }
    .branwell-report-cell::before {
        content: attr(data-label);
        font-size: 10px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--text-muted);
    }
    .branwell-report-cell--right { text-align: left !important; }
    .branwell-report-pagination { padding: 0 16px; }
}

/* ── Ban Management ─────────────────────────────────────────── */
.bmbm-toast {
    display: flex; align-items: center; gap: 8px;
    border-radius: var(--radius-sm); padding: 11px 16px; font-size: 13px;
    margin-bottom: 16px; background: var(--green-soft);
    border-left: 3px solid var(--green); color: var(--green);
}
.bmbm-toast--error {
    background: var(--red-soft); border-left-color: var(--red); color: var(--red);
}

.bmbm-duration-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 16px;
}
.bmbm-dur-btn {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 6px; font-size: 13px; text-align: center;
    cursor: pointer; background: var(--bg-surface); color: var(--text-secondary);
    font-family: inherit; transition: all var(--transition); line-height: 1.3;
}
.bmbm-dur-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
.bmbm-dur-btn.selected { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--text-primary); font-weight: 600; }
.bmbm-dur-days { display: block; font-size: 14px; }
.bmbm-dur-name { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.bmbm-dur-btn.selected .bmbm-dur-name { color: var(--accent); }

.bmbm-expiry-preview { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; min-height: 20px; }
.bmbm-expiry-preview strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }

.bmbm-field-error { font-size: 12px; color: var(--red); display: block; margin-top: 4px; }

.bmbm-confirm-row { display: none; }
.bmbm-confirm-row.visible { display: table-row; }
.bmbm-confirm-cell { padding: 6px 12px 10px !important; }
.bmbm-confirm-inner {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-elevated); border-radius: var(--radius-sm);
    padding: 9px 14px; font-size: 12px; color: var(--text-primary); flex-wrap: wrap;
}
.bmbm-confirm-yes {
    font-size: 12px; background: var(--accent); color: #fff;
    border: none; border-radius: var(--radius-sm); padding: 4px 12px;
    cursor: pointer; font-weight: 600; font-family: inherit;
}
.bmbm-confirm-yes:hover { opacity: 0.9; }
.bmbm-confirm-no {
    font-size: 12px; background: none; border: 1px solid var(--border);
    color: var(--accent); border-radius: var(--radius-sm); padding: 4px 12px;
    cursor: pointer; font-family: inherit;
}
.bmbm-confirm-no:hover { background: var(--bg-elevated); }

.bmbm-lift-btn {
    font-size: 12px; color: var(--accent); background: none;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 4px 12px; cursor: pointer; font-family: inherit;
    transition: all var(--transition); white-space: nowrap;
}
.bmbm-lift-btn:hover { background: var(--accent-soft); }

.bmbm-expiry-indef { color: var(--text-muted); font-style: italic; }

@media (max-width: 600px) { .bmbm-duration-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Trunk Monitor ──────────────────────────────────────────── */
.bbtm-refresh-badge {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 5px 12px;
    font-size: 11px; color: var(--accent);
    font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
.bbtm-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    flex-shrink: 0; animation: bbtm-pulse 2s ease-in-out infinite;
}
.bbtm-pulse.error { background: var(--red); animation: none; }
@keyframes bbtm-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

.bbtm-meta-row { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12px; }
.bbtm-meta-item { display: flex; flex-direction: column; gap: 2px; }
.bbtm-meta-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.bbtm-meta-val { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); font-size: 12px; }

.bbtm-trunk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.bbtm-trunk-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    border-left-width: 4px; border-left-style: solid;
}
.bbtm-trunk-card.bbtm-online { border-left-color: var(--green); }
.bbtm-trunk-card.bbtm-offline { border-left-color: var(--red); }

.bbtm-trunk-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bbtm-trunk-id { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); }
.bbtm-trunk-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.bbtm-trunk-status-pill.bbtm-online { background: var(--green-soft); color: var(--green); }
.bbtm-trunk-status-pill.bbtm-offline { background: var(--red-soft); color: var(--red); }
.bbtm-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.bbtm-trunk-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.bbtm-trunk-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.bbtm-trunk-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.bbtm-stat-val { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }
.bbtm-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.bbtm-uptime-track { height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.bbtm-uptime-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.6s; }
.bbtm-trunk-last { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.bbtm-table-scroll { overflow-x: auto; }
.bbtm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bbtm-table th {
    text-align: left; font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    background: var(--bg-elevated); white-space: nowrap;
}
.bbtm-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.bbtm-table tbody tr:last-child td { border-bottom: none; }
.bbtm-table tbody tr:hover { background: var(--bg-elevated); }
.bbtm-row-reach { border-left: 3px solid var(--green); }
.bbtm-row-unreach { border-left: 3px solid var(--red); }
.bbtm-td-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.bbtm-td-muted { color: var(--text-muted); }

.bbtm-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; }
.bbtm-badge-reach { background: var(--green-soft); color: var(--green); }
.bbtm-badge-unreach { background: var(--red-soft); color: var(--red); }

@media (max-width: 767px) {
    .bbtm-trunk-grid { grid-template-columns: 1fr; }
    .bbtm-trunk-stats { grid-template-columns: 1fr; }
}

/* ── Call Activity Heatmap ───────────────────────────────────── */
.bbg-metric-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-bottom: 16px;
}
.bbg-metric-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    box-shadow: 0 1px 3px #0000000a;
}
.bbg-metric-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.bbg-metric-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bbg-metric-value {
    font-size: 26px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.02em; line-height: 1.1;
}
.bbg-metric-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.bbg-metric-tag {
    display: inline-block; margin-top: 10px;
    font-size: 12px; font-weight: 500; color: var(--accent);
}

.bbg-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

.bbg-hm-scroll { overflow-x: auto; }
.bbg-hm { display: grid; gap: 5px; min-width: 580px; }
.bbg-hm-hlbl {
    font-size: 10px; font-weight: 500; color: var(--text-muted);
    text-align: center; padding-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.bbg-hm-dlbl {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    display: flex; align-items: center; padding-right: 10px;
}
.bbg-hm-cell {
    height: 34px; border-radius: var(--radius-sm);
    background: var(--bg-elevated); cursor: pointer; position: relative;
}
.bbg-hm-cell:hover { filter: brightness(0.88); }

.bbg-legend-row {
    display: flex; align-items: center; gap: 5px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border-subtle); flex-wrap: wrap;
}
.bbg-legend-lbl { font-size: 11px; color: var(--text-muted); }
.bbg-legend-sw { width: 22px; height: 12px; border-radius: 3px; }

.bbg-period-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.bbg-pchip {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 11px; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: 999px;
}
.bbg-pchip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bbg-pchip-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.bbg-pchip-time { font-size: 11px; color: var(--text-muted); margin-left: 2px; font-family: 'JetBrains Mono', monospace; }

.bbg-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bbg-brow {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.bbg-brow:last-child { border-bottom: none; }
.bbg-brow-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bbg-brow-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.bbg-brow-track-wrap { width: 100px; }
.bbg-brow-track { height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
.bbg-brow-fill { height: 100%; border-radius: 2px; transition: width 0.6s; }
.bbg-brow-pct { font-size: 12px; color: var(--text-muted); min-width: 32px; text-align: right; font-family: 'JetBrains Mono', monospace; }

.bbg-srow {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.bbg-srow:last-child { border-bottom: none; }
.bbg-srow-rank {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-elevated); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--accent); flex-shrink: 0;
}
.bbg-srow-rank.r1 { background: var(--accent); border-color: var(--accent); color: #fff; }
.bbg-srow-info { flex: 1; min-width: 0; }
.bbg-srow-time { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }
.bbg-srow-day { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.bbg-srow-val { font-size: 13px; font-weight: 600; color: var(--accent); font-family: 'JetBrains Mono', monospace; }

/* Tooltip */
.bbg-tip {
    position: fixed; background: var(--text-primary); color: #fff;
    border-radius: 8px; padding: 11px 15px; font-size: 12px;
    font-family: inherit; white-space: nowrap; pointer-events: none;
    z-index: 99999; opacity: 0; transition: opacity 0.1s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); line-height: 1.8; min-width: 175px;
}
.bbg-tip.on { opacity: 1; }
.bbg-tip::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 6px solid transparent;
    border-top-color: var(--text-primary);
}
.bbg-tip.below::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: var(--text-primary);
}
.bbg-tip-head {
    font-weight: 600; font-size: 12px; margin-bottom: 7px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.bbg-tip-row { display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,0.65); }
.bbg-tip-row b { color: #fff; font-weight: 500; }

@media (max-width: 767px) {
    .bbg-metric-grid { grid-template-columns: 1fr; }
    .bbg-panel-row { grid-template-columns: 1fr; }
}

/* ── SMS Centre ─────────────────────────────────────────────── */
.branwell-sms-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--amber-soft); border: 1px solid #d9770625;
    border-radius: 20px; padding: 3px 10px;
    font-size: 11px; font-weight: 600; color: var(--amber);
    margin-left: 8px;
}

.branwell-sms-refresh {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 12px; font-weight: 500;
    background: none; color: var(--accent); border: 1px solid var(--border);
    border-radius: 20px; cursor: pointer; font-family: inherit;
    transition: all var(--transition);
}
.branwell-sms-refresh:hover { background: var(--accent-soft); }

.branwell-sms-row {
    border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 10px; overflow: hidden;
}

.branwell-sms-row__header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; cursor: pointer;
    background: var(--bg-elevated); user-select: none;
    transition: background var(--transition);
}
.branwell-sms-row__header:hover { background: var(--bg-hover); }

.branwell-sms-status {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600; flex-shrink: 0;
}

.branwell-sms-meta { flex: 1; min-width: 0; }
.branwell-sms-meta__top {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.branwell-sms-meta__sub {
    font-size: 12px; color: var(--text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.branwell-sms-chevron {
    font-size: 11px; color: var(--text-muted);
    transition: transform 0.2s; flex-shrink: 0;
}
.branwell-sms-chevron.open { transform: rotate(180deg); }

.branwell-sms-row__body {
    display: none; padding: 16px;
    border-top: 1px solid var(--border); background: var(--bg-surface);
}
.branwell-sms-row__body.open { display: block; }

.branwell-sms-field { margin-bottom: 10px; }
.branwell-sms-field__label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.branwell-sms-field__value {
    font-size: 14px; color: var(--text-primary);
    padding: 9px 12px; background: var(--bg-elevated);
    border-radius: var(--radius-sm); line-height: 1.5;
}

.branwell-sms-textarea {
    width: 100%; padding: 10px 14px; font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary);
    outline: none; resize: vertical; min-height: 80px;
    font-family: inherit; line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.branwell-sms-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.branwell-sms-charcount {
    font-size: 12px; color: var(--text-muted); text-align: right; margin-top: 4px;
}
.branwell-sms-charcount.warn { color: var(--amber); }
.branwell-sms-charcount.over { color: var(--red); }

.branwell-sms-actions { margin-top: 10px; }
.branwell-sms-submit {
    padding: 9px 20px; font-size: 13px; font-weight: 600;
    background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; transition: all var(--transition);
}
.branwell-sms-submit:hover { opacity: 0.9; }
.branwell-sms-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.branwell-sms-msg {
    font-size: 13px; margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm);
}
.branwell-sms-msg.success { background: var(--green-soft); border-left: 3px solid var(--green); color: var(--green); }
.branwell-sms-msg.error { background: var(--red-soft); border-left: 3px solid var(--red); color: var(--red); }

.branwell-sms-empty {
    font-size: 13px; color: var(--text-muted); padding: 16px 0; text-align: center;
}

/* Pagination */
.branwell-sms-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap; gap: 8px;
}
.branwell-sms-pagination__info { font-size: 12px; color: var(--text-muted); }
.branwell-sms-pagination__btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.branwell-sms-pagination__dots { font-size: 13px; color: var(--text-muted); padding: 0 4px; }

.branwell-sms-page-btn {
    padding: 5px 10px; font-size: 13px;
    background: var(--bg-surface); color: var(--accent);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; font-family: inherit; min-width: 32px;
    transition: all var(--transition);
}
.branwell-sms-page-btn:hover:not(:disabled) { background: var(--accent-soft); }
.branwell-sms-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.branwell-sms-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 767px) {
    .branwell-sms-row__header { padding: 10px 14px; gap: 8px; }
    .branwell-sms-textarea { font-size: 16px; }
    .branwell-sms-pagination { flex-direction: column; align-items: flex-start; }
}

/* ── Dashboard Two-Column Grid ──────────────────────────────── */
.branwell-dash-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
}
.branwell-dash-left { min-width: 0; }
.branwell-dash-right { display: flex; flex-direction: column; gap: 16px; }

/* ── Panel (Notifications, Quick Actions) ───────────────────── */
.branwell-panel {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 3px #0000000a;
}
.branwell-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.branwell-panel__title { font-size: 13px; font-weight: 600; }
.branwell-panel__action {
    font-size: 12px; color: var(--accent); cursor: pointer;
    background: none; border: none; font-family: inherit; font-weight: 500;
}
.branwell-panel__action:hover { text-decoration: underline; }
.branwell-panel__body { padding: 12px 16px; }

/* ── Notification Items ─────────────────────────────────────── */
.branwell-notif {
    display: flex; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.branwell-notif:last-child { border-bottom: none; }
.branwell-notif__icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 12px;
}
.branwell-notif__content { flex: 1; min-width: 0; }
.branwell-notif__text { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.branwell-notif__text strong { color: var(--text-primary); font-weight: 500; }
.branwell-notif__text a { color: var(--accent); font-weight: 500; text-decoration: none; }
.branwell-notif__text a:hover { text-decoration: underline; }
.branwell-notif__time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Read/unread state */
.branwell-notif--read { opacity: 0.55; }
.branwell-notif--read:hover { opacity: 0.8; }

/* Dismiss button */
.branwell-notif__dismiss {
    flex-shrink: 0; width: 22px; height: 22px;
    border-radius: 50%; border: none; background: transparent;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all var(--transition); opacity: 0;
}
.branwell-notif:hover .branwell-notif__dismiss { opacity: 1; }
.branwell-notif__dismiss:hover { background: var(--red-soft); color: var(--red); }

/* Unread count badge */
.branwell-panel__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; font-size: 11px; font-weight: 600;
    background: var(--red); color: #fff; margin-left: 6px;
}

/* ── Quick Actions ──────────────────────────────────────────── */
.branwell-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.branwell-qa {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; background: var(--bg-elevated);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    cursor: pointer; transition: all var(--transition); text-align: center;
}
.branwell-qa:hover {
    border-color: var(--accent); background: var(--accent-soft);
    transform: translateY(-1px);
}
.branwell-qa svg { width: 18px; height: 18px; color: var(--accent); }
.branwell-qa span { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.branwell-qa:hover span { color: var(--text-primary); }

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* ── Intl Tel Input Override ──────────────────────────────────── */
.iti { width: 100%; }
.iti input[type="tel"] { width: 100%; padding-left: 90px !important; }
.iti__country-list { z-index: 99999 !important; max-height: 200px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.iti__country { padding: 5px 10px; }
.iti__country:hover { background: var(--bg-hover); }
.branwell-data-section { overflow: visible; }
.branwell-data-section__body { overflow: visible; }

/* ── Connect Number ──────────────────────────────────────────── */
.fb001-type-row { display: flex; gap: 10px; margin-bottom: 16px; }
.fb001-type-btn {
    flex: 1; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-surface); cursor: pointer; display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--text-muted); transition: all 0.15s; font-family: inherit;
}
.fb001-type-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary); }
.fb001-type-btn.fb001-sel { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); font-weight: 600; }
.fb001-radio-dot {
    width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative;
}
.fb001-type-btn.fb001-sel .fb001-radio-dot::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: absolute;
}
.fb001-type-icon { width: 15px; height: 15px; flex-shrink: 0; }
.fb001-prefix {
    display: inline-flex; align-items: center; padding: 10px 12px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace; white-space: nowrap; flex-shrink: 0;
}
.fb001-vbar { height: 3px; border-radius: 2px; background: var(--bg-elevated); margin-top: 7px; overflow: hidden; }
.fb001-vfill { height: 100%; border-radius: 2px; width: 0; transition: width 0.25s ease, background 0.25s ease; }
.fb001-confirm-box {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 16px;
}
.fb001-confirm-num {
    font-size: 18px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary); letter-spacing: 0.03em;
}
.fb001-confirm-empty {
    font-size: 13px; font-weight: 400; font-family: inherit;
    color: var(--text-muted); font-style: italic; letter-spacing: 0;
}

/* ── Agent Skills Chips ──────────────────────────────────────── */
.asm-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.asm-chip-grid input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.asm-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px; font-size: 13px;
    cursor: pointer; border: 1px solid var(--border);
    background: var(--bg-elevated); color: var(--text-muted);
    transition: all 0.12s; user-select: none; line-height: 1;
}
.asm-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.asm-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: none; }
.asm-chip.asm-active-purple { background: #EEEDFE; border-color: #AFA9EC; color: #3C3489; }
.asm-chip.asm-active-purple .asm-chip-dot { display: block; background: #534AB7; }
.asm-chip.asm-active-teal { background: #E1F5EE; border-color: #5DCAA5; color: #085041; }
.asm-chip.asm-active-teal .asm-chip-dot { display: block; background: #0F6E56; }
.asm-chip.asm-active-coral { background: #FAECE7; border-color: #F0997B; color: #712B13; }
.asm-chip.asm-active-coral .asm-chip-dot { display: block; background: #993C1D; }

/* ── Roster Management ───────────────────────────────────────── */
.arm-toggle {
    position: relative; display: inline-block; width: 36px; height: 20px;
    flex-shrink: 0; cursor: pointer;
}
.arm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.arm-toggle-knob {
    position: absolute; inset: 0; background: var(--border); border-radius: 20px;
    transition: background 0.2s; cursor: pointer;
}
.arm-toggle-knob::before {
    content: ''; position: absolute; width: 14px; height: 14px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.arm-toggle input:checked + .arm-toggle-knob { background: var(--accent); }
.arm-toggle input:checked + .arm-toggle-knob::before { transform: translateX(16px); }
.arm-toggle input:disabled + .arm-toggle-knob { opacity: 0.45; cursor: not-allowed; }

.arm-slots-accent { border-left: 3px solid var(--accent); padding-left: 12px; }
.arm-slot-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
.arm-slot-row:last-of-type { margin-bottom: 0; }
.arm-slot-label-col { flex: 0 0 90px; min-width: 90px; }
.arm-slot-time-col { flex: 1 1 0; min-width: 0; }
.arm-slot-sep-col { flex: 0 0 24px; text-align: center; }
.arm-slot-btn-col { flex: 0 0 30px; }
.arm-slot-label { font-size: 12px; font-weight: 500; color: var(--text-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.arm-badge-admin { font-size: 10px; font-weight: 500; color: #6d28d9; background: #ede9fe; border-radius: 4px; padding: 1px 5px; }
.arm-sep { font-size: 12px; color: var(--text-muted); }

.arm-time-input {
    width: 100%; height: 36px; padding: 6px 10px; font-size: 13px;
    color: var(--text-primary); background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    outline: none; font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
}
.arm-time-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(220,38,38,0.08); }
.arm-time-input:disabled, .arm-time-input[readonly] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }

/* jQuery Timepicker dropdown overrides */
.ui-timepicker-wrapper {
    z-index: 99999 !important; max-height: 200px; overflow-y: auto;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    font-family: 'DM Sans', sans-serif; font-size: 13px;
}
.ui-timepicker-wrapper .ui-timepicker-list li {
    padding: 6px 14px; cursor: pointer; color: var(--text-primary);
    list-style: none;
}
.ui-timepicker-wrapper .ui-timepicker-list li:hover,
.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected {
    background: var(--accent-soft); color: var(--accent);
}
    width: 30px; height: 30px; flex-shrink: 0;
    border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary);
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; font-family: inherit; transition: all var(--transition);
}
.arm-reset-slot:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.arm-reset-slot:disabled { opacity: 0.35; cursor: not-allowed; }

.arm-day-off .arm-day-body { opacity: 0.45; pointer-events: none; }
.arm-day-off .arm-slots-accent { border-left-color: var(--border); }
.arm-day-off .arm-time-input { background: var(--bg-elevated) !important; color: var(--text-muted) !important; }
.arm-day-off .arm-reset-slot { pointer-events: none; opacity: 0.2; }

.arm-shift-disabled { opacity: 0.4; pointer-events: none; }
.arm-slot2-hint { font-size: 11px; color: var(--text-muted); font-style: italic; padding-left: 2px; margin-top: 2px; display: none; }

.arm-day-locked { opacity: 0.55; pointer-events: none; }
.arm-day-locked .arm-time-input { background: var(--bg-elevated) !important; color: var(--text-muted) !important; cursor: not-allowed; }
.arm-day-locked .arm-reset-slot { opacity: 0.2; pointer-events: none; }
.arm-today-locked-notice {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
    font-size: 11px; font-weight: 500; color: #92400e; background: #fef3c7;
    border: 1px solid #fbbf24; border-radius: var(--radius-sm); padding: 2px 8px; white-space: nowrap;
}

@media (max-width: 600px) {
    .arm-slot-row { flex-wrap: wrap; gap: 6px; }
    .arm-slot-label-col { flex: 0 0 100%; }
    .arm-slot-time-col { flex: 1 1 120px; }
    .arm-slot-sep-col { flex: 0 0 20px; }
}

/* ── Internal Mail Panel ─────────────────────────────────────── */
.branwell-header__btn--mail { position: relative; }
.branwell-header__dot--mail {
    position: absolute; top: 12px; right: 10px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 8px var(--red);
    border: 2px solid var(--bg-surface);
}
.branwell-mail-badge {
    position: absolute; top: 8px; right: 6px;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; line-height: 1;
}

.bw-mail-overlay {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,0.3); opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
}
.bw-mail-overlay.active { opacity: 1; pointer-events: auto; }

.bw-mail-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 100vw; z-index: 200;
    background: var(--bg-surface); box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.bw-mail-panel.open { transform: translateX(0); }

.bw-mail-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bw-mail-panel__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.bw-mail-panel__close {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: none; border: none;
    font-size: 22px; color: var(--text-muted); transition: all var(--transition);
}
.bw-mail-panel__close:hover { background: var(--bg-hover); color: var(--text-primary); }

.bw-mail-panel__body {
    flex: 1; overflow-y: auto; min-height: 0;
}

.bw-mail-panel__footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0;
}
.bw-mail-btn {
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px;
    cursor: pointer; border: 1px solid var(--border); background: var(--bg-surface);
    color: var(--text-secondary); font-family: inherit; transition: all var(--transition);
}
.bw-mail-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.bw-mail-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.bw-mail-btn--primary:hover { opacity: 0.9; color: #fff; }

/* Mail items */
.bw-mail-item {
    padding: 14px 20px; border-bottom: 1px solid var(--border-subtle);
    cursor: pointer; transition: background var(--transition);
}
.bw-mail-item:hover { background: var(--bg-hover); }
.bw-mail-item.bw-mail-unread { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.bw-mail-item__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.bw-mail-item__from { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.bw-mail-item__date { font-size: 11px; color: var(--text-muted); }
.bw-mail-item__subject { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.bw-mail-unread .bw-mail-item__subject { color: var(--text-primary); font-weight: 500; }

.bw-mail-dismiss {
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: none; border: none;
    font-size: 16px; color: var(--text-muted); transition: all var(--transition);
    flex-shrink: 0; padding: 0; font-family: inherit;
}
.bw-mail-dismiss:hover { background: var(--red-soft); color: var(--red); }

.bw-mail-dismiss-btn {
    font-size: 13px; color: var(--red); background: none;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 16px; cursor: pointer; font-family: inherit; transition: all var(--transition);
}
.bw-mail-dismiss-btn:hover { background: var(--red-soft); border-color: var(--red); }

/* Read view */
.bw-mail-read-header { padding: 20px; border-bottom: 1px solid var(--border); }
.bw-mail-read-subject { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.bw-mail-read-meta { font-size: 12px; color: var(--text-muted); }
.bw-mail-read-body { padding: 20px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.bw-mail-read-body p { margin: 0 0 12px; }

/* Compose inside panel */
#bwMailCompose { padding: 20px; }

/* Mail toast notification */
.bw-mail-toast {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-radius: 10px;
    background: var(--bg-surface); border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    cursor: pointer; max-width: 360px;
    transform: translateX(calc(100% + 20px)); opacity: 0;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s;
}
.bw-mail-toast.visible { transform: translateX(0); opacity: 1; }
.bw-mail-toast svg { color: var(--accent); }
.bw-mail-toast-close {
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: none; border: none;
    font-size: 18px; color: var(--text-muted); margin-left: auto;
    flex-shrink: 0; padding: 0;
}
.bw-mail-toast-close:hover { color: var(--text-primary); background: var(--bg-hover); }

@media (max-width: 479px) {
    .bw-mail-toast { left: 12px; right: 12px; max-width: none; top: 12px; }
}

@media (max-width: 479px) {
    .bw-mail-panel { width: 100vw; }
}

/* ── Passcode Inputs ──────────────────────────────────────────── */
.bpc-input {
    width: 38px; height: 42px; text-align: center; font-size: 16px; font-weight: 600;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bpc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
@media (max-width: 479px) {
    .bpc-input { width: 34px; height: 38px; font-size: 14px; }
}

/* ── Help Panel Items ─────────────────────────────────────────── */
.bwh-cat-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition);
}
.bwh-cat-item:hover { background: var(--bg-hover); }
.bwh-article-item {
    padding: 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); margin: 0 20px 8px;
    cursor: pointer; transition: background var(--transition);
}
.bwh-article-item:hover { background: var(--bg-hover); }
.bwh-inline-article:hover { background: var(--bg-hover); }
.bwh-article-body { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.bwh-article-body p { margin: 0 0 12px; }
.bwh-article-body h2, .bwh-article-body h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 20px 0 8px; }
.bwh-article-body ul, .bwh-article-body ol { padding-left: 20px; margin: 0 0 12px; }
.bwh-article-body li { margin-bottom: 4px; }
.bwh-article-body blockquote {
    margin: 12px 0; padding: 10px 14px; background: var(--bg-elevated);
    border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px; color: var(--text-primary);
}

/* ── Calculator Tables ────────────────────────────────────────── */
.branwell-calc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.branwell-calc-table thead th {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg-elevated); padding: 10px 12px; text-align: center;
    border-bottom: 1px solid var(--border);
}
.branwell-calc-table thead th.bct-night { border-left: 2px solid var(--accent-soft); color: var(--accent); }
.branwell-calc-table thead tr.bct-sub th { font-size: 11px; font-weight: 500; background: var(--bg-surface); }
.branwell-calc-table tbody tr { border-bottom: 1px solid var(--border-subtle); }
.branwell-calc-table tbody tr:last-child { border-bottom: none; }
.branwell-calc-table tbody td { padding: 8px 10px; text-align: center; vertical-align: middle; }
.branwell-calc-table tbody td.bct-night { border-left: 2px solid var(--accent-soft); }
.branwell-calc-table td.bct-label { text-align: left; font-weight: 500; color: var(--text-primary); font-size: 13px; }
.bct-input { width: 90px !important; text-align: center !important; padding: 7px 8px !important; display: inline-block !important; }

/* ── Photo Upload Drop Zone ───────────────────────────────────── */
.bpu-drop-zone {
    border: 2px dashed var(--border); cursor: pointer; border-radius: var(--radius-sm);
    background: var(--bg-elevated); padding: 2rem 1.5rem; text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.bpu-drop-zone:hover, .bpu-drop-zone.bpu-drag-over {
    border-color: var(--accent); background: var(--accent-soft);
}
.bpu-drop-zone:hover svg, .bpu-drop-zone.bpu-drag-over svg { color: var(--accent) !important; }
.bpu-drop-zone.bpu-has-file { border-color: var(--accent); background: var(--accent-soft); }

/* ── Missed Calls Calendar ────────────────────────────────────── */
.bmc-cal-wrap { position: relative; }
.bmc-cal-trigger { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; outline: none; font-family: inherit; }
.bmc-cal-trigger:hover { border-color: var(--text-muted); }
.bmc-cal-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 999; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.bmc-cal-nav { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 2px 8px; border-radius: 6px; line-height: 1; }
.bmc-cal-nav:hover { background: var(--bg-hover); }
.bmc-cal-day { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px; color: var(--text-primary); margin: 1px auto; }
.bmc-cal-blank { cursor: default; }
.bmc-cal-future { color: var(--border); cursor: default; pointer-events: none; }
.bmc-cal-today span { font-weight: 600; }
.bmc-cal-day:not(.bmc-cal-blank):not(.bmc-cal-future):hover { background: var(--bg-hover); }
.bmc-cal-selected { background: var(--accent) !important; color: #fff !important; }
.bmc-cal-has-records { border: 2px solid var(--red); }
.bmc-cal-has-records.bmc-cal-selected { border-color: #fff; }
.bmbm-lift-btn { font-size: 12px; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; background: transparent; cursor: pointer; font-family: inherit; }
.bmbm-lift-btn:hover { background: var(--accent-soft); }

/* Missed Calls Table Grid */
#bmc-content .branwell-report-thead-light,
#bmc-content .branwell-report-row { display: grid; }
#bmc-content .branwell-report-thead-light span,
#bmc-content .branwell-report-row > span { padding: 12px 16px; }

/* Admin: 6 columns */
.bmc-grid-admin .branwell-report-thead-light,
.bmc-grid-admin .branwell-report-row { grid-template-columns: 1.8fr 1fr 0.8fr 1fr 1.5fr 80px; }

/* Agent: 4 columns */
.bmc-grid-agent .branwell-report-thead-light,
.bmc-grid-agent .branwell-report-row { grid-template-columns: 1fr 1.2fr 1.5fr 80px; }

@media (max-width: 768px) {
    #bmc-content .branwell-report-thead-light { display: none; }
    #bmc-content .branwell-report-row { display: block !important; padding: 14px 16px; }
    #bmc-content .branwell-report-row > span { display: inline-block; margin-right: 10px; margin-bottom: 6px; padding: 0; }
    #bmc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Agreement Modal ─────────────────────────────────────────── */
.bw-agree-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.bw-agree-modal {
    background: var(--bg-surface); border-radius: 12px;
    width: 100%; max-width: 720px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}
.bw-agree-header {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bw-agree-body {
    flex: 1; overflow-y: auto; min-height: 0;
}
.bw-agree-scroll {
    padding: 24px;
    font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}
.bw-agree-scroll h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px; }
.bw-agree-scroll h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 20px 0 8px; }
.bw-agree-scroll p { margin: 0 0 10px; }
.bw-agree-footer {
    padding: 16px 24px; border-top: 1px solid var(--border);
    flex-shrink: 0; background: var(--bg-elevated);
}
.bw-agree-check {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--text-primary); cursor: pointer;
    margin-bottom: 12px; line-height: 1.5;
}
.bw-agree-check input[type="checkbox"] {
    margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0;
    accent-color: var(--accent);
}

/* ── Missed Calls Calendar ───────────────────────────────────── */
.bmc-cal-wrap { position: relative; }
.bmc-cal-trigger {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
    padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-primary); cursor: pointer;
    font-family: inherit;
}
.bmc-cal-trigger:hover { border-color: var(--text-muted); }
.bmc-cal-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 999;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px; width: 260px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.bmc-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bmc-cal-nav { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 2px 8px; border-radius: var(--radius-sm); line-height: 1; }
.bmc-cal-nav:hover { background: var(--bg-hover); }
.bmc-cal-month-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.bmc-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.bmc-cal-dow span { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: 500; padding: 2px 0; }
.bmc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bmc-cal-day { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px; color: var(--text-primary); margin: 1px auto; }
.bmc-cal-blank { cursor: default; }
.bmc-cal-future { color: var(--border); cursor: default; pointer-events: none; }
.bmc-cal-today .bmc-cal-day-num { font-weight: 600; }
.bmc-cal-day:not(.bmc-cal-blank):not(.bmc-cal-future):hover { background: var(--bg-hover); }
.bmc-cal-selected { background: var(--accent) !important; color: #fff !important; }
.bmc-cal-selected .bmc-cal-day-num { color: #fff; }
.bmc-cal-has-records { border: 2px solid var(--red); }
.bmc-cal-has-records.bmc-cal-selected { border-color: #fff; }
.bmc-date-badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: var(--green-soft); color: var(--green); border: 1px solid var(--green); }

/* ── Footer ──────────────────────────────────────────────────── */
.branwell-footer {
    padding: 20px 28px; text-align: right;
    font-size: 11px; color: var(--text-muted);
    border-top: 1px solid var(--border);
    letter-spacing: 0.01em;
}

@media (max-width: 1024px) {
    .branwell-app { grid-template-columns: 1fr; }
    .branwell-header { grid-column: 1; }
    .branwell-main { grid-column: 1; }
    .branwell-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: var(--sidebar-w); z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    }
    .branwell-sidebar.open {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0,0,0,.1);
    }
    .branwell-hamburger { display: flex; }
    .branwell-dash-grid { grid-template-columns: 1fr 300px; }
}

@media (max-width: 767px) {
    .branwell-header { padding: 0 12px; gap: 8px; }
    .branwell-header__title span { display: none; }
    .branwell-header__search { display: none; }
    .branwell-header__search.visible {
        display: flex; position: absolute; left: 0; right: 0; top: var(--header-h);
        width: 100%; margin: 0; padding: 10px 16px;
        background: var(--bg-surface); border-bottom: 1px solid var(--border);
        border-radius: 0; z-index: 50;
    }
    .branwell-search-toggle { display: flex; }
    .branwell-hamburger { width: 50px; height: 50px; }
    .branwell-hamburger svg { width: 26px; height: 26px; }
    .branwell-header__btn { width: 50px; height: 50px; }
    .branwell-header__btn svg { width: 24px; height: 24px; }
    .branwell-header__dot { top: 10px; right: 8px; }
    .branwell-main { padding: 16px; }
    .branwell-dash-grid { grid-template-columns: 1fr; gap: 14px; }
    .branwell-period-tabs { gap: 6px; margin-bottom: 16px; }
    .branwell-pill { font-size: 12.5px; padding: 6px 13px; }
    .branwell-metric-row.cols-2,
    .branwell-metric-row.cols-3 { grid-template-columns: 1fr; }
    .branwell-data-section__body { padding: 12px 14px; }
    .agent-card { padding: 16px; }
    .agent-card__avatar { width: 48px; height: 48px; }
    .agent-card__name { font-size: 16px; }
    .agent-card__header { gap: 12px; }
}

@media (max-width: 479px) {
    :root { --header-h: 52px; }
    .branwell-main { padding: 12px; }
    .branwell-metric__value { font-size: 18px; }
    .branwell-metric__label { font-size: 10px; }
    .agent-card__status { width: 100%; margin-top: 8px; }
    .branwell-header__btn--help { display: none; }
    .branwell-header__actions { gap: 0; }
    .branwell-header__btn { width: 52px; height: 52px; }
    .branwell-header__btn svg { width: 26px; height: 26px; }
}

/* ── Contract Administration ─────────────────────────────────── */
.bca-progress { margin-bottom: 4px; }
.bca-progress__bar {
    width: 100%; height: 8px; background: var(--bg-elevated);
    border-radius: 999px; overflow: hidden; border: 1px solid var(--border-subtle);
}
.bca-progress__fill {
    height: 100%; background: var(--green);
    border-radius: 999px; transition: width 0.6s ease;
    min-width: 2px;
}
.bca-progress__label {
    font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.5;
}

.bca-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 3px 10px 3px 8px;
    border-radius: 999px; white-space: nowrap;
}
.bca-status svg { flex-shrink: 0; }
.bca-status--signed {
    background: var(--green-soft); color: var(--green);
    border: 1px solid #05966925;
}
.bca-status--pending {
    background: var(--amber-soft); color: var(--amber);
    border: 1px solid #d9770625;
}

.bca-reset-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500; color: var(--accent);
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 5px 12px;
    cursor: pointer; font-family: inherit;
    transition: all var(--transition);
}
.bca-reset-btn:hover {
    background: var(--accent-soft); border-color: var(--accent);
}
.bca-reset-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* ── Contract Agent View (non-admin) ─────────────────────────── */
.bca-agent-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    box-shadow: 0 1px 3px #0000000a; margin-bottom: 16px;
}
.bca-agent-card--action {
    border-left: 4px solid var(--amber);
}
.bca-agent-card--complete {
    border-left: 4px solid var(--green);
}
.bca-agent-card__header {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px;
}
.bca-agent-card__icon {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bca-agent-card__icon svg { width: 20px; height: 20px; }
.bca-agent-card--action .bca-agent-card__icon {
    background: var(--amber-soft); color: var(--amber);
}
.bca-agent-card--complete .bca-agent-card__icon {
    background: var(--green-soft); color: var(--green);
}
.bca-agent-card__title {
    font-size: 16px; font-weight: 600; margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.bca-agent-card__text {
    font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0;
}
.bca-agent-card__text strong { color: var(--text-primary); }
.bca-agent-card__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; background: var(--accent); border: none;
    border-radius: var(--radius-sm); color: #fff;
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all var(--transition);
    text-decoration: none; margin-top: 14px;
}
.bca-agent-card__btn:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; text-decoration: none; }
.bca-agent-card__btn:active { transform: scale(0.97); }
.bca-agent-card__btn svg { width: 16px; height: 16px; }

/* ── ICA Agreement Signing ───────────────────────────────────── */
.bica-pdf-frame {
    width: 100%; height: 900px;
    border: none; border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}
.bica-checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 20px;
}
.bica-checkbox-row input[type="checkbox"] {
    margin-top: 3px; flex-shrink: 0;
    width: 16px; height: 16px; accent-color: var(--accent);
}
.bica-checkbox-row label {
    font-size: 14px; color: var(--text-primary); line-height: 1.5;
    cursor: pointer;
}

@media (max-width: 767px) {
    .bica-pdf-frame { height: 500px; }
}

/* ── Scroll Wheel Time Picker (Branwell) ─────────────────────── */
.btp-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 99999;
    align-items: flex-end; justify-content: center;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btp-overlay.btp-open { display: flex; }

.btp-modal {
    background: var(--bg-surface); border-radius: 16px 16px 0 0;
    width: 100%; max-width: 400px; padding: 0;
    box-shadow: 0 -4px 40px rgba(0,0,0,0.15);
    animation: btpSlideUp 0.3s ease;
}
@keyframes btpSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.btp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.btp-title {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    letter-spacing: -0.2px;
}
.btp-cancel, .btp-done {
    background: none; border: none; cursor: pointer;
    font-size: 14px; font-weight: 500; font-family: inherit;
    padding: 6px 12px; border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.btp-cancel { color: var(--text-muted); }
.btp-cancel:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.btp-done { color: var(--accent); font-weight: 600; }
.btp-done:hover { background: var(--accent-soft); }

.btp-body {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 20px 8px; position: relative;
    user-select: none; -webkit-user-select: none;
}

.btp-highlight {
    position: absolute; left: 16px; right: 16px;
    top: 50%; height: 44px; transform: translateY(-50%);
    background: var(--bg-elevated); border-radius: 10px;
    pointer-events: none; z-index: 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.btp-drum {
    position: relative; z-index: 1;
    height: calc(44px * 5); overflow: hidden; cursor: grab;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 65%, rgba(0,0,0,0.2) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 65%, rgba(0,0,0,0.2) 85%, transparent 100%);
}
.btp-drum:active { cursor: grabbing; }
.btp-hours { width: 72px; }
.btp-minutes { width: 72px; }
.btp-ampm { width: 68px; }

.btp-drum-inner {
    transition: transform 0.08s linear;
    will-change: transform;
}
.btp-drum-inner.btp-snapping {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.btp-drum-inner.btp-decelerating {
    transition: transform 0.6s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.btp-drum-item {
    height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 500; color: var(--border);
    transition: color 0.25s ease, transform 0.25s ease;
    letter-spacing: 0.5px; font-variant-numeric: tabular-nums;
}
.btp-drum-item.active {
    color: var(--text-primary); transform: scale(1.05);
}
.btp-drum-item.near {
    color: var(--text-muted);
}

.btp-sep {
    font-size: 22px; font-weight: 600; color: var(--text-muted);
    padding: 0 2px; position: relative; z-index: 2; align-self: center;
}

.btp-preview {
    text-align: center; padding: 0 20px 20px;
}
.btp-preview-time {
    font-size: 36px; font-weight: 300; letter-spacing: 1px;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.btp-preview-period {
    font-size: 16px; font-weight: 600; color: var(--accent);
    margin-left: 4px; letter-spacing: 1px;
}

/* Desktop: center modal */
@media (min-width: 600px) {
    .btp-overlay { align-items: center; }
    .btp-modal {
        border-radius: 16px; max-width: 340px;
        animation: btpFadeIn 0.25s ease;
    }
    @keyframes btpFadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
}

.btp-hint {
    text-align: center; padding: 0 20px 16px;
    font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px;
}

/* =============================================================
   Notification Broadcast
   ============================================================= */
.nb-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 3px #0000000a;
}
.nb-card__header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 20px;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.nb-card__header-icon { font-size: 16px; }
.nb-card__header-title { flex: 1; }
.nb-card__body { padding: 20px; }

/* Audience toggle */
.nb-audience-toggle {
    display: flex; gap: 8px;
}
.nb-audience-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-elevated);
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.nb-audience-btn:hover { background: var(--bg-hover); }
.nb-audience-btn--active {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent); font-weight: 600;
}
.nb-audience-btn__icon { font-size: 15px; }

/* Agent picker */
.nb-agent-picker__controls {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.nb-pick-btn {
    padding: 4px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-elevated);
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; font-family: inherit; transition: all var(--transition);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.nb-pick-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.nb-pick-count {
    margin-left: auto; font-size: 12px;
    font-family: 'DM Mono', monospace; color: var(--text-muted);
}

.nb-agent-list {
    max-height: 240px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}
.nb-agent-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition);
}
.nb-agent-item:last-child { border-bottom: none; }
.nb-agent-item:hover { background: var(--bg-hover); }
.nb-agent-item input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer;
}
.nb-agent-item__name {
    flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.nb-agent-item__code {
    font-size: 11px; font-family: 'DM Mono', monospace;
    color: var(--text-muted); background: var(--bg-hover);
    padding: 2px 7px; border-radius: 4px;
}

/* Textarea override */
.nb-textarea {
    height: auto; min-height: 100px; padding: 12px 14px;
    resize: vertical; line-height: 1.6;
}

/* Preview */
.nb-preview-wrap { margin-bottom: 20px; }
.nb-preview-item {
    display: flex; gap: 12px; padding: 14px 16px;
    border-radius: var(--radius-sm); align-items: flex-start;
}
.nb-preview-item__icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; }
.nb-preview-item__body { flex: 1; }
.nb-preview-item__title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.nb-preview-item__msg { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.nb-preview-item__link {
    display: inline-block; margin-top: 6px;
    font-size: 12px; font-weight: 600; color: var(--accent);
    text-decoration: none;
}

/* Actions bar */
.nb-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 8px; border-top: 1px solid var(--border-subtle);
}
.nb-action-btn {
    height: 44px; padding: 0 20px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer;
    transition: all var(--transition); display: flex; align-items: center; gap: 6px;
}
.nb-action-btn--outline {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary);
}
.nb-action-btn--outline:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Status */
.nb-status {
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; margin-bottom: 16px;
}
.nb-status--success { background: var(--green-soft); border-left: 3px solid var(--green); color: var(--green); }
.nb-status--error { background: var(--red-soft); border-left: 3px solid var(--red); color: var(--red); }

/* Inline confirm bar */
.nb-confirm-bar {
    display: none; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: #fef3c7; border: 1px solid var(--amber);
    border-radius: var(--radius-sm); margin-bottom: 12px;
}
.nb-confirm-bar__msg {
    flex: 1; font-size: 13px; color: var(--text-primary);
}

/* Mobile */
@media (max-width: 479px) {
    .nb-audience-toggle { flex-direction: column; }
    .nb-actions { flex-direction: column; }
    .nb-actions .branwell-form-submit { width: 100%; }
    .nb-action-btn { width: 100%; justify-content: center; }
    .branwell-report-thead-light { display: none; }
    .branwell-report-row { flex-direction: column; padding: 12px 16px; gap: 4px; }
}

/* ── Cashier Terminal ────────────────────────────────────────── */
.csh-locked { opacity: 0.45; pointer-events: none; }
.csh-rc-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid #eee; font-size: 13px;
}
.csh-rk { color: #555; }
.csh-rv { font-weight: 700; color: #111; font-family: 'DM Mono', monospace; }
@keyframes cshReceiptIn {
    from { transform: scale(0.8) translateY(40px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
@media print {
    .bw-sidebar, .bw-topbar, .branwell-page-intro, #csh-card1, #csh-card2, #csh-card3 { display: none !important; }
    #csh-receipt-overlay { position: static; background: none; backdrop-filter: none; }
    #csh-receipt-overlay > div { box-shadow: none; max-width: 100%; }
}

/* ── Add New Pill ────────────────────────────────────────────── */
.asm-chip-add {
    border: 2px dashed var(--border) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex; align-items: center; gap: 6px;
}
.asm-chip-add:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
}
.asm-chip-add svg { flex-shrink: 0; }