:root {
     --primary-orange: #FF8800;
     --primary-purple: #a855f7;
     --primary-green: #22c55e;
     --bg-lavender: #e8e4f0;
     --text-dark: #1a1a2e;
     --text-white: #ffff
 }


 /* Header */
 .header {
     background-color: var(--bg-lavender);
     padding: 15px 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     font-size: 1.75rem;
     font-weight: 700;
     color: var(--text-dark);
 }

 .logo span {
     color: #7c3aed;
 }

 /* Improved dropdown styling */
 .user-dropdown {
     position: relative;
 }

 .user-btn {
     display: flex;
     align-items: center;
     gap: 12px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px 12px;
 }

 .user-btn img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
 }

 .user-info {
     text-align: left;
 }

 .user-info .name {
     font-weight: 600;
     color: var(--text-white);
     font-size: 15px;
 }

 .user-info .email {
     color: var(--text-white);
     font-size: 12px;
 }

 .dropdown-menu {
     min-width: 220px;
     border: none;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
     border-radius: 12px;
     padding: 10px 0;
 }

 .dropdown-item {
     padding: 12px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 15px;
 }

 .dropdown-item:hover {
     background-color: #f8f9fa;
 }

 .dropdown-item.logout {
     color: #ef4444;
 }

 .dropdown-item i {
     font-size: 18px;
     width: 24px;
 }

 /* Sidebar */
 .sidebar {
     background-color: white;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding: 30px 20px;
     height: fit-content;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 }

 .profile-section {
     text-align: center;
     margin-bottom: 30px;
     border-bottom: 1px solid rgb(207, 207, 207);
 }

 /* Larger profile avatar */
 .profile-avatar {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 20px;
     margin-top: -70px;
     border: 4px solid #f3f4f6;
 }

 .profile-name {
     font-weight: 700;
     font-size: 20px;
     color: var(--text-dark);
     margin-bottom: 5px;
 }

 .profile-email {
     color: #6b7280;
     font-size: 14px;
 }


 /* Updated logout button gradient */
 .logout-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
     border: none;
     padding: 15px 25px;
     color: #ef4444;
     font-weight: 500;
     font-size: 16px;
     width: 100%;
     /* margin-top: 40px; */
     /* border-radius: 12px; */
     cursor: pointer;
     transition: all 0.3s;
 }

 .logout-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 20px rgba(239, 68, 68, 0.3);
 }


 /* Larger welcome title */
 .welcome-title {
     font-size: 36px;
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: 8px;
 }

 .welcome-subtitle {
     color: #6b7280;
     font-size: 16px;
     margin-bottom: 25px;
 }

 /* Completely redesigned stat cards */
 .stat-card {
     /* border-radius: 16px; */
     padding: 25px;
     position: relative;
     overflow: hidden;
     height: 100%;
     border: none;
 }

 /* .stat-card.orange {
     background-image: url('/images/constant/shape/subtract.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 } */

 .stat-card.gray {
     background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
     border: 1px solid #e5e7eb;
 }

 .stat-card.green {
     background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
 }

 /* Rounded square icons positioned top-right */
 .stat-icon {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 60px;
     height: 60px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 22px;
 }

 .stat-icon.orange {
     background-color: var(--primary-orange);
 }

 .stat-icon.purple {
     background-color: var(--primary-purple);
 }

 .stat-icon.green {
     background-color: var(--primary-green);
 }

 /* Updated stat label colors to match design */
 .stat-label {
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .stat-card.orange .stat-label {
     color: #ea580c;
 }

 .stat-card.gray .stat-label {
     color: #dc2626;
 }

 .stat-card.green .stat-label {
     color: #16a34a;
 }

 .stat-value {
     font-size: 42px;
     font-weight: 700;
     color: var(--text-dark);
 }

 /* Section Title */
 .section-title {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-dark);
     margin: 35px 0 20px;
 }

 /* Room Cards */
 .room-card {
     background: white;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     margin-bottom: 20px;
 }

 .room-image {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .room-info {
     padding: 15px 20px 20px;
 }

 .room-name {
     font-weight: 600;
     font-size: 16px;
     color: var(--text-dark);
     margin-bottom: 12px;
 }

 .room-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 /* Color-coded tags matching design */
 .tag {
     padding: 0px 6px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
     border: 1px solid;
 }

 .tag.blue {
     color: #3b82f6;
     border-color: #93c5fd;
     background: #eff6ff;
 }

 .tag.purple {
     color: #8b5cf6;
     border-color: #c4b5fd;
     background: #f5f3ff;
 }

 .tag.orange {
     color: #f97316;
     border-color: #fdba74;
     background: #fff7ed;
 }

 /* Chat Button */
 .chat-btn {
     position: fixed;
     bottom: 30px;
     left: 30px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 28px;
     border: none;
     cursor: pointer;
     box-shadow: 0 5px 25px rgba(59, 130, 246, 0.4);
     transition: all 0.3s;
     z-index: 1000;
 }

 .chat-btn:hover {
     transform: scale(1.1);
 }

 @media (max-width: 991px) {
     .sidebar {
         margin-bottom: 20px;
     }

     .header {
         padding: 15px 20px;
     }
 }

 .room-card {
     position: relative;
     overflow: hidden;
 }

 .card-actions {
     position: absolute;
     top: 30%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     gap: 12px;
     opacity: 0;
     visibility: hidden;
     transition: 0.3s ease;
     z-index: 20;
 }

 .action-btn {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     background: rgba(255, 255, 255, 0.85);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 18px;
     cursor: pointer;
     transition: 0.2s ease;
     backdrop-filter: blur(4px);
 }

 .action-btn:hover {
     transform: scale(1.15);
     background: #ffffff8f;
 }

 .room-card:hover .card-actions {
     opacity: 1;
     visibility: visible;
 }

 .dashboard-container {
    display: flex;
    gap: 25px;
}

/* Sidebar */
.sidebar-card {
    width: 300px;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 30px 20px;
    height: fit-content;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.user-profile {
    text-align: center;
    margin-bottom: 25px;
}

.profile-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.username {
    font-size: 20px;
    margin-top: 10px;
    font-weight: 600;
}

.user-email {
    color: #555;
    font-size: 14px;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}

.menu-item {
    padding: 12px 14px;
    border-radius: 8px;
    position: relative;
}

.menu-item.active {
    background: #FFF4EB;
}

.menu-item.active .sidebar-active-indicator {
    width: 4px;
    height: 40px;
    background: #ff7a00;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 6px;
}

.menu-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #222;
    font-weight: 500;
    text-decoration: none;
}

.logout-btn {
    margin-top: 30px;
    width: 100%;
    padding: 12px;
    background: #F8D7DA;
    color: #b30000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
}

/* Content Area */
.content-area {
    flex: 1;
}

.page-header {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.06);
}

.header-title {
    font-size: 28px;
    font-weight: 700;
}

.header-subtitle {
    font-size: 15px;
    color: #666;
    margin-bottom: 20px;
}

.search-wrapper {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 12px 40px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #888;
}

/* Content Card */
.content-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.06);
}

.content-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: #F3F3F3;
    margin-right: 8px;
}

.new-btn {
    background: #FF8A00;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
}

/* Table */
.subscription-table {
    width: 100%;
}

.subscription-table th {
    color: #333;
    padding: 12px;
    font-weight: 600;
}

.subscription-table td {
    padding: 12px;
    font-size: 14px;
    vertical-align: middle;
}

/* Badges */
.badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
}

.badge.paid {
    background: #D8F5DE;
    color: #178742;
}

.badge.expired {
    background: #EFEFEF;
    color: #595959;
}

.badge.refunded {
    background: #FCE1E1;
    color: #C1272D;
}

/* Action buttons */
.table-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: #EDEEFF;
    margin-right: 5px;
}

.table-btn.delete {
    background: #FFE2E2;
}