/* Custom styles for Supplier Portal */

/* Fixed layout: navbar and sidebar stay put, only content scrolls */
.layout-fixed-scroll {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.layout-fixed-scroll > .navbar {
    flex-shrink: 0;
    z-index: 1030;
}

.layout-fixed-scroll > .page-content {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
}

.layout-fixed-scroll > .page-content > .sidebar {
    overflow-y: auto;
    flex-shrink: 0;
}

.layout-fixed-scroll > .page-content > .content-wrapper {
    flex: 1 1 0%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.layout-fixed-scroll > .page-content > .content-wrapper > .content-inner {
    flex: 1 1 0%;
}

.layout-fixed-scroll > .page-content > .content-wrapper > .navbar-footer {
    flex-shrink: 0;
}

/* Status badge colors */
.badge-pending { background-color: #ffc107; color: #212529; }
.badge-awaiting-approval { background-color: #17a2b8; color: #fff; }
.badge-approved { background-color: #28a745; color: #fff; }
.badge-rejected { background-color: #dc3545; color: #fff; }
.badge-cancelled { background-color: #6c757d; color: #fff; }

/* Overdue row highlighting */
.table-row-overdue { background-color: #fff5f5 !important; }
.table-row-overdue:hover { background-color: #ffe6e6 !important; }

/* Overdue indicator icon */
.overdue-indicator { color: #dc3545; }


.dropdown-item {
    cursor: pointer !important;
}

.file-preview-frame .file-footer-buttons, .file-preview-frame .file-upload-indicator {
    display: none !important;
}

.file-preview-frame .file-footer-caption {
    border-bottom: 0px;
}

.btn-outline-primary {
    --btn-border-color: #25408f;
}

.form-check-input:checked {
    background-color: #25408f;
}

.btn-primary {
    --btn-hover-bg: #2c4ba8;
}

.select2-container.is-invalid .select2-selection__arrow {
    display: none !important;
}

.datepicker {
    z-index: 1100 !important;
}

.kpi-card {
    border: 0;
    border-radius: .75rem;
    color: inherit;
}

    .kpi-card h2 {
        font-weight: 800;
        letter-spacing: .2px;
        margin-bottom: .25rem;
    }

    .kpi-card .muted {
        color: var(--bs-secondary-color) !important;
        opacity: 1;
    }

.chart, .chart-sm {
    min-height: 320px;
    width: 100%;
}

    .chart-sm.is-compact {
        min-height: 260px;
    }

/* Image gallery card hover overlay */
.card-img-actions {
    position: relative;
}

.card-img-actions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
}

.card-img-actions:hover .card-img-actions-overlay {
    opacity: 1;
}
/* Select2 validation styling
   Used when the original <select> has .is-invalid
   or when JS adds .is-invalid directly to the rendered Select2 selection.
*/

select.is-invalid + .select2-container .select2-selection,
select.is-invalid ~ .select2-container .select2-selection,
.select2-container .select2-selection.is-invalid,
.select2-container--default .select2-selection--single.is-invalid,
.select2-container--bootstrap-5 .select2-selection.is-invalid {
    border-color: #dc3545 !important;
}

/* Single select height/shape alignment */
.select2-container--default .select2-selection--single.is-invalid,
.select2-container--bootstrap-5 .select2-selection--single.is-invalid,
.select2-container .select2-selection--single.is-invalid {
    border-color: #dc3545 !important;
}

/* Multiple select support, just in case */
.select2-container--default .select2-selection--multiple.is-invalid,
.select2-container--bootstrap-5 .select2-selection--multiple.is-invalid,
.select2-container .select2-selection--multiple.is-invalid {
    border-color: #dc3545 !important;
}



/* Keep invalid border when Select2 is focused/open */
.select2-container--open .select2-selection.is-invalid,
.select2-container--focus .select2-selection.is-invalid,
.select2-container--default.select2-container--focus .select2-selection.is-invalid,
.select2-container--bootstrap-5.select2-container--focus .select2-selection.is-invalid {
    border-color: #dc3545 !important;
}

/* If Select2 is inside a Bootstrap invalid field wrapper */
.is-invalid + .select2-container .select2-selection,
.is-invalid ~ .select2-container .select2-selection {
    border-color: #dc3545 !important;
}

/* Optional: make the Select2 invalid box look closer to Bootstrap form-control invalid */
.select2-selection.is-invalid {
    background-image: none !important;
}

/* Optional: invalid feedback spacing below Select2 */
.select2-container + .invalid-feedback,
.select2-container + .text-danger,
.select2-container + span.text-danger {
    display: block;
    margin-top: 0.25rem;
}

.radio-as-checkbox .form-check-input[type="radio"] {
    border-radius: 0.25em;
}

.radio-as-checkbox .form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Custom styled drop zone wrapper for file inputs */
.file-input-wrapper { position: relative; }

.file-input-wrapper > input[type="file"].file-input {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0; opacity: 0;
}

.file-input-wrapper .kv-upload-progress,
.file-input-wrapper .file-preview,
.file-input-wrapper .input-group {
    display: none !important;
}

.custom-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 18rem; padding: 2rem 1rem;
    border: calc(var(--bs-border-width, 1px) * 2) dashed var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--bs-gray-100, #f8f9fa);
    color: var(--bs-gray-700, #495057);
    cursor: pointer; text-align: center;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.custom-dropzone:hover { background-color: var(--bs-gray-200, #e9ecef); border-color: var(--bs-gray-500, #adb5bd); }

.custom-dropzone.is-dragover {
    background-color: var(--bs-primary-bg-subtle, #e7f1ff);
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
}

.custom-dropzone .custom-dropzone-icon { font-size: 3rem; line-height: 1; margin-bottom: 0.75rem; color: var(--bs-gray-500, #6c757d); }
.custom-dropzone.is-dragover .custom-dropzone-icon { color: var(--bs-primary, #0d6efd); }
.custom-dropzone .custom-dropzone-text { font-size: 1rem; font-weight: 500; }
.custom-dropzone .custom-dropzone-subtext { font-size: 0.875rem; color: var(--bs-gray-600, #6c757d); margin-top: 0.25rem; }

.costing-label-col { flex: 0 0 auto; width: 110px; }
.costing-label-col .col-form-label { padding-left: 0; padding-right: 0.5rem; }


.divider {
    margin: 1rem 0;
    position: relative;
}

/* Gradient Divider */
.divider-gradient {
    height: 1px;
    background: var(--card-border-color);
}