/* 
 * Custom Theme Overrides
 * Modern, clean style overriding default AdminLTE/Bootstrap styles.
 */

/* =========================================
   1. Table Styling - Clean & Minimal
   ========================================= */

/* Header: White background, no vertical borders */
.table>thead>tr>th {
    background-color: #ffffff !important;
    border-bottom: 1px solid #dbdbdb !important;
    /* Reverted to 1px */
    border-left: none !important;
    border-right: none !important;
    color: #444 !important;
    /* Darker text */
    font-weight: 600;
    font-size: 13px;
    padding: 12px 10px !important;
}

/* Body: Remove vertical borders, light bottom border */
.table>tbody>tr>td,
.table>tbody>tr>th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    /* Ensure no top border */
    border-bottom: 1px solid #e0e0e0 !important;
    /* Visible gray separator */
    padding: 12px 10px !important;
    vertical-align: middle;
}

/* Ensure last row also has a border if needed, or remove it */
.table>tbody>tr:last-child>td {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Row Hover Effect - Subtle light gray */
.table-hover>tbody>tr:hover {
    background-color: #f8fafc !important;
}

/* ... skipped intermediate overrides to avoid context mismatch issues, focusing on separate clean chunks is safer but I will try one large replacement if content is contiguous, or separate. The file view shows they are far apart (lines 10 vs 110). I should do TWO simpler calls or ONE multi-replace. Multi-replace is better. */


/* Remove default table border if present */
.table-bordered {
    border: none !important;
}

/* =========================================
   2. Modal Styling - Clean Header
   ========================================= */

/* Header: White, clean, simple border */
.modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    /* Darker border */
    color: #1e293b !important;
    padding: 15px 20px !important;
}

/* Modal Title */
.modal-title {
    font-weight: 600;
    font-size: 18px;
    color: #333 !important;
}

/* Close Button - Darker to be visible on white */
.modal-header .close {
    color: #64748b !important;
    opacity: 0.6;
    text-shadow: none;
    font-weight: normal;
    font-size: 24px;
    margin-top: -2px !important;
}

.modal-header .close:hover {
    color: #0f172a !important;
    opacity: 1.0;
}

/* Modal Content - Sharper corners or subtle roundness */
.modal-content {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure tbody inside modals has a top border (for headerless tables or specific design) */
.modal-body .table>tbody {
    border-top: 1px solid #e0e0e0 !important;
}

/* Modal Table Headers: Force White */
.modal-body .table th,
.modal-body .table>thead>tr>th {
    background-color: #ffffff !important;
}

/* Footer: Clean top border */
.modal-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* =========================================
   3. Box Styling - Clean Footer
   ========================================= */

/* Box Footer (Pagination Area): White background */
.box-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* Box Header: Clean with only bottom border */
.box-header {
    color: #444 !important;
    display: block !important;
    padding: 15px 20px 25px 20px !important;
    /* Increased bottom padding */
    position: relative !important;
    border: none !important;
    border-bottom: 1px solid #dbdbdb !important;
    /* Visible darker gray */
    background-color: #ffffff !important;
    height: auto !important;
    /* Ensure padding expands the box */
}

/* Ensure 'with-border' variant also follows this */
.box-header.with-border {
    border-bottom: 1px solid #dbdbdb !important;
}

/* Parent Box Container: Remove default border (frame) */
.box {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border-top: 0 !important;
}

/* =========================================
   4. Modal Animation - Slide from Left
   ========================================= */

/* Default state: hidden off-screen to the left */
.modal.fade .modal-dialog {
    -webkit-transform: translate(-25%, 0) !important;
    -ms-transform: translate(-25%, 0) !important;
    -o-transform: translate(-25%, 0) !important;
    transform: translate(-25%, 0) !important;

    -webkit-transition: -webkit-transform 0.3s ease-out !important;
    -moz-transition: -moz-transform 0.3s ease-out !important;
    -o-transition: -o-transform 0.3s ease-out !important;
    transition: transform 0.3s ease-out !important;
}

/* Active state: centered */
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;

    /* Lower the modal position */
    margin-top: 10vh !important;
}