/* Custom DataTable Styles */
#notificationsContainer .table-wrapper {
    border-radius: 12px;
    overflow: hidden;
    /* only on wrapper, not table */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: white;
}

#notificationsContainer .notifications-table {
    width: 100% !important;
    border-collapse: collapse !important;
    /* important for scrollX */
    border-spacing: 0 !important;
    background: white !important;
}

#notificationsContainer .notifications-table thead th {
    background-color: var(--primary-color);
    color: white !important;
    font-weight: 600 !important;
    padding: 16px 20px;
    text-align: left;
    border: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
}


/* #notificationsContainer .notifications-table thead th:first-child {
        border-top-left-radius: 12px;
    }

    #notificationsContainer .notifications-table thead th:last-child {
        border-top-right-radius: 12px !important;
    } */

#notificationsContainer .notifications-table:first-of-type thead th::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Table Body */
#notificationsContainer .notifications-table tbody td {
    padding: 16px 20px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    color: #475569 !important;
    transition: all 0.3s ease !important;
    vertical-align: middle !important;
}

#notificationsContainer .notifications-table tbody tr {
    transition: all 0.3s ease !important;
}

#notificationsContainer .notifications-table tbody tr:hover {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(174, 117, 218, 0.15) !important;
}

#notificationsContainer .notifications-table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

#notificationsContainer .notifications-table tbody tr:nth-child(even):hover {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
}

/* DataTable Wrapper Styling */
#notificationsContainer .dataTables_wrapper {
    padding: 20px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* DataTable Info and Pagination */
#notificationsContainer .dataTables_info {
    color: #475569 !important;
    font-weight: 500 !important;
    margin-top: 20px !important;
}

#notificationsContainer .dataTables_length select {
    border: 2px solid #dbeafe !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #475569 !important;
    background: white !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px;
}

#notificationsContainer .dataTables_length select:focus {
    border-color: #AE75DA !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(174, 117, 218, 0.1) !important;
}

#notificationsContainer .dataTables_filter input {
    border: 2px solid #dbeafe !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    color: #475569 !important;
    background: white !important;
    transition: all 0.3s ease !important;
    margin-left: 8px !important;
}

#notificationsContainer .dataTables_filter input:focus {
    border-color: #AE75DA !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(174, 117, 218, 0.1) !important;
}

/* Pagination */
#notificationsContainer .dataTables_paginate {
    /* border: 2px solid black; */
    display: block;
    margin-top: 30px;
    text-align: right;
}

#notificationsContainer .dataTables_paginate .paginate_button {
    padding: 10px 16px !important;
    margin: 0 4px !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    color: #475569 !important;
    background: white !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#notificationsContainer .dataTables_paginate .paginate_button:hover {
    background: #dbeafe !important;
    border-color: #AE75DA !important;
    color: #9112BC !important;
    transform: translateY(-2px) !important;
}

#notificationsContainer .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #AE75DA, #9112BC) !important;
    border-color: #9112BC !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

#notificationsContainer .dataTables_paginate .paginate_button.disabled {
    color: #cbd5e1 !important;
}

#notificationsContainer .dataTables_paginate .paginate_button.disabled:hover {
    background: white !important;
    border-color: transparent !important;
    transform: none !important;
}

/* Status Badge Styles */
#notificationsContainer .status-badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#notificationsContainer .status-success {
    background: rgba(5, 150, 105, 0.1) !important;
    color: #059669 !important;
}

#notificationsContainer .status-warning {
    background: rgba(217, 119, 6, 0.1) !important;
    color: #d97706 !important;
}

#notificationsContainer .status-danger {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
}

#notificationsContainer .status-info {
    background: rgba(8, 145, 178, 0.1) !important;
    color: #0891b2 !important;
}

/* Priority Indicator */
#notificationsContainer .priority-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

#notificationsContainer .priority-high {
    background: #dc2626 !important;
}

#notificationsContainer .priority-medium {
    background: #d97706 !important;
}

#notificationsContainer .priority-low {
    background: #059669 !important;
}

/* Action Buttons */
#notificationsContainer .action-btn {
    padding: 6px 12px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 2px !important;
}

#notificationsContainer .btn-view {
    background: rgba(174, 117, 218, 0.1) !important;
    color: #9112BC !important;
}

#notificationsContainer .btn-view:hover {
    background: #AE75DA !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

#notificationsContainer .btn-delete {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
}

#notificationsContainer .btn-delete:hover {
    background: #dc2626 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Responsive */
@media (max-width: 768px) {

    #notificationsContainer .notifications-table thead th,
    #notificationsContainer .notifications-table tbody td {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    #notificationsContainer .dataTables_wrapper {
        padding: 15px !important;
    }
}