/* Conference Booking – Dashboard (GetAllBookings). All classes are db- prefixed and scoped under .db */
.db {
    --navy: #1a1f6d;
    --blue: #4e73df;
    --deep: #05003b;
    --teal: #12b3a6;
    --teal-dark: #04384f;
    --teal-deep: #041a3b;
    --ink: #1b1f3b;
    --muted: #6b7280;
    --line: #e6e9f5;
    --soft: #f6f8ff;
    --conf-grad: radial-gradient(120% 80% at 100% 0%, rgba(78,115,223,.55), transparent 60%), linear-gradient(160deg, var(--navy), var(--deep));
    --disc-grad: radial-gradient(120% 80% at 100% 0%, rgba(18,179,166,.55), transparent 60%), linear-gradient(160deg, var(--teal-dark), var(--teal-deep));
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    padding-bottom: 40px;
    margin-left: -95px;
    width: 1492px;
}

    .db *, .db *::before, .db *::after {
        box-sizing: border-box
    }

    .db h1, .db h2, .db h3, .db h4, .db p {
        margin: 0
    }

    .db button {
        font-family: inherit;
        cursor: pointer
    }

/* ---------- Hero ---------- */
.db-hero {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 7px 10px;
    color: #fff;
    background: var(--conf-grad);
    box-shadow: 0 24px 50px -22px rgba(26,31,109,.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    animation: dbUp .5s ease both;
}

    .db-hero::before, .db-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,.07);
        pointer-events: none
    }

    .db-hero::before {
        width: 320px;
        height: 320px;
        right: -90px;
        top: -140px
    }

    .db-hero::after {
        width: 200px;
        height: 200px;
        right: 160px;
        bottom: -120px
    }

    .db-hero > * {
        position: relative;
        z-index: 1
    }

.db-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 12px
}

.db-hero h1 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff
}

.db-hero p {
    opacity: .8;
    margin-top: 4px;
    font-size: .95rem
}

.db-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.db-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    padding: 11px 18px;
    border-radius: 14px;
    font-weight: 700;
    font-size: .9rem
}

.db-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: .2s
}

.db-btn--white {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.5)
}

    .db-btn--white:hover {
        transform: translateY(-2px);
        color: var(--navy)
    }

.db-btn--glass {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.22)
}

    .db-btn--glass:hover {
        background: rgba(255,255,255,.26);
        color: #fff
    }

/* ---------- Stat cards ---------- */
.db-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 22px 0
}

.db-stat {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 14px 30px -20px rgba(26,31,109,.35);
    transition: .25s;
    animation: dbUp .5s ease both
}

    .db-stat:nth-child(2) {
        animation-delay: .06s
    }

    .db-stat:nth-child(3) {
        animation-delay: .12s
    }

    .db-stat:nth-child(4) {
        animation-delay: .18s
    }

    .db-stat:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 36px -18px rgba(26,31,109,.45)
    }

    .db-stat::after {
        content: "";
        position: absolute;
        right: -30px;
        top: -30px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: var(--tint);
        opacity: .12
    }

.db-stat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

.db-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.1rem;
    background: var(--tint-grad);
    box-shadow: 0 10px 18px -8px var(--tint)
}

.db-stat__num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink)
}

.db-stat__label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 12px
}

.db-stat--today {
    --tint: #4e73df;
    --tint-grad: linear-gradient(135deg, #4e73df, #1a1f6d)
}

.db-stat--active {
    --tint: #16a34a;
    --tint-grad: linear-gradient(135deg, #34d399, #15803d)
}

.db-stat--upcoming {
    --tint: #f59e0b;
    --tint-grad: linear-gradient(135deg, #fbbf24, #d97706)
}

.db-stat--done {
    --tint: #64748b;
    --tint-grad: linear-gradient(135deg, #94a3b8, #475569)
}

.db-stat--active .db-stat__num {
    animation: dbPulse 2s ease-in-out infinite
}

.db-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    align-items: center
}

.db-empty-note {
    color: var(--muted);
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: 6px
}

/* room chips (blue = conference, teal = discussion) */
.db-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid transparent
}

    .db-chip.conf {
        background: #eef1ff;
        color: var(--navy);
        border-color: #dfe6ff
    }

        .db-chip.conf i {
            color: var(--blue)
        }

    .db-chip.disc {
        background: #e6f7f5;
        color: var(--teal-dark);
        border-color: #cdf0ec
    }

        .db-chip.disc i {
            color: var(--teal)
        }

/* ---------- Section titles ---------- */
.db-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 26px 2px 12px
}

    .db-sec h2 {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: 10px
    }

        .db-sec h2 span.db-count {
            font-size: .75rem;
            background: #eef1ff;
            color: var(--navy);
            padding: 3px 10px;
            border-radius: 999px
        }

    .db-sec small {
        color: var(--muted)
    }

/* ---------- Up next strip ---------- */
.db-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 4px 18px;
    scrollbar-width: thin
}

.db-ucard {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 30px -22px rgba(26,31,109,.5);
    transition: .25s
}

    .db-ucard:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 38px -20px rgba(26,31,109,.55)
    }

.db-ucard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    color: #fff
}

.db-ucard.conf .db-ucard__head {
    background: var(--conf-grad)
}

.db-ucard.disc .db-ucard__head {
    background: var(--disc-grad)
}

.db-ucard__room {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px
}

.db-ucard__body {
    padding: 16px
}

.db-ucard__name {
    font-weight: 800;
    font-size: 1.02rem;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.db-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: #3b4266;
    margin-bottom: 8px
}

    .db-row i {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        font-size: .78rem;
        flex: none
    }

.db-ucard.conf .db-row i {
    background: #eef1ff;
    color: var(--blue)
}

.db-ucard.disc .db-row i {
    background: #e6f7f5;
    color: var(--teal)
}

.db-row b {
    color: var(--ink)
}

/* ---------- Status pills ---------- */
.db-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap
}

    .db-status.active {
        background: #dcfce7;
        color: #15803d
    }

    .db-status.upcoming {
        background: #fef3c7;
        color: #b45309
    }

    .db-status.completed {
        background: #eceff5;
        color: #556070
    }

    .db-status.deleted {
        background: #fee2e2;
        color: #b91c1c
    }

.db-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    animation: dbPulse 1.4s infinite
}

.db-ucard__head .db-status {
    background: rgba(255,255,255,.95)
}

/* ---------- Table panel ---------- */
.db-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 20px 40px -28px rgba(26,31,109,.5);
    overflow: hidden
}

.db-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line)
}

.db-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 340px
}

    .db-search i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--blue);
        font-size: .85rem
    }

    .db-search input {
        width: 100%;
        padding: 11px 14px 11px 38px;
        border: 1.5px solid #dfe6ff;
        border-radius: 12px;
        background: var(--soft);
        font: inherit;
        font-size: .9rem;
        outline: 0;
        transition: .2s
    }

        .db-search input:focus {
            border-color: var(--blue);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(78,115,223,.15)
        }

.db-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.db-sep {
    width: 1px;
    height: 24px;
    background: var(--line);
    margin: 0 4px
}

.db-fchip {
    border: 1.5px solid var(--line);
    background: #fff;
    color: #3b4266;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: .78rem;
    font-weight: 700;
    transition: .2s;
    display: inline-flex;
    gap: 6px;
    align-items: center
}

    .db-fchip em {
        font-style: normal;
        font-size: .68rem;
        background: var(--soft);
        color: var(--navy);
        padding: 1px 7px;
        border-radius: 999px
    }

    .db-fchip:hover {
        border-color: var(--blue);
        background: #eef1ff
    }

    .db-fchip.on {
        background: var(--conf-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 8px 16px -8px rgba(26,31,109,.7)
    }

        .db-fchip.on em {
            background: rgba(255,255,255,.22);
            color: #fff
        }

    .db-fchip[data-type="disc"].on {
        background: var(--disc-grad);
        box-shadow: 0 8px 16px -8px rgba(4,56,79,.7)
    }

.db-table-wrap {
    padding: 6px 10px 10px;
    overflow-x: auto
}

.db table.db-table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin: 0 !important
}

.db-table thead th {
    background: transparent;
    color: var(--navy);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding: 8px 14px;
    border: 0 !important;
    white-space: nowrap;
    text-align: left
}

    .db-table thead th::before, .db-table thead th::after {
        display: none !important
    }

.db-table tbody tr {
    background: #fff;
    box-shadow: 0 1px 0 var(--line);
    transition: .2s
}

.db-table tbody td {
    padding: 13px 14px;
    font-size: .86rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    background: #fff
}

    .db-table tbody td:first-child {
        border-left: 1px solid var(--line);
        border-radius: 14px 0 0 14px
    }

    .db-table tbody td:last-child {
        border-right: 1px solid var(--line);
        border-radius: 0 14px 14px 0
    }

.db-table tbody tr:hover td {
    background: #f7f9ff;
    border-color: #dfe6ff
}

.db-table tbody tr.is-completed td {
    opacity: .7
}

.db-table tbody tr.is-deleted td {
    background: #fff5f5;
    opacity: .75
}

.db-table tbody tr.is-deleted .db-user__name {
    text-decoration: line-through
}

.db-table tbody tr.is-active td {
    background: #f3fdf7;
    border-color: #bbf7d0
}

.db-user {
    display: flex;
    align-items: center;
    gap: 12px
}

.db-avatar {
    width: 38px;
    height: 38px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    flex: none
}

    .db-avatar.conf {
        background: var(--conf-grad)
    }

    .db-avatar.disc {
        background: var(--disc-grad)
    }

.db-user__name {
    font-weight: 700;
    color: var(--ink)
}

.db-user__sub {
    font-size: .74rem;
    color: var(--muted);
    margin-top: 1px
}

.db-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap
}

    .db-time span {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 4px 8px;
        font-size: .78rem
    }

    .db-time i {
        color: var(--blue);
        font-size: .7rem
    }

.db-note {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1.5px solid #dfe6ff;
    background: #eef1ff;
    color: var(--navy);
    transition: .2s
}

    .db-note:hover {
        background: var(--navy);
        color: #fff
    }

.db-none {
    color: #aab0c5;
    font-size: .8rem
}

/* DataTables (v1.12) overrides */
.db .dataTables_wrapper {
    padding: 0
}

.db .dataTables_info {
    color: var(--muted);
    font-size: .8rem;
    padding: 12px 18px !important
}

.db .dataTables_paginate {
    padding: 8px 18px 14px !important;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap
}

.db .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1.5px solid var(--line) !important;
    background: #fff !important;
    color: var(--navy) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    font-weight: 700;
    font-size: .8rem
}

    .db .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #eef1ff !important;
        border-color: var(--blue) !important;
        color: var(--navy) !important
    }

    .db .dataTables_wrapper .dataTables_paginate .paginate_button.current, .db .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--conf-grad) !important;
        color: #fff !important;
        border-color: transparent !important
    }

    .db .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .db .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        opacity: .4;
        background: #fff !important;
        color: var(--muted) !important;
        border-color: var(--line) !important
    }

.db .dataTables_empty {
    text-align: center;
    padding: 40px 10px !important;
    color: var(--muted)
}

/* ---------- Empty state ---------- */
.db-empty {
    text-align: center;
    background: #fff;
    border: 1px dashed #c9d2ff;
    border-radius: 24px;
    padding: 60px 20px;
    margin-top: 22px
}

.db-empty__icon {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 2rem;
    background: var(--conf-grad);
    box-shadow: 0 18px 30px -14px rgba(26,31,109,.7)
}

.db-empty h3 {
    color: var(--navy);
    font-weight: 800;
    margin-bottom: 6px
}

.db-empty p {
    color: var(--muted);
    margin-bottom: 20px
}

.db-empty .db-btn {
    background: var(--conf-grad);
    color: #fff
}

/* Bootstrap popover (notes) */
.popover {
    border: 1.5px solid #dfe6ff;
    border-radius: 14px;
    box-shadow: 0 16px 30px -12px rgba(26,31,109,.4);
    font-family: Inter, "Segoe UI", sans-serif
}

.popover-header {
    background: var(--soft, #f6f8ff);
    color: #1a1f6d;
    font-weight: 800;
    font-size: .8rem;
    border-radius: 12px 12px 0 0
}

.popover-body {
    color: #3b4266;
    font-size: .85rem;
    max-width: 260px
}

@keyframes dbUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

@keyframes dbPulse {
    50% {
        opacity: .55;
        transform: scale(1.06)
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .db-hero {
        padding: 24px 22px
    }

        .db-hero h1 {
            font-size: 1.6rem
        }
}

@media (max-width: 768px) {
    .db-hero {
        border-radius: 20px;
        padding: 22px 18px
    }

        .db-hero h1 {
            font-size: 1.4rem
        }

    .db-actions {
        width: 100%
    }

        .db-actions .db-btn, .db-actions .db-pill {
            flex: 1 1 auto;
            justify-content: center
        }

    .db-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .db-stat {
        padding: 14px
    }

    .db-stat__num {
        font-size: 1.7rem
    }

    .db-ucard {
        flex-basis: 82%
    }

    .db-search {
        max-width: none;
        flex-basis: 100%
    }

    .db-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px
    }

    .db-fchip {
        white-space: nowrap
    }

    /* table -> stacked cards */
    .db-table thead {
        display: none
    }

    .db-table, .db-table tbody, .db-table tr, .db-table td {
        display: block;
        width: 100%
    }

        .db-table tbody tr {
            margin-bottom: 12px;
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 22px -18px rgba(26,31,109,.5)
        }

        .db-table tbody td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border: 0 !important;
            border-bottom: 1px solid var(--line) !important;
            border-radius: 0 !important;
            padding: 10px 14px;
            text-align: right
        }

            .db-table tbody td:last-child {
                border-bottom: 0 !important
            }

            .db-table tbody td::before {
                content: attr(data-label);
                font-size: .7rem;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: .5px;
                color: var(--muted);
                text-align: left;
                flex: none
            }

            .db-table tbody td.db-td-user {
                background: #f6f8ff !important;
                text-align: left
            }

                .db-table tbody td.db-td-user::before {
                    display: none
                }

    .db .dataTables_paginate {
        justify-content: center
    }

    .db .dataTables_info {
        text-align: center
    }
}

@media (max-width: 420px) {
    .db-stats {
        grid-template-columns: 1fr
    }
}

/* ---------- Table header: theme gradient ---------- */
.db-table thead th {
    background: var(--conf-grad);
    color: #fff;
    padding: 13px 14px;
    letter-spacing: .8px;
    border: 0 !important;
}

    .db-table thead th:first-child {
        border-radius: 14px 0 0 14px
    }

    .db-table thead th:last-child {
        border-radius: 0 14px 14px 0
    }

/* ---------- Pagination: theme gradient ---------- */
.db .dataTables_info {
    color: var(--navy);
    font-weight: 600
}

.db .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1.5px solid #dfe6ff !important;
    background: #f6f8ff !important;
    color: var(--navy) !important;
    border-radius: 12px !important;
    min-width: 38px;
    padding: 7px 13px !important;
    transition: .2s;
}

    .db .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
        background: var(--conf-grad) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 8px 16px -8px rgba(26,31,109,.7);
        transform: translateY(-1px);
    }

    .db .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .db .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--conf-grad) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 8px 16px -8px rgba(26,31,109,.75);
    }

    .db .dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled),
    .db .dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled) {
        font-weight: 800
    }

    .db .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .db .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        opacity: .45;
        background: #f6f8ff !important;
        color: #8a92b5 !important;
        border-color: #e6e9f5 !important;
        box-shadow: none;
        transform: none;
        cursor: not-allowed;
    }

.db .dataTables_wrapper .dataTables_paginate .ellipsis {
    color: var(--navy);
    padding: 0 4px
}

/* ---------- Search box: theme gradient ---------- */
.db-search i {
    left: 6px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--conf-grad);
    color: #fff;
    font-size: .8rem;
    box-shadow: 0 6px 12px -6px rgba(26,31,109,.7);
    pointer-events: none;
}

.db-search input {
    padding: 12px 16px 12px 48px;
    border: 1.5px solid #dfe6ff;
    border-radius: 14px;
    background: #f6f8ff;
    color: var(--navy);
    font-weight: 600;
}

    .db-search input::placeholder {
        color: #8f9bd0;
        font-weight: 500
    }

    .db-search input:hover {
        border-color: #b9c6fb
    }

    .db-search input:focus {
        border-color: var(--blue);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(78,115,223,.18), 0 10px 20px -14px rgba(26,31,109,.6);
    }

/* ---------- Filter buttons: theme colours (blue = all/status/conference, teal = discussion) ---------- */
.db-fchip {
    border: 1.5px solid #dfe6ff;
    background: #f6f8ff;
    color: var(--navy);
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 700;
    transition: .2s;
}

    .db-fchip em {
        background: #e3e9ff;
        color: var(--navy)
    }

    .db-fchip i {
        color: var(--blue)
    }

    .db-fchip:hover {
        border-color: var(--blue);
        background: #eef1ff;
        transform: translateY(-1px)
    }

    .db-fchip.on {
        background: var(--conf-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 10px 18px -10px rgba(26,31,109,.8);
    }

        .db-fchip.on i {
            color: #fff
        }

        .db-fchip.on em {
            background: rgba(255,255,255,.22);
            color: #fff
        }

    /* Discussion filter carries the teal theme */
    .db-fchip[data-type="disc"] {
        background: #f0fbf9;
        border-color: #cdf0ec;
        color: var(--teal-dark)
    }

        .db-fchip[data-type="disc"] em {
            background: #d5f3ef;
            color: var(--teal-dark)
        }

        .db-fchip[data-type="disc"] i {
            color: var(--teal)
        }

        .db-fchip[data-type="disc"]:hover {
            border-color: var(--teal);
            background: #e6f7f5
        }

        .db-fchip[data-type="disc"].on {
            background: var(--disc-grad);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 10px 18px -10px rgba(4,56,79,.8);
        }

            .db-fchip[data-type="disc"].on i {
                color: #fff
            }

            .db-fchip[data-type="disc"].on em {
                background: rgba(255,255,255,.22);
                color: #fff
            }

/* ---------- Up Next cards: theme colours (blue = Conference, teal = Discussion) ---------- */
.db-arrows {
    display: flex;
    gap: 8px
}

.db-arrow {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 0;
    color: #fff;
    font-size: .8rem;
    background: var(--conf-grad);
    box-shadow: 0 8px 16px -8px rgba(26,31,109,.7);
    transition: .2s;
}

    .db-arrow:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px -8px rgba(26,31,109,.85)
    }

.db-ucard {
    border-width: 1.5px;
    scroll-snap-align: start
}

    .db-ucard.conf {
        border-color: #dfe6ff;
        background: linear-gradient(180deg, #ffffff, #f6f8ff)
    }

    .db-ucard.disc {
        border-color: #cdf0ec;
        background: linear-gradient(180deg, #ffffff, #f0fbf9)
    }

    .db-ucard.conf:hover {
        box-shadow: 0 22px 38px -20px rgba(26,31,109,.65)
    }

    .db-ucard.disc:hover {
        box-shadow: 0 22px 38px -20px rgba(4,56,79,.65)
    }

.db-ucard__head {
    padding: 15px 16px
}

.db-ucard.conf .db-ucard__name {
    color: var(--navy)
}

.db-ucard.disc .db-ucard__name {
    color: var(--teal-dark)
}

.db-ucard.conf .db-row i {
    background: var(--conf-grad);
    color: #fff;
    box-shadow: 0 6px 12px -6px rgba(26,31,109,.7)
}

.db-ucard.disc .db-row i {
    background: var(--disc-grad);
    color: #fff;
    box-shadow: 0 6px 12px -6px rgba(4,56,79,.7)
}

.db-ucard.conf .db-status.upcoming, .db-ucard.disc .db-status.upcoming {
    background: rgba(255,255,255,.95);
    color: #b45309
}

.db-ucard .db-status.active {
    background: rgba(255,255,255,.95);
    color: #15803d
}

/* ---------- Up Next carousel (no scroll bar) ---------- */
.db-carousel {
    --per: 3;
    overflow: hidden;
    padding: 6px 4px 10px;
    margin: 0 -4px
}

.db-track {
    display: flex;
    gap: 16px;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
    will-change: transform
}

    .db-track .db-ucard {
        flex: 0 0 calc((100% - (var(--per) - 1) * 16px) / var(--per));
        min-width: 0
    }

.db-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 4px
}

.db-dot-btn {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d3dbf7;
    transition: .3s
}

    .db-dot-btn:hover {
        background: #b9c6fb
    }

    .db-dot-btn.on {
        width: 26px;
        background: var(--conf-grad)
    }

@media (max-width: 768px) {
    .db-track .db-ucard {
        flex-basis: 100%
    }
}

/* ---------- Hero banner: theme colours (blue base + teal glow for Discussion rooms) ---------- */
.db-hero {
    background: radial-gradient(60% 90% at 0% 100%, rgba(18, 179, 166, .38), transparent 65%), radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .6), transparent 60%), linear-gradient(160deg, var(--navy), var(--deep));
    box-shadow: 0 26px 52px -24px rgba(5, 0, 59, .8);
}

    .db-hero h1 {
        background: linear-gradient(90deg, #ffffff, #b9c6fb 55%, #7de3da);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

.db-date {
    background: rgba(255,255,255,.12);
    border-color: rgba(125, 227, 218, .35)
}

    .db-date i {
        color: #7de3da
    }

.db-pill {
    border-color: rgba(125, 227, 218, .3)
}

    .db-pill i {
        color: #7de3da
    }

.db-btn--white {
    color: var(--navy)
}

    .db-btn--white i {
        color: var(--blue)
    }

/* ---------- Dashboard width (wide screens only, so laptops/phones are not pushed off-screen) ---------- */
@media (min-width: 1600px) {
    .db {
        width: 1478px;
        margin-left: -91px;
    }
}

/* =====================================================================
   Manage Bookings (GetBookingDetailandDelete): action buttons, delete modal, popups
   ===================================================================== */
.db-acts {
    display: flex;
    gap: 8px;
    align-items: center
}

.db-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 12px;
    padding: 8px 13px;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    transition: .2s;
    white-space: nowrap;
}

.db-act--delete {
    background: linear-gradient(160deg, #ef4444, #b91c1c);
    box-shadow: 0 8px 16px -9px rgba(185,28,28,.85)
}

.db-act--restore {
    background: linear-gradient(160deg, #34d399, #15803d);
    box-shadow: 0 8px 16px -9px rgba(21,128,61,.85)
}

.db-act:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.06)
}

.db-act:disabled {
    background: #e5e8f3;
    color: #9aa1bb;
    box-shadow: none;
    cursor: not-allowed
}

/* delete modal (theme header, red confirm) */
.dbm {
    --navy: #1a1f6d;
    --blue: #4e73df;
    --deep: #05003b;
    --teal: #12b3a6;
    --teal-dark: #04384f;
    --ink: #1b1f3b;
    --muted: #6b7280;
    --line: #e6e9f5;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

    .dbm .dbm-content {
        border: 0;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 40px 80px -24px rgba(5,0,59,.6)
    }

.dbm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    color: #fff;
    background: radial-gradient(120% 80% at 100% 0%, rgba(78,115,223,.55), transparent 60%), linear-gradient(160deg, var(--navy), var(--deep));
}

    .dbm-head h5 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 800;
        display: flex;
        gap: 10px;
        align-items: center;
        color: #fff
    }

.dbm-x {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.18);
    color: #fff;
    transition: .2s
}

    .dbm-x:hover {
        background: rgba(255,255,255,.32);
        transform: rotate(90deg)
    }

.dbm-body {
    padding: 20px 22px;
    max-height: 62vh;
    overflow-y: auto;
    background: #fff
}

.dbm-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: #f6f8ff
}

.dbm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: .88rem;
    transition: .2s
}

.dbm-btn--ghost {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid #dfe6ff
}

    .dbm-btn--ghost:hover {
        background: #eef1ff
    }

.dbm-btn--danger {
    background: linear-gradient(160deg, #ef4444, #b91c1c);
    color: #fff;
    box-shadow: 0 10px 18px -10px rgba(185,28,28,.85)
}

    .dbm-btn--danger:hover:not(:disabled) {
        transform: translateY(-2px)
    }

.dbm-btn:disabled {
    opacity: .55;
    cursor: not-allowed
}

.dbm-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--muted)
}

.dbm-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0 auto 12px;
    border: 4px solid #dfe6ff;
    border-top-color: var(--blue);
    animation: dbSpin .8s linear infinite
}

@keyframes dbSpin {
    to {
        transform: rotate(360deg)
    }
}

.dbm-error {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 14px;
    padding: 16px;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center
}

.dbm-warn {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff5f5;
    border: 1.5px solid #fecaca;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px
}

    .dbm-warn > i {
        font-size: 1.5rem;
        color: #ef4444
    }

    .dbm-warn b {
        display: block;
        color: #b91c1c
    }

    .dbm-warn span {
        font-size: .84rem;
        color: #7f1d1d
    }

.dbm-sec {
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--navy);
    margin: 18px 0 10px;
    display: flex;
    gap: 8px;
    align-items: center
}

    .dbm-sec i {
        color: var(--blue)
    }

.dbm-sec--danger, .dbm-sec--danger i {
    color: #b91c1c
}

.dbm-sec em {
    color: #ef4444;
    font-style: normal
}

.dbm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.dbm-item {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #f6f8ff;
    border: 1px solid #e3e9ff;
    border-radius: 14px;
    padding: 10px 12px
}

    .dbm-item > i {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: .8rem;
        flex: none;
        background: radial-gradient(120% 80% at 100% 0%, rgba(78,115,223,.55), transparent 60%), linear-gradient(160deg, var(--navy), var(--deep))
    }

    .dbm-item small {
        display: block;
        font-size: .68rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: 700
    }

    .dbm-item b {
        font-size: .9rem;
        color: var(--ink);
        word-break: break-word
    }

.dbm-notes {
    background: #f6f8ff;
    border: 1px dashed #c9d2ff;
    border-radius: 14px;
    padding: 12px 14px;
    color: #3b4266;
    font-style: italic;
    font-size: .88rem
}

.dbm-textarea {
    width: 100%;
    border: 1.5px solid #dfe6ff;
    border-radius: 14px;
    background: #f6f8ff;
    padding: 12px 14px;
    font: inherit;
    font-size: .9rem;
    outline: 0;
    resize: vertical;
    transition: .2s
}

    .dbm-textarea:focus {
        border-color: var(--blue);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(78,115,223,.16)
    }

    .dbm-textarea.err {
        border-color: #ef4444;
        box-shadow: 0 0 0 4px rgba(239,68,68,.15)
    }

@media (max-width: 576px) {
    .dbm-grid {
        grid-template-columns: 1fr
    }

    .dbm-foot {
        flex-direction: column-reverse
    }

    .dbm-btn {
        justify-content: center
    }

    .db-act span {
        display: none
    }

    .db-act {
        padding: 9px 12px
    }
}

/* SweetAlert2 popups on the Manage page */
.swal2-popup.db-swal {
    border-radius: 0px;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    border-top: 8px solid transparent;
    border-image: linear-gradient(90deg, #1a1f6d, #4e73df) 1;
    box-shadow: 0 30px 60px -18px rgba(26,31,109,.55)
}

    .swal2-popup.db-swal .swal2-title {
        color: #1a1f6d;
        font-weight: 800
    }

    .swal2-popup.db-swal .swal2-html-container {
        color: #3b4266
    }

    .swal2-popup.db-swal .swal2-styled {
        border-radius: 12px;
        font-weight: 700;
        padding: .7em 1.6em
    }

        .swal2-popup.db-swal .swal2-styled.swal2-confirm {
            background: linear-gradient(160deg, #1a1f6d, #05003b) !important;
            box-shadow: 0 10px 20px -10px rgba(26,31,109,.8)
        }

        .swal2-popup.db-swal .swal2-styled.swal2-cancel {
            background: #eef1ff !important;
            color: #1a1f6d !important
        }

.swal2-popup.db-swal--danger {
    border-image: linear-gradient(90deg, #ef4444, #b91c1c) 1
}

    .swal2-popup.db-swal--danger .swal2-styled.swal2-confirm {
        background: linear-gradient(160deg, #ef4444, #b91c1c) !important;
        box-shadow: 0 10px 20px -10px rgba(185,28,28,.85)
    }

/* ---------- Delete modal: room theme (blue = Conference, teal = Discussion; Delete button stays red) ---------- */
.dbm .dbm-content { border: 1.5px solid #dfe6ff }
.dbm-head {
    background:
        radial-gradient(60% 90% at 0% 100%, rgba(18,179,166,.30), transparent 65%),
        radial-gradient(120% 80% at 100% 0%, rgba(78,115,223,.55), transparent 60%),
        linear-gradient(160deg, #1a1f6d, #05003b);
}
.dbm-head h5 i { color: #7de3da }
.dbm-body { background: linear-gradient(180deg, #ffffff, #f8faff) }
.dbm-foot { background: #f6f8ff; border-top-color: #dfe6ff }
.dbm-btn--ghost { color: #1a1f6d; border-color: #c9d2ff }
.dbm-btn--ghost:hover { background: #eef1ff; border-color: #4e73df }
.dbm-spinner { border-color: #dfe6ff; border-top-color: #4e73df }

/* Discussion room = teal */
.dbm.dbm-disc .dbm-content { border-color: #cdf0ec }
.dbm.dbm-disc .dbm-head {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(18,179,166,.55), transparent 60%),
        linear-gradient(160deg, #04384f, #041a3b);
}
.dbm.dbm-disc .dbm-body { background: linear-gradient(180deg, #ffffff, #f3fcfa) }
.dbm.dbm-disc .dbm-foot { background: #f0fbf9; border-top-color: #cdf0ec }
.dbm.dbm-disc .dbm-btn--ghost { color: #04384f; border-color: #a7e3dd }
.dbm.dbm-disc .dbm-btn--ghost:hover { background: #e6f7f5; border-color: #12b3a6 }
.dbm.dbm-disc .dbm-sec { color: #04384f }
.dbm.dbm-disc .dbm-sec i { color: #12b3a6 }
.dbm.dbm-disc .dbm-sec--danger, .dbm.dbm-disc .dbm-sec--danger i { color: #b91c1c }
.dbm.dbm-disc .dbm-item { background: #f0fbf9; border-color: #cdf0ec }
.dbm.dbm-disc .dbm-item > i {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18,179,166,.55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
}
.dbm.dbm-disc .dbm-notes { background: #f0fbf9; border-color: #a7e3dd }
.dbm.dbm-disc .dbm-textarea { background: #f0fbf9; border-color: #cdf0ec }
.dbm.dbm-disc .dbm-textarea:focus { border-color: #12b3a6; background: #fff; box-shadow: 0 0 0 4px rgba(18,179,166,.18) }
.dbm.dbm-disc .dbm-textarea.err { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15) }
.dbm.dbm-disc .dbm-spinner { border-color: #cdf0ec; border-top-color: #12b3a6 }

/* ---------- Delete modal: neutralise the old global modal.css (.modal z-index 1000 / .modal-content max-width 325px) ---------- */
.dbm.modal {
    z-index: 1090 !important;          /* above Bootstrap's backdrop (1050) so the modal is clickable */
    background: transparent !important;
    backdrop-filter: none !important;
    overflow-y: auto;
}
.dbm.modal .modal-dialog { z-index: 1091; pointer-events: none }
.dbm.modal .modal-content,
.dbm.modal .dbm-content {
    pointer-events: auto;
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative;
}
.modal-backdrop.show { opacity: .55 }

/* ---------- "Delete Booking" button in the modal: theme colours (blue = Conference, teal = Discussion) ---------- */
.dbm .dbm-btn--danger {
    background: radial-gradient(120% 80% at 100% 0%, rgba(78, 115, 223, .55), transparent 60%), linear-gradient(160deg, #1a1f6d, #05003b);
    color: #fff;
    box-shadow: 0 12px 22px -10px rgba(26,31,109,.8);
}
.dbm .dbm-btn--danger:hover:not(:disabled) { box-shadow: 0 16px 28px -10px rgba(26,31,109,.9); transform: translateY(-2px) }
.dbm.dbm-disc .dbm-btn--danger {
    background: radial-gradient(120% 80% at 100% 0%, rgba(18, 179, 166, .55), transparent 60%), linear-gradient(160deg, #04384f, #041a3b);
    box-shadow: 0 12px 22px -10px rgba(4,56,79,.8);
}
.dbm.dbm-disc .dbm-btn--danger:hover:not(:disabled) { box-shadow: 0 16px 28px -10px rgba(4,56,79,.9) }

/* Colourful avatars: colour comes from the inline gradient (per person); add depth */
.db-avatar { box-shadow: 0 8px 16px -8px rgba(27,31,59,.55); text-shadow: 0 1px 2px rgba(0,0,0,.25) }