/**
 * Premium Futuristic Dark-Glassmorphism Styling for Onsite Event Booking (local_pakmedbook).
 *
 * Designed with a deep-space background gradient, translucent panels, neon glows, 
 * sleek custom form elements, full print media, and premium micro-animations.
 *
 * @package    local_pakmedbook
 * @copyright  2026 Suman Kumar Das and Digital Tricksters
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* Core Space & Glass Theme Tokens */
:root {
    --bu-bg-dark: #070c19;
    --bu-primary-grad: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #d946ef 100%);
    --bu-accent-grad: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%);
    
    --bu-card-bg: rgba(13, 22, 47, 0.45);
    --bu-card-bg-hover: rgba(20, 30, 65, 0.6);
    --bu-border-glass: rgba(255, 255, 255, 0.08);
    --bu-border-glass-hover: rgba(255, 255, 255, 0.15);
    
    --bu-glow-blue: 0 0 15px rgba(99, 102, 241, 0.4);
    --bu-glow-purple: 0 0 20px rgba(168, 85, 247, 0.5);
    --bu-glow-cyan: 0 0 15px rgba(34, 211, 238, 0.4);
    
    --bu-text-title: #f8fafc;
    --bu-text-body: #e6edf5;
    --bu-text-muted: #aab8ca;
    
    --bu-success: #10b981;
    --bu-success-glow: 0 0 15px rgba(16, 185, 129, 0.35);
    --bu-warning: #f59e0b;
    --bu-danger: #f43f5e;
    --bu-danger-glow: 0 0 15px rgba(244, 63, 94, 0.35);
}

/* Override Moodle Theme Narrow Layout Restrictions.
   These target core containers deliberately, and are safe here because this
   stylesheet is only ever loaded on this plugin's own pages. The equivalent
   rule in lib.php is guarded, because that one is injected site-wide. */
#page.container-fluid, 
#page-content, 
#region-main, 
.main-inner, 
#region-main-box, 
.bu-dashboard .tertiary-navigation-full {
    max-width: 100% !important;
    width: 100% !important;
}

/* Dashboard Container Layout */
.bu-dashboard {
    background: radial-gradient(circle at 50% 50%, #0c1530 0%, #030712 100%);
    border-radius: 24px;
    padding: 35px 45px;
    border: 1px solid var(--bu-border-glass);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: var(--bu-text-body);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0 auto 40px auto !important;
    max-width: 1450px !important;
    width: 100% !important;
    overflow: hidden;
    position: relative;
}

/* Deep Space Glowing Backdrops */
.bu-dashboard::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 350px;
    height: 350px;
    background: rgba(168, 85, 247, 0.15);
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
}

.bu-dashboard::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 350px;
    height: 350px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
}

/* Header Section */
.bu-header {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bu-border-glass);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(12px);
    margin-bottom: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 0 !important;
}

.bu-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.03em;
    /* Solid, theme-aware colour. The previous hardcoded gradient was clipped to
       the text with a transparent fill, so the heading faded into a dark page
       and vanished completely wherever background-clip is unsupported. */
    color: var(--bu-text-title);
}

.bu-header p {
    margin: 6px 0 0 0;
    color: var(--bu-text-muted);
    font-size: 1.05rem;
}

.bu-btn-header {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 24px;
    border-radius: 99px;
    font-weight: 700;
    border: 1px solid var(--bu-border-glass);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bu-btn-header:hover {
    background: var(--bu-primary-grad);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--bu-glow-purple);
}

/* Dashboard Grid Layout */
.bu-grid-dashboard {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) {
    .bu-grid-dashboard {
        flex-direction: row;
    }
    /* The catalogue takes the larger share: tiles need the width, while the
       bookings list is a narrow column of tickets. */
    .bu-grid-dashboard > :first-child {
        flex: 2.5;
        min-width: 0;
    }
    .bu-grid-dashboard > :last-child {
        flex: 1;
        min-width: 320px;
    }
}

/* Glassmorphic Card Panel */
.bu-dashboard .bu-card {
    background: #0d162f !important;
    border: 1px solid var(--bu-border-glass) !important;
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    color: #e2e8f0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.bu-card:hover {
    border-color: var(--bu-border-glass-hover);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.bu-card-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--bu-text-title);
    border-bottom: 1px solid var(--bu-border-glass);
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bu-card-title i {
    color: #a855f7;
}

/* Slot catalog list */
/* Catalogue tiles.
   auto-fill with a minimum track width means the same rule gives one column on
   a phone, two beside the "My bookings" panel, and four when the catalogue has
   the page to itself - without a breakpoint per case. */
.bu-slots-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
    align-items: stretch;
}

@media (max-width: 640px) {
    .bu-slots-catalog {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Premium Slot Item Card */
.bu-dashboard .bu-slot-item-card {
    background: #111a36 !important;
    border: 1px solid var(--bu-border-glass) !important;
    border-radius: 16px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    gap: 20px;
    color: #e2e8f0 !important;
}

/* Tile variant: a column, full height of its grid track, no outer padding
   because the banner has to reach the card edges. */
.bu-dashboard .bu-slot-item-card.bu-slot-tile {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    height: 100%;
    background: #0f1830 !important;
}

.bu-slot-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px;
    min-width: 0;
}

/* Pushes the call to action to the bottom so buttons line up across a row
   whatever length the titles and descriptions happen to be. */
.bu-slot-tile-cta {
    margin-top: auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
}

.bu-slot-tile .bu-event-card-banner h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Long titles and descriptions must not force a tile wider than its track. */
.bu-slot-tile-body,
.bu-slot-tile-body * {
    overflow-wrap: anywhere;
}

.bu-slot-plan-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--bu-border-glass-hover);
    color: var(--bu-text-body) !important;
    padding: 4px 8px;
    font-size: 0.72rem;
    border-radius: 6px;
    line-height: 1.35;
}

/* Specific high-contrast text overrides to prevent theme backdrop conflicts */
.bu-dashboard h1,
.bu-dashboard h2,
.bu-dashboard h3,
.bu-dashboard h4,
.bu-dashboard h5,
.bu-dashboard h6 {
    color: #f8fafc !important;
}

.bu-dashboard p,
.bu-dashboard span,
.bu-dashboard div,
.bu-dashboard label,
.bu-dashboard td,
.bu-dashboard th,
.bu-dashboard strong {
    color: #e2e8f0 !important;
}

.bu-dashboard .text-muted,
.bu-dashboard .small,
.bu-dashboard small {
    color: #94a3b8 !important;
}

.bu-dashboard .text-success,
.bu-dashboard .text-success * {
    color: #10b981 !important;
}

.bu-dashboard .text-danger,
.bu-dashboard .text-danger * {
    color: #f43f5e !important;
}

.bu-dashboard .text-primary,
.bu-dashboard .text-primary * {
    color: #c084fc !important;
}

.bu-dashboard .bu-slot-item-card:hover {
    background: #152248 !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

.bu-slot-info {
    flex: 1;
}

.bu-slot-price-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--bu-accent-grad);
    color: #070c19;
    padding: 5px 16px;
    font-size: 0.85rem;
    font-weight: 800;
    border-bottom-left-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.bu-slot-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding-right: 90px;
    color: var(--bu-text-title);
}

.bu-slot-desc {
    font-size: 0.95rem;
    color: var(--bu-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.bu-slot-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 25px;
    font-size: 0.92rem;
    color: var(--bu-text-body);
}

.bu-slot-details-grid div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bu-slot-details-grid i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .bu-slot-item-card {
        flex-direction: column;
        align-items: stretch;
    }
    .bu-slot-details-grid {
        grid-template-columns: 1fr;
    }
}

.bu-slot-action {
    min-width: 170px;
    display: flex;
    align-items: center;
}

/* Premium Buttons */
.bu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 99px;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
}

.bu-btn-primary {
    background: var(--bu-primary-grad);
    /* Flips to near-black automatically when the chosen brand colour is light
       enough that white text would fail contrast. Falls back to white when the
       branding stylesheet has not been injected. */
    color: var(--bu-on-primary, #ffffff) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.bu-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--bu-glow-purple);
}

.bu-btn-secondary {
    background: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.bu-btn-secondary:hover:not(:disabled) {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #94a3b8 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.bu-btn-danger {
    background: var(--bu-danger);
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.2);
}

.bu-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: var(--bu-danger-glow);
}

.bu-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Badges */
.bu-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.bu-badge-pending { 
    background: rgba(245, 158, 11, 0.15) !important; 
    color: #f59e0b !important; 
    border-color: rgba(245, 158, 11, 0.3) !important; 
}
.bu-badge-confirmed { 
    background: rgba(16, 185, 129, 0.15) !important; 
    color: #10b981 !important; 
    border-color: rgba(16, 185, 129, 0.3) !important; 
}
.bu-badge-cancelled { 
    background: rgba(244, 63, 94, 0.15) !important; 
    color: #f43f5e !important; 
    border-color: rgba(244, 63, 94, 0.3) !important; 
}
.bu-badge-unpaid { 
    background: rgba(249, 115, 22, 0.15) !important; 
    color: #f97316 !important; 
    border-color: rgba(249, 115, 22, 0.3) !important; 
}
.bu-badge-paid { 
    background: rgba(16, 185, 129, 0.15) !important; 
    color: #10b981 !important; 
    border-color: rgba(16, 185, 129, 0.3) !important; 
}
.bu-badge-waiting { 
    background: rgba(99, 102, 241, 0.15) !important; 
    color: #818cf8 !important; 
    border-color: rgba(99, 102, 241, 0.3) !important; 
}

/* Table Styling */
.bu-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--bu-text-body);
}

.bu-table th {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 2px solid var(--bu-border-glass);
    padding: 16px 12px;
    font-weight: 700;
    text-align: left;
    color: var(--bu-text-title);
}

.bu-table td {
    border-bottom: 1px solid var(--bu-border-glass);
    padding: 16px 12px;
    vertical-align: middle;
}

.bu-table tr:hover td {
    background: rgba(255, 255, 255, 0.01);
}

/* Custom overlay modal (Out-Of-This-World overlay) */
.bu-custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 7, 18, 0.7);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bu-custom-modal-content {
    background: #0d152c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    box-shadow: var(--bu-glow-purple), 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    animation: buModalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--bu-text-body);
}

@keyframes buModalSlideIn {
    from {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.bu-modal-header {
    background: var(--bu-primary-grad);
    color: #ffffff;
    padding: 22px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bu-modal-header h3 {
    margin: 0;
    color: #ffffff !important;
    font-size: 1.4rem;
    font-weight: 800;
}

.bu-modal-close {
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
    color: #ffffff;
}

.bu-modal-close:hover {
    opacity: 1;
    transform: scale(1.15);
}

.bu-modal-body {
    padding: 30px;
}

.bu-modal-summary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bu-border-glass);
    border-radius: 12px;
    padding: 20px;
    font-size: 0.95rem;
    border-left: 4px solid #c084fc;
    color: var(--bu-text-body);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Booked Sessions layout */
.bu-my-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bu-booking-ticket {
    background: rgba(255, 255, 255, 0.01);
    border: 1px dashed var(--bu-border-glass-hover);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.25s ease;
}

.bu-booking-ticket:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Modern Glass Alerts */
.bu-alert {
    border-radius: 16px;
    padding: 20px 25px;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
}

.bu-alert-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: var(--bu-success-glow);
}

.bu-alert-danger {
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.25);
    box-shadow: var(--bu-danger-glow);
}

/* Premium Form Elements */
.bu-dashboard .form-control {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bu-border-glass);
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 16px;
    transition: all 0.25s ease;
}

.bu-dashboard .form-control:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.bu-dashboard .form-control::placeholder {
    color: var(--bu-text-muted);
}

/* Floating Action Button (FAB) */
.bu-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--bu-primary-grad);
    color: #ffffff !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    white-space: nowrap;
}

.bu-fab i {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.bu-fab-label {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    font-weight: 700;
    font-size: 0.95rem;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    font-family: sans-serif;
}

.bu-fab:hover {
    width: 220px;
    border-radius: 30px;
    transform: translateY(-4px);
    box-shadow: var(--bu-glow-purple);
    padding: 0 20px;
    justify-content: flex-start;
}

.bu-fab:hover i {
    transform: rotate(15deg);
}

.bu-fab:hover .bu-fab-label {
    max-width: 150px;
    opacity: 1;
    margin-left: 10px;
}

/* Print Ticket pass layout (boarding pass layout) */
.bu-ticket-container {
    max-width: 600px;
    margin: 40px auto;
    background: #0d152c;
    border-radius: 24px;
    box-shadow: var(--bu-glow-purple), 0 15px 45px rgba(0,0,0,0.5);
    overflow: hidden;
    font-family: monospace;
    border: 1px solid var(--bu-border-glass-hover);
    position: relative;
    color: var(--bu-text-body);
}

.bu-ticket-header {
    background: var(--bu-primary-grad);
    color: #ffffff;
    padding: 30px;
    text-align: center;
}

.bu-ticket-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff !important;
}

.bu-ticket-header p {
    margin: 6px 0 0 0;
    opacity: 0.85;
}

.bu-ticket-body {
    padding: 35px;
    position: relative;
}

.bu-ticket-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--bu-border-glass);
    padding-bottom: 10px;
}

.bu-ticket-label {
    font-weight: 700;
    color: var(--bu-text-muted);
}

.bu-ticket-value {
    font-weight: bold;
    color: var(--bu-text-title);
}

.bu-ticket-barcode {
    text-align: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 2px dashed rgba(168, 85, 247, 0.4);
}

.bu-barcode-line {
    display: inline-block;
    background: #ffffff;
    height: 60px;
    margin: 0 1.5px;
}

.bu-barcode-text {
    margin-top: 8px;
    font-weight: bold;
    letter-spacing: 6px;
    color: var(--bu-text-title);
}

.bu-ticket-instructions {
    font-family: sans-serif;
    font-size: 0.85rem;
    color: var(--bu-text-muted);
    text-align: center;
    margin-top: 25px;
    line-height: 1.5;
}

/* Social share icon premium micro-animations */
.bu-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    font-size: 0.75rem;
    text-decoration: none !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}

.bu-share-icon:hover {
    transform: scale(1.22) translateY(-2px);
    background: rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Custom monthly calendar styles */
.bu-dashboard .table-responsive table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}
.bu-dashboard .table-responsive table td {
    transition: background 0.2s ease-in-out;
}
.bu-dashboard .table-responsive table td:hover {
    background: rgba(255,255,255,0.02) !important;
}

/* Force readable table header styles across all Moodle themes */
.bu-dashboard table th,
.bu-dashboard thead th,
.bu-dashboard tr th,
.bu-dashboard table.bu-table thead th,
.bu-dashboard .bu-table thead th {
    background: #111a36 !important;
    color: #f8fafc !important;
    border-bottom: 1px solid var(--bu-border-glass) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
}

/* Event Catalog Card Banner & Layout styling */
.bu-event-card-banner {
    height: 140px;
    background: linear-gradient(135deg, var(--bu-primary-color) 0%, var(--bu-secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.bu-event-card-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
}

.bu-slot-item-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.bu-slot-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.bu-dashboard .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

/* Prevent overrides from leaking into Moodle Rich Text Editors (Atto / TinyMCE) Toolbar and Menus */
.bu-dashboard .editor_atto_toolbar,
.bu-dashboard .editor_atto_toolbar *,
.bu-dashboard .tox-toolbar,
.bu-dashboard .tox-toolbar *,
.bu-dashboard .tox-menubar,
.bu-dashboard .tox-menubar *,
.bu-dashboard .tox-menu,
.bu-dashboard .tox-menu *,
.bu-dashboard .tox-dialog,
.bu-dashboard .tox-dialog *,
.bu-dashboard .tox-button,
.bu-dashboard .tox-button * {
    color: #333333 !important;
}

/* Premium styling for Bootstrap/Moodle input group prepend labels */
.bu-dashboard .input-group-text {
    background-color: #111a36 !important;
    border-color: var(--bu-border-glass) !important;
    color: var(--bu-text-muted) !important;
}

/* Beautiful responsive scaling for description images */
.bu-event-description img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    margin: 18px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid var(--bu-border-glass) !important;
    display: block !important;
}

/* Force TinyMCE dropdown menus and tooltips to render above dashboard overlays */
.tox-tinymce-aux, 
.tox-menu,
.tox {
    z-index: 1000000 !important;
}

/* ==========================================================================
   DROPDOWN (<SELECT>), INPUT, AND HIGH CONTRAST READABILITY FIXES
   ========================================================================== */

/* Fix dropdown (<select>) height, padding, text contrast, and vertical alignment */
.bu-dashboard select,
.bu-dashboard select.form-control,
.bu-dashboard .form-group select,
.bu-card select,
.bu-dashboard select.form-control {
    min-height: 48px !important;
    height: auto !important;
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    background-color: #0f172a !important;
    border: 1px solid #475569 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* Fix option elements inside dropdowns to prevent text clipping */
.bu-dashboard select option,
.bu-dashboard select.form-control option,
.bu-dashboard select option {
    background-color: #0f172a !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    min-height: 38px !important;
    line-height: 1.6 !important;
}

/* Active focus state for dropdowns */
.bu-dashboard select:focus,
.bu-dashboard select.form-control:focus {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3) !important;
    outline: none !important;
}

/* High contrast inputs and textareas on dark cards */
.bu-dashboard input[type="text"],
.bu-dashboard input[type="number"],
.bu-dashboard input[type="date"],
.bu-dashboard input[type="time"],
.bu-dashboard input[type="email"],
.bu-dashboard input[type="file"],
.bu-dashboard textarea {
    min-height: 46px !important;
    color: #ffffff !important;
    background-color: #0f172a !important;
    border: 1px solid #475569 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.bu-dashboard input::placeholder,
.bu-dashboard textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Crisp readable labels on dark cards */
.bu-dashboard label,
.bu-dashboard .font-weight-bold {
    color: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
}

.bu-dashboard .text-muted,
.bu-dashboard small,
.bu-dashboard .small {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   LUMINOUS GOLD HEADINGS & CRISP HIGH-CONTRAST SYLLABUS TEXT
   ========================================================================== */

/* Syllabus & Event Description Content readability */
.bu-syllabus-content,
.bu-syllabus-content p,
.bu-syllabus-content li,
.bu-syllabus-content ul,
.bu-syllabus-content ol,
.bu-syllabus-content span,
.bu-syllabus-content div,
.bu-ticket-container p,
.bu-ticket-container li {
    color: #f1f5f9 !important;
    line-height: 1.65 !important;
}

/* High-pop Luminous Gold for Headings and Bold Accents */
.bu-syllabus-content h1,
.bu-syllabus-content h2,
.bu-syllabus-content h3,
.bu-syllabus-content h4,
.bu-syllabus-content h5,
.bu-syllabus-content h6,
.bu-syllabus-content strong,
.bu-syllabus-content b,
.bu-event-description h1,
.bu-event-description h2,
.bu-event-description h3,
.bu-event-description h4,
.bu-event-description h5,
.bu-event-description h6,
.bu-event-description strong,
.bu-event-description b {
    color: #fbbf24 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4) !important;
}

/* Gold Badges and Highlights */
.bu-dashboard .bu-text-warning,
.bu-text-warning,
.bu-gold-text {
    color: #facc15 !important;
    /* No glow: the halo smeared the glyph edges and made small text harder to
       read rather than more prominent. */
}

/* Strict PDF & Print Pagebreak Protection */
.bu-ticket-container,
.bu-ticket-header,
.bu-ticket-body,
.bu-ticket-row,
.bu-ticket-barcode,
.bu-ticket-syllabus,
.bu-syllabus-content,
.bu-syllabus-content h1,
.bu-syllabus-content h2,
.bu-syllabus-content h3,
.bu-syllabus-content h4,
.bu-syllabus-content h5,
.bu-syllabus-content h6,
.bu-syllabus-content p,
.bu-syllabus-content li,
.bu-card,
.bu-card tr,
.bu-card td {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

/* Strip theme header/footer bars when pagelayout is embedded in iframes */
body.pagelayout-embedded #page-header,
body.pagelayout-embedded .navbar,
body.pagelayout-embedded header,
body.pagelayout-embedded #nav-drawer,
body.pagelayout-embedded #page-footer,
body.pagelayout-embedded .secondary-navigation,
body.pagelayout-embedded .tertiary-navigation,
body.pagelayout-embedded #region-main-settings-menu {
    display: none !important;
}

/* High-Contrast Alert & Light Container Styling (Dark Text on Light Backgrounds) */
.bu-dashboard .alert-warning,
.bu-alert-warning {
    background-color: #fffbe6 !important;
    border: 1px solid #ffe58f !important;
    color: #78350f !important;
}
.bu-dashboard .alert-warning *,
.bu-dashboard .alert-warning i,
.bu-alert-warning * {
    color: #78350f !important;
}

.bu-dashboard .alert-info,
.bu-alert-info {
    background-color: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    color: #0369a1 !important;
}
.bu-dashboard .alert-info *,
.bu-dashboard .alert-info i,
.bu-alert-info * {
    color: #0369a1 !important;
}

.bu-dashboard .alert-success,
.bu-dashboard .alert-success *,
.bu-dashboard .alert-success i,
.bu-dashboard .alert-success p,
.bu-dashboard .alert-success span,
.bu-dashboard .alert-success div,
.bu-alert-success,
.bu-alert-success *,
.bu-alert-success p,
.bu-alert-success span,
.bu-alert-success div,
.bu-dashboard .alert-success,
.bu-dashboard .alert-success *,
.bu-dashboard .bu-alert-success,
.bu-dashboard .bu-alert-success * {
    background-color: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #064e3b !important;
    font-weight: 700 !important;
}

.bu-dashboard .alert-danger,
.bu-alert-danger {
    background-color: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
}
.bu-dashboard .alert-danger *,
.bu-dashboard .alert-danger i,
.bu-alert-danger * {
    color: #be123c !important;
}

.bu-dashboard .alert-secondary,
.bu-alert-secondary {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
.bu-dashboard .alert-secondary *,
.bu-dashboard .alert-secondary i,
.bu-alert-secondary * {
    color: #334155 !important;
}

/* Specific overrides to prevent global text-muted/small rules from leaking into alerts */
.bu-dashboard .alert-info.small,
.bu-dashboard .alert-info.small *,
.bu-dashboard .alert-info.small strong,
.bu-dashboard .alert-info.small span,
.bu-card .alert-info.small,
.bu-card .alert-info.small *,
.bu-card .alert-info.small strong,
.bu-card .alert-info.small span {
    color: #0369a1 !important;
}

.bu-dashboard .alert-danger.small,
.bu-dashboard .alert-danger.small *,
.bu-dashboard .alert-danger.small strong,
.bu-dashboard .alert-danger.small span,
.bu-card .alert-danger.small,
.bu-card .alert-danger.small *,
.bu-card .alert-danger.small strong,
.bu-card .alert-danger.small span {
    color: #be123c !important;
}

.bu-dashboard .alert-success.small,
.bu-dashboard .alert-success.small *,
.bu-dashboard .alert-success.small strong,
.bu-dashboard .alert-success.small span,
.bu-card .alert-success.small,
.bu-card .alert-success.small *,
.bu-card .alert-success.small strong,
.bu-card .alert-success.small span {
    color: #064e3b !important;
}

.bu-dashboard .alert-warning.small,
.bu-dashboard .alert-warning.small *,
.bu-dashboard .alert-warning.small strong,
.bu-dashboard .alert-warning.small span,
.bu-card .alert-warning.small,
.bu-card .alert-warning.small *,
.bu-card .alert-warning.small strong,
.bu-card .alert-warning.small span {
    color: #78350f !important;
}


/* ==========================================================================
   Admin navigation, settings tabs and form controls.

   These classes were referenced throughout admin.php and index.php but never
   defined, so the markup fell back to the theme's default link styling: the
   admin sub-navigation rendered as a wrapped run of dim blue text rather than
   a row of buttons. Everything below is scoped under a bu- prefix so nothing
   leaks into the surrounding Moodle page.
   ========================================================================== */

/* --- Admin sub-navigation ------------------------------------------------ */
.bu-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin-bottom: 28px;
}

.bu-wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bu-border-glass);
    /* Near-white rather than the theme's link blue: this sits on a very dark
       panel where a saturated blue falls below readable contrast. */
    color: var(--bu-text-body) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.93rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bu-wizard-step i {
    opacity: 0.85;
    font-size: 0.95rem;
}

.bu-wizard-step:hover,
.bu-wizard-step:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--bu-border-glass-hover);
    color: #ffffff !important;
    text-decoration: none !important;
}

.bu-wizard-step:focus-visible {
    outline: 2px solid var(--bu-primary-color, #6366f1);
    outline-offset: 2px;
}

.bu-wizard-step.active {
    background: var(--bu-primary-grad);
    border-color: transparent;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.bu-wizard-step.active i {
    opacity: 1;
}

@media (max-width: 700px) {
    .bu-wizard-steps {
        gap: 8px;
    }
    .bu-wizard-step {
        padding: 9px 13px;
        font-size: 0.86rem;
    }
}

/* --- Settings tab buttons ------------------------------------------------ */
.bu-setting-tab-btn {
    border-radius: 10px !important;
    color: var(--bu-text-body) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--bu-border-glass) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bu-setting-tab-btn:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}

.bu-setting-tab-btn.active {
    background: var(--bu-primary-grad) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Icons inside an active tab must not keep their own accent colour, which can
   land almost invisible against the filled gradient background. */
.bu-setting-tab-btn.active i {
    color: #ffffff !important;
}

.bu-setting-section {
    animation: bu-fade-in 0.18s ease;
}

@keyframes bu-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Form controls on dark panels ---------------------------------------- */
.bu-dashboard .form-control,
.bu-dashboard select.form-control,
.bu-dashboard textarea.form-control {
    background-color: rgba(8, 14, 30, 0.85);
    color: var(--bu-text-title);
    border: 1px solid var(--bu-border-glass);
    border-radius: 9px;
}

.bu-dashboard .form-control::placeholder {
    color: rgba(203, 213, 225, 0.45);
}

.bu-dashboard .form-control:focus {
    background-color: rgba(8, 14, 30, 0.95);
    color: var(--bu-text-title);
    border-color: var(--bu-primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

.bu-dashboard label {
    color: var(--bu-text-title);
}

.bu-dashboard small,
.bu-dashboard .small,
.bu-dashboard .text-muted {
    color: var(--bu-text-muted) !important;
}

/* Colour swatches need a visible edge of their own: a dark chosen colour such
   as #1e293b is otherwise indistinguishable from the panel behind it. */
.bu-dashboard input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.bu-dashboard input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.bu-dashboard input[type="color"]::-webkit-color-swatch {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
}

.bu-dashboard input[type="color"]::-moz-color-swatch {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
}

/* --- Tables on dark panels ----------------------------------------------- */
.bu-dashboard .table-dark,
.bu-dashboard .table-dark thead th,
.bu-dashboard .table-dark td {
    background-color: transparent;
    border-color: var(--bu-border-glass);
    color: var(--bu-text-body);
}

.bu-dashboard .table-dark thead th {
    color: var(--bu-text-muted);
    font-weight: 600;
    text-transform: none;
}

/* --- Misc panels referenced by the markup -------------------------------- */
.bu-template-panel,
.bu-pricing-plan-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bu-border-glass);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.bu-booking-checkbox,
.bu-addon-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--bu-primary-color, #6366f1);
    cursor: pointer;
}

/* --- Selectable cards on the booking form -------------------------------- */
.bu-addon-tile,
.bu-plan-option-card,
.bu-addon-upsell-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--bu-border-glass);
    border-radius: 12px;
    padding: 16px;
    color: var(--bu-text-body);
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}

.bu-addon-tile:hover,
.bu-plan-option-card:hover,
.bu-addon-upsell-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--bu-border-glass-hover);
}

.bu-addon-tile.selected,
.bu-plan-option-card.selected {
    border-color: var(--bu-primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.14);
}

.bu-plan-radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--bu-border-glass-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bu-plan-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bu-primary-color, #6366f1);
}

/* --- Links inside plugin panels ------------------------------------------ */
.bu-dashboard a:not(.bu-btn):not(.bu-wizard-step):not(.bu-btn-header) {
    color: var(--bu-accent-color, #38bdf8);
}

.bu-dashboard a:not(.bu-btn):not(.bu-wizard-step):not(.bu-btn-header):hover {
    color: #ffffff;
}

/* --- Respect a reduced-motion preference --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bu-wizard-step,
    .bu-setting-tab-btn,
    .bu-addon-tile,
    .bu-plan-option-card,
    .bu-addon-upsell-card {
        transition: none;
    }
    .bu-setting-section {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Bootstrap contextual text colours on dark panels.

   Bootstrap's .text-primary (#0d6efd), .text-info and friends are chosen for a
   white page. On this plugin's near-black panels several of them fall well
   below readable contrast. These are brightened equivalents, scoped strictly to
   the plugin's own wrappers so the surrounding Moodle UI is untouched.
   -------------------------------------------------------------------------- */
.bu-dashboard .text-primary   { color: #8ab0ff !important; }
.bu-dashboard .text-info      { color: #67d5ec !important; }
.bu-dashboard .text-success   { color: #5ee79b !important; }
.bu-dashboard .text-warning   { color: #fcc44d !important; }
.bu-dashboard .text-danger    { color: #ff8497 !important; }
.bu-dashboard .text-secondary { color: var(--bu-text-muted) !important; }

/* .text-white-50 is 50% alpha, which reads as a faint grey here. */
.bu-dashboard .text-white-50  { color: rgba(255, 255, 255, 0.72) !important; }

/* Tab icons inherit the tab's own colour rather than keeping a contextual
   accent that can disappear against the filled active background. */
.bu-setting-tab-btn i,
.bu-wizard-step i {
    color: inherit !important;
}

/* Bootstrap badges used in the gateway status table. */
.bu-dashboard .badge-success {
    background-color: #15803d !important;
    color: #ffffff !important;
}

.bu-dashboard .badge-danger {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}

/* Alerts rendered with Bootstrap's dark-on-light palette keep their own
   colours; only the plugin's translucent variants need adjusting. */
.bu-dashboard .alert-info {
    color: #bae6fd !important;
}

.bu-dashboard .alert-warning {
    color: #fde68a !important;
}

/* Button labels and their icons follow the computed foreground. */
.bu-btn-primary i,
.bu-wizard-step.active,
.bu-wizard-step.active i,
.bu-setting-tab-btn.active,
.bu-setting-tab-btn.active i {
    color: var(--bu-on-primary, #ffffff) !important;
}

/* ==========================================================================
   Admin dashboard.
   ========================================================================== */

.bu-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.bu-stat-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bu-border-glass);
    border-radius: 14px;
    padding: 18px 20px;
    min-width: 0;
}

.bu-stat-label {
    font-size: 0.78rem;
    color: var(--bu-text-muted);
    margin-bottom: 6px;
    line-height: 1.3;
}

.bu-stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--bu-text-title);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.bu-stat-sub {
    font-size: 0.75rem;
    color: var(--bu-text-muted);
    margin-top: 6px;
}

/* Two columns on wide screens, stacked below. */
.bu-dash-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1100px) {
    .bu-dash-split {
        grid-template-columns: 1.35fr 1fr;
        align-items: start;
    }
}

/* --- Health check findings ----------------------------------------------- */
.bu-finding {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 0;
    margin-bottom: 10px;
}

.bu-finding-icon {
    font-size: 1.05rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.bu-finding-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bu-finding-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bu-text-title);
    overflow-wrap: anywhere;
}

.bu-finding-detail {
    font-size: 0.8rem;
    color: var(--bu-text-muted);
    margin-top: 3px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.bu-finding-action {
    flex-shrink: 0;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
    align-self: center;
}

.bu-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--bu-border-glass);
}

/* --- Upcoming sessions --------------------------------------------------- */
.bu-session-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bu-border-glass);
}

.bu-session-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bu-session-date {
    flex-shrink: 0;
    width: 48px;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bu-border-glass);
    border-radius: 10px;
    padding: 6px 0;
}

.bu-session-date.is-today {
    background: var(--bu-primary-grad);
    border-color: transparent;
}

.bu-session-day {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bu-text-title);
    line-height: 1.1;
}

.bu-session-date.is-today .bu-session-day,
.bu-session-date.is-today .bu-session-mon {
    color: var(--bu-on-primary, #ffffff);
}

.bu-session-mon {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bu-text-muted);
}

.bu-session-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bu-session-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--bu-text-title);
    overflow-wrap: anywhere;
}

.bu-session-meta {
    font-size: 0.74rem;
    color: var(--bu-text-muted);
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.bu-today-pill {
    background: var(--bu-primary-grad);
    color: var(--bu-on-primary, #ffffff);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bu-session-fill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
}

.bu-session-bar {
    flex: 1 1 auto;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.bu-session-bar > span {
    display: block;
    height: 100%;
    background: var(--bu-primary-grad);
}

.bu-session-count {
    font-size: 0.72rem;
    color: var(--bu-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .bu-finding {
        flex-wrap: wrap;
    }
    .bu-finding-action {
        margin-left: 34px;
    }
}

/* ==========================================================================
   Portal filter bar.
   ========================================================================== */

.bu-filter-bar {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--bu-border-glass);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bu-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.bu-filter-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bu-text-muted);
    padding-top: 7px;
    flex-shrink: 0;
    min-width: 92px;
}

.bu-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.bu-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bu-border-glass);
    color: var(--bu-text-body) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.bu-filter-chip:hover,
.bu-filter-chip:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bu-border-glass-hover);
    color: #ffffff !important;
    text-decoration: none !important;
}

.bu-filter-chip:focus-visible {
    outline: 2px solid var(--bu-primary-color, #6366f1);
    outline-offset: 2px;
}

.bu-filter-chip.is-active {
    background: var(--bu-primary-grad);
    border-color: transparent;
    color: var(--bu-on-primary, #ffffff) !important;
}

.bu-filter-chip.is-active i,
.bu-filter-chip.is-active .bu-filter-count {
    color: var(--bu-on-primary, #ffffff) !important;
}

/* The count is secondary information: readable, but not competing with the
   label it sits beside. */
.bu-filter-count {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.bu-filter-clear {
    border-top: 1px solid var(--bu-border-glass);
    padding-top: 12px;
    align-items: center;
}

@media (max-width: 640px) {
    .bu-filter-label {
        min-width: 0;
        padding-top: 0;
        width: 100%;
    }
    .bu-filter-chip {
        font-size: 0.78rem;
        padding: 5px 11px;
    }
}