/* Override Metronic's hardcoded 15px — use Bootstrap's actual scrollbar width (0 on macOS overlay scrollbars) */
[data-kt-app-header-fixed=true].modal-open .app-header {
    padding-right: var(--bs-scrollbar-width, 0px) !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    /* Prevent text overflow into clear/dropdown icons */
    padding-right: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.select2-container--bootstrap5 .select2-selection__clear {
    position: absolute !important;
    right: 30px !important;
}

.select2-container--bootstrap5 .select2-selection__arrow {
    position: absolute !important;
    right: 8px !important;
}



[data-kt-image-input="true"] .image-input-wrapper {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Hide empty state when image is uploaded */
[data-kt-image-input="true"]:not(.image-input-empty) .image-input-empty-state {
    display: none !important;
}

/* ====================================
   EMPTY STATE CONTROL
   Critical for image upload UX
   ==================================== */

/* Hide empty state when image is loaded OR when in readonly mode */
.image-input:not(.image-input-empty) .image-input-empty-state,
.image-input.image-input-changed .image-input-empty-state,
.image-input.image-input-confirmed .image-input-empty-state,
.form-readonly .image-input-empty-state {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Force hide ALL children of empty state */
.image-input.image-input-changed .image-input-empty-state *,
.image-input.image-input-confirmed .image-input-empty-state *,
.form-readonly .image-input-empty-state * {
    display: none !important;
    visibility: hidden !important;
}

/* Force show empty state when image-input-empty class is present */
.image-input.image-input-empty .image-input-empty-state {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Default empty state positioning (when visible) */
.image-input-empty-state {
    pointer-events: none;
    z-index: 10;
}

/* When wrapper has background image, ensure empty state is hidden */
.image-input-wrapper[style*="background-image"]:not([style*="blank-image"]) ~ .image-input-empty-state {
    display: none !important;
}

/* Prevent empty state from appearing on hover or focus */
.image-input:not(.image-input-empty):hover .image-input-empty-state,
.image-input:not(.image-input-empty):focus .image-input-empty-state,
.image-input:not(.image-input-empty):focus-within .image-input-empty-state {
    display: none !important;
}

/* Ensure empty state stays visible when NO image is loaded */
.image-input-empty .image-input-empty-state {
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

/* Prevent opacity/visibility changes on hover */
.image-input-empty:hover .image-input-empty-state,
.image-input-empty:hover .image-input-empty-state *,
.image-input-wrapper:hover ~ .image-input-empty-state,
.image-input-wrapper:hover .image-input-empty-state,
label.image-input-wrapper:hover .image-input-empty-state,
label.image-input-wrapper:hover .image-input-empty-state * {
    opacity: 1;
    visibility: visible;
}

/* Keep text and icons visible on hover */
.image-input-empty .image-input-empty-state i,
.image-input-empty .image-input-empty-state div,
.image-input-empty .image-input-empty-state .bg-light {
    opacity: 1;
    visibility: visible;
}

/* Ensure the label doesn't block the text */
label.image-input-wrapper {
    z-index: 1;
}

/* Empty state should always be on top of the label */
.image-input-empty-state {
    z-index: 10;
    user-select: none;
}

/* ====================================
   HIDE BUTTONS IN READONLY MODE
   Metronic doesn't have readonly mode logic
   ==================================== */

/* Hide upload/change/remove buttons in readonly mode */
form#kt_visa_form.form-readonly [data-kt-image-input-action="change"],
form#kt_visa_form.form-readonly [data-kt-image-input-action="cancel"],
form#kt_visa_form.form-readonly [data-kt-image-input-action="remove"] {
    display: none !important;
}

/* ====================================
   AUTO-FILLED FIELDS HIGHLIGHT
   Custom feature for OCR/auto-fill
   ==================================== */

.field-auto-filled {
    background-color: #d4edda;
    border: 2px solid #28a745;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .field-auto-filled {
    background-color: #1e4620;
    border: 2px solid #28a745;
}

/* ====================================
   CROPPER.JS CUSTOMIZATION
   Custom branding for image cropper
   ==================================== */

.cropper-view-box {
    outline: 4px solid #3699FF;
    outline-offset: -4px;
}

.cropper-face {
    background-color: rgba(54, 153, 255, 0.1);
}

.cropper-line {
    background-color: #3699FF;
}

.cropper-line.line-e,
.cropper-line.line-w {
    width: 3px;
}

.cropper-line.line-n,
.cropper-line.line-s {
    height: 3px;
}

.cropper-point {
    width: 14px;
    height: 14px;
    background-color: #3699FF;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(54, 153, 255, 0.8);
    opacity: 1;
}

.cropper-point.point-e,
.cropper-point.point-w {
    width: 10px;
    height: 30px;
    border-radius: 5px;
}

.cropper-point.point-n,
.cropper-point.point-s {
    width: 30px;
    height: 10px;
    border-radius: 5px;
}

.cropper-point.point-ne,
.cropper-point.point-nw,
.cropper-point.point-se,
.cropper-point.point-sw {
    width: 16px;
    height: 16px;
}

.cropper-point:hover {
    background-color: #0066CC;
    transform: scale(1.4);
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: grab;
}

.cropper-point:active {
    cursor: grabbing;
    transform: scale(1.2);
    background-color: #004080;
}

.cropper-dashed {
    border: 0 dashed rgba(54, 153, 255, 0.5);
}

.cropper-dashed.dashed-h {
    border-bottom-width: 2px;
    border-top-width: 2px;
}

.cropper-dashed.dashed-v {
    border-left-width: 2px;
    border-right-width: 2px;
}

.cropper-center {
    width: 6px;
    height: 6px;
    background-color: #3699FF;
    opacity: 1;
}

.cropper-center:before,
.cropper-center:after {
    background-color: #3699FF;
    width: 3px;
    height: 3px;
}

/* Allow sidebar toggle button to extend outside sidebar logo area */
#kt_app_sidebar_logo { overflow: visible; }

/* Hide toggle when sidebar is minimized; show only on hover */
[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar_toggle { display: none !important; }
[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:hover #kt_app_sidebar_toggle { display: flex !important; }

/* Fix sidebar hover z-index - sidebar must be above header/logo when expanded on hover */
[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:hover {
    z-index: 200 !important;
}

/* Credit account detail panel toggle */
.credit-account-detail-panel { display: none; }
.credit-account-row.expanded + .credit-account-detail-row .credit-account-detail-panel { display: block; }

/* Invoice view layout */
.invoice-wrap { display: flex; flex-direction: column; align-items: center; }
    #invoice_pdf_content {
        width: 190mm;
        max-width: 100%;
        margin: 0;
        padding: 8mm;
        border: 1px solid var(--bs-border-color);
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        box-sizing: border-box;
        border-radius: 4px;
    }

    /* Status stepper */
    .invoice-stepper { display: flex; align-items: flex-start; gap: 0; }
    .invoice-step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; }
    .invoice-step-circle {
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700; z-index: 1; position: relative;
        border: 2px solid #d0d5dd; background: #fff; color: #98a2b3;
    }
    .invoice-step.done .invoice-step-circle  { background: #17c653; border-color: #17c653; color: #fff; }
    .invoice-step.active .invoice-step-circle { background: #1b84ff; border-color: #1b84ff; color: #fff; }
    .invoice-step.voided .invoice-step-circle  { background: #f8285a; border-color: #f8285a; color: #fff; }
    .invoice-step-label { font-size: 11px; margin-top: 4px; color: #98a2b3; font-weight: 600; text-align: center; }
    .invoice-step.done .invoice-step-label  { color: #17c653; }
    .invoice-step.active .invoice-step-label { color: #1b84ff; }
    .invoice-step.voided .invoice-step-label  { color: #f8285a; }
    .invoice-step-connector {
        flex: 1; height: 2px; background: #d0d5dd;
        margin-top: 13px; align-self: flex-start;
    }
    .invoice-step-connector.done { background: #17c653; }

    /* Grand total block */
    .invoice-grand-total {
        background: var(--bs-gray-100);
        border: 1px solid var(--bs-border-color);
        border-radius: 6px;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }
    .invoice-grand-total .label { font-size: 1rem; font-weight: 700; color: #1b84ff; }
    .invoice-grand-total .amount { font-size: 1.35rem; font-weight: 800; color: var(--bs-gray-900); }

    /* During PDF capture: parents must not clip - html2canvas only captures visible area otherwise */
    body.pdf-capturing #kt_app_main,
    body.pdf-capturing #kt_app_content,
    body.pdf-capturing #kt_app_content_container {
        overflow: visible !important;
    }
    /* Force light theme for PDF export regardless of app theme */
    body.pdf-capturing #invoice_pdf_content {
        background-color: #ffffff !important;
        color: #1e2129 !important;
        border-color: #e0e0e0 !important;
    }
    body.pdf-capturing #invoice_pdf_content .text-muted,
    body.pdf-capturing #invoice_pdf_content .text-gray-600 {
        color: #6c757d !important;
    }
    body.pdf-capturing #invoice_pdf_content .text-gray-800,
    body.pdf-capturing #invoice_pdf_content .text-gray-900,
    body.pdf-capturing #invoice_pdf_content h4,
    body.pdf-capturing #invoice_pdf_content .fw-bold {
        color: #252f4a !important;
    }
    body.pdf-capturing #invoice_pdf_content thead th {
        color: #6c757d !important;
    }
    body.pdf-capturing #invoice_pdf_content tbody td {
        background-color: transparent !important;
        border-color: #e0e0e0 !important;
    }
    body.pdf-capturing #invoice_pdf_content .table,
    body.pdf-capturing #invoice_pdf_content .border-bottom {
        border-color: #e0e0e0 !important;
    }
    body.pdf-capturing #invoice_pdf_content a {
        color: inherit !important;
        text-decoration: none !important;
    }
    body.pdf-capturing #invoice_pdf_content .invoice-grand-total {
        background: #f5f5f5 !important;
        border-color: #e0e0e0 !important;
    }
    body.pdf-capturing #invoice_pdf_content .invoice-grand-total .label { color: #1b84ff !important; }
    body.pdf-capturing #invoice_pdf_content .invoice-grand-total .amount { color: #071437 !important; }
    body.pdf-capturing #invoice_pdf_content .bg-light { background-color: #f9f9f9 !important; }

    /* Browser print */
    @media print {
        #kt_app_sidebar, #kt_app_header, #kt_app_toolbar, .no-print { display: none !important; }
        #kt_app_main, #kt_app_content, #kt_app_content_container { overflow: visible !important; }
        #invoice_pdf_content {
            width: 100% !important;
            border: none !important;
            padding: 0 !important;
        }
    }

/* ====================================
   APPLICATION STATUS STAT CARDS
   applications.html status color chips
   ==================================== */
.status-card-draft     { background-color: #F1F1F215; }
.status-card-typed     { background-color: #FFC70015; }
.status-card-applied   { background-color: #009EF715; }
.status-card-processing{ background-color: #7239EA15; }
.status-card-docreq    { background-color: #F1416C15; }
.status-card-approved  { background-color: #50CD8915; }
.status-card-rejected  { background-color: #F1416C15; }
.status-card-entered   { background-color: #00A3FF15; }
.status-card-left      { background-color: #A1A5B715; }
.status-card-overstay  { background-color: #FFC70015; }
.status-card-cancelled { background-color: #EE2D4115; }
.status-card-revoked   { background-color: #78829D15; }

/* Extra-small label text for status chips */
.fs-2xs { font-size: 0.65rem; }

/* Negative margin utility not in Bootstrap 5 base */
.mt-n18px { margin-top: -18px; }

/* Flex row with centered content (used in collapsible rows) */
.d-flex-center-min40 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

/* Report daterangepicker trigger */
.d-flex-center-report-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    min-width: 240px;
    cursor: pointer;
}


/* EN/AR language badge overlays on transliteration fields */
.lang-badge-en {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    padding: 2px 5px;
}
.lang-badge-ar {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 2px 5px;
}

/* Dashboard index card decorative circles */
.card-deco-circle {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

/* Dashboard index feature button */
.feature-btn {
    background-color: white !important;
    color: #1e1e2d !important;
    transition: all 0.3s ease;
}
.feature-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Sticky footer toolbar in manage_role_permissions */
.sticky-toolbar { z-index: 100; }

/* Sticky full-width filter cards (reports hub, rates, etc.) */
.sticky-filter-card { position: sticky; top: 80px; z-index: 105; }

/* Sticky aside filter column — keeps element in flow so grid doesn't collapse */
.sticky-aside-col { position: sticky; top: 80px; align-self: start; }

/* Word-break for long content in table cells */
.cell-break { word-break: break-word; overflow-wrap: break-word; }

/* Chart container heights */
.chart-mini { height: 125px; }
.chart-main { height: 350px; }

/* Chart of accounts table layout */
.table-fixed { table-layout: fixed; }
.col-w-150 { width: 150px; }
.col-w-110 { width: 110px; }
.spinner-sm { width: 2rem; height: 2rem; }

/* Inline form display */
.form-inline { display: inline; }

/* Disabled nav item state */
.nav-item-disabled { pointer-events: none; opacity: 0.6; }

/* Large modal dialog */
.modal-xl-custom { max-width: 1100px; max-height: 95vh; }
.modal-content-scroll { max-height: 95vh; }


/* Report filter input widths */
.report-filter-wide { min-width: 220px; max-width: 280px; }
.report-filter-asof { min-width: 190px; }

/* Brand color card in visa dashboard */
.card-brand-purple { background-color: #7239EA; }

/* Cropper / image upload UI */
.cropper-preview-area {
    min-height: 400px;
    max-height: 500px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cropper-preview-img { max-width: 100%; max-height: 500px; }
.quality-label-sm { min-width: 60px; }
.quality-label-lg { min-width: 60px; text-align: right; }
.rotate-90 { transform: rotate(90deg); }
.camera-fullscreen { background: #000; min-height: 70vh; }
.camera-fullscreen-img { max-width: 100%; max-height: 70vh; object-fit: contain; }

/* Passport image upload input container */
.passport-upload-input {
    border-width: 2px !important;
    width: 100%;
    position: relative;
}
/* Passport image preview wrapper */
.passport-upload-wrapper {
    height: 450px !important;
    width: 100% !important;
    position: relative;
    display: block;
}
/* Image action button - top-right (edit/upload) */
.img-action-btn-tr {
    position: absolute;
    top: 10px;
    right: 22px;
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Image action button - top-left (view) */
.img-action-btn-tl {
    position: absolute;
    top: 10px;
    left: 22px;
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Image action button - top-left small (view for compact) */
.img-action-btn-tl-sm {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Image action button - bottom-right (remove) */
.img-action-btn-br {
    position: absolute;
    top: 365px;
    right: 1px;
    left: auto;
    bottom: auto;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon color utilities (used in application view status cards) */
.text-color-purple  { color: #7239EA; }
.text-color-green   { color: #50CD89; }
.text-color-red     { color: #F1416C; }
.text-color-yellow  { color: #FFC700; }
.text-color-gray    { color: #7E8299; }
.text-color-blue    { color: #009EF7; }

/* Symbol background utilities */
.symbol-bg-purple { background-color: #7239EA15; }
.symbol-bg-blue   { background-color: #009EF715; }

/* Additional symbol background & icon color utilities */
.symbol-bg-yellow  { background-color: #FFC70015; }
.symbol-bg-green   { background-color: #17C65315; }
.text-color-lime   { color: #00ff37; }
.text-color-teal   { color: #17C653; }

/* Macro image upload - smaller variant (160px height) */
.img-upload-wrapper-sm {
    height: 200px !important;
    width: 100% !important;
    position: relative;
    display: block;
}
/* Macro image upload border container */
.img-upload-container {
    border-width: 2px !important;
    width: 100%;
    position: relative;
}
/* Image action button - bottom-right (small, top:115px) */
.img-action-btn-br-sm {
    position: absolute;
    top: 155px;
    right: 1px;
    left: auto;
    bottom: auto;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image upload action icon - restore pointer-events (overrides image-input disabled state) */
.img-upload-action { cursor: pointer; pointer-events: auto; }