/* Container principal */
.mtender-container {
    font-family: "Open Sans", Arial, sans-serif !important;
    margin: 20px 0 !important;
    max-width: 100% !important;
}

/* Card pentru filtru */
.card {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.card-body {
    padding: 1.5rem !important;
}

.card-subtitle {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #6c757d !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* Row și coloane */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -0.75rem !important;
    margin-left: -0.75rem !important;
}

.g-3 {
    row-gap: 1rem !important;
}

.col-md-4 {
    flex: 0 0 auto !important;
    width: 33.33333333% !important;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

/* Form elements */
.form-label {
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 500 !important;
}

.form-label.d-block {
    display: block !important;
}

.form-control {
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-control:focus {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Buttons */
.btn {
    display: inline-block !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    text-align: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    user-select: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.375rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.btn:hover {
    text-decoration: none !important;
}

.btn-primary {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.btn-primary:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

.btn-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-secondary:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

.btn.me-2 {
    margin-right: 0.5rem !important;
}

/* Table */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

#mtenderTable {
    width: 100% !important;
    margin-bottom: 1rem !important;
    color: #212529 !important;
    vertical-align: top !important;
    border-collapse: collapse !important;
    font-size: 15px !important;
}

.table {
    width: 100% !important;
    margin-bottom: 1rem !important;
    color: #212529 !important;
    vertical-align: top !important;
    border-color: #dee2e6 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

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

#mtenderTable thead th {
    background-color: #2c3e50 !important;
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 0.75rem !important;
    vertical-align: bottom !important;
    border-bottom: 2px solid #dee2e6 !important;
}

#mtenderTable tbody td {
    padding: 0.75rem !important;
    border-bottom: 1px solid #dee2e6 !important;    vertical-align: top !important;
    font-size: 16px !important;
}

.text-end {
    text-align: right !important;
}

/* Badges */
.badge {
    display: inline-block !important;
    padding: 0.35em 0.65em !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #fff !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 0.375rem !important;
}

.bg-primary {
    background-color: #0d6efd !important;
}

.bg-secondary {
    background-color: #6c757d !important;
}

.bg-success {
    background-color: #198754 !important;
}

.bg-info {
    background-color: #0dcaf0 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Modal */
.modal {
    display: none !important;
    position: fixed !important;
    z-index: 1055 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    outline: 0 !important;
}

.modal.show {
    display: block !important;
}

.modal::before {
    content: '' !important;
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1050 !important;
}

.modal.show::before {
    display: block !important;
}

.modal-dialog {
    position: relative !important;
    width: auto !important;
    margin: 1.75rem auto !important;
    max-width: 500px !important;
    pointer-events: none !important;
    z-index: 1056 !important;
}

.modal-dialog-lg {
    max-width: 800px !important;
}

.modal-dialog-scrollable {
    height: calc(100% - 3.5rem) !important;
}

.modal-dialog-scrollable .modal-content {
    max-height: 100% !important;
    overflow: hidden !important;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
}

.modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.5rem !important;
    outline: 0 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-top-left-radius: calc(0.5rem - 1px) !important;
    border-top-right-radius: calc(0.5rem - 1px) !important;
}

.modal-title {
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
}

.btn-close {
    box-sizing: content-box !important;
    width: 1em !important;
    height: 1em !important;
    padding: 0.25em !important;
    color: #000 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    border: 0 !important;
    border-radius: 0.375rem !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
}

.btn-close:hover {
    opacity: 0.75 !important;
}

.modal-body {
    position: relative !important;
    flex: 1 1 auto !important;
    padding: 1rem !important;
}

.modal-body h6 {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 1rem !important;
}

.modal-body h6:first-child {
    margin-top: 0 !important;
}

.modal-body .text-muted {
    color: #6c757d !important;
}

.modal-body .h5 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
}

.modal-body .text-success {
    color: #198754 !important;
}

.modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0.75rem !important;
    border-top: 1px solid #dee2e6 !important;
    border-bottom-right-radius: calc(0.5rem - 1px) !important;
    border-bottom-left-radius: calc(0.5rem - 1px) !important;
}

.modal-footer > * {
    margin: 0.25rem !important;
}

/* Utility classes */
hr {
    margin: 1rem 0 !important;
    color: inherit !important;
    border: 0 !important;
    border-top: 1px solid #dee2e6 !important;
    opacity: 0.25 !important;
}

p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Alert */
.alert {
    position: relative !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid transparent !important;
    border-radius: 0.375rem !important;
}

.alert-danger {
    color: #842029 !important;
    background-color: #f8d7da !important;
    border-color: #f5c2c7 !important;
}

.alert-info {
    color: #055160 !important;
    background-color: #cff4fc !important;
    border-color: #b6effb !important;
}

/* DataTables custom styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem !important;
}

.dataTables_wrapper .dataTables_length select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(to bottom, #007bff 0%, #0056b3 100%) !important;
    border-color: #0056b3 !important;
    color: white  !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(to bottom, #0056b3 0%, #004085 100%) !important;
    border-color: #004085 !important;
    color: white  !important;
}

/* DataTables Responsive */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background-color: #007bff !important;
    padding: 8px 12px !important;
    border-radius: 7px !important;
    color: white !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    background-color: #dc3545 !important;
    padding: 8px 12px !important;
    border-radius: 7px !important;
    color: white !important;
}

table.dataTable>tbody>tr.child ul.dtr-details {
    font-size: 16px !important;
}

.td-page-content li, .td-post-content li, .wpb_text_column li, .td_block_text_with_title li, .woocommerce #tab-description li, .mce-content-body li {
    border-bottom: 0 solid #ccc  !important;
    padding-bottom: 0  !important;
    margin-bottom: 0  !important;
}

/* Responsive */
@media (max-width: 768px) {
    .col-md-4 {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }

    #mtenderTable {
        font-size: 14px !important;
    }

    .modal-dialog {
        margin: 0.5rem !important;
    }

    .modal-dialog-lg {
        max-width: calc(100% - 1rem) !important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: left  !important;
    }

    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important;
    }
}