.w-100 {
    width:100%;
}
div#sidebar{
    height: 100vh;
}
.el-table__header thead th{
    background-color: transparent !important;
    color: white;
}
.el-table__header-wrapper tr th.el-table-fixed-column--right {
    background: transparent !important;
}
.el-table__header tr{
    background: linear-gradient(35deg, #ca77ff 0%, var(--primary-bg-color, #003cc3) 100%);
}
header.el-drawer__header {
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.el-drawer__body{
    padding-top: 0;
}
button.el-button--danger{
    background-color: #ff5b5b;
}
.menu-icon i{
    color: #2151f5;
}
.badge-button {
    height: 18px !important;
    font-size: 12px;
    padding: 2px 8px;
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, 
[type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, 
[type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, 
[multiple]:focus, textarea:focus, select:focus{
    box-shadow: none !important;
}

.menu-item.active > .menu-link .menu-item-active\:bg-secondary-active {
    background-color: #005aff0d;
}

.channel-stats-bg {
    background-image: url('/assets/media/images/2600x1600/bg-3.png');
}

/* New style for the color swatch */
.color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ========================================
   COMMON RESPONSIVE UTILITIES
   ======================================== */

/* Container utilities */
.container-fluid {
    @apply w-full px-3 sm:px-4 lg:px-6;
}

/* Responsive spacing utilities */
.responsive-padding {
    @apply p-3 sm:p-4 lg:p-6;
}

.responsive-margin {
    @apply m-3 sm:m-4 lg:m-6;
}

/* ========================================
   COMMON ANIMATION UTILITIES
   ======================================== */

.animate-float {
    animation: float 2s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-slide-down {
    animation: slideDown 0.2s ease-out;
}

/* ========================================
   COMMON SCROLLBAR STYLES
   ======================================== */

.custom-scrollbar::-webkit-scrollbar {
    @apply w-1.5;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent rounded;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    @apply rounded transition-all duration-200;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    @apply shadow-lg shadow-blue-500/40;
}

/* ========================================
   COMMON DRAWER STYLES
   ======================================== */

.el-drawer__wrapper {
    @apply backdrop-blur;
}

.el-drawer__body {
    @apply p-0;
}

/* Responsive drawer widths */
@media (max-width: 375px) {
    .el-drawer {
        width: 260px !important;
    }
}

@media (min-width: 376px) and (max-width: 480px) {
    .el-drawer {
        width: 280px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .el-drawer {
        width: 300px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .el-drawer {
        width: 320px !important;
    }
}

/* ========================================
   COMMON GRADIENT UTILITIES
   ======================================== */

.gradient-primary {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
}

.gradient-light {
    @apply bg-gradient-to-r from-blue-50 to-indigo-50;
}

.gradient-red {
    @apply bg-gradient-to-r from-red-50 to-red-100;
}

/* ========================================
   COMMON PROFILE CARD STYLES
   ======================================== */

.profile-card {
    @apply p-3 rounded-xl transition-all duration-200 cursor-pointer border;
    @apply bg-gradient-to-r from-blue-50/80 to-indigo-50/80 backdrop-blur-sm;
    @apply border-blue-100/50;
    @apply hover:from-blue-100/80 hover:to-indigo-100/80;
    @apply hover:border-blue-200/70;
    @apply hover:shadow-lg hover:shadow-blue-500/20 hover:scale-[1.02];
}