/*
D4C CMC Presentation Authority v1.1.0
Visual only. Functional CMC ownership remains in CMC Video Billing and related business-logic plugins.
Network World palette: light steel work surfaces, charcoal/navy structure, cyan/blue normal actions,
red only for warnings/destructive/restricted states.
*/

:root {
    --d4c-cmc-surface: #f8fafb;
    --d4c-cmc-surface-2: #eef4f6;
    --d4c-cmc-surface-3: #e8eef0;
    --d4c-cmc-ink: #153b49;
    --d4c-cmc-muted: #617078;
    --d4c-cmc-structure: #20282d;
    --d4c-cmc-structure-2: #313a3f;
    --d4c-cmc-accent: #087f99;
    --d4c-cmc-accent-hover: #066d83;
    --d4c-cmc-accent-soft: #e8f6f8;
    --d4c-cmc-border: #c2ccd0;
    --d4c-cmc-danger: #7b252c;
    --d4c-cmc-danger-hover: #672027;
    --d4c-cmc-warning-bg: #fff4e5;
    --d4c-cmc-warning-border: #b06a00;
    --d4c-cmc-success: #087f99;
}

/* ==========================================================
   Shared CMC application surfaces
   ========================================================== */

.cmc-vb-booking-box,
.cmc-vb-notifications,
.cmc-vb-booking-list,
.cmc-vb-leaderboard,
.cmc-vb-monthly-calendar,
.cmc-vb-session-manager,
.cmc-vb-booking-dashboard,
.cmc-vb-calendar,
.cmc-vb-schedule,
.cmc-vb-host-panel,
.cmc-vb-host-directory,
.cmc-vb-host-status-controls,
.cmc-vb-bm-controls,
.cmc-vb-host-dashboard,
.cmc-vb-calendar-booking-form {
    background: linear-gradient(180deg, var(--d4c-cmc-surface) 0%, var(--d4c-cmc-surface-2) 100%) !important;
    color: var(--d4c-cmc-ink) !important;
    border: 1px solid var(--d4c-cmc-border) !important;
    border-top: 3px solid var(--d4c-cmc-accent) !important;
    border-radius: 3px !important;
    box-shadow: 0 8px 20px rgba(17,34,40,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
    font-family: Arial, sans-serif;
}

.cmc-vb-booking-box h1,
.cmc-vb-booking-box h2,
.cmc-vb-booking-box h3,
.cmc-vb-notifications h1,
.cmc-vb-notifications h2,
.cmc-vb-notifications h3,
.cmc-vb-booking-list h1,
.cmc-vb-booking-list h2,
.cmc-vb-booking-list h3,
.cmc-vb-leaderboard h1,
.cmc-vb-leaderboard h2,
.cmc-vb-leaderboard h3,
.cmc-vb-monthly-calendar h1,
.cmc-vb-monthly-calendar h2,
.cmc-vb-monthly-calendar h3,
.cmc-vb-session-manager h1,
.cmc-vb-session-manager h2,
.cmc-vb-session-manager h3,
.cmc-vb-booking-dashboard h1,
.cmc-vb-booking-dashboard h2,
.cmc-vb-booking-dashboard h3,
.cmc-vb-calendar h1,
.cmc-vb-calendar h2,
.cmc-vb-calendar h3,
.cmc-vb-schedule h1,
.cmc-vb-schedule h2,
.cmc-vb-schedule h3,
.cmc-vb-host-panel h1,
.cmc-vb-host-panel h2,
.cmc-vb-host-panel h3,
.cmc-vb-host-directory h1,
.cmc-vb-host-directory h2,
.cmc-vb-host-directory h3,
.cmc-vb-host-status-controls h1,
.cmc-vb-host-status-controls h2,
.cmc-vb-host-status-controls h3,
.cmc-vb-bm-controls h1,
.cmc-vb-bm-controls h2,
.cmc-vb-bm-controls h3,
.cmc-vb-host-dashboard h1,
.cmc-vb-host-dashboard h2,
.cmc-vb-host-dashboard h3 {
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-booking-box p,
.cmc-vb-notifications p,
.cmc-vb-booking-list p,
.cmc-vb-leaderboard p,
.cmc-vb-monthly-calendar p,
.cmc-vb-session-manager p,
.cmc-vb-booking-dashboard p,
.cmc-vb-calendar p,
.cmc-vb-schedule p,
.cmc-vb-host-panel p,
.cmc-vb-host-directory p,
.cmc-vb-host-status-controls p,
.cmc-vb-bm-controls p,
.cmc-vb-host-dashboard p,
.cmc-vb-calendar-booking-form p,
.cmc-vb-booking-box label,
.cmc-vb-schedule label,
.cmc-vb-host-status-controls label,
.cmc-vb-host-dashboard label {
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-booking-box small,
.cmc-vb-notifications small,
.cmc-vb-booking-list small,
.cmc-vb-leaderboard small,
.cmc-vb-monthly-calendar small,
.cmc-vb-session-manager small,
.cmc-vb-booking-dashboard small,
.cmc-vb-calendar small,
.cmc-vb-schedule small,
.cmc-vb-host-panel small,
.cmc-vb-host-directory small,
.cmc-vb-host-status-controls small,
.cmc-vb-bm-controls small,
.cmc-vb-host-dashboard small,
.cmc-vb-host-status-meta {
    color: var(--d4c-cmc-muted) !important;
}

/* ==========================================================
   Forms and normal actions
   ========================================================== */

.cmc-vb-booking-box input,
.cmc-vb-booking-box select,
.cmc-vb-booking-box textarea,
.cmc-vb-monthly-calendar input,
.cmc-vb-monthly-calendar select,
.cmc-vb-session-manager input,
.cmc-vb-session-manager select,
.cmc-vb-calendar input,
.cmc-vb-calendar select,
.cmc-vb-schedule input,
.cmc-vb-schedule select,
.cmc-vb-host-directory input,
.cmc-vb-host-directory select,
.cmc-vb-host-status-controls input,
.cmc-vb-host-status-controls select,
.cmc-vb-host-dashboard input,
.cmc-vb-host-dashboard select,
.cmc-vb-host-dashboard textarea,
.cmc-vb-calendar-booking-form input,
.cmc-vb-calendar-booking-form select,
.cmc-vb-calendar-booking-form textarea {
    background: #ffffff !important;
    color: var(--d4c-cmc-ink) !important;
    border: 1px solid #aebcc2 !important;
    border-radius: 2px !important;
    box-shadow: inset 0 1px 2px rgba(18,43,52,.06) !important;
}

.cmc-vb-booking-box input:focus,
.cmc-vb-booking-box select:focus,
.cmc-vb-booking-box textarea:focus,
.cmc-vb-monthly-calendar select:focus,
.cmc-vb-schedule input:focus,
.cmc-vb-schedule select:focus,
.cmc-vb-host-directory input:focus,
.cmc-vb-host-directory select:focus,
.cmc-vb-host-status-controls select:focus,
.cmc-vb-host-dashboard input:focus,
.cmc-vb-host-dashboard textarea:focus {
    border-color: var(--d4c-cmc-accent) !important;
    outline: 1px solid var(--d4c-cmc-accent) !important;
    box-shadow: 0 0 0 1px rgba(8,127,153,.12) !important;
}

.cmc-vb-booking-box button,
.cmc-vb-booking-box input[type="submit"],
.cmc-vb-booking-box .button,
.cmc-vb-notifications button,
.cmc-vb-booking-list button:not(.reject),
.cmc-vb-marketplace-filter button,
.cmc-vb-leaderboard a,
.cmc-vb-monthly-calendar button,
.cmc-vb-monthly-calendar .button,
.cmc-vb-session-manager button,
.cmc-vb-booking-dashboard button,
.cmc-vb-booking-dashboard .button,
.cmc-vb-booking-dashboard a.cmc-vb-action,
.cmc-vb-calendar-slot a,
.cmc-vb-calendar-slot button,
.cmc-vb-schedule button,
.cmc-vb-host-actions a,
.cmc-vb-host-actions button,
.cmc-vb-host-actions .better-messages-pm-button,
.cmc-vb-host-actions .cmc-vb-message-host-btn,
.cmc-vb-host-status-controls button,
.cmc-vb-bm-controls button:not(.stop),
.cmc-vb-host-dashboard .cmc-vb-btn,
.cmc-vb-host-dashboard button,
.d4c-hfp-box button,
.d4c-hfp-actions a {
    background: var(--d4c-cmc-accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--d4c-cmc-accent-hover) !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.cmc-vb-booking-box button:hover,
.cmc-vb-booking-box input[type="submit"]:hover,
.cmc-vb-booking-box .button:hover,
.cmc-vb-notifications button:hover,
.cmc-vb-booking-list button:not(.reject):hover,
.cmc-vb-marketplace-filter button:hover,
.cmc-vb-leaderboard a:hover,
.cmc-vb-monthly-calendar button:hover,
.cmc-vb-monthly-calendar .button:hover,
.cmc-vb-session-manager button:hover,
.cmc-vb-booking-dashboard button:hover,
.cmc-vb-booking-dashboard .button:hover,
.cmc-vb-booking-dashboard a.cmc-vb-action:hover,
.cmc-vb-calendar-slot a:hover,
.cmc-vb-calendar-slot button:hover,
.cmc-vb-schedule button:hover,
.cmc-vb-host-actions a:hover,
.cmc-vb-host-actions button:hover,
.cmc-vb-host-status-controls button:hover,
.cmc-vb-bm-controls button:not(.stop):hover,
.cmc-vb-host-dashboard .cmc-vb-btn:hover,
.cmc-vb-host-dashboard button:hover,
.d4c-hfp-box button:hover,
.d4c-hfp-actions a:hover {
    background: var(--d4c-cmc-accent-hover) !important;
    border-color: var(--d4c-cmc-accent-hover) !important;
    color: #ffffff !important;
}

/* Destructive actions keep purposeful D4C red. */
.cmc-vb-booking-list button.reject,
.cmc-vb-bm-controls button.stop,
.cmc-vb-booking-dashboard a.cmc-vb-action[href*="cancel"],
.cmc-vb-booking-dashboard a.cmc-vb-action[href*="reject"],
.cmc-vb-schedule button[name*="delete"],
.cmc-vb-schedule button[value*="delete"] {
    background: var(--d4c-cmc-danger) !important;
    border-color: var(--d4c-cmc-danger) !important;
    color: #ffffff !important;
}

.cmc-vb-booking-list button.reject:hover,
.cmc-vb-bm-controls button.stop:hover,
.cmc-vb-booking-dashboard a.cmc-vb-action[href*="cancel"]:hover,
.cmc-vb-booking-dashboard a.cmc-vb-action[href*="reject"]:hover,
.cmc-vb-schedule button[name*="delete"]:hover,
.cmc-vb-schedule button[value*="delete"]:hover {
    background: var(--d4c-cmc-danger-hover) !important;
    border-color: var(--d4c-cmc-danger-hover) !important;
}

/* ==========================================================
   Tables
   ========================================================== */

.cmc-vb-booking-table,
.cmc-vb-leaderboard table,
.cmc-vb-session-manager table,
.cmc-vb-booking-dashboard table,
.cmc-vb-schedule table,
.cmc-vb-host-dashboard .cmc-vb-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff !important;
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-booking-table th,
.cmc-vb-booking-table td,
.cmc-vb-leaderboard th,
.cmc-vb-leaderboard td,
.cmc-vb-session-manager th,
.cmc-vb-session-manager td,
.cmc-vb-booking-dashboard th,
.cmc-vb-booking-dashboard td,
.cmc-vb-schedule th,
.cmc-vb-schedule td,
.cmc-vb-host-dashboard .cmc-vb-table th,
.cmc-vb-host-dashboard .cmc-vb-table td {
    border: 1px solid var(--d4c-cmc-border) !important;
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-booking-table th,
.cmc-vb-leaderboard th,
.cmc-vb-session-manager th,
.cmc-vb-booking-dashboard th,
.cmc-vb-schedule th,
.cmc-vb-host-dashboard .cmc-vb-table th {
    background: var(--d4c-cmc-structure) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.cmc-vb-booking-table tbody tr:nth-child(even) td,
.cmc-vb-leaderboard tbody tr:nth-child(even) td,
.cmc-vb-session-manager tbody tr:nth-child(even) td,
.cmc-vb-booking-dashboard tbody tr:nth-child(even) td,
.cmc-vb-schedule tbody tr:nth-child(even) td,
.cmc-vb-host-dashboard .cmc-vb-table tbody tr:nth-child(even) td {
    background: var(--d4c-cmc-surface-2) !important;
}

.cmc-vb-booking-table a,
.cmc-vb-leaderboard table a,
.cmc-vb-session-manager table a,
.cmc-vb-booking-dashboard table a,
.cmc-vb-schedule table a,
.cmc-vb-host-dashboard .cmc-vb-table a {
    color: var(--d4c-cmc-accent) !important;
}

.cmc-vb-booking-table a:hover,
.cmc-vb-leaderboard table a:hover,
.cmc-vb-session-manager table a:hover,
.cmc-vb-booking-dashboard table a:hover,
.cmc-vb-schedule table a:hover,
.cmc-vb-host-dashboard .cmc-vb-table a:hover {
    color: var(--d4c-cmc-accent-hover) !important;
}

/* ==========================================================
   Host Panel + Host Directory / Marketplace
   ========================================================== */

.cmc-vb-host-panel {
    padding: 18px !important;
}

.cmc-vb-host-badge,
.cmc-vb-featured {
    display: inline-block;
    background: var(--d4c-cmc-accent) !important;
    color: #ffffff !important;
    border: 1px solid var(--d4c-cmc-accent-hover) !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
}

.cmc-vb-gamipress-note {
    background: var(--d4c-cmc-accent-soft) !important;
    color: var(--d4c-cmc-accent-hover) !important;
    border: 1px solid #78b8c5 !important;
}

.cmc-vb-host-stats .cmc-vb-host-stat,
.cmc-vb-host-stats > div,
.cmc-vb-host-stats-banner > div {
    background: var(--d4c-cmc-structure) !important;
    border: 1px solid #4b585e !important;
    color: #ffffff !important;
}

.cmc-vb-host-stats .cmc-vb-host-stat strong,
.cmc-vb-host-stats small,
.cmc-vb-host-stats-banner small {
    color: #78b8c5 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.cmc-vb-host-stats .cmc-vb-host-stat span,
.cmc-vb-host-stats strong,
.cmc-vb-host-stats-banner strong {
    color: #ffffff !important;
}

.cmc-vb-host-directory {
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 0 22px !important;
    overflow: hidden;
}

.cmc-vb-host-directory > h1:first-child,
.cmc-vb-host-directory > h2:first-child,
.cmc-vb-host-directory > h3:first-child,
.cmc-vb-host-directory > h4:first-child {
    margin: 0 0 18px !important;
    padding: 16px 20px !important;
    background: linear-gradient(180deg, var(--d4c-cmc-structure-2) 0%, var(--d4c-cmc-structure) 100%) !important;
    border-bottom: 2px solid var(--d4c-cmc-accent) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

body .cmc-vb-host-directory > p,
.cmc-vb-host-directory > form,
.cmc-vb-host-directory > .cmc-vb-host-grid,
.cmc-vb-host-directory > [class*="filter"] {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

body .cmc-vb-host-directory > p:first-of-type {
    margin-top: -2px !important;
    margin-bottom: 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(80,105,115,.22) !important;
    color: var(--d4c-cmc-muted) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.cmc-vb-host-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 520px)) !important;
    justify-content: start !important;
    gap: 16px !important;
}

.cmc-vb-host-card {
    width: 100% !important;
    max-width: 520px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #252f34 0%, #1b2327 100%) !important;
    color: #ffffff !important;
    border: 1px solid #5e6a70 !important;
    border-top: 2px solid var(--d4c-cmc-accent) !important;
    border-radius: 3px !important;
    box-shadow: 0 5px 14px rgba(10,20,24,.16) !important;
}

.cmc-vb-host-card h1,
.cmc-vb-host-card h2,
.cmc-vb-host-card h3,
.cmc-vb-host-card h4,
.cmc-vb-host-card strong,
.cmc-vb-host-card a:not(.cmc-vb-action) {
    color: #ffffff !important;
}

.cmc-vb-host-card p,
.cmc-vb-host-card span,
.cmc-vb-host-card small,
.cmc-vb-host-card [class*="updated"],
.cmc-vb-host-card [class*="meta"] {
    color: #d8e1e4 !important;
}

.cmc-vb-host-card img,
.cmc-vb-host-avatar img {
    border-color: var(--d4c-cmc-accent) !important;
}

.cmc-vb-status,
.cmc-vb-host-status,
.cmc-vb-booking-status,
.cmc-vb-session-status {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.cmc-vb-status.available,
.cmc-vb-host-status.available,
.cmc-vb-status-available,
.cmc-vb-booking-status.accepted,
.cmc-vb-status-accepted,
.cmc-vb-status-completed {
    background: var(--d4c-cmc-accent-soft) !important;
    color: var(--d4c-cmc-accent-hover) !important;
    border-color: #78b8c5 !important;
}

.cmc-vb-status.busy,
.cmc-vb-host-status.busy,
.cmc-vb-status-pending,
.cmc-vb-booking-status.pending {
    background: #fff4e5 !important;
    color: #805300 !important;
    border-color: #d9a44d !important;
}

.cmc-vb-status.away,
.cmc-vb-host-status.away,
.cmc-vb-status.offline,
.cmc-vb-host-status.offline {
    background: #eef1f2 !important;
    color: #617078 !important;
    border-color: #c8d0d3 !important;
}

.cmc-vb-status-rejected,
.cmc-vb-status-cancelled,
.cmc-vb-booking-status.rejected,
.cmc-vb-booking-status.cancelled {
    background: #f6e9ea !important;
    color: var(--d4c-cmc-danger) !important;
    border-color: #a85f65 !important;
}

/* ==========================================================
   Notifications
   ========================================================== */

.cmc-vb-notification-item {
    background: #ffffff !important;
    color: var(--d4c-cmc-ink) !important;
    border: 1px solid var(--d4c-cmc-border) !important;
    border-left: 4px solid #aebcc2 !important;
    border-radius: 3px !important;
}

.cmc-vb-notification-item.unread {
    background: var(--d4c-cmc-accent-soft) !important;
    border-color: #78b8c5 !important;
    border-left-color: var(--d4c-cmc-accent) !important;
}

.cmc-vb-notification-item strong,
.cmc-vb-notification-item h4,
.cmc-vb-notification-item .notification-title {
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-notification-item p,
.cmc-vb-notification-item span,
.cmc-vb-notification-item a {
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-notification-item a:hover {
    color: var(--d4c-cmc-accent) !important;
}

.cmc-vb-notification-item small,
.cmc-vb-notification-item .notification-date {
    color: var(--d4c-cmc-muted) !important;
}

/* ==========================================================
   Calendar / schedule
   ========================================================== */

.cmc-vb-calendar-slot,
.cmc-vb-month-day,
.cmc-vb-monthly-slot {
    background: #ffffff !important;
    color: var(--d4c-cmc-ink) !important;
    border: 1px solid var(--d4c-cmc-border) !important;
    border-radius: 3px !important;
}

.cmc-vb-calendar-slot strong,
.cmc-vb-monthly-calendar [class*="slot"] strong,
.cmc-vb-month-grid [class*="slot"] strong,
.cmc-vb-month-date,
.cmc-vb-month-count {
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-calendar-slot small,
.cmc-vb-monthly-calendar [class*="slot"] small,
.cmc-vb-month-grid [class*="slot"] small,
.cmc-vb-monthly-calendar .cmc-vb-no-slots,
.cmc-vb-monthly-calendar .no-slots,
.cmc-vb-month-grid .cmc-vb-no-slots,
.cmc-vb-month-grid .no-slots {
    color: var(--d4c-cmc-muted) !important;
}

.cmc-vb-month-head,
.cmc-vb-monthly-calendar th,
.cmc-vb-monthly-calendar .cmc-vb-weekday,
.cmc-vb-month-grid .cmc-vb-weekday {
    color: #ffffff !important;
    background: var(--d4c-cmc-structure) !important;
    font-weight: 700 !important;
}

.cmc-vb-month-day.is-today {
    border-color: var(--d4c-cmc-accent) !important;
    box-shadow: inset 0 0 0 1px var(--d4c-cmc-accent) !important;
}

.cmc-vb-month-day.empty,
.cmc-vb-monthly-slot.is-past {
    background: #eef1f2 !important;
    color: #7a878d !important;
}

.cmc-vb-monthly-slot.is-booked {
    background: #edf2f3 !important;
    border-color: #aebcc2 !important;
}

/* ==========================================================
   Dashboard cards, Better Messages CMC controls, notices
   ========================================================== */

.cmc-vb-host-dashboard .cmc-vb-card,
.cmc-vb-host-dashboard .cmc-vb-panel,
.cmc-vb-bm-controls .cmc-vb-bm-card {
    background: #ffffff !important;
    color: var(--d4c-cmc-ink) !important;
    border: 1px solid var(--d4c-cmc-border) !important;
    border-radius: 3px !important;
}

.cmc-vb-host-dashboard .cmc-vb-card strong,
.cmc-vb-bm-controls .cmc-vb-bm-card strong {
    color: var(--d4c-cmc-muted) !important;
}

.cmc-vb-host-dashboard .cmc-vb-card span,
.cmc-vb-bm-controls .cmc-vb-bm-card span {
    color: var(--d4c-cmc-ink) !important;
}

.cmc-vb-badge {
    background: var(--d4c-cmc-accent-soft) !important;
    color: var(--d4c-cmc-accent-hover) !important;
    border: 1px solid #78b8c5 !important;
}

.cmc-vb-good,
.cmc-vb-host-status-notice,
.cmc-vb-booking-notice,
.cmc-vb-notice:not(.cmc-vb-notice-error) {
    background: var(--d4c-cmc-accent-soft) !important;
    color: var(--d4c-cmc-ink) !important;
    border-color: #78b8c5 !important;
}

.cmc-vb-credit-warning {
    background: var(--d4c-cmc-warning-bg) !important;
    color: #5b3a00 !important;
    border-color: #d89b35 !important;
    border-left-color: var(--d4c-cmc-warning-border) !important;
}

.cmc-vb-notice-error,
.cmc-vb-private-denied,
.cmc-vb-error,
.cmc-vb-warn {
    background: #f6e9ea !important;
    color: var(--d4c-cmc-danger) !important;
    border-color: #a85f65 !important;
}

/* Private CMC session already follows the Network World design family. Keep it aligned, not redesigned. */
.cmc-vb-private-session {
    background: var(--d4c-cmc-surface-2) !important;
    border-color: rgba(102,148,176,.32) !important;
}
.cmc-vb-private-session-state,
.cmc-vb-private-video-action .bpbm-pm-button,
.cmc-vb-private-video-action .bm-pm-button {
    color: var(--d4c-cmc-accent-hover) !important;
}
.cmc-vb-private-video-action .bpbm-pm-button,
.cmc-vb-private-video-action .bm-pm-button {
    background: var(--d4c-cmc-accent) !important;
    color: #ffffff !important;
    border-color: var(--d4c-cmc-accent-hover) !important;
}

/* ==========================================================
   D4C finance companion pages
   ========================================================== */

.d4c-hfp-box {
    background: linear-gradient(180deg, var(--d4c-cmc-surface) 0%, var(--d4c-cmc-surface-2) 100%) !important;
    color: var(--d4c-cmc-ink) !important;
    border-color: var(--d4c-cmc-border) !important;
}

.d4c-hfp-box h2,
.d4c-hfp-box h3,
.d4c-hfp-box label {
    color: var(--d4c-cmc-ink) !important;
}

.d4c-hfp-card strong {
    color: #78b8c5 !important;
}

.d4c-hfp-card span {
    color: #ffffff !important;
}

/* ==========================================================
   Request Booking: retain the approved constrained workspace layout
   ========================================================== */

.cmc-vb-booking-box {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 0 28px !important;
    overflow: hidden;
}

.cmc-vb-booking-box > h1:first-child,
.cmc-vb-booking-box > h2:first-child,
.cmc-vb-booking-box > h3:first-child,
.cmc-vb-booking-box > h4:first-child {
    margin: 0 0 24px !important;
    padding: 20px 28px !important;
    background: linear-gradient(180deg, var(--d4c-cmc-structure-2) 0%, var(--d4c-cmc-structure) 100%) !important;
    border-bottom: 2px solid var(--d4c-cmc-accent) !important;
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
}

.cmc-vb-booking-box form,
.cmc-vb-booking-box > p,
.cmc-vb-booking-box > label,
.cmc-vb-booking-box > div:not([class*="notice"]):not([class*="message"]) {
    margin-left: 28px;
    margin-right: 28px;
}

/* ==========================================================
   Responsive rules
   ========================================================== */

@media (max-width: 960px) {
    .cmc-vb-booking-box {
        max-width: calc(100% - 30px);
    }
}

@media (max-width: 700px) {
    .cmc-vb-booking-table,
    .cmc-vb-leaderboard table,
    .cmc-vb-session-manager table,
    .cmc-vb-booking-dashboard table,
    .cmc-vb-schedule table,
    .cmc-vb-host-dashboard .cmc-vb-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .cmc-vb-booking-box {
        max-width: calc(100% - 20px);
        margin: 18px auto;
    }
    .cmc-vb-booking-box > h1:first-child,
    .cmc-vb-booking-box > h2:first-child,
    .cmc-vb-booking-box > h3:first-child,
    .cmc-vb-booking-box > h4:first-child {
        padding: 16px 18px !important;
        font-size: 18px !important;
    }
    .cmc-vb-booking-box form,
    .cmc-vb-booking-box > p,
    .cmc-vb-booking-box > label,
    .cmc-vb-booking-box > div:not([class*="notice"]):not([class*="message"]) {
        margin-left: 18px;
        margin-right: 18px;
    }
    body .cmc-vb-host-directory > p,
    .cmc-vb-host-directory > form,
    .cmc-vb-host-directory > .cmc-vb-host-grid,
    .cmc-vb-host-directory > [class*="filter"] {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
    .cmc-vb-host-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .cmc-vb-host-card {
        max-width: 100% !important;
    }
}

/* ==========================================================
   v1.1.1 — Booking calendar slot text ownership correction
   Exact selectors intentionally supersede the legacy
   D4C Calendar Slot Text Fix without changing slot geometry
   or booking behaviour.
   ========================================================== */
.cmc-vb-calendar-grid .cmc-vb-calendar-slot strong,
.cmc-vb-calendar .cmc-vb-calendar-slot strong,
.cmc-vb-calendar-slot strong {
    color: var(--d4c-cmc-ink) !important;
    font-weight: 700 !important;
}

.cmc-vb-calendar-grid .cmc-vb-calendar-slot small,
.cmc-vb-calendar .cmc-vb-calendar-slot small,
.cmc-vb-calendar-slot small {
    color: #506c78 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}


/* ==========================================================
   v1.1.2 — Monthly calendar no-slot text ownership correction
   Exact selectors supersede the legacy Calendar Slot Text Fix
   white small-text rule while preserving past-day fade/geometry.
   ========================================================== */
.cmc-vb-month-grid .cmc-vb-month-day small,
.cmc-vb-monthly-calendar .cmc-vb-month-day small {
    color: var(--d4c-cmc-ink) !important;
    font-weight: 600 !important;
}