/* ============================================
   CLEAN CLIENT AREA STYLING - CSS ONLY
   Works with existing WHMCS structure
   ============================================ */

/* Remove aggressive modern styles */
.modern-card,
.services-grid,
.domains-grid,
.invoices-grid,
.tickets-grid {
    all: unset !important;
}

/* Keep only the working enhancements */
/* Dashboard stat tiles - keep current working style */
.tile,
.tt-single-box {
    background: rgba(26, 26, 36, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.tile:hover,
.tt-single-box:hover {
    border-color: rgba(0, 255, 136, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 255, 136, 0.2) !important;
    transform: translateY(-5px) !important;
}

/* Keep stat number styling */
.tile .stat,
.tt-box-info .stat {
    color: #00FF88 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5) !important;
}

/* ==========================================
   SIDEBAR PANELS - Compact Professional Design
   ========================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px !important;
}

.sidebar>* {
    margin-bottom: 0 !important;
}

.sidebar .card,
.sidebar .card-sidebar,
.sidebar .panel,
.panel-sidebar,
.secondary-sidebar {
    background: rgba(12, 12, 18, 0.98) !important;
    border: 1px solid rgba(0, 255, 136, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* Card header - View, Actions titles */
.sidebar .card-header,
.sidebar .panel-heading,
.panel-sidebar .panel-heading {
    background: rgba(0, 255, 136, 0.06) !important;
    border-bottom: 1px solid rgba(0, 255, 136, 0.1) !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
    min-height: auto !important;
}

.sidebar .card-header .card-title,
.sidebar .panel-heading h3,
.sidebar .panel-heading .panel-title,
.panel-sidebar .panel-heading h3 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.sidebar .card-header .card-title i,
.sidebar .panel-heading h3 i,
.panel-sidebar .panel-heading h3 i {
    font-size: 12px !important;
    color: #00FF88 !important;
}

/* Minimize/expand arrow */
.sidebar .card-header .card-minimise,
.sidebar .card-minimise,
.panel-sidebar .panel-heading span {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s !important;
    font-size: 12px !important;
}

.sidebar .card-header:hover .card-minimise,
.panel-sidebar .panel-heading:hover span {
    color: #00FF88 !important;
}

/* Card body / list container */
.sidebar .card-body,
.sidebar .collapsable-card-body,
.sidebar .panel-body,
.panel-sidebar .list-group {
    padding: 0 !important;
    background: transparent !important;
}

/* List group - Filter items */
.sidebar .list-group,
.panel-sidebar .list-group {
    margin: 0 !important;
    border-radius: 0 !important;
}

.sidebar .list-group-item,
.panel-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    text-decoration: none !important;
}

.sidebar .list-group-item:last-child,
.panel-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

/* Hover state */
.sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    color: #00FF88 !important;
    padding-left: 18px !important;
}

/* Active state */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.panel-sidebar .list-group-item.active {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00FF88 !important;
    border-left: 3px solid #00FF88 !important;
    font-weight: 500 !important;
}

/* Filter label - left side with icon */
.sidebar .list-group-item .filter-label,
.sidebar .list-group-item>span:first-child,
.sidebar .list-group-item a,
.panel-sidebar .list-group-item a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: inherit !important;
    text-decoration: none !important;
    flex: 1;
}

.sidebar .list-group-item i,
.panel-sidebar .list-group-item i {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    width: 20px !important;
    text-align: center;
    transition: color 0.25s !important;
}

.sidebar .list-group-item:hover i,
.sidebar .list-group-item.active i,
.panel-sidebar .list-group-item:hover i,
.panel-sidebar .list-group-item.active i {
    color: #00FF88 !important;
}

/* Badge - count number (right side) */
.sidebar .list-group-item .badge,
.sidebar .list-group-item .label,
.panel-sidebar .list-group-item .badge {
    background: rgba(255, 0, 85, 0.15) !important;
    color: #FF0055 !important;
    border: 1px solid rgba(255, 0, 85, 0.4) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    min-width: 28px !important;
    text-align: center !important;
}

/* Success state badges (non-zero counts) */
.sidebar .list-group-item .badge-success,
.sidebar .list-group-item .label-success {
    background: rgba(0, 255, 136, 0.15) !important;
    color: #00FF88 !important;
    border-color: rgba(0, 255, 136, 0.4) !important;
}

/* Radio/checkbox input styling */
.sidebar .list-group-item input[type="radio"],
.sidebar .list-group-item input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: all 0.25s !important;
}

.sidebar .list-group-item input[type="radio"]:checked,
.sidebar .list-group-item input[type="checkbox"]:checked {
    background: #00FF88 !important;
    border-color: #00FF88 !important;
}

.sidebar .list-group-item input[type="radio"]:checked::after,
.sidebar .list-group-item input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #0a0a0f !important;
    font-size: 10px !important;
    font-weight: bold !important;
}

.sidebar .list-group-item:hover input[type="radio"],
.sidebar .list-group-item:hover input[type="checkbox"] {
    border-color: #00FF88 !important;
}

/* Card footer */
.sidebar .card-footer,
.panel-sidebar .panel-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 12px 20px !important;
}

/* ==========================================
   TABLES & OTHER ELEMENTS
   ========================================== */

/* Clean table styling - NO transformations */
.dataTable,
table.table {
    background: transparent !important;
}

.dataTable thead th,
table.table thead th {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3) !important;
}

.dataTable tbody tr,
table.table tbody tr {
    background: rgba(10, 10, 15, 0.4) !important;
    transition: background 0.3s !important;
}

.dataTable tbody tr:hover,
table.table tbody tr:hover {
    background: rgba(0, 255, 136, 0.08) !important;
}

.dataTable tbody td,
table.table tbody td {
    color: #a8a8b8 !important;
    border: none !important;
}

/* Status badges - keep working */
.label-success,
.badge-success {
    background: rgba(0, 255, 136, 0.2) !important;
    color: #00FF88 !important;
    border: 1px solid #00FF88 !important;
}

.label-danger,
.badge-danger {
    background: rgba(255, 0, 85, 0.2) !important;
    color: #FF0055 !important;
    border: 1px solid #FF0055 !important;
}

/* Buttons - keep current style */
.btn-primary {
    background: linear-gradient(135deg, #00FF88, #00CC66) !important;
    border: none !important;
    color: #000000 !important;
}

.btn-danger {
    background: linear-gradient(135deg, #FF0055, #FF5555) !important;
    border: none !important;
    color: #FFFFFF !important;
}

/* ==========================================
   MOBILE RESPONSIVE SIDEBAR
   ========================================== */

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

    .sidebar .card-header,
    .panel-sidebar .panel-heading {
        padding: 14px 16px !important;
    }

    .sidebar .list-group-item,
    .panel-sidebar .list-group-item {
        padding: 12px 16px !important;
    }

    .sidebar .list-group-item:hover {
        padding-left: 20px !important;
    }
}