/* =========================================================================
   Employee dashboard (/e/) panel refresh.
   Scoped to .dashboard-equal-cards so no other bit-cards in the app change.
   Loaded AFTER bit_card.css (see app.js import order) so it wins the cascade;
   !important kept on props that compete with Bootstrap utilities (.bg-*).
   ========================================================================= */

/* =========================================================================
   Frosted-glass canvas — the same gradient + blur-blob backdrop the listing
   pages use (frosted-listing.css), so /e/ shares the glossy look.
   ========================================================================= */
.container-fluid.dashboard-equal-cards {
    position: relative;
    overflow-x: clip;
    min-height: 100%;
    background:
        radial-gradient(1100px 620px at 8% -8%, rgba(124, 197, 255, 0.42), transparent 60%),
        radial-gradient(1000px 700px at 100% 0%, rgba(183, 155, 255, 0.34), transparent 55%),
        radial-gradient(900px 640px at 50% 120%, rgba(88, 226, 194, 0.32), transparent 55%),
        linear-gradient(160deg, #eaf2fb 0%, #e7ecfb 45%, #eafaf4 100%);
}
.container-fluid.dashboard-equal-cards::before,
.container-fluid.dashboard-equal-cards::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(34px); z-index: 0; pointer-events: none;
}
.container-fluid.dashboard-equal-cards::before { width: 300px; height: 300px; left: -40px; top: 120px; background: radial-gradient(circle, rgba(94, 184, 255, 0.5), transparent 70%); }
.container-fluid.dashboard-equal-cards::after { width: 380px; height: 380px; right: -70px; bottom: -30px; background: radial-gradient(circle, rgba(154, 123, 255, 0.45), transparent 70%); }
.container-fluid.dashboard-equal-cards > * { position: relative; z-index: 1; }

/* Glass panel cards (matches .frosted-listing .modern-card) */
.dashboard-equal-cards .card.bit-card {
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 10px 30px rgba(17, 42, 84, 0.14), 0 2px 6px rgba(17, 42, 84, 0.08) !important;
}
/* Available Course Seats is a data table, not chrome: on the 55%-white frosted
   surface the page gradient showed through and muddied the pinned row stripes
   (#e6edf7 / #fff), so this one card gets a solid white body. The frosted border
   and shadow stay, so it still reads as part of the card set. */
.dashboard-equal-cards .card.bit-card.dash-seats-card {
    background: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.dashboard-equal-cards .card.bit-card[class*="bit-card-"] .card-icon-header {
    background: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px 20px 0 0 !important;
}
.dashboard-equal-cards .card.bit-card .card-body { padding: 0 !important; background: transparent !important; }

/* Quiet, sticky, uppercase table headers (near-opaque tint — a transparent
   sticky header lets scrolled rows ghost through, see frosted-listing gotchas) */
.dashboard-equal-cards .card.bit-card .card-body table { margin: 0 !important; background: transparent !important; }
.dashboard-equal-cards .card.bit-card .card-body thead th {
    position: sticky; top: 0; z-index: 1; background: rgba(248, 251, 254, 0.97) !important;
    font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700 !important; color: #94a3b8 !important; border: 0 !important; border-bottom: 1px solid #eef1f5 !important;
    padding: 8px 14px !important; white-space: nowrap;
}

/* Card title headers — match the mockup (clean 1rem, bold) */
.dashboard-equal-cards .card.bit-card .card-icon-header .content h6,
.dashboard-equal-cards .card.bit-card .card-icon-header .content h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

/* Body cells — larger and a touch bolder than the old cramped 11px (matches mockup) */
.dashboard-equal-cards .card.bit-card .card-body tbody td { border: 0 !important; border-bottom: 1px solid #f1f5f9 !important; padding: 10px 14px !important; vertical-align: middle; color: #334155; font-size: 13px !important; font-weight: 500; line-height: 1.4; }
/* Keep secondary inline notes (descriptions, due dates) smaller for hierarchy */
.dashboard-equal-cards .card.bit-card .card-body tbody td small { font-size: 11px !important; font-weight: 400; }

/* =========================================================================
   Available Course Seats / Today's Activity — readable type.

   These two cards are read across the room, not leaned into, so they run
   larger than the shared card table style above. They sit AFTER that rule
   deliberately: it is ".dashboard-equal-cards .card.bit-card .card-body
   tbody td" at 4 classes / 2 elements, so anything here must match or beat
   it, and naming table > tbody > td does exactly that.
   ========================================================================= */
/* Specificity is turned up as far as it usefully goes — six classes and four
   elements — because several rules compete for these cells and all of them use
   !important: the shared card style above (4 classes), bit-card-refresh.css, and
   modern_tables.css, which sizes from the org's own Theme Settings
   (--bit-table-font-size, 11px on this org) on top of a body set to
   GlobalFontSize (12px). Anything gentler than this loses to one of them. */
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table tbody tr td,
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table tbody tr td span,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody tr td,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody tr td span {
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table thead tr th,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table thead tr th {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody tr td .text-muted,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody tr td small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table tbody tr td .badge,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody tr td .badge {
    font-size: 11px !important;
    line-height: 1.15 !important;
}

.dashboard-equal-cards .dash-activity-card .emp-tab { font-size: 13.5px !important; }
.dashboard-equal-cards .dash-activity-card .emp-mini-stats { font-size: 13px !important; }

/* Tight gutters. The shared rule above spends 28px per column on padding, which at
   this type size is the difference between a package name fitting and being cut. */
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table thead th,
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table tbody td,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table thead th,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody td {
    padding: 4px 7px !important;
}
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table tbody td:first-child,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody td:first-child,
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table thead th:first-child,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table thead th:first-child {
    padding-left: 10px !important;
}
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table tbody td:last-child,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody td:last-child,
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table thead th:last-child,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table thead th:last-child {
    padding-right: 10px !important;
}

/* Nothing wraps in either card: a value broken over two lines throws the row's
   height out and reads worse than a clipped one. Full text is on each cell's
   title attribute. */
.dashboard-equal-cards .card.bit-card.dash-seats-card .card-body table,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table {
    table-layout: fixed;
    width: 100%;
}
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody td,
.dashboard-equal-cards .card.bit-card.dash-activity-card .card-body table tbody td .text-muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-equal-cards .dash-seats-card .table-responsive,
.dashboard-equal-cards .dash-activity-card .table-responsive,
.dashboard-equal-cards .dash-activity-card .emp-pane-scroll {
    overflow-x: hidden !important;
}

/* Seats columns. The row number is nowrap and wide enough for two digits and a
   full stop — "10." was wrapping onto a second line at 30px. */
.dashboard-equal-cards .dash-seats-card .card-body .emp-seats-table th:nth-child(1),
.dashboard-equal-cards .dash-seats-card .card-body .emp-seats-table td:nth-child(1) {
    width: 42px;
    white-space: nowrap;
}
.dashboard-equal-cards .dash-seats-card .card-body .emp-seats-table th:nth-child(3),
.dashboard-equal-cards .dash-seats-card .card-body .emp-seats-table td:nth-child(3) {
    width: 72px;
    white-space: nowrap;
}
.dashboard-equal-cards .dash-seats-card .card-body .emp-seats-table .seat-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recent Sales: the package name is the long one, so the rest are pinned. */
.dashboard-equal-cards .dash-activity-card .emp-sales-table th:nth-child(1),
.dashboard-equal-cards .dash-activity-card .emp-sales-table td:nth-child(1) { width: 27%; }
.dashboard-equal-cards .dash-activity-card .emp-sales-table th:nth-child(2),
.dashboard-equal-cards .dash-activity-card .emp-sales-table td:nth-child(2) { width: 22%; }
.dashboard-equal-cards .dash-activity-card .emp-sales-table th:nth-child(4),
.dashboard-equal-cards .dash-activity-card .emp-sales-table td:nth-child(4) { width: 18%; }
.dashboard-equal-cards .card.bit-card .card-body tbody tr:last-child td { border-bottom: 0 !important; }
.dashboard-equal-cards .card.bit-card .card-body .table > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background-color: transparent !important; }
.dashboard-equal-cards .card.bit-card .card-body .table > tbody > tr { transition: background 0.12s; }
.dashboard-equal-cards .card.bit-card .card-body .table > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.6) !important; }

/* Soft pill badges (match the Pulse trend chips); remap solid Bootstrap badges */
.dashboard-equal-cards .card.bit-card .card-body .badge { font-weight: 600 !important; border-radius: 999px !important; padding: 4px 9px !important; }
/* Solid, matching the tile modals — see the note on .dash-modal-content .badge. */
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-primary   { background-color: #1d4ed8 !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-success   { background-color: #15803d !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-info      { background-color: #0e7490 !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-warning   { background-color: #b45309 !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-danger    { background-color: #8a0000 !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .badge.bg-secondary { background-color: #475569 !important; color: #fff !important; }

/* Rounded, soft-tinted table action buttons */
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn { border-radius: 8px !important; border-color: transparent !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-info { background: #0e7490 !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-info:hover { background: #0b5c73 !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-success { background: #15803d !important; color: #fff !important; }
.dashboard-equal-cards .card.bit-card .card-body .table-action-btn.btn-success:hover { background: #116632 !important; color: #fff !important; }

/* Friendlier empty states: turn the lone icon into a soft circular badge */
.dashboard-equal-cards .card.bit-card .card-body p.text-center { padding: 30px 16px !important; color: #94a3b8; }
.dashboard-equal-cards .card.bit-card .card-body p.text-center > .bi:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #9db2cc; font-size: 1.7rem !important; margin-bottom: 10px;
}

/* Modern header action buttons — replace the heavy solid dark-blue brand
   buttons ("Full Report", etc.) with soft brand-tinted pills that match the
   hero and the soft-pill language (color-mix keeps them on-brand per org). */
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-primary,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-secondary {
    background: color-mix(in srgb, var(--bit-primary, #0d6efd) 10%, white) !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--bit-primary, #0d6efd) 22%, white) !important;
    color: color-mix(in srgb, var(--bit-primary, #0d6efd) 78%, black) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    padding: 3px 12px !important;
}
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-primary:hover,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-secondary:hover,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-primary:focus,
.dashboard-equal-cards .card.bit-card .card-icon-header .btn-secondary:focus {
    background: color-mix(in srgb, var(--bit-primary, #0d6efd) 18%, white) !important;
    border-color: color-mix(in srgb, var(--bit-primary, #0d6efd) 35%, white) !important;
    color: color-mix(in srgb, var(--bit-primary, #0d6efd) 88%, black) !important;
}

/* =========================================================================
   Business Pulse metric cards — identical to the Organization > Metrics page
   (gradient cards, white text, big value, colored change). Mirrors the inline
   CSS in organization_metrics.html.twig so both pages match.
   ========================================================================= */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.metric-card {
    background: linear-gradient(135deg, #020022 0%, #50396d 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.metric-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100px; height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(30%, -30%);
}
.metric-card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
/* On the dashboard, match the hero banner's blue instead of the metrics-page purple */
.dashboard-equal-cards .metric-card { background: linear-gradient(135deg, #112a54 0%, #2674a6 100%) !important; }

/* =========================================================================
   Employee identity = PURPLE. The hero banner (shared, identical-looking on the
   student dashboard) is recolored to the metrics purple so staff instantly know
   they're in the employee view vs the student view. Scoped to /e/.
   ========================================================================= */
.dashboard-equal-cards .welcome-banner {
    background-color: #2a1a45 !important;
}
.dashboard-equal-cards .welcome-banner::before {
    background: linear-gradient(90deg,
        rgba(2, 0, 34, 0.96) 0%,
        rgba(40, 25, 70, 0.92) 28%,
        rgba(80, 57, 109, 0.6) 48%,
        transparent 62%) !important;
}
/* Avatar + its ring tinted to match the purple identity */
.dashboard-equal-cards .staff-avatar { background: linear-gradient(135deg, #6a4a92 0%, #2a1148 100%) !important; }
.metric-card-header { display: flex; align-items: center; margin-bottom: 16px; position: relative; z-index: 1; }
.metric-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.metric-icon i { font-size: 24px; color: white; }
.metric-title { color: #fff; font-size: 14px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.metric-card-body { position: relative; z-index: 1; }
.metric-value { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.metric-change { font-size: 14px; display: flex; align-items: center; color: #fff; }
.metric-change.positive { color: #a8ff78; }
.metric-change.negative { color: #ff9999; }
.metric-change .change-percent { font-weight: 600; margin-right: 4px; }
.metric-change .change-text { opacity: 0.8; }
@media (max-width: 768px) {
    .metrics-grid { grid-template-columns: 1fr 1fr; }
    .metric-value { font-size: 28px; }
    .metric-card { padding: 18px; }
}

/* =========================================================================
   "Today at a glance" tile modals — same refreshed table look as the panels,
   applied to the modal body content (.dash-modal-content).
   ========================================================================= */
.dash-modal-content table { margin: 0 !important; }
.dash-modal-content thead th {
    position: sticky; top: 0; z-index: 1; background: #f8fafc !important;
    font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700 !important; color: #94a3b8 !important; border: 0 !important; border-bottom: 1px solid #eef1f5 !important;
    padding: 9px 14px !important; white-space: nowrap;
}
.dash-modal-content tbody td { border: 0 !important; border-bottom: 1px solid #f1f5f9 !important; padding: 11px 14px !important; vertical-align: middle; color: #334155; font-size: 13px; }
.dash-modal-content tbody tr:last-child td { border-bottom: 0 !important; }
.dash-modal-content .table > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background-color: transparent !important; }
.dash-modal-content .table > tbody > tr { transition: background 0.12s; }
.dash-modal-content .table > tbody > tr:hover > * { background-color: #f8fbff !important; }

.dash-modal-content .badge { font-weight: 600 !important; border-radius: 999px !important; padding: 4px 9px !important; font-size: 11px !important; }
/* SOLID badges, no pastel wash. These were 12–16% tints carrying mid-tone text, which
   is the same washed-out combination that made the alerts and the rejection label
   unreadable — a status badge has to be legible at a glance or it is decoration.
   Fixed colours rather than the org theme tokens: this org's Success (#def2e6) and
   Danger (#fae1e1) are near-white background tints, so a badge painted from them
   would be invisible whatever the text colour. */
.dash-modal-content .badge.bg-primary   { background-color: #1d4ed8 !important; color: #fff !important; }
.dash-modal-content .badge.bg-success   { background-color: #15803d !important; color: #fff !important; }
.dash-modal-content .badge.bg-info      { background-color: #0e7490 !important; color: #fff !important; }
.dash-modal-content .badge.bg-warning   { background-color: #b45309 !important; color: #fff !important; }
.dash-modal-content .badge.bg-danger    { background-color: #8a0000 !important; color: #fff !important; }
.dash-modal-content .badge.bg-secondary { background-color: #475569 !important; color: #fff !important; }

/* =========================================================================
   Action buttons in the dashboard's own modals (Awaiting Your Review, DL
   expirations, cancellations).

   These are the /e/customers listing tiles, reproduced: same 38x38 glass square,
   same 12px radius, same hover lift and sheen, and the SAME per-variant icon
   colours, which come from Org -> Theme Settings -> Listing Icons. Mirrored here
   rather than by putting .frosted-listing on the modal, because that class also
   carries the listing page's gradient backdrop and hero chrome — everything the
   modal must not inherit.

   Keep these in step with the ".frosted-listing .table-modern .table-action-btn"
   block in components/frosted-listing.css.

   Every selector carries the .modal.bit-modal prefix on purpose. frosted-modal.css
   skins EVERY .btn-outline-* inside a bit-modal as a filled navy/green gradient chip
   — right for a footer button, wrong for an icon tile, and it loads after this file,
   so an unprefixed rule of equal specificity loses and the tiles come out as solid
   navy squares. These tiles opt out of that skin explicitly.
   ========================================================================= */
.modal.bit-modal .dash-modal-content .table-action-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    padding: 0 !important;
    margin: 0 3px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .45) !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(17, 42, 84, .1) !important;
    transform: none !important;
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
    font-weight: 400 !important;
}

.modal.bit-modal .dash-modal-content .table-action-btn:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 8px 18px rgba(17, 42, 84, .2) !important;
}

/* Sheen sweep across the tile on hover, same as the listing pages. */
.modal.bit-modal .dash-modal-content .table-action-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}
.modal.bit-modal .dash-modal-content .table-action-btn:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
    .modal.bit-modal .dash-modal-content .table-action-btn::after { transition: none; }
}

.modal.bit-modal .dash-modal-content .table-action-btn i {
    font-size: 1rem !important;
    color: inherit !important;
}

/* Icon + tile colour per variant, read from the same theme vars the listing uses,
   so a colour changed in Theme Settings moves both screens together. */
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-primary,
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-primary i { color: var(--bit-listing-icon-edit, #2674a6) !important; }
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-primary {
    background: color-mix(in srgb, var(--bit-listing-icon-edit-bg, #ffffff) 50%, transparent) !important; }

.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-info,
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-info i { color: var(--bit-listing-icon-view, #0e7490) !important; }
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-info {
    background: color-mix(in srgb, var(--bit-listing-icon-view-bg, #ffffff) 50%, transparent) !important; }

.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-success,
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-success i { color: var(--bit-listing-icon-sales, #16a34a) !important; }
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-success {
    background: color-mix(in srgb, var(--bit-listing-icon-sales-bg, #ffffff) 50%, transparent) !important; }

.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-secondary,
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-secondary i { color: var(--bit-listing-icon-bookings, #475569) !important; }
.modal.bit-modal .dash-modal-content .table-action-btn.btn-outline-secondary {
    background: color-mix(in srgb, var(--bit-listing-icon-bookings-bg, #ffffff) 50%, transparent) !important; }

.modal.bit-modal .dash-modal-content td .d-flex { gap: 0 !important; }

.dash-modal-content p.text-center { padding: 34px 16px !important; color: #94a3b8; }
.dash-modal-content p.text-center > .bi:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; background: #f1f5f9;
    color: #cbd5e1; font-size: 1.7rem !important; margin-bottom: 10px;
}