/**
 * NordVPN-style Global CSS
 * Provides consistent styling across all pages
 */

/* Custom widget styling for NordVPN look */
.custom-widget {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.custom-widget .widget-client-header {
    background-color: #1A1A40 !important;
    color: white !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

.custom-widget .widget-client-header h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: white !important;
}

.custom-widget .widget-client-body {
    background-color: white !important;
    padding: 0 !important;
}

/* Card styling */
.invoice-card .card,
.service-card .card,
.transaction-card .card,
.order-card .card {
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

.invoice-card .card:hover,
.service-card .card:hover,
.transaction-card .card:hover,
.order-card .card:hover {
    transform: translateY(-2px) !important;
}

.empty-state {
    border-radius: 12px !important;
    background-color: #F0F7FF !important;
    padding: 2rem !important;
    text-align: center !important;
}

.empty-state-icon {
    margin-bottom: 1rem !important;
}

.empty-state-icon .rounded-circle {
    width: 64px !important;
    height: 64px !important;
    background-color: #E6F2FF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.empty-state-icon i {
    color: #007AFF !important;
}

.empty-state h5 {
    color: #1A1A40 !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.empty-state p {
    color: #5F5F7A !important;
    margin-top: 0.5rem !important;
}

/* Custom tab navigation styles */
.custom-tabs .nav-pills {
    background-color: #F5F7FA;
    border-radius: 8px;
    padding: 4px;
}

.custom-tabs .nav-link {
    border-radius: 6px;
    padding: 10px 16px;
    color: #5F5F7A;
    font-weight: 500;
    margin: 2px;
    transition: all 0.2s ease;
}

.custom-tabs .nav-link:hover {
    background-color: #E6F2FF;
    color: #1A1A40;
}

.custom-tabs .nav-link.active {
    background-color: #007AFF;
    color: white;
}

.custom-tabs .nav-link.active:hover {
    background-color: #085EC6;
}

.custom-tabs .badge {
    margin-left: 5px;
    font-weight: 500;
    background-color: transparent;
    color: #5F5F7A;
    transition: all 0.2s ease;
    border: none;
    padding: 0;
}

.custom-tabs .nav-link.active .badge {
    color: white;
    background-color: transparent;
}

.custom-tabs .nav-link:hover .badge {
    color: #1A1A40;
    background-color: transparent;
}

/* Filter styling */
.widget-client-filters {
    background-color: #F5F7FA !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #E6E6E6 !important;
}

.widget-client-filters .btn-light {
    background-color: white !important;
    border: 1px solid #E6E6E6 !important;
    color: #5F5F7A !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
}

.widget-client-filters .btn-light:hover {
    background-color: #F0F7FF !important;
    border-color: #CCE4FF !important;
}

/* Button styling */
.btn-primary {
    background-color: #007AFF !important;
    border-color: #007AFF !important;
    /* border-radius: 6px !important; */
    transition: all 0.2s ease !important;
}

.btn-primary:hover {
    background-color: #085EC6 !important;
    border-color: #085EC6 !important;
}

/* Container styling */
.orders-container,
.services-container,
.domains-container {
    padding: 20px !important;
}

/* Dashboard Widget Styling */
.widget-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.widget-container .widget-header {
    background-color: #1A1A40 !important;
    color: white !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
}

.widget-container .widget-header h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: white !important;
}

.widget-container .widget-content {
    background-color: white !important;
    padding: 20px !important;
}

/* Dashboard Cards */
.dashboard-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    margin-bottom: 15px !important;
}

.dashboard-card:hover {
    transform: translateY(-2px) !important;
}

.dashboard-card .card-header {
    background-color: #F5F7FA !important;
    border-bottom: 1px solid #E6E6E6 !important;
    padding: 15px 20px !important;
}

.dashboard-card .card-body {
    padding: 20px !important;
}

/* Client Sidebar Cards */
#my-info .card,
.card-blesta {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    border: none !important;
}

#my-info .card .card-header,
.card-blesta .card-header {
    background-color: #1A1A40 !important;
    color: white !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
    font-weight: 600 !important;
}

#my-info .card .card-body,
.card-blesta .card-body {
    background-color: white !important;
    padding: 15px !important;
}

#my-info .card .card-footer,
.card-blesta .card-footer {
    background-color: #F5F7FA !important;
    border-top: 1px solid #E6E6E6 !important;
    padding: 12px 15px !important;
}

#my-info .card .list-group,
.card-blesta .list-group {
    border-radius: 0 !important;
}

#my-info .card .list-group-item,
.card-blesta .list-group-item {
    border-left: none !important;
    border-right: none !important;
    border-color: #E6E6E6 !important;
}

#my-info .card .list-group-item:first-child,
.card-blesta .list-group-item:first-child {
    border-top: none !important;
}

#my-info .card .list-group-item:last-child,
.card-blesta .list-group-item:last-child {
    border-bottom: none !important;
}

/* Sidebar buttons */
#my-info .btn-light,
.card-blesta .btn-light {
    background-color: white !important;
    border: 1px solid #E6E6E6 !important;
    color: #5F5F7A !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

#my-info .btn-light:hover,
.card-blesta .btn-light:hover {
    background-color: #F0F7FF !important;
    border-color: #CCE4FF !important;
    color: #1A1A40 !important;
}

/* List options styling */
.list-options {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.list-options .list-group-item {
    border-color: #E6E6E6 !important;
    padding: 15px !important;
    transition: all 0.2s ease !important;
}

.list-options .list-group-item:hover {
    background-color: #F0F7FF !important;
}

.list-options .list-group-item i {
    color: #007AFF !important;
}

/* Amounts section */
.amounts {
    background-color: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

.amounts h3 {
    color: #1A1A40 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.amounts .currency {
    margin-bottom: 10px !important;
}

/* Right Content Widgets */
.right_content .widget,
.widget-client {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.right_content .widget .widget-header,
.widget-client-header {
    background-color: #1A1A40 !important;
    color: white !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
}

.right_content .widget .widget-header h2,
.widget-client-header h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: white !important;
}

.right_content .widget .widget-content,
.widget-client-body {
    background-color: white !important;
    padding: 20px !important;
}

/* Client Contacts and Profile Pages */
#client_contacts,
#client_profile {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
    border: none !important;
}

#client_contacts .table-responsive,
#client_profile .table-responsive {
    padding: 0 !important;
}

/* Table styling for Client and Contacts */
.table-curved {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.table-curved thead tr th {
    background-color: #F5F7FA !important;
    border-bottom: 1px solid #E6E6E6 !important;
    color: #1A1A40 !important;
    font-weight: 600 !important;
}

.table-curved tbody tr:hover {
    background-color: #F0F7FF !important;
}

/* Button styling for tables */
.table .btn-group .btn-light {
    background-color: white !important;
    border: 1px solid #E6E6E6 !important;
    color: #5F5F7A !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.table .btn-group .btn-light:hover {
    background-color: #F0F7FF !important;
    border-color: #CCE4FF !important;
    color: #1A1A40 !important;
}