/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* SweetAlert2 Icon Positioning - Move icon down */
.swal2-container .swal2-popup .swal2-icon {
    margin-top: 3.5em !important; /* Increased from default 2.5em to 3.5em */
}



/* ========================================
   GLOBAL TABLE STYLES - SPECIFIC CLASSES
   Sirf Table Styling ke liye Classes
   ======================================== */

/* ============================================
   TABLE CONTAINER & WRAPPER CLASSES
   ============================================ */

/* Main Table Container with Border */
.table-border {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background-color: #ffffff;
    overflow: hidden;
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
}

/* Main Table Class */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* ============================================
   TABLE HEADER (THEAD) CLASSES
   ============================================ */

/* Table Header Cells */
.modern-table thead th {
    background: #f9fafb;
    padding: 16px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    white-space: nowrap;
}

/* DataTables Sorting Override */


.dataTables_wrapper table.dataTable thead th {
    background-color: transparent !important;
}

/* ============================================
   TABLE BODY (TBODY) CLASSES
   ============================================ */

/* Table Body Cells */
.modern-table tbody td {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
}

/* Last Row - No Bottom Border */
.modern-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Row Hover Effect */
.modern-table tbody tr {
    transition: background 0.2s;
}

/* Optional: Uncomment for hover effect */
/* .modern-table tbody tr:hover {
    background: #f9fafb;
} */

/* ============================================
   TABLE LINKS
   ============================================ */

/* Links inside Table Cells */
.case-title-link,
.table-link {
    color: #111827;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.case-title-link:hover,
.table-link:hover {
    color: #006045;
}

/* ============================================
   TABLE CHECKBOXES
   ============================================ */

/* Custom Checkbox Style */
.custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-checkbox:checked {
    background-color: #006045;
    border-color: #006045;
}

.custom-checkbox:hover {
    border-color: #006045;
}

/* ============================================
   STATUS BADGES IN TABLE
   ============================================ */

/* Base Status Badge */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Status Badge Colors */
.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-completed {
    background: #dbeafe;
    color: #1e40af;
}

.status-approved {
    background: #d1fae5;
    color: #065f46;
}

.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.status-cancelled {
    background: #f3f4f6;
    color: #374151;
}

.status-in-progress {
    background: #e0e7ff;
    color: #3730a3;
}

/* ============================================
   THREE DOTS MENU (ACTION MENU)
   ============================================ */

/* Dots Menu Button */
.dots-menu {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    transition: color 0.2s;
}

.dots-menu:hover {
    color: #111827;
}

/* Dropdown Menu Position Fix */
ul.dropdown-menu.dropdown-menu-end.show {
    transform: translate(-60px, 36px) !important;
}

/* ============================================
   TABLE FOOTER (PAGINATION AREA)
   ============================================ */

/* Table Footer Container */
.table-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 12px;
}

/* Pagination Info Text */
.pagination-info {
    font-size: 14px;
    color: #6b7280;
}

/* DataTables Pagination */
.dataTables_paginate {
    margin: 0 !important;
}

/* Pagination Buttons */
.dataTables_paginate .pagination {
    margin: 0;
    gap: 4px;
}

.dataTables_paginate .page-link {
    border: 1px solid #e5e7eb;
    color: #374151;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.dataTables_paginate .page-link:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.dataTables_paginate .page-item.active .page-link {
    background: #006045;
    border-color: #006045;
    color: white;
}

.dataTables_paginate .page-item.disabled .page-link {
    color: #9ca3af;
    background: #f9fafb;
}

/* ============================================
   TABLE STATES (EMPTY/LOADING)
   ============================================ */

/* Empty Table State */
.dataTables_empty {
    padding: 40px 24px !important;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* Loading Spinner */
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   UTILITY CLASSES FOR TABLE
   ============================================ */

/* Text Color Utilities */
.text-muted-custom {
    color: #9ca3af;
}

.text-gray-600 {
    color: #6b7280;
}

.text-gray-900 {
    color: #111827;
}


.table-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.pagination-info {
    font-size: 14px;
    color: #6b7280;
}

.dataTables_paginate {
    margin: 0 !important;
}

.table-border {
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background-color: #ffffff;
}

.page-item.active{
	background-color: transparent !important;
}

.page-link{
    border-radius: 10px !important;
}