:root,[data-bs-theme=dark]{
  --primary-bg: #272727;
  --primary-bg-rgb: "39, 39, 39";
  --rev-primary-bg: #ffff;
  --light-bg: #52565a;
  --primary-text: #ffffff;
  --footer-btn-color: "255, 255, 255"
  --secondary-text: #8e9da5;
  /* --accent: #3498db; */
  --accent: #000000;
  --accent-1: #ffffff8e;
  --accent-2: #303030;
  --accent-3: #383838;
  --accent-fade: #00000081;
  --bg-header: #1d2125;
  --border-radius: 12px;
  --user-theme-bg: none;
  --accent-orange:#fc7643;
  --user-chat-bg-color : var(--primary-bg-rgb) !important;
  --bs-secondary-color: var(--light-bg)
}
:root,[data-bs-theme=light]{
  --primary-bg: #ffff;
  --primary-bg-rgb: "255, 255, 255";
  --rev-primary-bg: #272727;
  --light-bg: #cfd5dbac;
  --primary-text: #000000;
  --footer-btn-color: "0, 0, 0"
  --secondary-text: #8e9da5;
  /* --accent: #3498db; */
  --accent: #ffffff;
  --accent-1: #ffffff8e;
  --accent-2: #f3f3f3;
  --accent-3: #fcfcfc;
  --accent-fade: #ffffffa8;
  --bg-header: #ffffff;
  --border-radius: 12px;
  --user-theme-bg: none;
  --accent-orange:#fc7643;
  --user-chat-bg-color : var(--primary-bg-rgb) !important;
  
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Main container pinned under the header */
#mainWrapper {
    height: calc(100vh - 68px);
}

/* Sidebar (contact list) */
#side_contact {
    height: 100%;
    overflow-y: auto;
}

/* Chat area */
#chatArea {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* MOBILE – slide-in contacts like Telegram */
@media (max-width: 1200px) {
    #side_contact {
        z-index: 1;
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease;
    }

    #output {
        max-width: inherit !important;
    }

    #side_contact.hidden {
        position: absolute;
        transform: translateX(-100%);
    }

    /* وقتی هدر مخفی شد، هدر را جابجا کن */
    /* #header_div.hidden {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    } */

    /* تنظیم ارتفاع مین‌ویرپر وقتی هدر مخفی است (استفاده از + برای هم‌سطح بودن) */
    #header_div.hidden ~ #mainWrapper {
        height: 100vh;
    }

    #chatArea {
        flex: 1;
    }
}



.overflow-auto::-webkit-scrollbar-thumb::-webkit-scrollbar-thumb {
    background: #8600ff; /* Thumb color */
    border-radius: 10px; /* Rounded edges */
    border: 2px solid #1a1a1a; /* Optional: creates padding around the thumb */
}

.overflow-auto::-webkit-scrollbar-thumb:hover::-webkit-scrollbar-thumb:hover {
    background: #b300ff; /* Thumb color on hover */
}
#alert{
    position: fixed;
    top: 50%;
    /* left: 10%; */
    z-index: 999999;
}
.navbar .navbar-brand {
    font-family: 'Pacifico', cursive
}


#offlineMessage {
    display: none;
    background-color: #f44336a2;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    top: 20%;
    width: 100%;
    font-size: 16px;
    font-weight: bolder;
    opacity: 0;
    z-index: 999;
    backdrop-filter: blur(10px);
    transition: opacity 0.3s ease-in-out;
}

#offlineMessage.show {
    display: block;
    opacity: 1;
}
#output {
    /* max-height: 50% !important; */
    padding-top: 5px;
    padding-bottom: 70px;
    
    /* scrollbar-color:  #8600ff !important; Thumb and track colors */
    /* padding-bottom: 85px; */
}


 
#form {

    max-width: 1400px;
    border-radius:10px !important;
    box-shadow: 0px 0px 5px 1px var(--accent-fade);
    /* box-shadow: inset 0px 0px 5px 1px #ccc; */
}
.btn-outline-reverse{
    --bs-btn-color: var(--rev-primary-bg);
    --bs-btn-border-color: var(--rev-primary-bg);
    --bs-btn-hover-color: var(--primary-bg);
    --bs-btn-hover-bg: var(--rev-primary-bg);
    --bs-btn-hover-border-color: var(--rev-primary-bg);
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: var(--primary-bg);
    --bs-btn-active-bg: var(--rev-primary-bg);
    --bs-btn-active-border-color: var(--rev-primary-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rev-primary-bg);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--rev-primary-bg);
    --bs-gradient: none;
}
.btn-primary {
    /* تنظیم رنگ متن */
    --bs-btn-color: #0a306a;
    
    /* تعریف گرادیانت متحرک */
    --bs-btn-bg: linear-gradient(
        50deg, 
        rgb(79, 160, 255) 0%, 
        rgb(52, 107, 241) 35%, 
        rgb(104, 164, 247) 70%, 
        rgb(52, 107, 241) 100%
    );
    /* 50deg, rgb(52, 107, 241) 33.06%, rgb(49, 134, 255) 48.67%, rgb(79, 160, 255) 65.69%); */

    /* اعمال گرادیانت به عنوان پس‌زمینه */
    background-image: var(--bs-btn-bg);
    background-size: 200% 200%; /* مهم: بزرگ‌تر کردن بوم برای حرکت */
    animation: oceanWave 8s ease infinite; /* انیمیشن */
    
    --bs-btn-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    
    /* حالت فعال */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    
    /* حالت غیرفعال */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: linear-gradient(45deg, #9edbff, #5398ff);
    --bs-btn-disabled-border-color: linear-gradient(45deg, #9edbff, #5398ff);
}

/* تعریف انیمیشن موج اقیانوس */
@keyframes oceanWave {
    0% {
        background-position: 0% 50%;
    }
    5% {
        background-position: 50% 50%;
    }
    30% {
        background-position: 50% 100%;
    }
    60% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 100% 50%;
    }
    85% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* نکته: اگر بوت‌سترپ روی دکمه background-image ست می‌کنه، 
   ممکنه نیاز باشه !important بذاری یا اولویت CSS رو چک کنی */
.btn-primary,.btn-primary:hover {
    background-image: var(--bs-btn-bg) !important;
}
.bg-primary,.btn-outline-primary:hover {
    --bs-btn-bg: linear-gradient(
        50deg, 
        rgb(79, 160, 255) 0%, 
        rgb(52, 107, 241) 35%, 
        rgb(104, 164, 247) 70%, 
        rgb(52, 107, 241) 100%
    );
    background-image: var(--bs-btn-bg);
    background-size: 200% 200%; /* مهم: بزرگ‌تر کردن بوم برای حرکت */

    animation: oceanWave 8s ease infinite; /* انیمیشن */

}
.btn-meta {
    background: linear-gradient(95deg, #2563eb, #1e40af);
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px;
    border-radius: 40px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px -8px #1e3a8a;
}
.nav-link{
    
    border-radius: 40px !important;
    

}
.nav-link.active{
    background: linear-gradient(95deg, #2563eb, #1e40af);
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px;
    border-radius: 40px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px -8px #0035d26c;

}
#profileTab .nav-link.active {
    background: transparent !important;
    /* border: none; */
    color: #007bff;
    font-weight: 600;
    padding: 9px !important;
    /* border-radius: 40px; */
    transition: all 0.25s ease;
    border-bottom: 2px solid #007bff !important;
    box-shadow: 0 20px 20px -8px #0035d26c;
}
#profileTab .nav-link {
    font-weight: 600;
    transition: all 0.25s ease;
    border: 0;
    border-radius: 0px !important;
}
.btn-meta:hover {
    background: linear-gradient(95deg, #3b82f6, #2563eb);
    transform: scale(1.01);
    box-shadow: 0 12px 24px -10px #1e3a8a;
    letter-spacing: 0.5px;
}
.btn-outline-meta {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--accent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--accent);
    --bs-gradient: none;
}
.navbar .navbar-brand {
    font-family: 'Pacifico', cursive
}
.messageInputDiv{
    position: relative;
    align-items: center;
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* justify-content: space-between; */
}
.messageInputDiv .button-container{
        transition: all 0.1s ease; /* Smooth transition for hover effect */

}
#editable-message-text:focus {
    border: none !important;
    outline: none; /* Removes focus outline */
    border: none; /* Ensures border stays removed on focus */
    box-shadow: none; /* Removes Bootstrap's default focus shadow */
}

body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important
}



.backgroundImg[data-bs-theme=light] {
    background-image: url('/portal/img/gargantua-black-5200x3250-9621.jpg'); /* Replace with your image path */
    /* Background image like WhatsApp or Telegram */
    background-size:  100%; /*Adjust size as needed*/
    background-position: center;
    background-size: cover; /* Scales image to cover entire container */
    background-repeat: no-repeat; /* Prevents tiling */
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.backgroundImg[data-bs-theme=dark] {
    background-image: url('/portal/img/gargantua-black-5200x3250-9621.jpg'); /* Replace with your image path */
    /* Background image like WhatsApp or Telegram */
     background-size:  100%; /*Adjust size as needed*/
    background-position: center;
    background-size: cover; /* Scales image to cover entire container */
    background-repeat: no-repeat; /* Prevents tiling */
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
}
body {

    text-align: unset;
    
}
.jdate {
  color: #999;
  font-style: italic;
  font-size: 0.8em;
}
.blurBack {
  background-color: var(--accent-fade) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* WebKit support */
  /* border: 1px solid #ffffff !important;  */
  /* box-shadow: 0px 0px 4px 1px #313131; */
}
.blurBackDark {
  background-color: #e4e4e44a !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* meta chat */

#messageMenu{
  background-color: var(--bg-header) !important;
  color: var(--primary-text) !important;
}

.backdrop-blur-chat-fg {
  color: var(--primary-text) !important;
}
.bg-light{
  
  background-color: var(--light-bg) !important;
  color: var(--primary-text) !important;
}


.text-dark {
    color: var(--primary-text) !important;
}


.h-10rem {
  max-height: 10rem !important;
}
.h-20rem {
  max-height: 20rem !important;
}
.h-30rem {
  max-height: 30rem !important;
}
.h-40rem {
  max-height: 40rem !important;
}
.h-50rem {
  max-height: 50rem !important;
}
.h-60rem {
  max-height: 60rem !important;
}
.h-70rem {
  max-height: 70rem !important;
}
.vh-10 {
  max-height: 10vh !important;
}
.vh-20 {
  max-height: 20vh !important;
}
.vh-30 {
  max-height: 30vh !important;
}
.vh-40 {
  max-height: 40vh !important;
}
.vh-50 {
  max-height: 50vh !important;
}
.vh-60 {
  max-height: 60vh !important;
}
.vh-75 {
  max-height: 75vh !important;
}
.vh-70 {
  max-height: 70vh !important;
}
.vh-80 {
  max-height: 80vh !important;
}
label[for=file-input] i.bi-paperclip::before{
    rotate: 210deg;
}
#chat_windowFooter .send-button i.bi-send-fill::before{
    rotate: -15deg;
}
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.messageElm{
    display:flex;margin:0px 1px;
}
.messageElm.own{
    justify-content:flex-end;
}
.messageBubble{
    max-width:70%;padding:8px 12px;
    border-radius:16px;
    background:#fff;
}
.messageElm.own .messageBubble{
    background:#cfe2ff;
}
.sender{
    font-size:12px;
    font-weight:600;
    margin-bottom:4px;
}
.meta{
    font-size:11px;
    opacity:.7;
    margin-top:4px;
    display:flex;
    gap:6px;
    align-items:center;
}
.replyMessage{
    border-left:3px solid #4da3ff;
    padding-left:6px;
    margin-bottom:4px;
    font-size:12px;
}
.chatImage{
    max-width:100%;
    border-radius:10px;
    margin-top:4px;
}
.chatVideo{
    max-width:100%;
    border-radius:10px;
    margin-top:4px;
}
.blinker{
    width: 12px;
    height: 12px;
    background: #ff4d4d;
    border-radius: 50%;
    animation: blink 2s steps(6,start) infinite;
}
@keyframes blink {
    0% {opacity: 1;}
    10% {opacity: 0.8;}
    20% {opacity: 0.6;}
    30% {opacity: 0.4;}
    40% {opacity: 0.2;}
    50% {opacity: 0;}
    60% {opacity: 0.2;}
    70% {opacity: 0.4;}
    80% {opacity: 0.6;}
    90% {opacity: 0.8;}
    100% {opacity: 1;}
}
.cursor-pointer {
    cursor: pointer;
}
.text-meta{
    color: var(--accent) !important;
}
.ff-system-ui{
    font-family: system-ui;
}
#theme_btn.btn {
    transition: all 0.5s ;
}
.message {
    video,iframe,img{
        max-height: 320px;
    }
}



.x-small {
  font-size: 70%;
  font-weight: 400;
}
.bg-theme{
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
}
#roomList_ul li{
    height: 5rem;
}
.tg-canvas{
    height: 6dvh;
}
.backdrop-blur-chat-bg {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

[data-bs-theme="dark"] .backdrop-blur-chat-bg {
    background: rgba(33, 37, 41, 0.95);
}

.dropdown-item i {
    margin-right: 8px;
    width: 20px;
}

.dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}

.dropdown-item.text-danger:hover {
    background-color: #dc3545;
    color: white !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dropdown-toggle span {
        display: none;
    }
    
    .btn-link {
        padding: 0.5rem;
    }
}
.backgroundVideo {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Optional: Add a dark overlay for better text readability */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.preview_IMG {
    overflow: hidden;
    width: 160px;
    height: 160px;
    margin: 10px;
    border: 1px solid black;
}

.cropper-hidden {
    border: 1px solid #000;
    max-height: 39;

}

.m-crop {
    width: 200px;
    max-height: 145px;
}
#usersPanel .profile-avatar{
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%; 
    object-fit: cover;
}
@media (min-width: 768px) {
    nav.sidebar{
        position: fixed !important;
        height: 100vh;
    }
}

/* Warning - Yellow */
.badge.bg-warning,.btn.btn-warning {
    background: linear-gradient(
        50deg, 
        rgb(255, 200, 79) 0%, 
        rgb(241, 180, 52) 35%, 
        rgb(247, 204, 104) 70%, 
        rgb(241, 180, 52) 100%
    );
    color: #1a1a1a;
    border: none;
}

/* Primary - Blue */
.badge.bg-primary {
    background: linear-gradient(
        50deg, 
        rgb(79, 160, 255) 0%, 
        rgb(52, 107, 241) 35%, 
        rgb(104, 164, 247) 70%, 
        rgb(52, 107, 241) 100%
    );
    color: #ffffff;
    border: none;
}

/* Secondary - Gray */
.badge.bg-secondary,.btn.btn-secondary {
    background: linear-gradient(
        50deg, 
        rgb(136, 146, 158) 0%, 
        rgb(108, 117, 125) 35%, 
        rgb(150, 158, 168) 70%, 
        rgb(108, 117, 125) 100%
    );
    color: #ffffff;
    border: none;
}

/* Success - Green */
.badge.bg-success,.btn.btn-success {
    background: linear-gradient(
        50deg, 
        rgb(64, 199, 102) 0%, 
        rgb(37, 157, 68) 35%, 
        rgb(80, 214, 120) 70%, 
        rgb(37, 157, 68) 100%
    );
    color: #ffffff;
    border: none;
}

/* Danger - Red */
.badge.bg-danger,.btn.btn-danger {
    background: linear-gradient(
        50deg, 
        rgb(255, 94, 87) 0%, 
        rgb(220, 53, 69) 35%, 
        rgb(255, 120, 110) 70%, 
        rgb(220, 53, 69) 100%
    );
    color: #ffffff;
    border: none;
}

/* Info - Cyan/Light Blue */
.badge.bg-info,.btn.btn-info {
    background: linear-gradient(
        50deg, 
        rgb(91, 207, 250) 0%, 
        rgb(41, 182, 246) 35%, 
        rgb(110, 218, 252) 70%, 
        rgb(41, 182, 246) 100%
    );
    color: #1a1a1a;
    border: none;
}

/* Light - Light Gray */
.badge.bg-light,.btn.btn-light {
    background: linear-gradient(
        50deg, 
        rgb(248, 249, 250) 0%, 
        rgb(233, 236, 239) 35%, 
        rgb(250, 251, 252) 70%, 
        rgb(233, 236, 239) 100%
    );
    color: #1a1a1a;
    border: none;
}

/* Dark - Dark Gray/Black */
.badge.bg-dark,.btn.btn-dark {
    background: linear-gradient(
        50deg, 
        rgb(52, 58, 64) 0%, 
        rgb(33, 37, 41) 35%, 
        rgb(64, 70, 76) 70%, 
        rgb(33, 37, 41) 100%
    );
    color: #ffffff;
    border: none;
}

/* Warning - Yellow */
.badge.bg-warning, .btn.btn-warning {
    background: linear-gradient(50deg, rgb(255, 200, 79) 0%, rgb(241, 180, 52) 35%, rgb(247, 204, 104) 70%, rgb(241, 180, 52) 100%);
    color: #1a1a1a;
    border: none;
}
.btn.btn-warning:hover {
    background: linear-gradient(50deg, rgb(241, 180, 52) 0%, rgb(255, 200, 79) 35%, rgb(241, 180, 52) 70%, rgb(247, 204, 104) 100%);
    color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn.btn-warning:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(230, 170, 42) 0%, rgb(220, 160, 32) 35%, rgb(230, 170, 42) 70%, rgb(220, 160, 32) 100%);
}
.btn.btn-warning:disabled, .btn.btn-warning.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}



.btn.btn-primary:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(42, 97, 231) 0%, rgb(32, 87, 221) 35%, rgb(42, 97, 231) 70%, rgb(32, 87, 221) 100%);
}
.btn.btn-primary:disabled, .btn.btn-primary.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Secondary - Gray */
.badge.bg-secondary, .btn.btn-secondary {
    background: linear-gradient(50deg, rgb(136, 146, 158) 0%, rgb(108, 117, 125) 35%, rgb(150, 158, 168) 70%, rgb(108, 117, 125) 100%);
    color: #ffffff;
    border: none;
}
.btn.btn-secondary:hover {
    background: linear-gradient(50deg, rgb(108, 117, 125) 0%, rgb(136, 146, 158) 35%, rgb(108, 117, 125) 70%, rgb(150, 158, 168) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn.btn-secondary:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(98, 107, 115) 0%, rgb(88, 97, 105) 35%, rgb(98, 107, 115) 70%, rgb(88, 97, 105) 100%);
}
.btn.btn-secondary:disabled, .btn.btn-secondary.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Success - Green */
.badge.bg-success, .btn.btn-success {
    background: linear-gradient(50deg, rgb(64, 199, 102) 0%, rgb(37, 157, 68) 35%, rgb(80, 214, 120) 70%, rgb(37, 157, 68) 100%);
    color: #ffffff;
    border: none;
}
.btn.btn-success:hover {
    background: linear-gradient(50deg, rgb(37, 157, 68) 0%, rgb(64, 199, 102) 35%, rgb(37, 157, 68) 70%, rgb(80, 214, 120) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn.btn-success:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(27, 147, 58) 0%, rgb(17, 137, 48) 35%, rgb(27, 147, 58) 70%, rgb(17, 137, 48) 100%);
}
.btn.btn-success:disabled, .btn.btn-success.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Danger - Red */
.badge.bg-danger, .btn.btn-danger {
    background: linear-gradient(50deg, rgb(255, 94, 87) 0%, rgb(220, 53, 69) 35%, rgb(255, 120, 110) 70%, rgb(220, 53, 69) 100%);
    color: #ffffff;
    border: none;
}
.btn.btn-danger:hover {
    background: linear-gradient(50deg, rgb(220, 53, 69) 0%, rgb(255, 94, 87) 35%, rgb(220, 53, 69) 70%, rgb(255, 120, 110) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn.btn-danger:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(210, 43, 59) 0%, rgb(200, 33, 49) 35%, rgb(210, 43, 59) 70%, rgb(200, 33, 49) 100%);
}
.btn.btn-danger:disabled, .btn.btn-danger.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Info - Cyan/Light Blue */
.badge.bg-info, .btn.btn-info {
    background: linear-gradient(50deg, rgb(91, 207, 250) 0%, rgb(41, 182, 246) 35%, rgb(110, 218, 252) 70%, rgb(41, 182, 246) 100%);
    color: #1a1a1a;
    border: none;
}
.btn.btn-info:hover {
    background: linear-gradient(50deg, rgb(41, 182, 246) 0%, rgb(91, 207, 250) 35%, rgb(41, 182, 246) 70%, rgb(110, 218, 252) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn.btn-info:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(31, 172, 236) 0%, rgb(21, 162, 226) 35%, rgb(31, 172, 236) 70%, rgb(21, 162, 226) 100%);
}
.btn.btn-info:disabled, .btn.btn-info.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Light - Light Gray */
.badge.bg-light, .btn.btn-light {
    background: linear-gradient(50deg, rgb(248, 249, 250) 0%, rgb(233, 236, 239) 35%, rgb(250, 251, 252) 70%, rgb(233, 236, 239) 100%);
    color: #1a1a1a;
    border: none;
}
.btn.btn-light:hover {
    background: linear-gradient(50deg, rgb(233, 236, 239) 0%, rgb(248, 249, 250) 35%, rgb(233, 236, 239) 70%, rgb(250, 251, 252) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn.btn-light:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(223, 226, 229) 0%, rgb(213, 216, 219) 35%, rgb(223, 226, 229) 70%, rgb(213, 216, 219) 100%);
}
.btn.btn-light:disabled, .btn.btn-light.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Dark - Dark Gray/Black */
.badge.bg-dark, .btn.btn-dark {
    background: linear-gradient(50deg, rgb(52, 58, 64) 0%, rgb(33, 37, 41) 35%, rgb(64, 70, 76) 70%, rgb(33, 37, 41) 100%);
    color: #ffffff;
    border: none;
}
.btn.btn-dark:hover {
    background: linear-gradient(50deg, rgb(33, 37, 41) 0%, rgb(52, 58, 64) 35%, rgb(33, 37, 41) 70%, rgb(64, 70, 76) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn.btn-dark:active {
    transform: translateY(0);
    background: linear-gradient(50deg, rgb(23, 27, 31) 0%, rgb(13, 17, 21) 35%, rgb(23, 27, 31) 70%, rgb(13, 17, 21) 100%);
}
.btn.btn-dark:disabled, .btn.btn-dark.disabled {
    opacity: 0.65;
    transform: none;
    pointer-events: none;
}

/* Optional: Add focus state for accessibility */
.btn.btn-warning:focus, .btn.btn-primary:focus, .btn.btn-secondary:focus,
.btn.btn-success:focus, .btn.btn-danger:focus, .btn.btn-info:focus,
.btn.btn-light:focus, .btn.btn-dark:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1), 0 0 0 5px rgba(255,255,255,0.2);
}

/* Smooth transition for all buttons */
.btn {
    transition: all 0.2s ease-in-out;
}