/* ==========================================================
   ARMINDO INVENTORY — PROFESSIONAL THEME
   Primary: #3b5bdb | Sidebar: #1e2640 | Body: #f4f6f9
   ========================================================== */

/* 1. BASE */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    background-color: #f4f6f9 !important;
    color: #2c3e50 !important;
}

/* 2. SIDEBAR */
.main-sidebar {
    background-color: #1e2640 !important;
    border-right: none !important;
    box-shadow: 3px 0 14px rgba(0,0,0,0.18) !important;
}
.sidebar-dark-primary .brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background-color: #171f35 !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: #a8b7cc !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgba(59,91,219,0.18) !important;
    color: #74b9ff !important;
}
.nav-treeview > .nav-item > .nav-link {
    color: #7a8fa8 !important;
    padding-left: 2.2rem !important;
}
.nav-treeview > .nav-item > .nav-link:hover,
.nav-treeview > .nav-item > .nav-link:focus,
.nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(59,91,219,0.15) !important;
    color: #74b9ff !important;
}
.sidebar-collapse .nav-treeview > .nav-item > .nav-link {
    padding-left: 0.5rem !important;
}
/* Sidebar category labels */
.main-sidebar .nav-link.text-info {
    color: #4e6075 !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding-top: 1.2rem !important;
    padding-bottom: 0.35rem !important;
    cursor: default !important;
}
.nav-icon {
    font-size: 0.95rem !important;
    width: 1.5rem !important;
    margin-right: 0.4rem !important;
    color: #607589 !important;
}
.icon-color { display: none !important; }

/* 3. HEADER */
.main-header.navbar {
    height: 60px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e4e9f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    background-image: none !important;
}
.Headerimg {
    background-color: #ffffff !important;
    background-image: none !important;
}
.main-header .nav-link,
.main-header .nav-link p,
.main-header .navbar-nav .nav-item > .nav-link {
    color: #495057 !important;
}
.main-header .nav-link:hover {
    color: #3b5bdb !important;
}
.main-header .fas.fa-bars,
.main-header .fas.fa-user-circle { color: #495057 !important; }

/* 4. CONTENT & CARDS */
.content-wrapper {
    background-color: #f4f6f9 !important;
}
.card {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    padding: 1rem 1.25rem !important;
}
.card-body {
    background-color: #ffffff !important;
    border-radius: 0 0 8px 8px !important;
}
.card.card-info,
.card.bg-transparent {
    box-shadow: none !important;
    background-color: transparent !important;
}

/* 5. TABLES */
th {
    background: #3b5bdb !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-color: #4a6cf7 !important;
}
.table-bordered td,
.table-bordered th { border-color: #eef1f6 !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #f8f9fc !important; }
.table-hover tbody tr:hover { background-color: #eef2ff !important; }
table { border-color: #eef1f6 !important; }

/* 6. FORMS */
.form-control {
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    color: #2c3e50 !important;
    font-size: 0.875rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.form-control:focus {
    border-color: #3b5bdb !important;
    box-shadow: 0 0 0 3px rgba(59,91,219,0.13) !important;
    outline: none !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: #f1f3f7 !important;
    color: #6c757d !important;
    opacity: 1 !important;
}
.Act[readonly="readonly"] { background-color: #ffffff !important; }
label {
    font-weight: 500 !important;
    color: #52657a !important;
    font-size: 0.82rem !important;
    margin-bottom: 0.3rem !important;
}

/* 7. BUTTONS */
.btn-primary,
.bg-gradient-primary {
    background: #3b5bdb !important;
    background-image: none !important;
    border-color: #3b5bdb !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(59,91,219,0.28) !important;
    transition: all 0.15s ease !important;
}
.btn-primary:hover,
.bg-gradient-primary:hover {
    background: #364fc7 !important;
    border-color: #364fc7 !important;
    box-shadow: 0 4px 12px rgba(59,91,219,0.38) !important;
}
.btn-danger, .bg-gradient-danger { border-radius: 6px !important; }
.btn-default {
    border-radius: 6px !important;
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
}
.btn-default:hover { background: #e9ecef !important; }

/* 8. MODALS */
.modal-header {
    background: linear-gradient(135deg, #3b5bdb 0%, #364fc7 100%) !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem 1.5rem !important;
}
.modal-header h4,
.modal-header h5,
.modal-title { color: #ffffff !important; font-weight: 600 !important; }
.modal-header .close {
    color: rgba(255,255,255,0.85) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.modal-header .close:hover { color: #ffffff !important; }
.modal-content {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.16) !important;
}
.modal-footer {
    border-top: 1px solid #eef0f4 !important;
    background-color: #fafbfd !important;
    border-radius: 0 0 8px 8px !important;
}
.modal { overflow-y: auto !important; }

/* 9. DROPDOWN */
.dropdown-menu {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
}
.dropdown-menu .dropdown-item:first-child:hover {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
.dropdown-menu .dropdown-item:last-child:hover {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.dropdown-item:hover {
    background-color: #eef2ff !important;
    color: #3b5bdb !important;
}

/* 10. FOOTER */
.main-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e4e9f0 !important;
    color: #868e96 !important;
    font-size: 0.82rem !important;
}

/* 11. PAGE HEADER */
.text-primary { color: #3b5bdb !important; }
.header { 
    position: relative !important; 
    min-height: 15rem !important; 
    background: linear-gradient(135deg, #1e2a4a 0%, #3b5bdb 100%) !important;
    padding-bottom: 8rem !important;
}
.header h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.content-header-text { margin-top: -3rem !important; }

/* 12. BRAND */
.brand-image {
    height: 50px !important;
    max-height: 50px !important;
    margin-left: 0.5rem !important;
}
.img-none { display: none !important; }

/* 12.1 SIDEBAR COLLAPSE LOGO BEHAVIOR */
#imgLogo1 { display: flex !important; justify-content: center; align-items: center; }
#imgLogo2 { display: none !important; justify-content: center; align-items: center; }

@media (min-width: 992px) {
    body.sidebar-collapse .main-sidebar:not(:hover) #imgLogo1 { display: none !important; }
    body.sidebar-collapse .main-sidebar:not(:hover) #imgLogo2 { display: flex !important; justify-content: center; align-items: center; }
}

/* 13. DATE PICKER */
.dtp { overflow-y: auto !important; }
.dtp div.dtp-date, .dtp div.dtp-time { background: linear-gradient(135deg, #3b5bdb 0%, #364fc7 100%) !important; }
.dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #3b5bdb !important; }
.dtp-picker-days th { background: transparent !important; color: #a8b7cc !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 0.8rem; }
.dtp table.dtp-picker-days tr > td > a.selected { background: #3b5bdb !important; box-shadow: 0 4px 8px rgba(59,91,219,0.4) !important; color: #fff !important; transform: scale(1.1); font-weight: 700; transition: all 0.2s; }
.dtp table.dtp-picker-days tr > td > a.hover { color: #3b5bdb !important; font-weight: 700; }
.dtp .dtp-buttons .dtp-btn-ok { background: #3b5bdb !important; color: #fff !important; border-radius: 4px; padding: 5px 15px; margin-left: 10px; }
.dtp .dtp-buttons .dtp-btn-cancel { color: #495057 !important; transition: all 0.2s; }
.dtp .dtp-buttons .dtp-btn-cancel:hover { color: #e03131 !important; }
.dtp-content { border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; border: none !important; }

/* 14. MISC */
.Rmv { display: none; }
.aclick { color: #3b5bdb !important; text-decoration: none !important; }
.aclick:hover { color: #364fc7 !important; cursor: pointer !important; }
.labelBudget { font-size: 0.8rem !important; }
.nav-icon-header { font-size: 1.5rem !important; }
.dataTables_processing { z-index: 3000 !important; }

/* 15. NEGATIVE MARGIN UTILITIES */
.mt--1  { margin-top: -1rem  !important; }
.mt--2  { margin-top: -2rem  !important; }
.mt--3  { margin-top: -3rem  !important; }
.mt--4  { margin-top: -4rem  !important; }
.mt--5  { margin-top: -5rem  !important; }
.mt--6  { margin-top: -6rem  !important; }
.mt--7  { margin-top: -7rem  !important; }
.mt--8  { margin-top: -8rem  !important; }
.mt--9  { margin-top: -9rem  !important; }
.mt--10 { margin-top: -10rem !important; }
.mt--11 { margin-top: -11rem !important; }
.mt--12 { margin-top: -12rem !important; }

/* 16. SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f3f7; }
::-webkit-scrollbar-thumb { background: #c4cdd8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

/* 17. SELECT2 */
.select2-container--bootstrap4 .select2-selection {
    border-color: #ced4da !important;
    border-radius: 6px !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: #3b5bdb !important;
}

/* 18. BADGES */
.badge-primary { background-color: #3b5bdb !important; }
.badge-success { background-color: #2f9e44 !important; }
.badge-danger  { background-color: #e03131 !important; }
.badge-warning { background-color: #f08c00 !important; color: #fff !important; }



/* 16. FORMS AND BUTTONS */
.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.btn-primary {
    background: linear-gradient(135deg, #3b5bdb 0%, #364fc7 100%) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(59,91,219,0.3) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #364fc7 0%, #2f43a3 100%) !important;
    box-shadow: 0 4px 8px rgba(59,91,219,0.4) !important;
    transform: translateY(-1px);
}
.btn-info {
    background: linear-gradient(135deg, #0bc2da 0%, #00a4b9 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(23,162,184,0.3) !important;
}
.btn-info:hover {
    background: linear-gradient(135deg, #09a9be 0%, #008799 100%) !important;
    box-shadow: 0 4px 8px rgba(23,162,184,0.4) !important;
    transform: translateY(-1px);
}
.btn-success {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%) !important;
    border: none !important;
}
.form-control, .select2-selection {
    border-radius: 6px !important;
    border: 1px solid #ced4da !important;
    background-color: #fcfcfc !important;
}
.form-control:focus {
    border-color: #3b5bdb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(59,91,219,0.25) !important;
}




/* ---- MOBILE TABLE IMPROVEMENTS ---- */
@media screen and (max-width: 767.98px) {
    /* Improve DataTables wrapper controls (Search, Show Entries) to fit screen, but ONLY on mobile */
    div.dataTables_wrapper div.row {
        margin-left: 0;
        margin-right: 0;
    }
    div.dataTables_wrapper .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
    div.dataTables_wrapper div.dataTables_filter {
        text-align: left;
        margin-top: 10px;
    }
    div.dataTables_wrapper div.dataTables_filter label {
        display: block;
        width: 100%;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
        box-sizing: border-box;
    }
    /* Center the pagination and make it wrap properly */
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center !important;
        flex-wrap: wrap;
        margin-top: 15px;
    }


    /* -- TRANSFORM INTO CARD LAYOUT ONLY ON MOBILE (<768px) -- */
    .table-responsive {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .table-responsive table.dataTable {
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
        border: 0 !important;
    }
    .table-responsive table.dataTable thead {
        border: none !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
    .table-responsive table.dataTable tbody tr {
        display: block !important;
        margin-bottom: 0.625rem !important;
        background-color: #fff !important;
        border: 1px solid #eef1f6 !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
        padding: 0.5rem !important;
    }

    /* Adjust the card row to use flexbox properly so the text aligns well when wrapping */
    .table-responsive table.dataTable tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important; /* Top-align so when the right side wraps, it looks clean */
        text-align: right !important;
        padding: 0.75rem 0.75rem !important;
        border-bottom: 1px solid #f8f9fa !important;
        gap: 15px !important; /* Create breathing room between the Data Label and the Value */
    }
    .table-responsive table.dataTable tbody td:last-child {
        border-bottom: 0 !important;
    }
    
    .table-responsive table.dataTable tbody td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        color: #6c757d !important;
        float: none !important; /* Resetting float since we use flexbox now */
        flex-shrink: 0 !important; /* Prevent the left-side label from squishing */
        max-width: 40% !important; /* Ensure the label doesn't take up the whole screen */
        line-height: inherit !important;
        text-align: left !important;
    }

    /* Override Datatables 'nowrap' class to allow long text (like Product Names) to wrap onto multiple lines */
    .table-responsive table.dataTable.nowrap th, 
    .table-responsive table.dataTable.nowrap td {
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }
} /* END MOBILE MEDIA QUERY */