.bg-zinc-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(212 212 216 / var(--tw-bg-opacity));
}
.w-full {
    width: 100%;
}
.h-px {
    height: 1px;
}

.fi-simple-main .fi-simple-header .fi-logo {
    display: none !important;
}

.dot::before {
    content: "";
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
}

.dot.is-active::before {
    width: 2rem;
    background: #fff;
}

.status-dot {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(22, 163, 74);
}

.status-dot-gary {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(228, 228, 231);
}

.arrow-icon {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid rgb(147, 51, 234); /* default blue */
    transform: translateY(1px);
}

.img-bg {
    background-color: #f7f5ff;
}

.wp-card-bg {
    background-color: #fbf8ff;
}

.dark .wp-card-bg {
    background-color: #32273e;
    border: 1px solid;
    border-color: #5a3188;
    color: #ffffff;
}

/* Extra coverage for aria-disabled */
.add-slots-action:disabled,
.add-slots-action[disabled],
.add-slots-action[aria-disabled="true"] {
    opacity: 0.4 !important;
}

.fi-ta-search-field input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}
/* .fi-sidebar {
    background-color: #ffffff !important;
}

.dark .fi-sidebar {
    background-color: rgb(24, 24, 27) !important;
} */

.card-container .folder-media-card:hover {
    background-color: #ffffff;
}

.custom-button-class {
    --tw-ring-shadow: 0 0 #0000 !important; /* effectively removes ring shadow */
    --tw-ring-inset: initial !important;
    --tw-ring-offset-width: 0px !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important; /* remove any remaining shadow */
    border: none !important;
    background-color: hsla(
        0,
        0%,
        100%,
        0.05
    ); /* optional: remove border if needed */
}

.center-modal {
    top: 5.5rem !important;
}

.model-width-lg {
    width: 32rem !important;
}

.center-modal .fi-modal-dialog {
    margin: 0 !important;
}

::-webkit-scrollbar {
    width: 0px;
    /* background: transparent; */
}

.dark .media-checkbox {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.dark .media-checkbox:checked {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(168, 85, 247) !important;
}

#video-lib-card .fi-section-content {
    padding: 1vw !important;
}

#video-lib-card.list-view .fi-section-content {
    padding: 0.5rem 0.5rem 0.5rem 0rem !important;
}

#dashboard .fi-section-content {
    padding: 1rem !important;
}

.fi-sidebar-item-label {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.fi-sidebar-group-label {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.sidebar-container-02 .sidebar-button-2 .sidebar-label-02 {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.custom-scroll-section .fi-section-content {
    max-height: 43.3rem;
    overflow-y: scroll;
}

.custom-scroll-section-setting .fi-section-content {
    max-height: 28.5rem;
    overflow-y: scroll;
}

.custom-scroll-section-playlist {
    max-height: 25rem;
    overflow-y: scroll;
}

.fi-section-content {
    scrollbar-width: thin;
}

#subscription-page .fi-simple-header .fi-logo {
    display: none;
}

.fi-sidebar-item-grouped-border {
    opacity: 0 !important;
}

.dark .featured-sidebar-group .fi-sidebar-group-button .fi-sidebar-group-label {
    color: #ffffff !important;
}

.featured-sidebar-group .fi-sidebar-group-button .fi-sidebar-group-label {
    color: rgba(var(--gray-700), var(--tw-text-opacity, 1)) !important;
}

.featured-sidebar-group .fi-sidebar-item .fi-sidebar-item-label {
    font-weight: 500 !important;
}

ul.fi-sidebar-nav-groups {
    gap: 0.4rem !important;
}

.fi-breadcrumbs .fi-breadcrumbs-item-label {
    max-width: 30vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* display: inline-block;
    vertical-align: middle;
    cursor: default;
    position: relative; */
}

.fi-header .fi-header-heading {
    max-width: 30vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fi-section-header .fi-section-header-heading {
    max-width: 30vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-limit {
    max-width: 20vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.preview-section-header .fi-section-header-actions {
    justify-content: flex-end !important;
}

/* .dark .filepond--drop-label {
    background-color: hsla(0, 0%, 100%, 0) !important;
    color: #d1d5db !important;
    border-radius: 0.5rem;
} */

/* Optional: tweak border + inner padding */
/* .dark .filepond--root {
    border: none !important;
    padding: 0.75rem;
} */

.fi-dropdown-panel
    .fi-dropdown-list
    .fi-dropdown-list-item
    .fi-dropdown-list-item-label {
    font-weight: 600 !important;
    /* font-size: 1rem !important; */
}

.fi-ta-table .fi-ta-text .fi-ta-text-item .fi-ta-text-item-label {
    /* font-weight: 600 !important; */
    font-weight: normal;
}

.upload-captions-modal .fi-modal-content .fi-dropdown-panel {
    width: 6vw !important;
}

.privacy-options .fi-fo-field-wrp .break-inside-avoid span {
    font-size: 1rem; /* 16px */
}

.upload-action-wrapper {
    font-size: 1rem !important;
}

#sort-dropdown .fi-dropdown-panel {
    z-index: 99 !important;
}
/* @media (min-width: 1367px) and (max-width: 1600px) {
     .custom-scroll-section-setting .fi-section-content {
    max-height:  29.5vw;
    overflow-y: scroll;
}
} */

.fi-fo-field-wrp .fi-fo-field-wrp-label span {
    /* font-size: 1rem !important; */
    font-weight: 600 !important;
}

.fi-ta-header .fi-ta-actions a,
.fi-fo-tabs .fi-tabs .fi-tabs-item,
.fi-dropdown-header .fi-dropdown-header-label {
    font-size: 1rem !important;
}

.custom-color-picker .fi-fo-color-picker-preview {
    border: 1px solid rgba(var(--gray-500), var(--tw-border-opacity, 1)); /* Black border */
}

.fi-simple-main .fi-form-actions span,
.fi-section-content-ctn .fi-section-content button,
/* .fi-section-content-ctn .fi-section-content a, */
.update-button button,
.fi-fo-actions .fi-ac button,
.fi-modal-footer .fi-modal-footer-actions .fi-btn-label {
    font-size: 1rem !important;
}

.fi-section-content-ctn .fi-section-content .dashboard-dropdown button {
    font-size: 14px !important;
}

.fi-section-content-ctn .fi-section-content button#langSelectBtn,
.fi-section-content-ctn .fi-section-content button#cap-upload-btn {
    font-size: 14px !important;
}

.dark #langSelectBtn {
    background-color: hsla(0, 0%, 100%, 0.05) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.dark #langSelectMenu {
    background: rgba(24, 24, 27) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    border: 1px solid rgba(var(--gray-200), 1);
}

.dark #langSelectMenu li {
    background: rgba(24, 24, 27) !important;
    /* color: rgb(255 255 255/var(--tw-text-opacity,1)) !important; */
}

.fi-global-search-result h4 {
    max-width: 22vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.empty-actions button,
.empty-actions a {
    font-size: 1rem !important;
}

.filament-breezy-grid-section .filament-breezy-grid-title,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-fo-radio span {
    font-weight: 600 !important;
}

.onbording-logo {
    width: 6rem;
    margin-bottom: 2.1rem;
}

.onbording-side-img {
    width: 28rem;
    margin-bottom: 2rem;
}

.skippz-auth-media-panel {
    position: relative;
    overflow: hidden;
    background: #111827 !important;
    min-height: 37rem;
}

.skippz-auth-media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skippz-auth-media-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 2rem;
    color: #ffffff;
}

.skippz-auth-media-logo {
    width: auto;
    height: 1.5rem;
    object-fit: contain;
    align-self: flex-start;
}

.skippz-auth-media-copy {
    display: flex;
    flex-direction: column;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.skippz-auth-media-kicker {
    margin: 0 0 0.5rem;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: normal;
    text-transform: uppercase;
    opacity: 0.85;
}

.skippz-auth-media-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

#cap-upload-btn:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4); /* subtle glow */
}

.fi-input-wrp[data-validation-state="error"] {
    @apply ring-1 ring-danger-600 border-danger-600;
}
.fi-input-wrp[data-validation-state="error"]:focus-within {
    @apply ring-danger-600;
}

/* Spotlight Name: keep the validation error directly under the input, with the
   character counter on the same line to the right. Only applies when an error is shown
   (:has), so the normal no-error layout is unchanged. */
.spotlight-name-field:has(.fi-fo-field-wrp-error-message) {
    position: relative;
}
.spotlight-name-field:has(.fi-fo-field-wrp-error-message) .fi-input-charcounter {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
}

.chat-box .chat-area {
    max-height: 25rem !important;
    height: 25rem !important;
}

.fi-breadcrumbs .fi-breadcrumbs-item .fi-breadcrumbs-item-separator {
    padding-top: 2.5px;
}

.fav-gold {
    color: rgb(245 158 11);
} /* amber-500 */
.dark .fav-gold {
    color: rgb(251 191 36);
} /* amber-400 */

/* make sure nested SVGs inherit it (Filament list.item wraps an svg) */
.fav-gold svg,
.fav-gold .fi-dropdown-list-item-icon {
    color: inherit;
}

/* if an icon ignores text color, force it */
.fav-gold svg,
.fav-gold .ph,
.fav-gold [data-icon] {
    fill: currentColor;
}

[data-fav-icon] .fi-btn-icon {
    color: var(--fav-icon-color, currentColor) !important;
}
[data-fav-icon] .fi-btn-icon svg {
    fill: currentColor !important;
}

/* Dropdown list item icon */
[data-fav-icon] .fi-dropdown-list-item-icon {
    color: var(--fav-icon-color, currentColor) !important;
}
[data-fav-icon] .fi-dropdown-list-item-icon svg {
    fill: currentColor !important;
}

.dark .ai-credit {
    background: #ffffff0d;
}

.select-img {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--primary-600), var(--tw-ring-opacity, 1));
}

.dark .select-img {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--primary-500), var(--tw-ring-opacity, 1));
}

/* app.css */
.dark .collapsible-card {
    --tw-bg-opacity: 1;
    background-color: #1d1d20 !important;
}

.form-field-dropdown:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4);
}

.active-time-bg {
    background-color: #f6f4fe;
}

.dark .active-time-bg {
    background-color: #32273e;
}

.media-gallery-pop #upload-button {
    font-size: 1rem !important;
}

.dark .empty-logo {
    background-color: #ffffff0d !important;
}

.marketing-empty-state-section {
    height: 34.5vw !important;
}

.my-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.fi-dropdown-trigger button {
    font-size: 1rem !important;
}

.fi-fo-date-time-picker-display-text-input {
    width: 12vw !important;
}

.text-new-color {
    color: #9333ea;
}

.edit_preview_button {
    color: #737373 !important;
}

.dark .edit_preview_button {
    color: #d4d4d4 !important;
}

.center-modal-marketing-tutorial {
    grid-template-rows: 1fr auto 1fr !important;
}

div[x-ref="modalContainer"]:has(.tutorial-modal-window) {
    grid-template-rows: 1.5fr auto 1fr !important;
}

.select-playlist {
    background-color: #f4f4f5 !important;
}

.dark .select-playlist {
    background-color: #242427 !important;
}

.select-playlist:hover {
    background-color: #fafafa !important;
}

.dark .select-playlist:hover {
    background-color: #262626 !important;
}

.playlist-disable {
    background-color: #fafafa !important;
}

.dark .playlist-disable {
    background-color: #181818 !important;
}

.dark .disable-text {
    color: #2e2d31 !important;
}

.select-video {
    background: #faf5ff !important;
    border: 1px solid #9333ea !important;
}

.dark .select-video {
    background: #32273e !important;
}

/* Base styles for the divider */
.video-modal-divider {
    flex-shrink: 0;
    background-color: #e5e7eb;
    /* Tailwind gray-200 */
}

/* Filament Dark Mode Support */
.dark .video-modal-divider {
    background-color: rgba(255, 255, 255, 0.1);
    /* Tailwind white/10 */
}

/* Desktop: Vertical Line */
@media (min-width: 768px) {
    .video-modal-divider {
        width: 1px;
        height: auto;
        align-self: stretch;
        /* Forces the line to be exactly as tall as the columns */
        margin-left: 24px;
        /* Creates the left gap */
        margin-right: 24px;
        /* Creates the right gap */
    }
}

/* Mobile: Horizontal Line */
@media (max-width: 767px) {
    .video-modal-divider {
        width: 100%;
        height: 1px;
        margin-top: 24px;
        margin-bottom: 24px;
    }
}

/* .change-button-width{
    width: 10.5rem !important;
}

@media screen and (max-width: 1397px) {
.change-button-width{
    width: 7rem !important;
}
} */

@media (min-width: 768px) {
    .desktop-h-50 {
        height: 50rem;
    }
    .marketing-empty-state-section {
        height: 34.5vw !important;
    }
}

@media only screen and (max-width: 767px) {
    .fi-simple-main .fi-simple-header .fi-logo {
        display: flex !important;
    }

    .fi-simple-layout .fi-simple-main-ctn .left-side {
        display: none !important;
    }

    .fi-simple-layout .fi-simple-main-ctn .fi-simple-main {
        width: 22rem !important;
        border-radius: 0.75rem !important;
    }

    .fi-simple-layout .fi-simple-main-ctn {
        height: auto !important;
    }
}

@media (min-width: 1365px) and (max-width: 1400px) {
    .timing-font {
        font-size: 12px !important;
    }
}

@media (min-width: 1710px) {
    .marketing-empty-state-section {
        height: 35vw !important;
    }
}

@media (min-width: 1920px) {
    .marketing-empty-state-section {
        height: 30vw !important;
    }
}

@media (min-width: 1601px) {
    .custom-scroll-section .fi-section-content {
        max-height: 44.8rem;
        overflow-y: scroll;
    }

    .custom-scroll-section-setting .fi-section-content {
        max-height: 30rem;
        overflow-y: scroll;
    }

    .chat-box .chat-area {
        max-height: 35rem !important;
        height: 35rem !important;
    }
}

/* button possition*/

.fi-radio-custom span {
    color: rgba(var(--gray-500), var(--tw-text-opacity, 1)) !important;
}
/* Logo Position Selector Styles */
.logo-position-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.logo-position-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.logo-position-box {
    width: 4.5rem;
    height: 4.5rem;
    border: 2px solid;
    border-radius: 0.5rem;
    padding: 0.6rem;
    display: flex;
    align-items: flex-start;
    transition: all 0.2s ease;
    position: relative;
    justify-content: space-between;
}

.center-box {
    align-items: center !important;
}

/* Light mode - default state */
.logo-position-box {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

/* Dark mode - default state */
.dark .logo-position-box {
    background-color: hsla(0, 0%, 100%, 0);
    /* background-color: #1f2937; */
    border-color: #374151;
}

/* Selected state - light mode */
.logo-position-box.selected {
    border-color: #a855f7;
}

/* Selected state - dark mode */
.dark .logo-position-box.selected {
    border-color: #a855f7;
}

/* Logo indicators */
.logo-indicator-marketing {
    width: 1rem;
    height: 0.875rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

/* Default gray indicator - light mode */
.logo-indicator-marketing.inactive {
    background-color: #d1d5db;
    display: block !important;
}

/* Default gray indicator - dark mode */
.dark .logo-indicator-marketing.inactive {
    background-color: #4b5563;
}

/* Active purple indicator - light mode */
.logo-indicator-marketing.active {
    background-color: #a855f7;
}

/* Active purple indicator - dark mode */
.dark .logo-indicator-marketing.active {
    background-color: #a855f7;
}

/* Label text */
.logo-position-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .logo-position-label {
    color: #9ca3af;
}

/* Hover effect */
.logo-position-option:hover .logo-position-box {
    border-color: #d1d5db;
}

.dark .logo-position-option:hover .logo-position-box {
    border-color: #4b5563;
}

.logo-position-option:hover .logo-position-box.selected {
    border-color: #9333ea;
}

.dark .logo-position-option:hover .logo-position-box.selected {
    border-color: #9333ea;
}

.sent-invitations-wrapper .fi-ta-header {
    display: none !important;
}

.sent-invitations-wrapper .fi-ta-header-toolbar::before {
    content: "Sent Invitations";
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    flex: 1;
}

.dark .sent-invitations-wrapper .fi-ta-header-toolbar::before {
    color: #ffffff;
}

/* Custom Scrollbar for the video list */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px; /* Width of the scrollbar */
    padding-left: 1px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* Keep the track invisible */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d1d5db; /* Tailwind gray-300 */
    border-radius: 10px; /* Rounded edges */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(
        255,
        255,
        255,
        0.2
    ); /* Tailwind white/20 for dark mode */
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af; /* Darker gray on hover */
}

/* 1. Move the badge container inside the button flow */
.custom-comment-btn .fi-btn-badge-ctn {
    position: static !important;
    transform: none !important;
    background-color: transparent !important;
    margin-left: 0.25rem !important; /* Adds slight spacing after the text */
}

/* 2. Style the badge to be a solid red circle */
.custom-comment-btn .fi-badge {
    background-color: #dc2626 !important; /* Tailwind's red-600 */
    color: #ffffff !important;
    border-radius: 9999px !important; /* Makes it a perfect pill/circle */
    border: none !important;
    box-shadow: none !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0 0.4rem !important;
    font-size: 0.875rem !important; /* Adjust text size if needed */
}

.timeline-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgb(
        var(--primary-600)
    ); /* Uses Filament's dynamic purple */
    border-radius: 50%;
    left: -21px;
    top: 6px;
    box-shadow: 0 0 0 4px #ffffff; /* Light mode ring */
}

/* Dark mode support */
.dark .timeline-dot {
    box-shadow: 0 0 0 4px #111827; /* Dark gray ring to match dark mode background */
}

.unread-dot {
    width: 8px;
    height: 8px;
    background-color: rgb(
        var(--primary-600)
    ); /* Uses Filament's dynamic purple */
    border-radius: 50%;
    top: 6px;
    box-shadow: 0 0 0 4px #ffffff; /* Light mode ring */
}

/* Dark mode support */
.dark .unread-dot {
    box-shadow: 0 0 0 4px #111827; /* Dark gray ring to match dark mode background */
}

.mention-color {
    color: #9333ea;
    background-color: #faf5ff;
}

.chapter-color {
    color: #16a34a;
    background-color: #f2fdf5;
}

.cta-color {
    color: #d97706;
    background-color: #fdecce;
}

.dark .mention-color {
    color: #9333ea;
    background-color: #32273e;
}

.dark .chapter-color {
    color: #16a34a;
    background-color: #16a34a15;
}

.dark .cta-color {
    color: #fbbf24;
    background-color: #443318;
}

/* Marketing Elements Preview Cards */
.marketing-el-card {
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.dark .marketing-el-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.marketing-el-card:hover {
    border-color: #c4b5fd;
    background-color: #f7f5ff;
}
.dark .marketing-el-card:hover {
    border-color: #7c3aed;
    background-color: #32273e;
}
.marketing-el-card.active {
    border-color: #8b5cf6;
    /* box-shadow: 0 0 0 1px #8b5cf6; */
    background-color: #f7f5ff;
}
.dark .marketing-el-card.active {
    border-color: #8b5cf6;
    /* box-shadow: 0 0 0 1px #8b5cf6; */
    background-color: #32273e;
}
.marketing-el-card .el-time-badge {
    display: inline-block;
    background-color: #faf5ff;
    color: #7c3aed;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    align-self: flex-start;
    border: 1px solid #f3e8fe;
}
.dark .marketing-el-card .el-time-badge {
    background-color: #32273e;
    color: #9333ea;
    border: 1px solid hsla(0, 0%, 100%, 0.1);
}

.comment-tree {
    border-color: #e5e5e5;
}

.dark .comment-tree {
    border-color: #464649;
}

/* ============================================================
   Manage Plans Usage (mpu-) & Pay As You Go (payg-) styles
   ============================================================ */

/* --- Usage Alert --- */
.mpu-usage-alert {
    display: flex;
    border-radius: 0.75rem;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    padding: 0.875rem 1rem;
}
.dark .mpu-usage-alert {
    background-color: rgba(120, 84, 0, 0.15);
    border-color: rgba(252, 211, 77, 0.3);
}
.mpu-usage-alert--critical {
    background-color: #FEF2F2;
    border: 1px solid #FEE2E2;
}
.dark .mpu-usage-alert--critical {
    background-color: #432124;
    border-color: #B91C1C;
}
.mpu-usage-alert__row {
    display: flex;
    width: 100%;
}
.mpu-usage-alert__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.mpu-usage-alert__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #92400e;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
}
.dark .mpu-usage-alert__badge {
    color: #fcd34d;
    background-color: rgba(120, 84, 0, 0.25);
    border-color: rgba(252, 211, 77, 0.25);
}
.mpu-usage-alert__badge--critical {
    color: #DC2626;
    background-color: #FFDBDB;
    border-color: transparent;
}
.dark .mpu-usage-alert__badge--critical {
    color: #DC2626;
    background-color: #FFDBDB;
    border-color: transparent;
}
.mpu-usage-alert__badge-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.mpu-usage-alert__actions {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}
.mpu-usage-alert__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.375rem;
    color: #92400e;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background-color 0.15s;
}
.mpu-usage-alert__dismiss:hover {
    background-color: #fde68a;
}
.dark .mpu-usage-alert__dismiss {
    color: #fcd34d;
}
.mpu-usage-alert__dismiss--critical {
    color: #991b1b;
}
.dark .mpu-usage-alert__dismiss--critical {
    color: #fca5a5;
}
.mpu-usage-alert__dismiss--critical:hover {
    background-color: #fee2e2;
}
.mpu-usage-alert__dismiss-icon {
    width: 1rem;
    height: 1rem;
}
.mpu-usage-alert__message {
    font-size: 0.875rem;
    color: #78350f;
    flex: 1;
}
.dark .mpu-usage-alert__message {
    color: #fde68a;
}
.mpu-usage-alert__message--critical {
    color: #DC2626;
    font-weight: 600;
}
.dark .mpu-usage-alert__message--critical {
    color: #fca5a5;
}
.mpu-usage-alert__cta-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.mpu-usage-alert__cta {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #374151;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s;
}
.dark .mpu-usage-alert__cta {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #e5e7eb;
}
.mpu-usage-alert__cta:hover {
    background-color: #f9fafb;
}
.mpu-usage-alert__cta--critical-secondary {
    border-color: transparent;
    color: black;
    background-color: #ffffff;
}
.dark .mpu-usage-alert__cta--critical-secondary {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #000000;
}
.mpu-usage-alert__cta--critical-primary {
    border-color: #dc2626;
    color: #ffffff;
    background-color: #dc2626;
}
.mpu-usage-alert__cta--critical-primary:hover {
    background-color: #b91c1c;
}

/* --- Usage Cards --- */
.mpu-usage-card {
    /* layout is applied via Tailwind inline; this just anchors the name */
}
.mpu-main-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}
.mpu-section-title {
    font-size: 0.9375rem;
    font-weight: 500;
    /* margin-bottom: 0.5rem; */
}
.mpu-main-metric {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 600;
}
.mpu-total-value {
    color: #111827;
    font-weight: 600;
}
.dark .mpu-total-value {
    color: #f3f4f6;
}
.mpu-used-value {
    color: #dc2626;
    font-weight: 600;
}
.dark .mpu-used-value {
    color: #f87171;
}
/* .mpu-extra-value {
    color: #d97706;
    font-weight: 500;
}
.dark .mpu-extra-value {
    color: #fbbf24;
} */
.mpu-sub-metric {
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}
.mpu-reset-text {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.mpu-legend {
    margin-top: 0.75rem;
}

/* --- Hover tooltip on progress track --- */
.mpu-track-segment-hover {
    position: relative;
}
.mpu-track-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    z-index: 50;
    background-color: #f1f5fe;
    color: #1e40af;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #bfdbfe;
}
.dark .mpu-track-tooltip {
    background-color: #1f2937;
    color: #f9fafb;
    border: 1px solid #4b5563;
}
.mpu-track-tooltip-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.mpu-track-tooltip-dot-used {
    background-color: #7c3aed;
}
.mpu-track-tooltip-dot-extra {
    background-color: #F2AFAF;
}
.mpu-track-tooltip-dot-available {
    background-color: #9ca3af;
}

/* --- PayGo Card --- */
.mpu-paygo-card {
    /* main layout via Tailwind */
}
.mpu-paygo-header {
    /* layout via Tailwind */
}
.mpu-paygo-subtitle {
    /* styled via Tailwind */
}
.mpu-paygo-explainer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 640px) {
    .mpu-paygo-explainer-grid {
        grid-template-columns: 1fr;
    }
}
.mpu-paygo-explainer-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
}
.dark .mpu-paygo-explainer-card {
    border-color: rgba(255, 255, 255, 0.1);
}
.mpu-paygo-explainer-card--storage {
    /* no special override */
}
.mpu-paygo-explainer-card--bandwidth {
    /* no special override */
}
.mpu-paygo-explainer-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.mpu-paygo-explainer-badge--storage {
    /* no special override */
}
.mpu-paygo-explainer-badge--bandwidth {
    /* no special override */
}
.mpu-paygo-explainer-icon {
    font-size: 1.125rem;
    line-height: 1;
}
.mpu-paygo-explainer-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
}
.dark .mpu-paygo-explainer-title {
    color: #f3f4f6;
}
.mpu-paygo-explainer-copy {
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.5;
}
.dark .mpu-paygo-explainer-copy {
    color: #9ca3af;
}

/* --- PayGo wallet / autotop grid --- */
.mpu-paygo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 768px) {
    .mpu-paygo-grid {
        grid-template-columns: 1fr;
    }
}
.mpu-wallet-panel {
    /* layout via Tailwind */
}
.mpu-wallet-title-row {
    /* layout via Tailwind */
}
.mpu-wallet-icon {
    /* layout via Tailwind */
}
.mpu-wallet-balance {
    /* layout via Tailwind */
}
.mpu-topup-quick {
    /* layout via Tailwind */
}
.mpu-topup-chip {
cursor: pointer;
    text-align: center;
    font-size: 14px !important;
    padding: 4px !important;
}
.mpu-topup-chip-active {
    background-color: rgba(124, 58, 237, 0.08);
}
.dark .mpu-topup-chip-active {
    background-color: rgba(124, 58, 237, 0.2);
}
.mpu-topup-notes {
    /* layout via Tailwind */
}
.mpu-usage-history-btn {
    /* layout via Tailwind */
}
.mpu-wallet-recharge-btn {
    /* layout via Tailwind */

}
.mpu-autotop-panel {
    /* layout via Tailwind */
}

/* --- Small text helper --- */
.payg-sm-text {
    font-size: 0.8125rem;
    color: #6b7280;
}
.dark .payg-sm-text {
    color: #9ca3af;
}

/* ============================================================
   Side Nav Usage Card (Exact UI)
   ============================================================ */
.snu-wrap {
    margin-top: auto;
    padding: 0 1rem 1rem;
}

.snu-card {
    --snu-progress-width: 3.8rem;
    border-radius: 1.1rem;
    border: 1px solid #e5e5ec;
    background: #ffffff;
    padding: 0.82rem 0.82rem 0.78rem;
}

.dark .snu-card {
    border: none;
    background: #1d1d20;
    box-shadow: none;
}

.snu-link-block {
    display: block;
    text-decoration: none;
}

.snu-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    border-radius: 0.55rem;
    border: 1px solid #ddcdef;
    background: #ece6f8;
    padding: 0 0.55rem;
}

.dark .snu-plan-badge {
    border-color: rgba(192, 132, 252, 0.28);
    background: rgba(124, 58, 237, 0.16);
}

.snu-plan-text {
    color: #7f39e0;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.snu-metrics {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.snu-row {
    display: grid;
    grid-template-columns: minmax(4rem, 4rem) var(--snu-progress-width) minmax(
            0,
            1fr
        );
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

.snu-label {
    color: #222326;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.dark .snu-label {
    color: rgba(255, 255, 255, 0.78);
}

.snu-track {
    position: relative;
    width: var(--snu-progress-width);
    min-width: 0;
    height: 0.64rem;
    border-radius: 999px;
    background: #dde0e9;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

.dark .snu-track {
    background: rgba(255, 255, 255, 0.14);
}

.snu-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.snu-fill--extra {
    background: #F2AFAF;
}

.snu-fill--storage {
    background: linear-gradient(90deg, #9444ed 0%, #6c4ce9 100%);
}

.snu-fill--bandwidth {
    background: linear-gradient(90deg, #4f88ef 0%, #2f61e8 100%);
}

.snu-fill--credits {
    background: linear-gradient(90deg, #9444ed 0%, #6c4ce9 100%);
}

.snu-value {
    justify-self: end;
    text-align: right;
    color: #222326;
    font-size: 0.72rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
}

.dark .snu-value {
    color: rgba(255, 255, 255, 0.65);
}

.snu-divider {
    height: 1px;
    width: 100%;
    background: #d7d7de;
    margin: 0.82rem 0;
}

.dark .snu-divider {
    background: rgba(255, 255, 255, 0.12);
}

.snu-footer-row {
    margin-top: 0.42rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.snu-status {
    color: #2e2e34;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
}

.dark .snu-status {
    color: rgba(255, 255, 255, 0.72);
}

.snu-buy-link {
    margin-left: auto;
    color: #7f39e0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.dark .snu-buy-link {
    color: #a855f7;
}

/* Tight sidebars: keep amounts inside the card by stacking value under the bar */
@media (max-width: 380px) {
    .snu-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label value"
            "track track";
        row-gap: 0.35rem;
    }

    .snu-label {
        grid-area: label;
    }

    .snu-track {
        grid-area: track;
    }

    .snu-value {
        grid-area: value;
        justify-self: end;
        font-size: 0.7rem;
    }
}

.dark .mpu-wallet-panel-dark{
        background: #18181b;
    border-color: transparent;
}

.spotlight-type-card {
        position: relative;
        padding: 1.5rem;
        border-radius: 0.75rem;
        border: 2px solid #e5e7eb;
        background-color: #ffffff;
        cursor: pointer;
    }
.spotlight-type-card.is-selected {
        border-color: #9333ea;
        background-color: #faf5ff;
    }
.dark .spotlight-type-card {
        background-color: #18181b;
        border-color: #3f3f46;
    }
.dark .spotlight-type-card.is-selected {
        background-color: #32273e;
        border-color: #9333ea;
    }
.spotlight-type-card--disabled {
        background-color: #f9fafb;
        opacity: 0.6;
        cursor: not-allowed;
    }
.dark .spotlight-type-card--disabled {
        background-color: #27272a;
        border-color: #3f3f46;
    }

.spotlight-layout-scope {
        --lc-bg-selected: #faf5ff;
        --lc-bg-idle: #ffffff;
        --lc-border-selected: #9333ea;
        --lc-border-idle: #e5e7eb;
        --lc-svg-selected: #9333ea;
        --lc-svg-idle: #9ca3af;
        --lc-label-selected: #9333ea;
        --lc-label-idle: #6b7280;
    }
.dark .spotlight-layout-scope {
        --lc-bg-selected: #32273e;
        --lc-bg-idle: #18181b;
        --lc-border-selected: #9333ea;
        --lc-border-idle: #3f3f46;
        --lc-svg-selected: #9333ea;
        --lc-svg-idle: #71717a;
        --lc-label-selected: #9333ea;
        --lc-label-idle: #9ca3af;
    }


    .spotlight-row .spotlight-row-handle { display: none; }
    .spotlight-row:hover .spotlight-row-number { display: none; }
    .spotlight-row:hover .spotlight-row-handle { display: inline-flex; align-items: center; justify-content: center; }



    .warning-policy-box {
    background: #fffbf3;
    border: 1px solid #fdecce;
    padding: 18px 25px;
    border-radius: 15px;
    color: #92400e;
    margin-top: 20px;
}

.dark .warning-policy-box {
    background: #443318;
    border: 1px solid #fbbf24;
    color: #ffffff;
}

.warning-policy-box svg {
    fill: #d97706;
    width: 15px;
    height: 15px;
}

.dark .warning-policy-box svg {
    fill: #fbbf24;
    width: 15px;
    height: 15px;
}

.warning-policy-header {
    background: #fdecce;
    width: max-content;
    text-align: center;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
    border-radius: 5px;
    padding: 2px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #92400e;
}

.dark .warning-policy-header {
    background: #8a5a14;
    color: #ffffff;
}


/* Stripe connected accounts selector */
.stripe-accounts-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 20px;
}

.dark .stripe-accounts-box {
    background: #1f2937;
    border-color: #374151;
}

.stripe-accounts-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.dark .stripe-accounts-title {
    color: #ffffff;
}

.stripe-accounts-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

.dark .stripe-accounts-subtitle {
    color: #9ca3af;
}

.stripe-accounts-manage-link {
    font-size: 13px;
    font-weight: 500;
    color: #9333ea;
    text-decoration: none;
    transition: color 0.15s ease;
}

.stripe-accounts-manage-link:hover {
    color: #7e22ce;
    text-decoration: underline;
}

.stripe-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.stripe-account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stripe-account-card:hover {
    border-color: #d1d5db;
}

.stripe-account-card.is-selected {
    background: #f7f5ff;
    border-color: #c4b5fd;
}

.dark .stripe-account-card {
    background: #18181b;
    border-color: #374151;
}

.dark .stripe-account-card.is-selected {
    background: #2e2542;
    border-color: #7c3aed;
}

.stripe-account-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.dark .stripe-account-name {
    color: #ffffff;
}

.stripe-account-default-badge {
    font-size: 12px;
    font-weight: 500;
    color: #9333ea;
}

.stripe-account-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

.dark .stripe-account-meta {
    color: #9ca3af;
}

.stripe-account-meta-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d1d5db;
}

.dark .stripe-account-meta-divider {
    background: #4b5563;
}

  .members-inline-table .fi-ta-header-ctn {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }

            .members-inline-table .fi-ta-header-ctn>* {
                border-top: 0 !important;
            }

            .members-inline-table .fi-ta-header {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
            }

            .members-inline-table .fi-ta-header-toolbar {
                flex: 0 0 auto;
            }

/* Filament strips Choices.js's is-flipped styles, so ->position('top') adds the class but the dropdown still anchors below. Restore upward positioning for the currency select only. */
.currency-select-dropup .choices.is-flipped .choices__list--dropdown,
.currency-select-dropup .choices.is-flipped .choices__list[aria-expanded] {
    top: auto !important;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
}


.dark .bg-icon{
    background-color: #1F1F22;
}


.warning-badge{
    background-color: #FDECCE; color: #D97706;
}


.selected-type{
    background-color: #ffffff;
}

.dark .selected-type{
    background-color: #473D52;
}