/* Modern Dashboard Styles
================================================== */

/* Modern Alert */
.modern-alert {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.modern-alert.alert-setup {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #0056b3 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 158, 247, 0.3);
}

.theme-dark .modern-alert.alert-setup {
    background: linear-gradient(135deg, var(--primaryColor) 0%, #003d6b 100%);
    box-shadow: 0 4px 15px rgba(0, 158, 247, 0.2);
}

.alert-icon {
    font-size: 2rem;
    margin-right: 20px;
    opacity: 0.9;
}

.alert-content {
    flex: 1;
}

.alert-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.alert-content p {
    margin: 0 0 15px 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.alert-content .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.alert-content .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.alert-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    padding: 5px;
}

.alert-close:hover {
    opacity: 1;
}

/* Profile Link Card */
.profile-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--card-color, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--box-shadow, #eee);
    border: 1px solid var(--border-color, #f1f1f1);
    transition: all 0.3s ease;
}

.theme-dark .profile-link-card {
    background: var(--card-color, rgba(255, 255, 255, 0.1));
    border-color: var(--border-color, rgba(209, 213, 219, 0.1));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.link-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.link-info i {
    color: var(--primaryColor, var(--primaryColor));
    font-size: 1.2rem;
}

.link-label {
    color: var(--color, #4b566b);
    font-weight: 500;
}

.link-url {
    color: var(--primaryColor, var(--primaryColor));
    font-weight: 600;
    font-family: 'Courier New', monospace;
    text-wrap: wrap;
    line-break: anywhere;
}

.btn-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primaryColor, var(--primaryColor));
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-copy:hover {
    background: #007bb5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.3);
}

.copy-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4CAF50;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stat Cards */
.stat-card {
    padding: 20px 15px;
    border-radius: 12px;
    background: var(--card-color, #fff);
    box-shadow: 0 4px 15px var(--box-shadow, #eee);
    border: 1px solid var(--border-color, #f1f1f1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-dark .stat-card {
    background: var(--card-color, rgba(255, 255, 255, 0.1));
    border-color: var(--border-color, rgba(209, 213, 219, 0.1));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--box-shadow, #ddd);
}

.theme-dark .stat-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.1;
    transform: translate(30%, -30%);
}

.stat-card-primary::before {
    background: var(--primaryColor, var(--primaryColor));
}

.stat-card-success::before {
    background: var(--defaultColor, #50cd89);
}

.stat-card-info::before {
    background: #6c757d;
}

.stat-card-warning::before {
    background: #ffc107;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.stat-card-primary .stat-icon {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #007bb5 100%);
    color: #fff;
}

.stat-card-success .stat-icon {
    background: linear-gradient(135deg, var(--defaultColor, #50cd89) 0%, #3cb371 100%);
    color: #fff;
}

.stat-card-info .stat-icon {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #fff;
}

.stat-card-warning .stat-icon {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #fff;
}

.stat-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 3px 0;
    color: var(--color, #4b566b);
}

.stat-content p {
    margin: 0 0 8px 0;
    color: var(--color, #6c757d);
    font-size: 0.8rem;
    opacity: 0.8;
}

.stat-limit,
.stat-trend {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.stat-limit {
    background: var(--soft-background, #f8f8f8);
    color: var(--color, #6c757d);
}

.theme-dark .stat-limit {
    background: rgba(255, 255, 255, 0.1);
}

.stat-trend {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.stat-progress {
    height: 4px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 2px;
    margin-top: 15px;
    overflow: hidden;
}

.theme-dark .stat-progress {
    background: rgba(255, 255, 255, 0.1);
}

.stat-progress .progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stat-card-primary .progress-bar {
    background: var(--primaryColor, var(--primaryColor));
}

.stat-card-success .progress-bar {
    background: var(--defaultColor, #50cd89);
}

.stat-card-info .progress-bar {
    background: #6c757d;
}

.stat-card-warning .progress-bar {
    background: #ffc107;
}

/* Modern Card */
.modern-card {
    background: var(--card-color, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 15px var(--box-shadow, #eee);
    border: 1px solid var(--border-color, #f1f1f1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.theme-dark .modern-card {
    background: var(--card-color, rgba(255, 255, 255, 0.1));
    border-color: var(--border-color, rgba(209, 213, 219, 0.1));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.modern-card:hover {
    box-shadow: 0 8px 25px var(--box-shadow, #ddd);
}

.theme-dark .modern-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.modern-card .card-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color, #f1f1f1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-dark .modern-card .card-header {
    border-color: var(--border-color, rgba(209, 213, 219, 0.1));
}

.modern-card .card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color, #4b566b);
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-card .card-header h3 i {
    color: var(--primaryColor, var(--primaryColor));
}

.modern-card .card-body {
    padding: 25px;
}

.modern-card .card-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--border-color, #f1f1f1);
    background: var(--soft-background, #f8f8f8);
}

.theme-dark .modern-card .card-footer {
    border-color: var(--border-color, rgba(209, 213, 219, 0.1));
    background: rgba(255, 255, 255, 0.05);
}

.btn-view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primaryColor, var(--primaryColor));
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    color: #007bb5;
    gap: 12px;
}

/* Restaurant Profile Card */
.restaurant-profile-card .card-header-gradient {
    padding: 30px 25px;
    color: #fff;
}

.profile-header-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}

.avatar-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 2px solid #fff;
}

.profile-info {
    flex: 1;
}

.profile-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.profile-info .owner-name {
    margin: 0 0 5px 0;
    opacity: 0.9;
    font-size: 0.95rem;
}

.profile-info .member-since {
    margin: 0;
    opacity: 0.8;
    font-size: 0.85rem;
}

.profile-info .member-since i {
    margin-right: 5px;
}

.profile-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    text-align: center;
}

.stat-item i {
    font-size: 1.2rem;
    margin-bottom: 5px;
    opacity: 0.9;
}

.stat-item span {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
}

.stat-item small {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-link-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.theme-dark .quick-link-item {
    background: rgba(255, 255, 255, 0.05);
}

.quick-link-item:hover {
    background: var(--primaryColor, var(--primaryColor));
    border-color: var(--primaryColor, var(--primaryColor));
    transform: translateX(5px);
    color: #fff !important;
}

.quick-link-item:hover .link-icon,
.quick-link-item:hover .link-content,
.quick-link-item:hover .link-arrow {
    color: #fff !important;
}

.quick-link-item:hover span {
    color: #fff !important;
}

.link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.link-icon-blue {
    background: linear-gradient(135deg, var(--primaryColor) 0%, #007bb5 100%);
    color: #fff;
}

.link-icon-cyan {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: #fff;
}

.link-icon-green {
    background: linear-gradient(135deg, #50cd89 0%, #3cb371 100%);
    color: #fff;
}

.link-icon-red {
    background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
    color: #fff;
}

.link-content {
    flex: 1;
    transition: all 0.3s ease;
}

.link-title {
    display: block;
    font-weight: 600;
    color: var(--color, #4b566b);
    margin-bottom: 3px;
}

.link-count {
    font-size: 0.85rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

.link-arrow {
    color: var(--color, #6c757d);
    transition: all 0.3s ease;
}

/* Package Card */
.package-card .package-header {
    padding: 25px;
    background: var(--soft-background, #f8f8f8);
    border-bottom: 1px solid var(--border-color, #f1f1f1);
}

.theme-dark .package-card .package-header {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color, rgba(209, 213, 219, 0.1));
}

.package-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.package-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.package-info {
    flex: 1;
}

.package-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color, #4b566b);
}

.package-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color, #6c757d);
    display: flex;
    flex-direction: column;
}

.days-remaining {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primaryColor, var(--primaryColor));
}

.free-badge {
    display: inline-block;
    padding: 5px 15px;
    background: #4CAF50;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.package-avatar {
    width: 60px;
    height: 60px;
}

.package-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color, #f1f1f1);
}

.theme-dark .package-avatar img {
    border-color: rgba(209, 213, 219, 0.1);
}

.package-stats {
    display: flex;
    gap: 15px;
}

.stat-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 10px;
}

.theme-dark .stat-box {
    background: rgba(255, 255, 255, 0.05);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.stat-icon-purple {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.stat-icon-blue {
    background: linear-gradient(135deg, var(--primaryColor) 0%, #007bb5 100%);
}

.stat-icon-orange {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.stat-icon-green {
    background: linear-gradient(135deg, #50cd89 0%, #3cb371 100%);
}

.stat-icon-cyan {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.stat-icon-pink {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%);
}

.stat-details h4 {
    margin: 0 0 3px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color, #4b566b);
}

.stat-details p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

.package-card .card-footer .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Recent Orders */
.recent-orders-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.order-count-badge {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #007bb5 100%);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.recent-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.theme-dark .order-item {
    background: rgba(255, 255, 255, 0.05);
}

.order-item:hover {
    background: #fff;
    border-color: var(--primaryColor, var(--primaryColor));
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--box-shadow, #ddd);
}

.theme-dark .order-item:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.order-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.order-icon .icon-pending {
    color: #ffc107;
}

.order-icon .icon-completed {
    color: #4CAF50;
}

.order-icon .icon-cancelled {
    color: #c82333;
}

.order-icon .icon-default {
    color: var(--primaryColor, var(--primaryColor));
}

.order-content {
    flex: 1;
    min-width: 0;
}

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

.order-number {
    font-weight: 700;
    color: var(--color, #4b566b);
    font-size: 1rem;
}

.order-time {
    font-size: 0.8rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

.order-details {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.order-customer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color, #6c757d);
}

.order-customer i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.order-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.amount-label {
    color: var(--color, #6c757d);
    opacity: 0.8;
}

.amount-value {
    font-weight: 600;
    color: var(--color, #4b566b);
}

.order-status {
    flex-shrink: 0;
}

.order-status .status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.order-status .status-badge i {
    font-size: 0.5rem;
}

.status-pending {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107;
}

.status-completed {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #4CAF50;
}

.status-cancelled {
    background: rgba(200, 35, 51, 0.15) !important;
    color: #c82333;
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--color, #6c757d);
}

.empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.5;
}

.theme-dark .empty-icon {
    background: rgba(255, 255, 255, 0.05);
}

.empty-state p {
    margin: 0 0 20px 0;
    font-size: 1rem;
}

.btn-create-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--primaryColor, var(--primaryColor));
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-create-order:hover {
    background: #007bb5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.3);
}

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 15px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.theme-dark .action-item {
    background: rgba(255, 255, 255, 0.05);
}

.action-item:hover {
    background: var(--primaryColor, var(--primaryColor));
    transform: translateY(-5px);
    border-color: var(--primaryColor, var(--primaryColor));
}

.action-item:hover .action-icon,
.action-item:hover span {
    color: #fff;
}

.action-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

.action-icon-primary {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #007bb5 100%);
    color: #fff;
}

.action-icon-success {
    background: linear-gradient(135deg, var(--defaultColor, #50cd89) 0%, #3cb371 100%);
    color: #fff;
}

.action-icon-info {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: #fff;
}

.action-icon-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #fff;
}

.action-icon-purple {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
}

.action-icon-pink {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%);
    color: #fff;
}

.action-item span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color, #4b566b);
    text-align: center;
    transition: all 0.3s ease;
}

/* Notifications */
.notification-count {
    background: var(--dangerColor, #c82333);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.theme-dark .notification-item {
    background: rgba(255, 255, 255, 0.05);
}

.notification-item.notification-unread {
    border-left: 3px solid var(--primaryColor, var(--primaryColor));
}

.notification-item:hover {
    background: var(--primaryColor, var(--primaryColor));
    transform: translateX(5px);
}

.notification-item:hover .notification-icon,
.notification-item:hover .notification-content,
.notification-item:hover .notification-time {
    color: #fff;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.notification-icon-success {
    background: linear-gradient(135deg, #4CAF50 0%, #3cb371 100%);
}

.notification-icon-info {
    background: linear-gradient(135deg, var(--primaryColor) 0%, #007bb5 100%);
}

.notification-icon-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.notification-content {
    flex: 1;
}

.notification-text {
    margin: 0 0 5px 0;
    font-weight: 500;
    color: var(--color, #4b566b);
}

.notification-time {
    font-size: 0.8rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

/* Statistics Overview */
.statistics-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-overview-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.theme-dark .stat-overview-item {
    background: rgba(255, 255, 255, 0.05);
}

.stat-overview-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px var(--box-shadow, #ddd);
}

.theme-dark .dropdown-modern .dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 8px;
    min-width: 190px;
    margin-top: 5px;
    background: var(--card-color, #fff) !important;
}

.theme-dark .dropdown-modern .dropdown-menu {
    background: #1a202c !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dropdown-modern .dropdown-menu li a {
    border-radius: 8px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color) !important;
}

.theme-dark .dropdown-modern .dropdown-menu li a {
    color: #e2e8f0 !important;
}

.dropdown-modern .dropdown-menu li a:hover {
    background: var(--background-soft);
    color: var(--primary-color) !important;
}

.theme-dark .dropdown-modern .dropdown-menu li a:hover {
    background: #2d3748;
}

.theme-dark .stat-overview-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.stat-overview-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}

.stat-overview-primary .stat-overview-icon {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #007bb5 100%);
}

.stat-overview-1 .stat-overview-icon {
    background: linear-gradient(135deg, #50cd89 0%, #3cb371 100%);
}

.stat-overview-2 .stat-overview-icon {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.stat-overview-3 .stat-overview-icon {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%);
}

.stat-overview-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color, #4b566b);
}

.stat-overview-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

/* Revenue Stats */
.revenue-stats {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.revenue-stat-item {
    text-align: center;
    flex: 1;
}

.revenue-stat-item h4 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color, #4b566b);
}

.revenue-stat-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

/* Order Status Grid */
.order-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.order-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 25px 20px;
    background: var(--soft-background, #f8f8f8);
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
}

.theme-dark .order-status-item {
    background: rgba(255, 255, 255, 0.05);
}

.order-status-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--box-shadow, #ddd);
}

.theme-dark .order-status-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.order-status-item.active {
    border: 2px solid;
}

.status-pending.active {
    border-color: #ffc107;
}

.status-completed.active {
    border-color: #4CAF50;
}

.status-delivered.active {
    border-color: var(--primaryColor);
}

.status-cancelled.active {
    border-color: #c82333;
}

.status-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}

.status-pending .status-icon {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.status-completed .status-icon {
    background: linear-gradient(135deg, #4CAF50 0%, #3cb371 100%);
}

.status-delivered .status-icon {
    background: linear-gradient(135deg, var(--primaryColor) 0%, #007bb5 100%);
}

.status-cancelled .status-icon {
    background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
}

.status-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color, #4b566b);
}

.status-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
    text-transform: uppercase;
    font-weight: 500;
}

.stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card {
    height: 136px;
    margin-bottom: 15px;
}

/* Modern Navbar Styles
================================================== */
.main-header {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(231, 234, 243, 0.7);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    margin-left: 230px !important;
}

.sidebar-collapse .main-header {
    margin-left: 50px !important;
}

.theme-dark .main-header {
    background: rgba(26, 32, 44, 0.8) !important;
    border-bottom: 1px solid rgba(45, 55, 72, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.main-header .navbar {
    margin-left: 0 !important;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    background: transparent !important;
    border: none !important;
}

.pos-pageArea .main-header {
    margin-left: 0 !important;
}

.pos-pageArea .main-header .navbar {
    margin-left: 0px !important;
}

.main-header .logo,
.pos-pageArea .shopLogo {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-header .navbar .navbar-nav>li>a {
    border: none !important;
}

.main-header .logo .logo-lg img {
    max-height: 40px;
    width: auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.main-header .logo .logo-lg img:hover {
    transform: scale(1.1) rotate(-2deg);
}

.main-header .sidebar-toggle {
    background: rgba(var(--primaryColorRGB), 0.1) !important;
    color: var(--primaryColor) !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    margin-right: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    box-shadow: 0 4px 10px rgba(var(--primaryColorRGB), 0.1);
}

.theme-dark .main-header .sidebar-toggle {
    background: rgba(var(--primaryColorRGB), 0.15) !important;
}

.main-header .sidebar-toggle:hover {
    background: var(--primaryColor, var(--primaryColor)) !important;
    color: #fff !important;
    transform: translateY(-2px) rotate(90deg);
    box-shadow: 0 4px 15px rgba(0, 158, 247, 0.3);
}

.main-header .sidebar-toggle::before {
    content: "\f0c9";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.navLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primaryColorRGB), 0.1);
    color: var(--primaryColor) !important;
    padding: 10px 20px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none !important;
    border: none !important;
}

.navLink:hover {
    background: var(--primaryColor);
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(var(--primaryColorRGB), 0.3);
    transform: translateY(-2px);
}

.navbar-custom-menu {
    height: 70px;
    display: flex;
    align-items: center;
}

.navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.navbar-nav>li {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

.navbar-nav>li>a {
    padding: 10px 15px !important;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.navbar-nav>li>a:hover {
    background: var(--soft-background, #f8f9fa) !important;
}

.theme-dark .navbar-nav>li>a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.navbar-nav>.user-menu .user-image {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    margin-right: 12px;
    margin-top: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    float: none !important;
}

.theme-dark .navbar-nav>.user-menu .user-image {
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-nav>.user-menu>.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

.navbar-nav>.user-menu .hidden-xs {
    font-weight: 600;
    color: var(--color, #4b566b);
    font-size: 0.9rem;
}

.main-header .navbar .nav>li>.dropdown-menu {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    margin-top: 15px !important;
    padding: 15px !important;
    background: #fff !important;
    animation: slideUp 0.3s ease;
    min-width: 280px;
}

.theme-dark .main-header .navbar .nav>li>.dropdown-menu {
    background: #1a202c !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-header {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #007bb5 100%) !important;
    border-radius: 15px !important;
    padding: 30px 20px !important;
    height: auto !important;
    text-align: center;
}

.user-header .img-circle {
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.user-header p {
    margin-top: 15px !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.user-header p small {
    display: block;
    margin-top: 5px;
    opacity: 0.8;
    font-weight: 400;
}

.user-footer {
    background: transparent !important;
    padding: 20px 10px 10px !important;
    border-top: none !important;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.user-footer .btn-default {
    background: var(--soft-background, #f8f9fa);
    border: 1px solid var(--border-color, #f1f1f1);
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 600;
    color: var(--color, #4b566b);
    transition: all 0.2s ease;
    flex: 1;
    text-align: center;
}

.user-footer .btn-default:hover {
    background: var(--primaryColor, var(--primaryColor));
    color: #fff;
    border-color: var(--primaryColor, var(--primaryColor));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 158, 247, 0.2);
}

.themeToggle {
    margin: 0 10px;
}

.icofont-globe,
.icofont-bell-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--soft-background, #f8f9fa);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.25rem !important;
    color: var(--color, #6c757d);
    position: relative;
    flex-shrink: 0;
}

.navbar-nav>li>a.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 8px 12px !important;
}

.theme-dark .icofont-globe,
.theme-dark .icofont-bell-alt {
    background: none;
}

.navbar-nav>li:hover .icofont-globe,
.navbar-nav>li:hover .icofont-bell-alt {
    background: rgba(var(--primaryColorRGB), 0.15) !important;
    color: var(--primaryColor) !important;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 15px rgba(var(--primaryColorRGB), 0.2);
}

.notifyBadge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff4757;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    animation: pulseNotify 2s infinite;
}

@keyframes pulseNotify {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.theme-dark .notifyBadge {
    border-color: #1a202c;
}

a.logo.shopLogo {
    display: none !important;
}

/* Modern Sidebar Styles 
================================================== */
.main-sidebar {
    background: rgba(var(--primaryColorRGB), 0.04) !important;
    border-right: none !important;
    padding-top: 0 !important;
    box-shadow: none !important;
    width: 230px !important;
    transition: all 0.3s ease;
}

.theme-dark .main-sidebar {
    background: #1a202c !important;
    background: linear-gradient(180deg, rgba(var(--primaryColorRGB), 0.05) 0%, rgba(26, 32, 44, 1) 100%) !important;
}

.sidebar {
    padding: 0 !important;
}

.user-panel {
    padding: 13px 20px !important;
    border-bottom: none !important;
    margin-bottom: 5px;
    background: rgba(var(--primaryColorRGB), 0.05);
    display: flex;
    align-items: center;
}

.theme-dark .user-panel {
    border-bottom-color: rgba(45, 55, 72, 0.4);
    background: rgba(255, 255, 255, 0.02);
}

.user-panel .image img {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.user-panel .info p {
    font-weight: 600;
    color: var(--color, #4b566b);
    margin-bottom: 2px;
}

.user-panel .info span {
    font-size: 0.75rem;
    color: var(--color, #6c757d);
    opacity: 0.8;
}

.sidebar-menu {
    padding: 10px 15px !important;
}

.sidebar-menu>li {
    margin-bottom: 5px;
}

.sidebar-menu>li>a {
    padding: 12px 15px !important;
    border-radius: 12px !important;
    color: var(--color, #4b566b) !important;
    font-weight: 500;
    transition: all 0.2s ease !important;
    border-left: none !important;
    display: flex;
    align-items: center;
}

.theme-dark .sidebar-menu>li>a {
    color: #a0aec0 !important;
}

.sidebar-menu>li>a i {
    width: 30px;
    font-size: 1.1rem !important;
    color: var(--color, #6c757d);
    transition: all 0.2s ease;
}

.sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a {
    background: var(--primaryColor) !important;
    color: #fff !important;
}

.sidebar-menu>li:hover>a i,
.sidebar-menu>li.active>a i {
    color: #fff !important;
}

.sidebar-menu>li.active>a i,
.sidebar-menu>li:hover>a i {
    color: inherit !important;
}

.nav-drawer-header {
    padding: 15px 15px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--color, #6c757d) !important;
    opacity: 0.6;
    letter-spacing: 1px;
}

.sidebar-collapse .main-sidebar {
    width: 60px !important;
    margin-top: 60px !important;
}

.sidebar-collapse .user-panel,
.sidebar-collapse .nav-drawer-header {
    display: none !important;
}

.content-wrapper {
    background: var(--soft-background, #f4f7f6) !important;
    margin-left: 230px !important;
    transition: all 0.3s ease;
}

.sidebar-collapse .content-wrapper,
.sidebar-collapse .main-header,
.sidebar-collapse .main-footer {
    margin-left: 60px !important;
}

.theme-dark .content-wrapper {
    background: #111827 !important;
}

/* Modern Footer Styles 
================================================== */
.main-footer {
    background: #fff !important;
    border-top: 1px solid rgba(231, 234, 243, 0.7) !important;
    padding: 20px 25px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color, #6c757d) !important;
    font-size: 0.9rem;
    margin-left: 230px !important;
    transition: all 0.3s ease;
}

.theme-dark .main-footer {
    background: #1a202c !important;
    border-top-color: rgba(45, 55, 72, 0.4) !important;
}

.sidebar-collapse .main-footer {
    margin-left: 50px !important;
}

.footerLeft p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footerLeft img {
    max-height: 25px;
}

.shortMenu {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.shortMenu li a {
    color: var(--color, #6c757d);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

.shortMenu li a:hover {
    color: var(--primaryColor, var(--primaryColor));
}

.bg-light-purple-soft {
    background: rgba(155, 89, 182, 0.1) !important;
    color: #9b59b6 !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* =============================================
   POS UI/UX Enhancement (Non-Destructive)
   Uses existing CSS vars from theme.css:
   --background-color, --soft-background, --color,
   --border-color, --activeColor, --card-color
   ============================================= */

.posArea .card {
    border-radius: 14px;
    border-color: var(--border-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}

.theme-dark .posArea .card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.posMenu ul {
    border-radius: 10px;
    gap: 6px;
}

.posMenu ul li a {
    border-radius: 8px;
    transition: all 0.25s ease;
}

.categoryList.posheader {
    padding: 10px 0;
}

ul.posCatList li a {
    border-radius: 10px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

ul.posCatList li a:hover {
    border-color: var(--activeColor);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.theme-dark ul.posCatList li a:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.categoryDiv img {
    border: 2px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    object-fit: cover;
}

.theme-dark .categoryDiv img {
    border-color: rgba(255, 255, 255, 0.1);
}

.categoryBtn a {
    border-radius: 10px;
    transition: all 0.25s ease;
}

.autocomplete-input {
    border-radius: 10px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.autocomplete-input:focus {
    border-color: var(--activeColor);
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.08);
    outline: none;
}

.theme-dark .autocomplete-input {
    background-color: var(--soft-background);
    color: var(--color);
}

.menuItemList ul li a {
    border-radius: 20px;
    transition: all 0.25s ease;
}

.productareas {
    gap: 10px;
}

.singleProduct {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.theme-dark .singleProduct {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.singleProduct:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    border-color: var(--activeColor);
    background: var(--soft-background);
}

.theme-dark .singleProduct:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.topImg img {
    border-radius: 8px;
    transition: transform 0.25s ease;
}

.singleProduct:hover .topImg img {
    transform: scale(1.04);
}

.itemDetails h4 {
    line-height: 1.35;
    color: var(--color);
}

.itemDetails .label {
    border-radius: 6px;
    font-weight: 600;
}

.menu-card {
    border-radius: 14px;
}

.cartItemList {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
    padding: 4px 6px 4px 2px;
}

.cartItemList::-webkit-scrollbar {
    width: 4px;
}

.cartItemList::-webkit-scrollbar-track {
    background: transparent;
}

.cartItemList::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.theme-dark .cartItemList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}

.singleCartContent {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
    transition: all 0.25s ease;
    padding: 10px !important;
    margin-bottom: 8px !important;
    position: relative;
    overflow: hidden;
}

.singleCartContent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--activeColor, #3498db);
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.singleCartContent:hover {
    border-color: var(--activeColor);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transform: translateX(2px);
}

.singleCartContent:hover::before {
    opacity: 1;
}

.theme-dark .singleCartContent {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.theme-dark .singleCartContent:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.itemThumb {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.itemThumb img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}

.singleCartContent:hover .itemThumb img {
    transform: scale(1.06);
}

.itemLeftDetails h4 {
    color: var(--color);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px !important;
    line-height: 1.3;
}

.itemLeftDetails>p {
    font-size: 12px;
    opacity: 0.7;
}

p.subTotalTag {
    color: var(--activeColor);
    font-weight: 700;
    font-size: 15px;
    margin: 0;
    letter-spacing: -0.3px;
}

.incress_area {
    display: inline-flex;
    align-items: center;
    background: var(--soft-background, #f4f4f4);
    border-radius: 20px;
    padding: 2px;
    gap: 0;
    border: 1px solid var(--border-color, #e8e8e8);
}

.theme-dark .incress_area {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

span.value-button {
    width: 26px;
    height: 26px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color);
    line-height: 1;
}

span.value-button.minus {
    color: #e74c3c;
}

span.value-button.add {
    color: #27ae60;
}

span.value-button:hover {
    background: var(--activeColor);
    color: #fff !important;
    transform: scale(1.1);
}

span.cart_qty_field {
    min-width: 28px;
}

span.cart_qty_field input {
    font-size: 13px;
    font-weight: 700;
    width: 28px;
}

.remove_item {
    width: 22px;
    height: 22px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    transition: all 0.2s ease;
    line-height: 1;
    text-decoration: none;
}

.remove_item:hover {
    background: #e74c3c;
    color: #fff;
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.theme-dark .remove_item {
    background: rgba(231, 76, 60, 0.15);
}

.itemPriceArea {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    text-align: right;
    min-width: 70px;
}

.extras_size_area {
    border-radius: 8px;
    padding: 6px 10px 6px 35px;
    margin-top: 6px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px dashed var(--border-color) !important;
    font-size: 12px;
}

.theme-dark .extras_size_area {
    background: rgba(255, 255, 255, 0.03);
}

.extras_size_area ul li {
    font-size: 12px;
    padding: 2px 0;
    opacity: 0.85;
}

.extraWithPrice {
    font-size: 13px;
}

.posSize {
    margin: 2px 0;
}

.posSize p:last-child {
    border-radius: 5px;
    font-size: 11px;
    padding: 1px 6px;
}

.cartPriceArea {
    border-radius: 12px;
    background: var(--soft-background);
    border-top: none;
    padding: 12px !important;
    margin-top: 8px;
}

.subTotalInfo {
    padding: 6px 0 !important;
}

.subTotalInfo p {
    font-size: 13px !important;
    padding: 3px 0 !important;
    color: var(--color);
}

.subTotalInfo p span:first-child {
    opacity: 0.75;
    font-weight: 500;
}

.subTotalInfo p span:last-child {
    color: var(--color);
    font-weight: 600;
}

.bb_1 {
    border-bottom: 1px dashed var(--border-color) !important;
    margin-bottom: 6px;
    padding-bottom: 6px !important;
}

.cartPriceArea .subTotalInfo:last-child p {
    font-size: 16px !important;
    font-weight: 700;
}

.cartPriceArea .subTotalInfo:last-child p span:last-child {
    color: var(--activeColor);
    font-size: 17px;
}

.cartActionArea {
    margin-top: 8px;
}

.cartActionArea ul {
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #4a5568, #2d3748) !important;
}

.theme-dark .cartActionArea ul {
    background: linear-gradient(135deg, #374151, #1f2937) !important;
}

.cartActionArea ul li a {
    transition: all 0.2s ease;
    font-size: 12px;
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
}

.cartActionArea ul li:last-child a {
    border-right: none !important;
}

.cartActionArea ul li a:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cartActionArea ul li a i {
    font-size: 16px;
    margin-bottom: 3px;
    opacity: 0.9;
}

.cartActionArea ul li a span:last-child {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.85;
}

.cartFooter {
    padding: 10px 15px !important;
    border-top: 1px dashed var(--border-color) !important;
}

.theme-dark .cartFooter {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.cartFooter .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 20px;
    font-size: 14px;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.cartFooter .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.cartFooter .btn-success,
.cartFooter .btn-primary {
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2);
}

.cartFooter .btn-success:hover,
.cartFooter .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.35);
}

.categoryArea {
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.theme-dark .categoryArea {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.catHeader {
    padding-bottom: 10px;
}

.catHeader a {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    line-height: 36px;
    transition: background 0.2s ease;
}

.catHeader a:hover {
    background: rgba(255, 0, 0, 0.08);
}

.categoryList ul li a {
    border-radius: 8px;
    transition: all 0.2s ease;
}

.posModal {
    border-radius: 14px;
}

.extras_size_area {
    border-radius: 8px;
    padding: 8px 10px 8px 40px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.theme-dark .extras_size_area {
    background: rgba(255, 255, 255, 0.02);
}

.posSize p:last-child {
    border-radius: 6px;
}

.posStaff {
    border-radius: 10px;
    padding: 8px 0;
}

.posStaff p {
    font-weight: 600;
    font-size: 13px;
    margin: 2px 0;
    color: var(--color);
}

.ci-paginationArea {
    margin-top: 15px;
}

div#suggesstion-box ul {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.theme-dark div#suggesstion-box ul {
    background: var(--background-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

div#suggesstion-box ul li {
    transition: background 0.2s ease;
}

.theme-dark div#suggesstion-box ul li {
    color: var(--color);
    border-color: var(--border-color);
}

.theme-dark div#suggesstion-box ul li:hover {
    background: var(--soft-background);
}

/* =============================================
   POS View Toggle (Thumb / Grid)
   ============================================= */
.posViewToggleRow {
    margin-bottom: 8px;
    margin-top: 2px;
}

.posViewToggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--soft-background, #f1f3f5);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.theme-dark .posViewToggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.pos-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border-radius: 6px;
    color: var(--color, #888);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 13px;
}

.pos-view-btn:hover {
    color: var(--activeColor, #3498db);
    background: rgba(0, 0, 0, 0.05);
}

.theme-dark .pos-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pos-view-btn.active {
    background: var(--activeColor, #3498db);
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pos-view-btn.active:hover {
    color: #fff !important;
    background: var(--activeColor, #3498db);
}

.productareas.pos-thumb-view {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch;
    width: 100%;
}

.productareas.pos-thumb-view:before,
.productareas.pos-thumb-view:after,
.productareas.pos-grid-view:before,
.productareas.pos-grid-view:after {
    display: none !important;
    content: none !important;
}

.productareas.pos-thumb-view .col-md-4,
.productareas.pos-thumb-view .col-xs-6,
.productareas.pos-thumb-view .col-lg-3,
.productareas.pos-thumb-view>div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex;
    flex: none !important;
}

.productareas.pos-thumb-view .singleProduct {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #eaeaea);
    background: var(--background-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 !important;
}

.theme-dark .productareas.pos-thumb-view .singleProduct {
    border-color: rgba(255, 255, 255, 0.08);
}

.productareas.pos-thumb-view .singleProduct:hover {
    border-color: var(--activeColor);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.theme-dark .productareas.pos-thumb-view .singleProduct:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.productareas.pos-thumb-view .topImg {
    height: 55px;
    width: 55px;
    flex: 0 0 55px;
    padding: 0;
    margin-right: 8px;
}

.productareas.pos-thumb-view .topImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.productareas.pos-thumb-view .itemDetails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.productareas.pos-thumb-view .itemDetails h4 {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: var(--color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.productareas.pos-thumb-view .itemDetails .label {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    font-weight: 700;
}

.pos-pageArea .main-header .navbar {
    margin-left: 0px !important;
}

.pos-pageArea .shopLogo {
    width: 0px !important;
    display: none !important;
}

.productareas.pos-thumb-view {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.content-wrapper.pos-page {
    margin-left: 0 !important;
    margin-top: 3rem;
}

.pos-pageArea .navbar.navbar-static-top,
.pos-pageArea .sidebar-collapse .main-header .navbar {
    margin-left: 0 !important;
}

.sidebar-collapse .main-footer {
    margin-left: 0px !important;
}

.productareas.pos-grid-view {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 15px !important;
    padding: 0 !important;
    align-items: stretch;
    width: 100%;
}

.productareas.pos-grid-view .col-md-4,
.productareas.pos-grid-view .col-xs-6,
.productareas.pos-grid-view .col-lg-3,
.productareas.pos-grid-view>div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex;
    flex: none !important;
}

.productareas.pos-grid-view .p-sm-5,
.productareas.pos-grid-view .p-0 {
    padding: 0 !important;
}

.productareas.pos-grid-view .singleProduct {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    margin: 0 !important;
    min-height: 220px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #eaeaea);
    background: var(--background-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.theme-dark .productareas.pos-grid-view .singleProduct {
    border-color: rgba(255, 255, 255, 0.08);
}

.productareas.pos-grid-view .singleProduct:hover {
    border-color: var(--activeColor);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.theme-dark .productareas.pos-grid-view .singleProduct:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.productareas.pos-grid-view .topImg {
    width: 100%;
    height: 0;
    padding-bottom: 70%;
    flex: none;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.productareas.pos-grid-view .topImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.25s ease;
}

.productareas.pos-grid-view .singleProduct:hover .topImg img {
    transform: scale(1.05);
}

.productareas.pos-grid-view .itemDetails {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 2px 2px;
    flex: 1;
    justify-content: center;
    overflow: hidden;
}

.productareas.pos-grid-view .itemDetails h4 {
    font-size: .9rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
    color: var(--color);
}

.productareas.pos-grid-view .itemDetails small {
    font-size: 10px;
    opacity: 0.7;
}

.productareas.pos-grid-view .itemDetails .label {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 700;
}

.productareas.pos-grid-view {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-left: 1px;
}

.productareas.pos-grid-view .singleProduct {
    min-height: 170px;
}

.productareas.pos-grid-view {
    grid-template-columns: repeat(3, 1fr) !important;
}

.productareas.pos-grid-view {
    grid-template-columns: repeat(3, 1fr) !important;
    margin-left: 2px;
}

.productareas.pos-grid-view .singleProduct {
    min-height: 155px;
}

.productareas.pos-grid-view {
    grid-template-columns: repeat(6, 1fr) !important;
    margin-left: 1px;
}

.productareas.pos-grid-view .singleProduct {
    min-height: 170px;
}

.productareas.pos-thumb-view {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.productareas.pos-grid-view {
    grid-template-columns: repeat(8, 1fr) !important;
    margin-left: 1px;
}

.productareas.pos-thumb-view {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Sidebar Collapse Fixes */
.sidebar-collapse .sidebar-menu {
    padding: 10px 0 !important;
}

.sidebar-collapse .sidebar-menu>li {
    position: relative !important;
}

.sidebar-collapse .sidebar-menu>li>a {
    padding: 15px 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
    min-height: 50px;
    display: flex !important;
    align-items: center !important;
}

.sidebar-collapse .sidebar-menu>li>a i {
    width: auto !important;
    margin: 0 !important;
    font-size: 1.35rem !important;
}

.sidebar-collapse .sidebar-menu>li>a span,
.sidebar-collapse .sidebar-menu>li>a .pull-right-container {
    display: none !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48px;
    width: 220px;
    height: auto !important;
    background: var(--primaryColor) !important;
    color: #fff !important;
    padding: 0 20px !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 6px 0 15px rgba(0, 0, 0, 0.15) !important;
    z-index: 10000 !important;
    font-size: 14px;
}

/* Beautiful Submenu Styling */
.beautiful-submenu {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    border-radius: 0;
}

.beautiful-submenu>li>a {
    color: #aeb5bd !important;
    padding: 10px 20px 10px 10px !important;
    /* Indent to show hierarchy */
    transition: all 0.3s ease;
    font-size: 14px;
    display: block;
}

.theme-light .beautiful-submenu>li>a {
    color: var(--color) !important;
}

.beautiful-submenu>li>a:hover,
.beautiful-submenu>li.active>a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding-left: 10px !important;
    /* Slide right on hover */
}

.theme-light .beautiful-submenu>li>a:hover,
.theme-light .beautiful-submenu>li.active>a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--primaryColor) !important;
    padding-left: 10px !important;
    /* Slide right on hover */
}

.theme-light .beautiful-submenu>li>a>i {
    color: var(--color) !important;
}

.theme-light .beautiful-submenu>li>a:hover>i,
.theme-light .beautiful-submenu>li.active>a>i {
    color: var(--primaryColor) !important;
}

.beautiful-submenu>li>a>i {
    margin-right: 10px;
    color: #8c949e !important;
    transition: all 0.3s ease;
}

.beautiful-submenu>li>a:hover>i,
.beautiful-submenu>li.active>a>i {
    color: #ffffff !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span span {
    display: inline-block !important;
    font-size: 14px !important;
    color: #fff !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu>li.treeview:hover>a>span {
    border-radius: 0 12px 0 0 !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    display: block !important;
    position: absolute;
    top: 50px;
    left: 48px;
    width: 220px;
    background: #fff !important;
    box-shadow: 6px 8px 15px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 10px 0 !important;
    z-index: 9999;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
}

.theme-dark.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    background: #1a202c !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu li a {
    padding: 10px 22px !important;
    color: var(--color) !important;
    background: transparent !important;
}

.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu li a:hover {
    background: rgba(var(--primaryColorRGB), 0.1) !important;
    color: var(--primaryColor) !important;
}

[dir="rtl"] .sidebar-collapse .main-sidebar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .sidebar-collapse .content-wrapper,
[dir="rtl"] .sidebar-collapse .main-header,
[dir="rtl"] .sidebar-collapse .main-footer {
    margin-left: 0 !important;
    margin-right: 60px !important;
}

[dir="rtl"].sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span {
    left: auto !important;
    right: 50px !important;
    border-radius: 12px 0 0 12px !important;
    justify-content: flex-end !important;
    box-shadow: -6px 0 15px rgba(0, 0, 0, 0.15) !important;
}

[dir="rtl"].sidebar-mini.sidebar-collapse .sidebar-menu>li.treeview:hover>a>span {
    border-radius: 12px 0 0 0 !important;
}

[dir="rtl"].sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
    left: auto !important;
    right: 50px !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: -6px 8px 15px rgba(0, 0, 0, 0.12) !important;
}

[dir="rtl"] .sidebar-collapse .sidebar-menu>li>a i {
    margin-left: 0 !important;
}

[dir="rtl"] .main-header .navbar {
    margin-right: 0 !important;
}

[dir="rtl"] .user-panel {
    margin-top: 65px !important;
}

[dir="rtl"] .content-wrapper,
[dir="rtl"] .main-header {
    margin-left: 0 !important;
}

[dir="rtl"] .sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 0 !important;
    margin-right: 0px !important;
}

/* =============================================
   Admin Dashboard Redesign 
   Replicating the User Dashboard premium feel
   ============================================= */
.adminDashboard .content-wrapper {
    background: var(--soft-background, #f4f7f6) !important;
}

.theme-dark.adminDashboard .content-wrapper {
    background: #111827 !important;
}

.adminDashboard .box {
    background: var(--card-color, #fff);
    border-radius: 16px !important;
    box-shadow: 0 4px 15px var(--box-shadow, rgba(0, 0, 0, 0.05)) !important;
    border: 1px solid var(--border-color, #f1f1f1) !important;
    border-top: none !important;
    overflow: hidden;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.theme-dark.adminDashboard .box {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(209, 213, 219, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.adminDashboard .box:hover {
    box-shadow: 0 8px 25px var(--box-shadow, rgba(0, 0, 0, 0.1)) !important;
}

.adminDashboard .box-header {
    padding: 20px 25px !important;
    border-bottom: 1px solid var(--border-color, #f1f1f1) !important;
    background: transparent !important;
}

.theme-dark.adminDashboard .box-header {
    border-bottom-color: rgba(209, 213, 219, 0.1) !important;
}

.adminDashboard .box-header .box-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--color, #4b566b) !important;
}

.adminDashboard .box-header i {
    color: var(--primaryColor) !important;
    margin-right: 8px;
}

.adminDashboard .box-body {
    padding: 25px !important;
}

.adminDashboard .box-footer {
    padding: 15px 25px !important;
    border-top: 1px solid var(--border-color, #f1f1f1) !important;
    background: var(--soft-background, #f8f8f8) !important;
}

.theme-dark.adminDashboard .box-footer {
    border-top-color: rgba(209, 213, 219, 0.1) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.adminDashboard .box-widget.widget-user,
.adminDashboard .box-widget.widget-user-2 {
    border-radius: 16px !important;
}

.adminDashboard .widget-user-header {
    border-radius: 16px 16px 0 0 !important;
    padding: 30px 25px !important;
    background: linear-gradient(135deg, var(--primaryColor) 0%, #007bb5 100%) !important;
}

.adminDashboard .widget-user-username {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.adminDashboard .widget-user-image>img {
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.adminDashboard .nav-stacked>li {
    border-bottom: 1px solid var(--border-color, #f1f1f1) !important;
}

.theme-dark.adminDashboard .nav-stacked>li {
    border-bottom-color: rgba(209, 213, 219, 0.1) !important;
}

.adminDashboard .nav-stacked>li:last-child {
    border-bottom: none !important;
}

.adminDashboard .nav-stacked>li>a {
    padding: 12px 20px !important;
    color: var(--color, #4b566b) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
}

.adminDashboard .nav-stacked>li>a:hover {
    background: var(--soft-background, #f9f9f9) !important;
    color: var(--primaryColor) !important;
    padding-left: 25px !important;
}

.theme-dark.adminDashboard .nav-stacked>li>a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.adminDashboard .nav-stacked .badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

.adminDashboard .table {
    margin-bottom: 0 !important;
}

.adminDashboard .table th {
    background: var(--soft-background, #f8f9fa) !important;
    color: var(--color, #4b566b) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color, #f1f1f1) !important;
    padding: 15px !important;
}

.theme-dark.adminDashboard .table th {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom-color: rgba(209, 213, 219, 0.2) !important;
}

.adminDashboard .table td {
    padding: 15px !important;
    vertical-align: middle !important;
    color: var(--color, #4b566b) !important;
    border-top: 1px solid var(--border-color, #f1f1f1) !important;
}

.theme-dark.adminDashboard .table td {
    border-top-color: rgba(209, 213, 219, 0.1) !important;
}

.adminDashboard .table tr:hover td {
    background: var(--soft-background, #fcfcfc) !important;
}

.theme-dark.adminDashboard .table tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

.adminDashboard .modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}

.adminDashboard .modal-header {
    background: linear-gradient(135deg, var(--primaryColor) 0%, #007bb5 100%) !important;
    color: #fff !important;
    padding: 20px 25px !important;
}

.adminDashboard .modal-header h4 {
    font-weight: 700 !important;
}

.adminDashboard .modal-footer {
    padding: 15px 25px !important;
    background: var(--soft-background, #f8f8f8) !important;
}

.adminDashboard .info-box {
    border-radius: 16px !important;
    box-shadow: 0 4px 15px var(--box-shadow, rgba(0, 0, 0, 0.05)) !important;
    border: 1px solid var(--border-color, #f1f1f1) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.adminDashboard .info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--box-shadow, rgba(0, 0, 0, 0.1)) !important;
}

.adminDashboard .info-box-icon {
    border-radius: 16px 0 0 16px !important;
    background: rgba(var(--primaryColorRGB), 0.1) !important;
    color: var(--primaryColor) !important;
}

.adminDashboard .form-control {
    border-radius: 10px !important;
    border: 1px solid var(--border-color, #d1d5db) !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease !important;
}

.adminDashboard .form-control:focus {
    border-color: var(--primaryColor) !important;
    box-shadow: 0 0 0 3px rgba(var(--primaryColorRGB), 0.1) !important;
}

.theme-dark.adminDashboard .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.adminDashboard .breadcrumb {
    background: transparent !important;
    padding: 8px 0 !important;
    margin-bottom: 20px !important;
}

.adminDashboard .breadcrumb>li+li:before {
    content: "\f105" !important;
    font-family: FontAwesome;
    color: #cbd5e0;
}

.adminDashboard .breadcrumb a {
    color: var(--primaryColor) !important;
    font-weight: 500;
}

.adminDashboard .activities_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adminDashboard .activities_item {
    padding: 15px !important;
    border-radius: 12px !important;
    background: var(--soft-background, #f8f8f8) !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease;
}

.adminDashboard .activities_item:hover {
    background: #fff !important;
    border-color: var(--primaryColor) !important;
    box-shadow: 0 4px 12px var(--box-shadow, rgba(0, 0, 0, 0.05)) !important;
}

.theme-dark.adminDashboard .activities_item {
    background: rgba(255, 255, 255, 0.03) !important;
}

.adminDashboard .profile_flex {
    display: flex !important;
    align-items: center;
    gap: 20px;
}

.adminDashboard .widget-user-header.profile {
    background-image: linear-gradient(135deg, rgba(var(--primaryColorRGB), 0.9) 0%, rgba(0, 123, 181, 0.9) 100%) !important;
}

.adminDashboard .widget-user .widget-user-image {
    top: 90px !important;
}

.adminDashboard .widget-user .box-footer {
    padding-top: 50px !important;
}

.adminDashboard .widget-user .description-header {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.adminDashboard .widget-user .description-text {
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.adminDashboard .widget-user .border-right {
    border-right: 1px solid var(--border-color, #f1f1f1) !important;
}

.theme-dark.adminDashboard .widget-user .border-right {
    border-right-color: rgba(209, 213, 219, 0.1) !important;
}

.adminDashboard .widget-user-header.profile {
    min-height: 140px;
}

.adminDashboard .widget-user .profile_btn {
    text-align: center;
    border-top: 1px solid var(--border-color, #f1f1f1) !important;
}

.adminDashboard .widget-user .profile_btn a {
    display: block;
    padding: 12px;
    color: var(--primaryColor) !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.adminDashboard .widget-user .profile_btn a:hover {
    background: rgba(var(--primaryColorRGB), 0.05);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primaryColorRGB), 0.4);
}

/* Item List Redesign
================================================== */
.itemListTable.card {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: var(--card-color, #fff);
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.theme-dark .itemListTable.card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.itemListTable.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.itemListTable .card-header {
    background: transparent;
    padding: 25px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 15px;
}

.theme-dark .itemListTable .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.itemListTable .card-header .left h4 {
    font-weight: 700;
    color: var(--color, #1e293b);
    display: flex;
    align-items: center;
    gap: 15px;
}

.itemListTable .card-header .left h4 i {
    font-size: 1.5rem;
    color: var(--primaryColor, #3c8dbc);
    transition: transform 0.3s ease;
}

.itemListTable .card-header .left h4:hover i {
    transform: translateX(-5px);
}

.itemListTable .card-header .right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.itemListTable #search_items {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    transition: all 0.3s ease;
    width: 250px;
    background: var(--soft-background, #f8fafc);
}

.theme-dark .itemListTable #search_items {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.itemListTable #search_items:focus {
    border-color: var(--primaryColor, #3c8dbc);
    box-shadow: 0 0 0 4px rgba(60, 141, 188, 0.15);
    width: 280px;
}

.subcategoryButton {
    padding: 15px 30px;
}

.subcategoryButton .scroll-menu {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.subcategoryButton .scroll-menu::-webkit-scrollbar {
    display: none;
}

.subcategoryButton .scroll-menu .btn {
    border-radius: 10px;
    padding: 8px 18px !important;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.subcategoryButton .scroll-menu .btn-secondary {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--color, #64748b) !important;
}

.theme-dark .subcategoryButton .scroll-menu .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

.subcategoryButton .scroll-menu .btn-success {
    background: var(--primaryColor, #3c8dbc) !important;
    box-shadow: 0 4px 12px rgba(60, 141, 188, 0.25);
    color: #fff !important;
}

.itemListTable .table {
    margin: 0;
}

.itemListTable .table thead th {
    background: var(--soft-background, #f8fafc);
    border: none;
    padding: 15px 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color, #64748b);
}

.theme-dark .itemListTable .table thead th {
    background: rgba(255, 255, 255, 0.02);
}

.itemListTable .table tbody tr {
    transition: all 0.3s ease;
}

.itemListTable .table tbody tr:hover {
    background: rgba(0, 0, 0, 0.01) !important;
}

.theme-dark .itemListTable .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

.itemListTable .table td {
    padding: 20px;
    vertical-align: middle !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.theme-dark .itemListTable .table td {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.itemListTable .serviceImgs {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
    transition: transform 0.3s ease;
}

.theme-dark .itemListTable .serviceImgs {
    border-color: rgba(255, 255, 255, 0.1);
}

.itemListTable tr:hover .serviceImgs {
    transform: scale(1.1) rotate(2deg);
}

.itemListTable .serviceImgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itemListTable .label {
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    border: none;
}

.itemListTable .label-success {
    background: rgba(76, 175, 80, 0.1) !important;
    color: #4CAF50 !important;
}

.itemListTable .label-danger {
    background: rgba(244, 67, 54, 0.1) !important;
    color: #F44336 !important;
}

.itemListTable .bg-success-soft {
    background: rgba(76, 175, 80, 0.1) !important;
    color: #4CAF50 !important;
}

.itemListTable .bg-info-soft {
    background: rgba(33, 150, 243, 0.1) !important;
    color: #2196F3 !important;
}

.itemListTable .change_status {
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none !important;
}

.itemListTable .change_status:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.itemListTable .action .btn-group {
    display: flex;
    gap: 8px;
}

.itemListTable .action .btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    border: none;
}

.itemListTable .action .btn i {
    font-size: 1rem;
}

.itemListTable .action .btn:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.itemListTable .action .btn-info {
    background: #3c8dbc !important;
    color: #fff !important;
}

.itemListTable .action .btn-warning {
    background: #ffc107 !important;
    color: #fff !important;
}

.itemListTable .action .btn-secondary {
    background: #6c757d !important;
    color: #fff !important;
}

.itemListTable .action .btn-danger {
    background: #f44336 !important;
    color: #fff !important;
}

.itemListTable .action .bg-info-soft {
    width: auto;
    padding: 0 15px;
    color: #3c8dbc;
}

.back-icon-circle {
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--color, #1e293b);
}

.theme-dark .back-icon-circle {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.back-icon-circle:hover {
    background: var(--primaryColor, #3c8dbc) !important;
    color: #fff !important;
    transform: scale(1.1);
}

.category-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.search-box-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--color, #64748b);
    opacity: 0.6;
    pointer-events: none;
    z-index: 10;
}

.itemListTable #search_items {
    padding-left: 35px !important;
}

.text-primary {
    color: var(--primaryColor, #3c8dbc) !important;
}

.itemListTable .table tr td:first-child {
    font-weight: 600;
    color: var(--primaryColor, #3c8dbc);
}

.searchTable {
    width: 100%;
    margin-top: 15px;
}

.searchTable thead th {
    background: var(--soft-background, #f8fafc);
    padding: 15px;
    border: none;
    font-weight: 600;
    color: var(--color, #64748b);
    text-transform: uppercase;
    font-size: 0.75rem;
}

.searchTable td {
    padding: 15px;
    vertical-align: middle !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.theme-dark .searchTable thead th {
    background: rgba(255, 255, 255, 0.02);
}

.theme-dark .searchTable td {
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* Category Grid Redesign
================================================== */
.category-card-wrapper {
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.single_cat {
    background: var(--card-color, #fff);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.theme-dark .single_cat {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(15px);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.single_cat:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--primaryColor, #3c8dbc);
}

.theme-dark .single_cat:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.cat-image-container {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.single_cat img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-radius: 0 !important;
}

.single_cat:hover img {
    transform: scale(1.15);
}

.catDetails {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catDetails h4 {
    font-weight: 700;
    margin: 0;
    color: var(--color, #1e293b);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.single_cat:hover .catDetails h4 {
    color: var(--primaryColor, #3c8dbc);
}

.item-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(60, 141, 188, 0.1);
    color: var(--primaryColor, #3c8dbc);
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 12px;
    transition: all 0.3s ease;
}

.single_cat:hover .item-count-badge {
    background: var(--primaryColor, #3c8dbc);
    color: #fff !important;
    transform: scale(1.05);
}

.cat-footer {
    display: flex;
    justify-content: center;
    margin-top: auto;
}

.cat-items-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 15px 10px;
    background: rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0 0 20px 20px;
    width: 100%;
}

.preview-item-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 30%;
    border-right: 1px dotted var(--border-color);
}

.preview-item-column:last-child {
    border-right: none;
}

.preview-item-square {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.theme-dark .preview-item-square {
    background: #1e293b;
}

.preview-item-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item-name {
    font-size: 0.75rem;
    color: var(--color, #64748b);
    font-weight: 500;
    text-align: center;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-dark .preview-item-name {
    color: #94a3b8;
}

.single_cat:hover .preview-item-name {
    color: var(--primaryColor, #3c8dbc);
}

.preview-item-square {
    width: 45px;
    height: 45px;
}

.preview-item-square {
    width: 45px;
    height: 45px;
}

.preview-item-square {
    width: 45px;
    height: 45px;
}

.cat-items-preview {
    padding: 15px;
    gap: 15px;
}

.preview-item-square {
    width: 50px;
    height: 50px;
    border-radius: 12px;
}

.preview-item-name {
    font-size: 0.8rem;
}

.preview-item-square {
    width: 42px;
    height: 42px;
}

.preview-item-name {
    font-size: 0.75rem;
}

/* Global Search Bar Redesign */
.global-search-container {
    background: transparent;
    padding: 25px;
    margin-bottom: 20px;
}

.modern-search-wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

#search_items_global {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 14px 20px 14px 45px !important;
    height: auto !important;
    font-size: 1rem;
    background: var(--card-color, #fff);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.theme-dark #search_items_global {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#search_items_global:focus {
    border-color: var(--primaryColor, #3c8dbc);
    box-shadow: 0 8px 25px rgba(60, 141, 188, 0.15);
    transform: translateY(-2px);
}

.global-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primaryColor, #3c8dbc);
    font-size: 1.2rem;
    z-index: 5;
}

/* Empty State / Import UI */
.modern-import-card {
    border-radius: 20px;
    border: 2px dashed rgba(60, 141, 188, 0.2);
    background: rgba(60, 141, 188, 0.02);
    text-align: center;
    padding: 40px;
    transition: all 0.3s ease;
}

.theme-dark .modern-import-card {
    background: rgba(60, 141, 188, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
}

.modern-import-card:hover {
    background: rgba(60, 141, 188, 0.05);
    border-color: var(--primaryColor, #3c8dbc);
}

/* Reservation Dashboard Redesign
================================================== */
.reservation-dashboard-wrapper {
    padding: 10px;
}

/* Modern Filter Panel */
.modern-filter-panel {
    background: var(--card-color, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 15px var(--box-shadow, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-color, #f1f1f1);
    overflow: hidden;
}

.theme-dark .modern-filter-panel {
    background: var(--card-color, rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.1);
}

.filter-header {
    padding: 15px 20px;
    background: var(--soft-background, #f9f9f9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-dark .filter-header {
    background: rgba(255, 255, 255, 0.02);
}

.filter-header:hover {
    background: var(--border-color, #f1f1f1);
}

.filter-header .left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--color, #4b566b);
}

.filter-header .left i {
    font-size: 1.2rem;
    color: var(--primaryColor);
}

.filter-body-collapse {
    padding: 20px;
    border-top: 1px solid var(--border-color, #f1f1f1);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Reservation Card Grid */
.reservation-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.reservation-item-card {
    background: var(--card-color, #fff);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--border-color, #f1f1f1);
    box-shadow: 0 4px 12px var(--box-shadow, rgba(0, 0, 0, 0.03));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.theme-dark .reservation-item-card {
    background: var(--card-color, rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.1);
}

.reservation-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px var(--box-shadow, rgba(0, 0, 0, 0.08));
    border-color: var(--primaryColor);
}

.card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uid-tag {
    background: var(--soft-background, #f0f4f8);
    color: var(--primaryColor);
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
}

.theme-dark .uid-tag {
    background: rgba(255, 255, 255, 0.1);
}

/* Status Badges */
.status-badge-modern {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending .status-badge-modern {
    background: #fff8dd;
    color: #ff9900;
}

.status-confirmed .status-badge-modern {
    background: #e8fff3;
    color: #50cd89;
}

.status-accepted .status-badge-modern {
    background: #f1faff;
    color: #009ef7;
}

.status-completed .status-badge-modern {
    background: #e8fff3;
    color: #50cd89;
}

.status-canceled .status-badge-modern {
    background: #fff5f8;
    color: #f1416c;
}

.status-pending .status-badge-modern {
    background: rgba(255, 153, 0, 0.2) !important;
    color: #ff9900;
}

.status-confirmed .status-badge-modern {
    background: rgba(80, 205, 137, 0.2) !important;
    color: #50cd89;
}

.status-accepted .status-badge-modern {
    background: rgba(0, 158, 247, 0.2) !important;
    color: #009ef7;
}

.status-completed .status-badge-modern {
    background: rgba(80, 205, 137, 0.2) !important;
    color: #50cd89;
}

.status-canceled .status-badge-modern {
    background: rgba(241, 65, 108, 0.2) !important;
    color: #f1416c;
}

/* Customer Profile */
.customer-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-initials {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--activeColor) 0%, #007bb5 100%);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px rgba(0, 158, 247, 0.2);
}

.profile-details h4 {
    margin: 0 0 3px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color, #4b566b);
}

.contact-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-links a {
    color: var(--color, #6c757d);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-links a:hover {
    color: var(--primaryColor);
}

/* Reservation Meta */
.reservation-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--soft-background, #f9f9f9);
    padding: 12px;
    border-radius: 12px;
}

.theme-dark .reservation-meta {
    background: rgba(255, 255, 255, 0.03);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color, #4b566b);
}

.meta-item i {
    color: var(--primaryColor);
    font-size: 1rem;
    width: 16px;
}

/* Reservation Comment */
.reservation-comment {
    background: #fff8dd;
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    gap: 10px;
}

.theme-dark .reservation-comment {
    background: rgba(255, 248, 221, 0.1);
}

.reservation-comment i {
    color: #ff9900;
    margin-top: 3px;
}

.reservation-comment p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color, #4b566b);
    font-style: italic;
}

/* Card Footer Actions */
.card-footer-actions {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--border-color, #f1f1f1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-ago {
    font-size: 0.75rem;
    color: var(--color, #6c757d);
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-dropdown .btn {
    border-radius: 8px;
    font-weight: 600;
}

.rotate-180 {
    transform: rotate(180deg);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

/* Pagination Modern */
.pagination-wrapper .pagination {
    display: inline-flex;
    gap: 5px;
}

.pagination-wrapper .pagination li a,
.pagination-wrapper .pagination li span {
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #f1f1f1) !important;
    color: var(--color, #4b566b);
    padding: 8px 14px;
    transition: all 0.3s ease;
}

.pagination-wrapper .pagination li.active span {
    background: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: #fff !important;
}

.pagination-wrapper .pagination li a:hover {
    background: var(--primaryColor-soft, #f1faff);
    color: var(--primaryColor);
}

/* View Switcher */
.view-switcher {
    display: flex;
    background: var(--background-soft, #f1f1f1);
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
}

.theme-dark .view-switcher {
    background: #2d3748;
    border-color: rgba(255, 255, 255, 0.1);
}

.view-btn {
    border: none !important;
    background: transparent !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--color-light, #6c757d) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.theme-dark .view-btn {
    color: #a0aec0 !important;
}

.view-btn:hover {
    color: var(--primary-color) !important;
}

.view-btn.active {
    background: var(--card-color, #fff) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.theme-dark .view-btn.active {
    background: #4a5568 !important;
    color: #fff !important;
}

/* Modern Table */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.modern-table thead th {
    border: none;
    color: var(--color, #6c757d);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 10px 20px;
}

.modern-table tbody tr {
    background: var(--card-color, #fff);
    box-shadow: 0 2px 8px var(--box-shadow, rgba(0, 0, 0, 0.02));
    transition: transform 0.2s ease;
}

.theme-dark .modern-table tbody tr {
    background: rgba(255, 255, 255, 0.03);
}

.modern-table tbody tr:hover {
    transform: scale(1.005);
}

.modern-table tbody td {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color, #f1f1f1);
    border-bottom: 1px solid var(--border-color, #f1f1f1);
    vertical-align: middle;
}

.modern-table tbody td:first-child {
    border-left: 1px solid var(--border-color, #f1f1f1);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.modern-table tbody td:last-child {
    border-right: 1px solid var(--border-color, #f1f1f1);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.theme-dark .modern-table tbody td {
    border-color: rgba(255, 255, 255, 0.05);
}

.table-customer .customer-name {
    font-weight: 600;
    color: var(--color, #4b566b);
}

.table-meta .meta-date {
    color: var(--color, #4b566b);
    font-weight: 500;
}

.btn-light-soft {
    background: var(--soft-background, #f8f9fa);
    color: var(--color, #6c757d);
    border: 1px solid var(--border-color, #f1f1f1);
    transition: all 0.3s ease;
}

.btn-light-soft:hover {
    background: var(--primaryColor-soft, #f1faff);
    color: var(--primaryColor);
    border-color: var(--primaryColor-soft);
}

.list-view,
.grid-view {
    animation: fadeIn 0.4s ease;
}

/* Quick View Side Panel */
.orderList_ajax_area {
    position: fixed;
    right: -100%;
    top: 0;
    width: 450px;
    height: 100%;
    background: var(--card-color, #fff);
    z-index: 99999;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-dark .orderList_ajax_area {
    background: #1a202c !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
}

.orderList_ajax_area.active {
    right: 0 !important;
}

.orderList_ajax_area.left {
    left: auto !important;
    right: -100% !important;
}

.orderList_ajax_area.left.active {
    right: 0 !important;
    left: auto !important;
}

.order-quick-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.quick-view-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-color);
}

.quick-view-header .title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-view-header h4 {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    color: var(--color);
}

.close_view {
    font-size: 1.4rem;
    color: var(--color-light);
    transition: 0.3s;
}

.close_view:hover {
    color: #ff5b5b;
    transform: rotate(90deg);
}

.quick-view-content {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

.order-main-info-card {
    background: var(--background-soft);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
}

.order-id-badge {
    display: flex;
    flex-direction: column;
}

.order-id-badge .label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-light);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.order-id-badge .value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primaryColor);
}

.order-type-badge-modern {
    background: var(--primaryColor);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
    color: #fff;
}

.contextual-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 15px;
}

.info-pill-modern {
    background: var(--background-soft);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color);
    border: 1px solid var(--border-color);
}

.info-pill-modern i {
    color: var(--primary-color);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.modern-detail-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    background: var(--card-color);
}

.card-section-title {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    padding: 8px 15px;
    letter-spacing: 1px;
    background: var(--primary-color);
    border-radius: 6px;
    display: inline-block;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13.5px;
}

.detail-row .label {
    color: var(--color-light);
    font-weight: 500;
}

.detail-row .value {
    font-weight: 700;
    text-align: right;
    color: var(--color);
}

.quick-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 13.5px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}

.quick-item:last-child {
    border-bottom: none;
}

.quick-item .item-main {
    display: flex;
    gap: 10px;
    width: 75%;
}

.quick-item .qty {
    font-weight: 800;
    color: var(--primary-color);
    background: var(--primary-color-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    height: fit-content;
}

.quick-item .name {
    font-weight: 600;
    color: var(--color);
}

.quick-item .price {
    font-weight: 700;
    color: var(--color);
}

.quick-price-summary {
    margin-top: 20px;
    padding: 15px;
    background: var(--background-soft);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--color);
}

.summary-row.total {
    margin-top: 8px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color);
    border-top: 2px solid var(--primary-color);
    padding-top: 12px;
}

.quick-view-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.quick-view-actions .btn {
    border-radius: 12px;
    padding: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
}

.btn-outline-primary {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* In-line status badges for List/Grid */
.status-badge-modern {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.status-pending {
    background: #fff8e1;
    color: #ff8f00;
}

.status-accepted {
    background: #e3f2fd;
    color: #1976d2;
}

.status-completed {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-canceled {
    background: #ffebee;
    color: #c62828;
}

.status-pending {
    background: rgba(255, 143, 0, 0.1) !important;
    color: #ffb74d;
}

.status-accepted {
    background: rgba(25, 118, 210, 0.1) !important;
    color: #64b5f6;
}

.status-completed {
    background: rgba(46, 125, 50, 0.1) !important;
    color: #81c784;
}

.status-canceled {
    background: rgba(198, 40, 40, 0.1) !important;
    color: #e57373;
}

/* Grid Specific Layout */
.reservation-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.order-id {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 16px;
}

.badge-mini {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.meta-pill {
    background: var(--background-soft);
    padding: 5px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.meta-pill.primary {
    background: var(--primary-color-soft);
    color: var(--primary-color);
}

.meta-pill .label {
    opacity: 0.7;
    font-weight: 500;
}

.meta-pill .value {
    font-weight: 700;
}

.meta-row-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.merge-indicator {
    position: absolute;
    top: 40px;
    right: 20px;
    font-size: 10px;
    color: var(--primary-color);
    background: var(--primary-color-soft);
    padding: 2px 8px;
    border-radius: 4px;
}

.rating-stars-modern {
    position: absolute;
    bottom: 85px;
    right: 20px;
    color: #ffc107;
    font-size: 12px;
}

.reservation-item-card {
    position: relative;
    overflow: visible;
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    transition: 0.3s;
}

.reservation-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--box-shadow-soft);
}

/* List Specific Layout */
.modern-table-list {
    border-collapse: separate;
    border-spacing: 0 12px;
    background: transparent !important;
}

.modern-table-list thead th {
    border: none;
    padding: 15px 20px;
    font-weight: 600;
    color: var(--color-light);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

.modern-table-list tbody tr {
    background: var(--card-color);
    transition: all 0.3s;
    box-shadow: 0 2px 10px var(--box-shadow-soft);
}

.modern-table-list tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px var(--box-shadow-soft);
}

.modern-table-list tbody td {
    border: none;
    padding: 20px;
    vertical-align: middle;
}

.modern-table-list tbody tr td:first-child {
    border-radius: 12px 0 0 12px;
}

.modern-table-list tbody tr td:last-child {
    border-radius: 0 12px 12px 0;
}

.uid-modern {
    font-weight: 700;
    color: var(--primary-color);
}

.time-ago-mini {
    font-size: 11px;
    opacity: 0.6;
}

.customer-info-list {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-sm {
    width: 35px;
    height: 35px;
    background: var(--primary-color-soft);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}

.customer-info-list .details {
    display: flex;
    flex-direction: column;
}

.customer-info-list .name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color);
}

.customer-info-list .phone {
    font-size: 12px;
}

.order-type-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.type-badge {
    background: var(--background-soft);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 11px;
    display: inline-block;
    width: fit-content;
    color: var(--color-light);
}

.status-badge-modern.list {
    padding: 4px 12px;
    font-size: 11px;
}

.status-cell-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.right-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.right-actions .btn {
    padding: 8px 15px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* Card Actions Bottom Refinement */
.reservation-item-card .card-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: 15px;
}

.time-info {
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.time-info .get_time {
    font-size: 11px !important;
    font-weight: 600;
}

.order-actions-modern {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-icon-modern {
    background: var(--background-soft) !important;
    color: var(--color-light) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.btn-icon-modern:hover {
    background: var(--primary-color-soft) !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}

.edit-btn:hover {
    background: rgba(0, 123, 255, 0.1) !important;
    color: #007bff !important;
}

.quick_view:hover {
    background: rgba(40, 167, 69, 0.1) !important;
    color: #28a745 !important;
}

/* Modern Info Boxes (Earnings) */
.info-box {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px var(--box-shadow-soft) !important;
    min-height: 80px !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden !important;
    margin-bottom: 25px !important;
    background: var(--card-color) !important;
}

.info-box-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    width: 70px !important;
}

.info-box-content {
    padding: 10px 15px !important;
    color: var(--color) !important;
}

.info-box-text {
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 5px !important;
}

.info-box-number {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.info-box.bg-red,
.info-box.bg-red .info-box-icon {
    background: #ff5b5b !important;
    color: #fff !important;
}

.info-box.bg-green,
.info-box.bg-green .info-box-icon {
    background: #28a745 !important;
    color: #fff !important;
}

.info-box.bg-purple,
.info-box.bg-purple .info-box-icon {
    background: #a55eea !important;
    color: #fff !important;
}

.info-box.bg-aqua,
.info-box.bg-aqua .info-box-icon {
    background: #45aaf2 !important;
    color: #fff !important;
}

.info-box .progress {
    background: rgba(0, 0, 0, 0.1) !important;
    height: 3px !important;
    margin: 8px 0 !important;
}

.info-box .progress-bar {
    background: #fff !important;
}

.info-box .currencyDate {
    font-size: 10px;
    opacity: 0.8;
    display: flex;
    justify-content: space-between;
}

.dropdown-menu>.divider {
    background-color: var(--border-color);
}


/* Modern Filters */
.modern-filter-wrapper {
    background: var(--soft-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 2px 10px var(--box-shadow-soft);
}

.filter-header {
    padding: 15px 25px;
    background: var(--background-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--color);
}

.filter-body-modern {
    padding: 25px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: flex-end;
}

.form-group-modern label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-light);
    margin-bottom: 8px;
}

.rotate-180 {
    transform: rotate(180deg);
}

.transition-3 {
    transition: all 0.3s;
}

/* Badge mini */
.badge-mini {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Reservation & Order Header Modern */
.reservation-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-color);
    padding: 20px 25px;
    border-radius: 16px;
    box-shadow: 0 4px 15px var(--box-shadow-soft);
    border: 1px solid var(--border-color);
}

.reservation-header-modern .left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.reservation-header-modern .right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reservation-header-modern .btn {
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.reservation-header-modern .btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.2);
}

.reservation-header-modern .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.3);
}

.reservation-item-card {
    background: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reservation-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px var(--box-shadow-soft);
}

.card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-initials {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primaryColor) 0%, #17a2b8 100%);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px var(--primary-color-soft);
}

.profile-details .name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color);
    margin-bottom: 4px;
}

.contact-links {
    display: flex;
    gap: 10px;
    font-size: 13px;
}

.contact-links a {
    color: var(--color-light);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.2s;
}

.contact-links a:hover {
    color: var(--primary-color);
}

.price-summary-row {
    display: flex;
    gap: 20px;
    background: var(--background-soft);
    padding: 12px 15px;
    border-radius: 10px;
}

.price-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-item .label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-light);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.price-item .value {
    font-weight: 700;
    color: var(--color);
    font-size: 14px;
}

.card-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}

.time-info {
    font-size: 12px;
    color: var(--color-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.right-actions a.btn.btn-primary-soft {
    border: 1px solid var(--activeColor) !important;
    color: var(--activeColor);
}

/* Fix z-index stacking issues for modern dropdowns in tables/lists/cards */
.dropdown-modern.show,
.dropdown-modern.open {
    position: relative;
    z-index: 9999 !important;
}

.dropdown-modern .dropdown-menu {
    z-index: 99999 !important;
}

/* Ensure the parent row/card has higher stack priority when its dropdown is open */
.modern-table-list tbody tr:has(.dropdown-modern.show),
.modern-table-list tbody tr:has(.dropdown-modern.open) {
    position: relative;
    z-index: 999 !important;
}

.reservation-item-card:has(.dropdown-modern.show),
.reservation-item-card:has(.dropdown-modern.open) {
    position: relative;
    z-index: 999 !important;
}


.sidebar-menu>li.treeview.active>a,
.sidebar-menu>li.treeview.menu-open>a {
    border-radius: 12px 12px 0 0 !important;
}


/* ============================================================
   ORDER CONFIGURATION - Modern UI Styles
   ============================================================ */

/* Page Header */
.config-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding: 24px 28px;
    background: var(--card-color, #fff);
    border-radius: 16px;
    border: 1px solid var(--border-color, #f1f1f1);
    box-shadow: 0 2px 12px var(--box-shadow, rgba(0, 0, 0, 0.04));
}

.theme-dark .config-page-header {
    background: var(--card-color, rgba(255, 255, 255, 0.06));
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.config-page-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primaryColor, #009ef7) 0%, #0056b3 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.config-page-title h4 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color, #1e293b);
}

.config-page-title p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color, #64748b);
    opacity: 0.7;
}

/* Config Section Cards */
.config-section {
    background: var(--card-color, #fff);
    border-radius: 16px;
    border: 1px solid var(--border-color, #f1f1f1);
    box-shadow: 0 2px 12px var(--box-shadow, rgba(0, 0, 0, 0.04));
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.theme-dark .config-section {
    background: var(--card-color, rgba(255, 255, 255, 0.06));
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.config-section:hover {
    box-shadow: 0 6px 24px var(--box-shadow, rgba(0, 0, 0, 0.08));
}

.theme-dark .config-section:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Section Header */
.config-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color, #f1f1f1);
    background: var(--soft-background, #f8fafc);
}

.theme-dark .config-section-header {
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.03);
}

.config-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.config-section-icon.icon-blue {
    background: linear-gradient(135deg, var(--primaryColor, #009ef7) 0%, #007bb5 100%);
}

.config-section-icon.icon-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.config-section-icon.icon-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.config-section-icon.icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.config-section-icon.icon-rose {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}

.config-section-icon.icon-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.config-section-icon.icon-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.config-section-icon.icon-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.config-section-header h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color, #1e293b);
}

.config-section-header .section-subtitle {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    color: var(--color, #64748b);
    opacity: 0.65;
}

/* Section Body */
.config-section-body {
    padding: 20px 24px;
}

/* Config Toggle Items */
.config-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .config-toggle-grid {
        grid-template-columns: 1fr;
    }
}

.config-toggle-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--soft-background, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    transition: all 0.25s ease;
    position: relative;
}

.theme-dark .config-toggle-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.config-toggle-item:hover {
    border-color: var(--primaryColor, #009ef7);
    background: var(--card-color, #fff);
    box-shadow: 0 4px 16px var(--box-shadow, rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.theme-dark .config-toggle-item:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Active state for toggle items when checked */
.config-toggle-item.is-active {
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(76, 175, 80, 0.04);
}

.theme-dark .config-toggle-item.is-active {
    border-color: rgba(76, 175, 80, 0.2);
    background: rgba(76, 175, 80, 0.08);
}

/* Order Type Config — topContent / preText layout */
.config-toggle-item .topContent {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.config-toggle-item .preText {
    flex: 1;
    min-width: 0;
}

.config-toggle-item .preText .custom-control-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color, #1e293b);
    margin-bottom: 2px;
}

.config-toggle-item .preText .text-muted small {
    font-size: 0.8rem;
    opacity: 0.65;
}

/* Order Type — checkbox options inside toggle items */
.config-toggle-item .checkbox-card {
    margin-top: 10px;
    margin-left: 60px;
}

.config-toggle-item .left_payment_op {
    margin-top: 8px;
    margin-left: 60px;
}

.config-toggle-info {
    flex: 1;
    min-width: 0;
}

.config-toggle-info .toggle-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color, #1e293b);
}

.config-toggle-info .toggle-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color, #64748b);
    opacity: 0.65;
}

.config-toggle-item .custom_badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: #fff !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Modern Toggle Switch */
.modern-switch {
    position: relative;
    flex-shrink: 0;
}

.modern-switch .switch-input {
    display: none;
}

.modern-switch .switch-slider {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    background: #cbd5e1;
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-dark .modern-switch .switch-slider {
    background: rgba(255, 255, 255, 0.15);
}

.modern-switch .switch-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.modern-switch .switch-input:checked+.switch-slider {
    background: linear-gradient(135deg, #4CAF50 0%, #43A047 100%);
}

.modern-switch .switch-input:checked+.switch-slider::after {
    transform: translateX(22px);
}

.modern-switch .switch-slider:hover {
    box-shadow: 0 0 0 4px rgba(0, 158, 247, 0.1);
}

.modern-switch .switch-input:checked+.switch-slider:hover {
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15);
}

/* Input Groups - Modern Style */
.config-input-group {
    margin-bottom: 0;
}

.config-input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color, #374151);
}

.config-input-group .input-group {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.config-input-group .input-group:focus-within {
    border-color: var(--primaryColor, #009ef7);
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.1);
}

.config-input-group .input-group .form-control {
    border: none !important;
    box-shadow: none !important;
}

.config-input-group .input-group-addon {
    background: var(--soft-background, #f1f5f9);
    border: none;
    color: var(--color, #64748b);
    font-weight: 600;
    padding: 8px 14px;
}

.theme-dark .config-input-group .input-group-addon {
    background: rgba(255, 255, 255, 0.06);
}

.config-input-group .form-control {
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.config-input-group .form-control:focus {
    border-color: var(--primaryColor, #009ef7) !important;
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.1) !important;
}

/* Modern Fieldsets */
.config-fieldset {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
    background: var(--soft-background, #f8fafc);
    transition: border-color 0.25s ease;
}

.theme-dark .config-fieldset {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.config-fieldset:hover {
    border-color: var(--primaryColor, #009ef7);
}

.config-fieldset legend {
    width: auto !important;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color, #1e293b);
    background: var(--card-color, #fff);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 16px;
}

.theme-dark .config-fieldset legend {
    background: var(--card-color, rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.1);
}

/* Radio/Checkbox Pills */
.config-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.config-radio-group .radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--card-color, #fff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color, #475569);
    transition: all 0.25s ease;
    margin: 0;
}

.theme-dark .config-radio-group .radio-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.config-radio-group .radio-pill:hover {
    border-color: var(--primaryColor, #009ef7);
    background: rgba(0, 158, 247, 0.04);
}

.config-radio-group .radio-pill input[type="radio"]:checked~span,
.config-radio-group .radio-pill input[type="radio"]:checked~.pill-text {
    color: var(--primaryColor, #009ef7);
}

/* When the radio inside is checked, style the parent pill via JS class */
.config-radio-group .radio-pill.pill-active {
    border-color: var(--primaryColor, #009ef7);
    background: rgba(0, 158, 247, 0.06);
    color: var(--primaryColor, #009ef7);
    box-shadow: 0 2px 8px rgba(0, 158, 247, 0.12);
}

.config-radio-group .radio-pill.pill-danger.pill-active {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
}

.config-radio-group .radio-pill input[type="radio"] {
    accent-color: var(--primaryColor, #009ef7);
}

/* Checkbox Groups */
.config-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.config-checkbox-group .checkbox-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--card-color, #fff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color, #475569);
    transition: all 0.25s ease;
    margin: 0;
}

.theme-dark .config-checkbox-group .checkbox-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.config-checkbox-group .checkbox-card:hover {
    border-color: var(--primaryColor, #009ef7);
}

.config-checkbox-group .checkbox-card input[type="checkbox"] {
    accent-color: var(--primaryColor, #009ef7);
}

/* Save Button */
.config-save-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color, #f1f1f1);
    background: var(--soft-background, #f8fafc);
    border-radius: 0 0 16px 16px;
}

.theme-dark .config-save-footer {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.btn-save-config {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--primaryColor, #009ef7) 0%, #0056b3 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 158, 247, 0.25);
}

.btn-save-config:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 158, 247, 0.35);
    color: #fff;
}

.btn-save-config:active {
    transform: translateY(0);
}

/* Divider within sections */
.config-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
    margin: 20px 0;
    border: none;
}

.theme-dark .config-divider {
    background: rgba(255, 255, 255, 0.06);
}

/* Input Row Grid */
.config-input-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .config-input-row {
        grid-template-columns: 1fr;
    }
}

/* Login Type Selection - horizontal pills */
.login-type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px;
    background: var(--soft-background, #f1f5f9);
    border-radius: 12px;
    margin-top: 10px;
}

.theme-dark .login-type-selector {
    background: rgba(255, 255, 255, 0.05);
}

.login-type-selector .radio-pill {
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    padding: 10px 14px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color, #64748b);
    transition: all 0.25s ease;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.login-type-selector .radio-pill.pill-active {
    background: var(--card-color, #fff);
    border-color: var(--primaryColor, #009ef7);
    color: var(--primaryColor, #009ef7);
    box-shadow: 0 2px 10px var(--box-shadow, rgba(0, 0, 0, 0.06));
}

.login-type-selector .radio-pill.pill-danger.pill-active {
    border-color: #ef4444;
    color: #ef4444;
}

.theme-dark .login-type-selector .radio-pill.pill-active {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Inline info label for fieldset-like areas */
.config-inline-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color, #1e293b);
    margin-bottom: 10px;
}

/* KDS / Checkout sub-toggle items */
.config-sub-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--card-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    transition: all 0.25s ease;
}

.theme-dark .config-sub-toggle {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.config-sub-toggle:hover {
    border-color: var(--primaryColor, #009ef7);
}

/* Section badge (NEW, etc) next to items */
.config-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    line-height: 1.5;
}

/* Checkbox as card - for checkout section */
.checkout-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkout-checkbox-row .checkbox-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--soft-background, #f8fafc);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color, #475569);
    transition: all 0.25s ease;
    margin: 0;
}

.theme-dark .checkout-checkbox-row .checkbox-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.checkout-checkbox-row .checkbox-card:hover {
    border-color: var(--primaryColor, #009ef7);
    background: rgba(0, 158, 247, 0.03);
}

.checkout-checkbox-row .checkbox-card input[type="checkbox"] {
    accent-color: var(--primaryColor, #009ef7);
}

/* Others section - triple grid */
.config-others-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 991px) {
    .config-others-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .config-others-grid {
        grid-template-columns: 1fr;
    }
}

.config-others-grid .checkbox-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--soft-background, #f8fafc);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color, #475569);
    transition: all 0.25s ease;
    margin: 0;
}

.theme-dark .config-others-grid .checkbox-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.config-others-grid .checkbox-card:hover {
    border-color: var(--primaryColor, #009ef7);
    background: rgba(0, 158, 247, 0.03);
}

.config-others-grid .checkbox-card input[type="checkbox"] {
    accent-color: var(--primaryColor, #009ef7);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Animations */
@keyframes configFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.config-section {
    animation: configFadeIn 0.4s ease forwards;
}

.config-section:nth-child(2) {
    animation-delay: 0.05s;
}

.config-section:nth-child(3) {
    animation-delay: 0.1s;
}

.config-section:nth-child(4) {
    animation-delay: 0.15s;
}

.config-section:nth-child(5) {
    animation-delay: 0.2s;
}

.config-section:nth-child(6) {
    animation-delay: 0.25s;
}

.config-section:nth-child(7) {
    animation-delay: 0.3s;
}

.config-section:nth-child(8) {
    animation-delay: 0.35s;
}

/* KDS fields checkboxes inline */
.kds-fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.kds-fields-row .checkbox-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--soft-background, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color, #475569);
    transition: all 0.2s ease;
    margin: 0;
}

.theme-dark .kds-fields-row .checkbox-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.kds-fields-row .checkbox-card:hover {
    border-color: var(--primaryColor, #009ef7);
}

.kds-fields-row .checkbox-card input[type="checkbox"] {
    accent-color: var(--primaryColor, #009ef7);
}


/* =============================================
   ORDER TYPE CONFIG — Card Styles
   ============================================= */

.order-type-card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    background: var(--soft-background, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    transition: all 0.25s ease;
    margin-bottom: 14px;
}

.theme-dark .order-type-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.order-type-card:hover {
    border-color: var(--primaryColor, #009ef7);
    background: var(--card-color, #fff);
    box-shadow: 0 4px 16px var(--box-shadow, rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.theme-dark .order-type-card:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.order-type-card.is-active {
    border-color: rgba(76, 175, 80, 0.35);
    background: rgba(76, 175, 80, 0.04);
}

.theme-dark .order-type-card.is-active {
    border-color: rgba(76, 175, 80, 0.2);
    background: rgba(76, 175, 80, 0.08);
}

/* Top row — switch + type name */
.order-type-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.order-type-info {
    flex: 1;
    min-width: 0;
}

.order-type-info .toggle-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color, #1e293b);
    margin: 0 0 2px 0;
}

.order-type-info .toggle-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color, #64748b);
    opacity: 0.65;
}

/* Payment / service charge option rows */
.order-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color, #e2e8f0);
}

.theme-dark .order-type-options {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.order-type-options .checkbox-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--card-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color, #475569);
    transition: all 0.2s ease;
    margin: 0;
}

.theme-dark .order-type-options .checkbox-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.order-type-options .checkbox-card:hover {
    border-color: var(--primaryColor, #009ef7);
    background: rgba(0, 158, 247, 0.04);
}

.order-type-options .checkbox-card input[type="checkbox"] {
    accent-color: var(--primaryColor, #009ef7);
}

/* Stagger animation for order type cards */
.order-type-card:nth-child(1) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0s;
}

.order-type-card:nth-child(2) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.05s;
}

.order-type-card:nth-child(3) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.1s;
}

.order-type-card:nth-child(4) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.15s;
}

.order-type-card:nth-child(5) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.2s;
}

.order-type-card:nth-child(6) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.25s;
}

.order-type-card:nth-child(7) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.3s;
}

.order-type-card:nth-child(8) {
    animation: configFadeIn 0.3s ease both;
    animation-delay: 0.35s;
}

@media (max-width: 768px) {
    .order-type-card {
        padding: 14px 16px;
    }

    .order-type-options {
        flex-direction: column;
    }
}


/* =============================================
   SETTINGS SIDEBAR — Modern UI Styles
   ============================================= */

.settings-sidebar {
    background: var(--card-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--box-shadow, rgba(0, 0, 0, 0.04));
    position: sticky;
    top: 90px;
}

.theme-dark .settings-sidebar {
    background: var(--card-color, #1e1e2d);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px 20px;
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.08) 0%, rgba(114, 57, 234, 0.06) 100%);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.theme-dark .sidebar-header {
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.12) 0%, rgba(114, 57, 234, 0.08) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.sidebar-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #009ef7, #7239ea);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 158, 247, 0.3);
}

.sidebar-header-text h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color, #1e293b);
    letter-spacing: -0.01em;
}

.sidebar-header-text span {
    font-size: 0.78rem;
    color: var(--color, #64748b);
    opacity: 0.6;
}

/* Sidebar Navigation */
.sidebar-nav {
    padding: 8px 10px 10px 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.theme-dark .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav ul li {
    border: none;
    margin: 0;
}

/* Nav Link */
.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color, #475569);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid transparent;
}

.sidebar-nav ul li a:hover {
    background: var(--soft-background, #f1f5f9);
    color: var(--primaryColor, #009ef7);
    border-color: rgba(0, 158, 247, 0.08);
    transform: translateX(3px);
}

.theme-dark .sidebar-nav ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
}

/* Active Link */
.sidebar-nav ul li a.active {
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.1) 0%, rgba(114, 57, 234, 0.06) 100%);
    color: var(--primaryColor, #009ef7);
    font-weight: 600;
    border-color: rgba(0, 158, 247, 0.15);
    box-shadow: 0 2px 8px rgba(0, 158, 247, 0.08);
}

.sidebar-nav ul li a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #009ef7, #7239ea);
    border-radius: 0 3px 3px 0;
}

.theme-dark .sidebar-nav ul li a.active {
    background: linear-gradient(135deg, rgba(0, 158, 247, 0.15) 0%, rgba(114, 57, 234, 0.1) 100%);
    border-color: rgba(0, 158, 247, 0.2);
    box-shadow: 0 2px 8px rgba(0, 158, 247, 0.12);
}

/* Nav Icon */
.sidebar-nav .nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--soft-background, #f1f5f9);
    color: var(--color, #64748b);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.theme-dark .sidebar-nav .nav-icon {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav ul li a:hover .nav-icon {
    background: rgba(0, 158, 247, 0.12);
    color: var(--primaryColor, #009ef7);
}

.sidebar-nav ul li a.active .nav-icon {
    background: var(--primaryColor, #009ef7);
    color: #fff;
    box-shadow: 0 2px 8px var(--primaryColor, rgba(0, 158, 247, 0.25));
}

/* Nav Text */
.sidebar-nav .nav-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges (is_new) inside sidebar */
.sidebar-nav ul li a .custom_badge,
.sidebar-nav ul li a .badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Stagger animation */
.sidebar-nav ul li {
    animation: sidebarSlideIn 0.25s ease both;
}

.sidebar-nav ul li:nth-child(1) {
    animation-delay: 0s;
}

.sidebar-nav ul li:nth-child(2) {
    animation-delay: 0.02s;
}

.sidebar-nav ul li:nth-child(3) {
    animation-delay: 0.04s;
}

.sidebar-nav ul li:nth-child(4) {
    animation-delay: 0.06s;
}

.sidebar-nav ul li:nth-child(5) {
    animation-delay: 0.08s;
}

.sidebar-nav ul li:nth-child(6) {
    animation-delay: 0.1s;
}

.sidebar-nav ul li:nth-child(7) {
    animation-delay: 0.12s;
}

.sidebar-nav ul li:nth-child(8) {
    animation-delay: 0.14s;
}

.sidebar-nav ul li:nth-child(9) {
    animation-delay: 0.16s;
}

.sidebar-nav ul li:nth-child(10) {
    animation-delay: 0.18s;
}

.sidebar-nav ul li:nth-child(11) {
    animation-delay: 0.2s;
}

.sidebar-nav ul li:nth-child(12) {
    animation-delay: 0.22s;
}

.sidebar-nav ul li:nth-child(13) {
    animation-delay: 0.24s;
}

.sidebar-nav ul li:nth-child(14) {
    animation-delay: 0.26s;
}

.sidebar-nav ul li:nth-child(15) {
    animation-delay: 0.28s;
}

.sidebar-nav ul li:nth-child(16) {
    animation-delay: 0.3s;
}

.sidebar-nav ul li:nth-child(17) {
    animation-delay: 0.32s;
}

.sidebar-nav ul li:nth-child(18) {
    animation-delay: 0.34s;
}

@keyframes sidebarSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile — horizontal scroll sidebar */
@media (max-width: 768px) {
    .settings-sidebar {
        border-radius: 12px;
        position: static;
    }

    .sidebar-header {
        padding: 14px 16px 12px 16px;
    }

    .sidebar-nav {
        max-height: none;
        padding: 6px 8px 8px 8px;
    }

    .sidebar-nav ul {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sidebar-nav ul::-webkit-scrollbar {
        display: none;
    }

    .sidebar-nav ul li a {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .sidebar-nav ul li a .nav-icon {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .sidebar-nav ul li a.active::before {
        display: none;
    }
}

.authName {
    background: linear-gradient(135deg, var(--primaryColor, var(--primaryColor)) 0%, #007bb5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.rtl_flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.btn-google-login {
    background: var(--soft-background);
    border-radius: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 2rem;
}

.btn-google-login img {
    height: 25px;
    width: 30px;
    margin-right: 1rem !important;
}

.google-auth img {
    --ratio: 100px;
    height: var(--ratio);
    width: var(--ratio);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}