/* Custom CSS untuk override filter logo */

html.color-sidebar .logo-icon {
    filter: none !important;
}

html.color-header .top-header .topbar-logo-header img {
    filter: none !important;
}

html.semi-dark .sidebar-wrapper .sidebar-header img {
    filter: none !important;
}

/* Tambahan untuk semua kemungkinan selector logo */
.logo-icon, .sidebar-header img, .topbar-logo-header img {
    filter: none !important;
}

/* Sembunyikan elemen pencarian yang tidak digunakan */
.searchbar, .search-toggle-icon {
    display: none !important;
}



/* Toggle Icon - sesuai struktur asli */
.sidebar-wrapper .sidebar-header .toggle-icon {
    cursor: pointer !important;
    color: #2dc476 !important;
    background: #e7f5ee !important;
    padding: 8px !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

.sidebar-wrapper .sidebar-header .toggle-icon i {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-wrapper .sidebar-header .toggle-icon:hover {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    transform: scale(1.1) !important;
}

/* Sembunyikan toggle icon saat sidebar tertutup di desktop */
@media (min-width: 1025px) {
    .wrapper.toggled .sidebar-wrapper .sidebar-header .toggle-icon {
        display: none !important;
    }
    
    /* Sembunyikan mobile-toggle-icon di desktop (lebih spesifik) */
    .top-header .navbar .mobile-toggle-icon {
        display: none !important;
    }
}

/* Icon Nav di Mobile */
@media (max-width: 1024px) {
    .top-header .navbar .mobile-toggle-icon {
        display: flex !important;
        cursor: pointer !important;
        color: #2dc476 !important;
        font-size: 22px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: linear-gradient(45deg, #0f834d, #2dc476) !important;
        transition: all 0.3s ease !important;
    }

    .top-header .navbar .mobile-toggle-icon:hover {
        background-color: linear-gradient(45deg, #0f834d, #2dc476) !important;
        transform: scale(1.1) !important;
    }
}

/* Backdrop untuk mobile */
.overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9 !important;
    display: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Footer untuk Mobile */
@media (max-width: 1024px) {
    .footer {
        position: fixed !important;
        bottom: 0 !important;
        left: unset !important;
        right: 0 !important;
        z-index: 2 !important;
        padding: 10px 10px !important;
        background-color: unset !important;
        margin-top: 20px !important;
        color: #ababab !important;
    }
    
    /* Tampilkan backdrop saat sidebar terbuka di mobile */
    .wrapper.toggled .overlay {
        display: block !important;
    }
    
    /* Pastikan sidebar tetap ada di atas backdrop */
    .wrapper.toggled .sidebar-wrapper {
        z-index: 10 !important;
    }
}

/* Modern Sidebar Styling */
.sidebar-wrapper {
    border-radius: 0 16px 16px 0 !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important;
    border-right: none !important;
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
}

/* Sidebar Header */
.sidebar-wrapper .sidebar-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 20px 15px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* Logo Text */
.sidebar-wrapper .sidebar-header .logo-text {
    font-weight: 700 !important;
    font-size: 2rem !important;
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Menu Items */
.sidebar-wrapper .metismenu a {
    border-radius: 10px !important;
    margin: 3px 10px !important;
    padding: 10px 15px !important;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
    color: #555 !important;
    font-weight: 500 !important;
    border-left: none !important;
}

/* Hilangkan semua transisi border */
.sidebar-wrapper .metismenu a,
.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu .mm-active>a {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Active & Hover Menu Items */
.sidebar-wrapper .metismenu .mm-active>a, 
.sidebar-wrapper .metismenu a:active, 
.sidebar-wrapper .metismenu a:focus, 
.sidebar-wrapper .metismenu a:hover {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    color: white !important;
    box-shadow: 0 5px 15px rgba(85, 171, 231, 0.2) !important;
    border-left: none !important;
    transform: translateX(5px) !important;
}

/* Icons in Menu */
.sidebar-wrapper .metismenu a .parent-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-wrapper .metismenu a .parent-icon i {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* Active state icons */
.sidebar-wrapper .metismenu .mm-active>a .parent-icon i,
.sidebar-wrapper .metismenu a:hover .parent-icon i {
    color: white !important;
    transform: scale(1.1) !important;
}

/* Toggle Icon */
.sidebar-wrapper .sidebar-header .toggle-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #2dc476 !important;
}

/* Submenu Items */
.sidebar-wrapper .metismenu ul a {
    font-size: 0.9rem !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    margin: 3px 0 !important;
}

/* Perbaikan untuk wrapper toggled dan sidebar-hovered */

/* Fix active item position when toggled */
.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .mm-active>a,
.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a:hover {
    transform: none !important;
    padding-left: 20px !important;
}

/* Ensure proper centering in toggled state */
.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
    display: flex !important;
    align-items: center !important;
    justify-content: left !important;
}

/* Parent icons in toggled state */
.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a .parent-icon {
    margin-right: 10px !important;
    font-size: 1.2rem !important;
}

/* Perbesar Background Active Icon */
.sidebar-wrapper .metismenu .mm-active>a {
    padding: 12px 20px !important;
}

.sidebar-wrapper .metismenu .mm-active>a .parent-icon {
    margin-right: 15px !important;
}

/* Sidebar Active Item - More Prominent */
.sidebar-wrapper .metismenu .mm-active>a {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    box-shadow: 0 5px 15px rgba(85, 171, 231, 0.3) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

/* Desktop Menu - atur kembali ke tengah untuk desktop */
@media (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
        justify-content: center !important;
        padding: 12px 5px !important;
    }
    
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a .parent-icon {
        margin-right: 0 !important;
    }
    
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .mm-active>a, 
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a:hover {
        padding-left: 5px !important;
    }
}

/* Footer Setting yang baru */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 10px 20px;
    background-color: #fff;
    margin-top: 20px;
    min-width: 100vh !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.footer a {
    color: #2dc476 !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.footer a:hover {
    color: #0f834d !important;
    text-decoration: underline;
}

/* Select Device Styling - Enhanced Modern Look */
.menu-item {
    position: relative;
    padding: 3px 15px;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 0;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    border: 1px solid rgba(85, 171, 231, 0.1);
}

.menu-link:hover {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    border-color: rgba(85, 171, 231, 0.2);
}

.menu-link .parent-icon {
    margin-right: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: #2dc476;
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    border-radius: 10px;
}

.menu-link .parent-icon i {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.menu-content {
    flex: 1;
    position: relative;
    padding-right: 8px;
}

/* Modern Select Styling */
select#device_idd {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff;
    color: #40475c;
    border: 1px solid rgba(45, 196, 118, 0.2);
    padding: 12px 15px;
    width: 100%;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(45, 196, 118, 0.1);
}

/* Custom Arrow */
.menu-content::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #2dc476;
    font-size: 1.2rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Hover State */
select#device_idd:hover {
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(45, 196, 118, 0.3);
    transform: translateY(-1px);
}

select#device_idd:hover + .menu-content::after {
    color: #ffffff;
    transform: translateY(-50%) rotate(180deg);
}

/* Focus State */
select#device_idd:focus {
    outline: none;
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(45, 196, 118, 0.3);
}

/* Options Styling */
select#device_idd option {
    background: #ffffff;
    color: #40475c;
    padding: 12px;
    font-weight: 500;
    border-bottom: 1px solid rgba(45, 196, 118, 0.1);
    position: relative;
}

/* Selected Option */
select#device_idd option:checked {
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: #ffffff;
    font-weight: 600;
}

/* Hover Icon Color Change */
.menu-link:hover .parent-icon {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    box-shadow: 0 4px 10px rgba(85, 171, 231, 0.3);
}

.menu-link:hover .parent-icon i {
    color: #ffffff;
    transform: scale(1.1);
}

/* Mobile Optimization */
@media (max-width: 1024px) {
    .menu-item {
        padding: 3px 10px;
    }
    
    select#device_idd {
        padding: 12px 15px;
    }
}

/* Icon Styling for Font Awesome */
.parent-icon i {
    font-size: 1.2rem !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* Active state icons */
.sidebar-wrapper .metismenu .mm-active>a .parent-icon i,
.sidebar-wrapper .metismenu a:hover .parent-icon i {
    color: white !important;
    transform: scale(1.2) !important;
}

/* Toggle Icon */
.sidebar-wrapper .sidebar-header .toggle-icon i {
    font-size: 1.4rem !important;
    color: #2dc476 !important;
}

/* Icon Styling for Heroicons */
.heroicon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

/* Icon Styling for LineIcons */
.parent-icon i {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* Active state icons */
.sidebar-wrapper .metismenu .mm-active>a .parent-icon i,
.sidebar-wrapper .metismenu a:hover .parent-icon i {
    color: white !important;
    transform: scale(1.2) !important;
}

/* Toggle Icon */
.sidebar-wrapper .sidebar-header .toggle-icon i {
    font-size: 1.4rem !important;
    color: #2dc476 !important;
}

/* Submenu Icons */
.sidebar-wrapper .metismenu ul a i {
    font-size: 0.75rem !important;
    margin-right: 8px !important;
}

/* Modern Dashboard Styling for ZAPIN by WebSee */

/* Card Styling - Modernized with softer shadows and rounded corners */

html.semi-dark .sidebar-wrapper .sidebar-header {
    background-color: #ffffff !important;
}

/* Menu Item Structure */
.menu-item {
    position: relative;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin: 3px 15px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.menu-link .parent-icon {
    margin-right: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

.menu-link .parent-icon i {
    font-size: 1.1rem;
    color: #40475c;
    transition: all 0.3s ease;
}

.menu-link:hover .parent-icon i {
    color: #ffffff;
}

.menu-content {
    flex: 1;
}

/* Select Device Styling - Match with Active Menu Items */
select#device_idd {
    background: #ffffff;
    color: #40475c;
    border: none;
    padding: 10px 15px;
    width: 100%;
    border-radius: 3px;
    font-size: 14px;
    transition: all 0.3s ease;
}

select#device_idd:hover {
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(85, 171, 231, 0.3);
    padding-left: 20px;
}

select#device_idd:focus {
    outline: none;
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(85, 171, 231, 0.3);
}

select#device_idd option {
    background: #ffffff;
    color: #40475c;
    padding: 8px;
}

/* Active Device Selection */
select#device_idd option:checked {
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: #ffffff;
}

/* Select Device in Metismenu */
.metismenu select#device_idd {
    width: 100%;
    padding: 8px 15px;
    margin: 5px 0;
    border: none;
    background: transparent;
    color: #40475c;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.metismenu select#device_idd:focus {
    outline: none;
}

.metismenu select#device_idd option {
    background: #ffffff;
    color: #40475c;
    padding: 10px;
}

.metismenu select#device_idd option:checked {
    background: #f5f7fa;
}

/* Match parent menu styling */
.metismenu .mm-collapse {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    margin: 0 15px;
    padding: 5px;
}

/* Enhanced Device Selector */
.device-selector {
    margin: 10px 15px !important;
    background: linear-gradient(135deg, rgba(45, 196, 118, 0.1), rgba(15, 131, 77, 0.1)) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(45, 196, 118, 0.2) !important;
    transition: all 0.3s ease !important;
    padding: 5px !important;
}

.device-selector:hover {
    background: linear-gradient(135deg, rgba(45, 196, 118, 0.15), rgba(15, 131, 77, 0.15)) !important;
    border-color: rgba(45, 196, 118, 0.3) !important;
}

.device-selector.switching {
    opacity: 0.7;
    pointer-events: none;
}

.device-selector.switching select#device_idd {
    background: #f8f9fa;
    cursor: wait;
}

/* Device Header */
.device-header {
    padding: 12px 15px 5px 15px !important;
    margin: 0 !important;
}

.device-header .menu-title {
    color: #2dc476 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Device List */
.device-list {
    padding: 5px 15px 15px 15px !important;
}

.device-select-wrapper {
    position: relative !important;
}

/* Select Styling */
.device-select-wrapper select {
    width: 100% !important;
    padding: 10px 15px !important;
    background: #ffffff !important;
    border: 1px solid rgba(85, 171, 231, 0.2) !important;
    border-radius: 10px !important;
    color: #40475c !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(85, 171, 231, 0.1) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.device-select-wrapper::after {
    content: '\f107' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #2dc476 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

.device-select-wrapper select:hover,
.device-select-wrapper select:focus {
    border-color: #2dc476 !important;
    box-shadow: 0 4px 12px rgba(85, 171, 231, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Option Styling */
.device-select-wrapper select option {
    padding: 12px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    color: #40475c !important;
}

.device-select-wrapper select option.device-active {
    color: #2dc476 !important;
}

.device-select-wrapper select option.device-offline {
    color: #dc3545 !important;
}

/* Status Indicators */
.device-select-wrapper select option::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
}

.device-select-wrapper select option.device-active::before {
    background-color: #2dc476 !important;
}

.device-select-wrapper select option.device-offline::before {
    background-color: #dc3545 !important;
}

/* Submenu circle icons */
.sidebar-wrapper .metismenu ul a i.fas.fa-circle {
    font-size: 0.4rem !important;
    margin-right: 8px !important;
}

/* Icon Styling for Menu Items */
.sidebar-wrapper .metismenu a .parent-icon i {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* Device Connection Icons */
.device-action-icon {
    font-size: 1rem !important;
    margin-right: 10px !important;
    color: #2dc476 !important;
}

.device-action-icon.qr {
    color: #4bad48 !important;
}

.device-action-icon.code {
    color: #ff9500 !important;
}

.device-action-icon.delete {
    color: #FF4857 !important;
}

/* Dashboard Status Icons */
.status-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
}

.status-icon.devices {
    background: rgba(85, 171, 231, 0.1) !important;
    color: #2dc476 !important;
}

.status-icon.blast {
    background: rgba(75, 173, 72, 0.1) !important;
    color: #4bad48 !important;
}

.status-icon.subscription {
    background: rgba(255, 149, 0, 0.1) !important;
    color: #ff9500 !important;
}

.status-icon.messages {
    background: rgba(97, 172, 252, 0.1) !important;
    color: #61acfc !important;
}

/* Breadcrumb Icon */
.breadcrumb-item i {
    font-size: 0.9rem !important;
    margin-right: 5px !important;
    color: #2dc476 !important;
}

/* Feature Icons */
.feature-icon {
    font-size: 1.1rem !important;
    margin-right: 10px !important;
    color: #40475c !important;
}

.feature-icon.contacts {
    color: #2dc476 !important;
}

.feature-icon.autoreply {
    color: #4bad48 !important;
}

.feature-icon.campaign {
    color: #ff9500 !important;
}

.feature-icon.message {
    color: #61acfc !important;
}

.feature-icon.api {
    color: #40475c !important;
}

/* Active State for Feature Icons */
.mm-active > a .feature-icon {
    color: #ffffff !important;
}

/* Hover Effects for Icons */
.sidebar-wrapper .metismenu a:hover .feature-icon {
    transform: scale(1.1) !important;
    color: #ffffff !important;
}

/* Status Counter Badges */
.status-counter {
    background: rgba(85, 171, 231, 0.1) !important;
    color: #2dc476 !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-left: auto !important;
}

.mm-active .status-counter {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Device Status Indicators */
.device-status {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

.device-status.connected {
    background-color: #4bad48 !important;
    box-shadow: 0 0 0 2px rgba(75, 173, 72, 0.2) !important;
}

.device-status.disconnected {
    background-color: #FF4857 !important;
    box-shadow: 0 0 0 2px rgba(255, 72, 87, 0.2) !important;
}

/* Icon Mappings - Bootstrap Icons to Font Awesome */
/* Main Icons */
.icon-whatsapp { @extend .fa-whatsapp; }
.icon-broadcast { @extend .fa-broadcast-tower; }
.icon-heart-eyes { @extend .fa-grin-hearts; }
.icon-chat-text { @extend .fa-comment-alt; }
.icon-plus { @extend .fa-plus; }
.icon-phone { @extend .fa-mobile-alt; }
.icon-qr-code { @extend .fa-qrcode; }
.icon-trash { @extend .fa-trash-alt; }

/* Alert & Notification Icons */
.icon-check-circle { @extend .fa-check-circle; }
.icon-exclamation-circle { @extend .fa-exclamation-circle; }
.icon-exclamation-triangle { @extend .fa-exclamation-triangle; }
.icon-info-circle { @extend .fa-info-circle; }

/* Navigation & UI Icons */
.icon-list { @extend .fa-bars; }
.icon-globe { @extend .fa-globe; }
.icon-gear { @extend .fa-cog; }
.icon-lock { @extend .fa-lock; }

/* Campaign & Message Icons */
.icon-tag { @extend .fa-tag; }
.icon-people { @extend .fa-users; }
.icon-chat-dots { @extend .fa-comment-dots; }
.icon-clock { @extend .fa-clock; }
.icon-calendar { @extend .fa-calendar-alt; }
.icon-eye { @extend .fa-eye; }
.icon-eye-slash { @extend .fa-eye-slash; }
.icon-arrow-left { @extend .fa-arrow-left; }
.icon-arrow-right { @extend .fa-arrow-right; }
.icon-rocket { @extend .fa-rocket; }

/* Status & Action Icons */
.icon-pause { @extend .fa-pause; }
.icon-play { @extend .fa-play; }
.icon-hourglass { @extend .fa-hourglass-half; }
.icon-check { @extend .fa-check; }

/* Document & File Icons */
.icon-file-image { @extend .fa-file-image; }
.icon-chart { @extend .fa-chart-bar; }
.icon-smile { @extend .fa-smile; }
.icon-list-ul { @extend .fa-list-ul; }
.icon-location { @extend .fa-map-marker-alt; }
.icon-person-card { @extend .fa-address-card; }
.icon-phone-x { @extend .fa-phone-slash; }
.icon-person-plus { @extend .fa-user-plus; }
.icon-person-badge { @extend .fa-user-tag; }
.icon-link { @extend .fa-link; }

/* Additional UI Icons */
.icon-search { @extend .fa-search; }
.icon-upload { @extend .fa-upload; }
.icon-download { @extend .fa-download; }
.icon-pencil { @extend .fa-pencil-alt; }
.icon-github { @extend .fa-github; }

/* Icon Sizes */
.icon-sm {
    font-size: 0.875rem !important;
}

.icon-lg {
    font-size: 1.25rem !important;
}

.icon-xl {
    font-size: 1.5rem !important;
}

/* Icon Colors */
.icon-primary {
    color: #2dc476 !important;
}

.icon-success {
    color: #4bad48 !important;
}

.icon-danger {
    color: #FF4857 !important;
}

.icon-warning {
    color: #ff9500 !important;
}

.icon-info {
    color: #61acfc !important;
}

/* Icon Containers */
.icon-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(85, 171, 231, 0.1) !important;
}

.icon-circle.icon-sm {
    width: 24px !important;
    height: 24px !important;
}

.icon-circle.icon-lg {
    width: 40px !important;
    height: 40px !important;
}

/* Icon Animations */
.icon-spin {
    animation: fa-spin 2s infinite linear !important;
}

.icon-pulse {
    animation: fa-spin 1s infinite steps(8) !important;
}

/* Icon Transitions */
.icon-hover-rotate:hover {
    transform: rotate(15deg) !important;
    transition: transform 0.3s ease !important;
}

.icon-hover-scale:hover {
    transform: scale(1.1) !important;
    transition: transform 0.3s ease !important;
}

/* Selected Device Styling */
tr[data-device-id] {
    cursor: pointer;
    transition: all 0.3s ease;
}

tr[data-device-id]:hover {
    background-color: rgba(0,0,0,0.02);
}

tr[data-device-id].selected {
    background: linear-gradient(145deg, #e2e8f0, #f8fafc);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

tr[data-device-id].selected td {
    background-color: transparent;
}

/* Device Dependent Elements */
.device-dependent {
    display: none;
}

body.has-device .device-dependent {
    display: block;
}

body.has-device .no-device-message {
    display: none;
}

.no-device-message {
    display: block;
}

/* Ensure flex display for nav items when visible */
body.has-device .nav-item.device-dependent {
    display: flex;
}

/* Device Status Colors */
.device-active {
    color: #2dc476 !important;
    font-weight: 600 !important;
    position: relative !important;
    padding-left: 20px !important;
}

.device-active::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: #2dc476 !important;
    font-size: 1.2em !important;
    animation: pulse 2s infinite !important;
}

.device-offline {
    color: #dc3545 !important;
    font-weight: 500 !important;
    position: relative !important;
    padding-left: 20px !important;
}

.device-offline::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: #dc3545 !important;
    font-size: 1.2em !important;
}

/* Device Select Wrapper */
.device-select-wrapper {
    position: relative !important;
}

/* Selected Device Display */
.selected-device-display {
    font-weight: 600 !important;
    color: #2dc476 !important;
    background: rgba(45, 196, 118, 0.1) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-top: 5px !important;
    display: inline-block !important;
}

/* Pulse Animation for Active Status */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Device Switching State */
.device-selector.switching {
    opacity: 0.7;
    pointer-events: none;
}

.device-selector.switching select#device_idd {
    background: #f8f9fa;
    cursor: wait;
}

/* Device Status Badge */
.device-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
}

.device-status-badge.active {
    background: rgba(45, 196, 118, 0.1);
    color: #2dc476;
}

.device-status-badge.offline {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* No Data Component Styles */
.no-data-container {
    text-align: center;
    padding: 2rem;
}

.no-data-container img.img-fluid {
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    display: block;
}

img.img-fluid {
    max-width: 300px !important;
}

.no-data-container .no-data-text {
    margin-top: 1rem;
    color: #6c757d;
    font-size: 1.1rem;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile Menu Styling */
@media (max-width: 1024px) {
    .sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        height: 100vh !important;
        z-index: 999 !important;
        transition: all 0.3s ease !important;
        background: #fff !important;
        width: 280px !important;
    }

    .wrapper.toggled .sidebar-wrapper {
        left: 0 !important;
        box-shadow: 0 0 15px rgba(0,0,0,0.1) !important;
    }

    .wrapper.toggled .mobile-menu-overlay {
        display: block !important;
        opacity: 1 !important;
    }

    /* Ensure content doesn't scroll when menu is open */
    body.menu-open {
        overflow: hidden !important;
    }

    /* Fix for mobile toggle icon */
    .navbar .mobile-toggle-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1000 !important;
    }
}

/* Troubleshoot header always on top */
.top-header, .top-header .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body, .wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
.page-content {
    padding-top: 20px !important;
}

.app-content .table tbody td {
    padding: 0.75rem 1rem;
    border-top: none;
    border-bottom: 1px solid #e9ecef!important;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    font-weight: 500;
    color: #444;
    vertical-align: middle;
    font-size: 0.85rem;
}

/* Button styling untuk action buttons */
.app-content .btn-xs.sharp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    width: 28px;
    height: 28px;
}

.app-content .btn-xs.sharp i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 1;
}

/* Badge info untuk tombol "Connect Via Code" */
.app-content .badge-info {
    background: linear-gradient(45deg, #2484b4, #3cbeec) !important;
    border: none;
    color: white;
}

/* Button primary untuk tombol "Connect Via QR" */
.app-content .btn-primary {
    background: linear-gradient(45deg, #0f834d, #2dc476);
    border: none;
}

/* Button danger untuk tombol delete */
.app-content .btn-danger {
    background: linear-gradient(45deg, #d92550, #f14b72);
    border: none;
}

/* Modern Table Header Gradient - Opsi 2: Gradient hanya pada thead row */
.app-content table thead tr {
    background: linear-gradient(90deg, #0f834d 0%, #2dc476 100%);
}

/* Override agar thead gradient satu baris meski ada class table-light/table-* dari Bootstrap */
.app-content .table thead,
.app-content .table thead.table-light,
.app-content .table thead[class*="table-"] {
    background: linear-gradient(90deg, #0f834d 0%, #2dc476 100%) !important;
}
.app-content .table thead th {
    background: transparent !important;
    color: #fff !important;
    border: none;
    box-shadow: none;
}

/* Pagination Spacing Fixes */

/* Add spacing between pagination items */
.pagination .page-item {
    margin: 0 3px;
}

/* Ensure the pagination items have proper spacing and alignment */
.pagination .page-link {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
}

/* Add more spacing for the Previous and Next buttons */
.pagination .page-item:first-child,
.pagination .page-item:last-child {
    margin: 0 5px;
}

/* Replace "Previous" text with an icon */
.pagination .page-item:first-child .page-link {
    font-size: 0; /* Hide the text */
}

.pagination .page-item:first-child .page-link::before {
    content: "\F26E"; /* Bootstrap icon: chevron-left */
    font-family: "bootstrap-icons";
    font-size: 0.875rem;
}

/* Replace "Next" text with an icon */
.pagination .page-item:last-child .page-link {
    font-size: 0; /* Hide the text */
}

.pagination .page-item:last-child .page-link::before {
    content: "\F285"; /* Bootstrap icon: chevron-right */
    font-family: "bootstrap-icons";
    font-size: 0.875rem;
}

/* Ensure the pagination container has proper margins */
.pagination {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    /* Remove justify-content: center to keep pagination left-aligned */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 576px) {
    .pagination .page-item {
        margin: 0 2px;
    }
    
    .pagination .page-link {
        min-width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
}

.app-content .pagination .page-item.active .page-link {
    background: linear-gradient(45deg, #0f834d, #2dc476);
    color: white;
    box-shadow: 0 3px 8px rgba(60, 121, 208, 0.25);
}

.pagination .page-item:first-child, .pagination .page-item:last-child {
    margin: 0 5px;
}

@media (max-width: 500px) {
main.page-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
}

/* Footer untuk Mobile */
@media (max-width: 1024px) {
    .footer, .footer .footer-content {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .footer .container-fluid, .footer .row, .footer .col-12 {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }
}

/* Bootstrap Primary Color Override with Gradient */
.btn-primary, .bg-primary {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    border: none !important;
    color: #fff !important;
}

/* filemanager */
nav#nav {
    background: linear-gradient(45deg, #0f834d, #2dc476) !important;
    border-radius: 8px;
}


.app-content .table thead,
.app-content .table thead.table-light,
.app-content .table thead[class*="table-"] {
    background: linear-gradient(90deg, #0f834d 0%, #2dc476 100%) !important;
}
.app-content .table thead tr,
.app-content .table thead.table-light tr,
.app-content .table thead[class*="table-"] tr {
    background: transparent !important;
}
.app-content .table thead th,
.app-content .table thead.table-light th,
.app-content .table thead[class*="table-"] th,
.app-content .table.table-light thead th,
.app-content .table.table-light thead tr th {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}


.table th {
    background: #0f834d!important;
    color: white !important;
    border: none !important;
}

/* ini buat tinggi atas bawah */

.row.row-cols-1.row-cols-lg-2.row-cols-xl-4 {
    padding-bottom: 20px;
}