/* Highlight overlay styling */
.highlight-box {
    position: absolute;
    border: 2px solid #ff4d4d;
    background: rgba(255, 77, 77, 0.2);
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10;
}

/* Same height for both cards */
#aicx-ocr-tab .equal-card,
#aicx-display-tab .equal-card {
    height: 85vh;
    display: flex;
    flex-direction: column;
}

/* The area that should scroll inside each card */
#aicx-ocr-tab .equal-scroll,
#aicx-display-tab .equal-scroll {
    flex: 1 1 auto;
    min-height: 100%;
    overflow: auto;
}

.card-header .badge {
    font-weight: 500;
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border: 1px solid rgba(0, 0, 0, 0.1);
}


/* Sidebar link states */
.sidebar .nav-link {
    border-left: 3px solid transparent;
}

.sidebar .nav-link:hover {
    background: var(--bs-light);
}

.sidebar .nav-link.active {
    border-left-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: .25rem;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(233, 236, 239, 0) 0, rgba(255, 255, 255, .6) 50%, rgba(233, 236, 239, 0) 100%);
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

#aicx-ocr-result th[scope="row"] {
  white-space: nowrap;
  vertical-align: middle;
}
#aicx-ocr-result input.form-control-sm {
  min-width: 220px;
}
#aicx-ocr-result .text-success { color: #1a8754 !important; }
#aicx-ocr-result .text-warning { color: #d4a017 !important; }
#aicx-ocr-result .text-danger  { color: #cc3d3d !important; }

.ocr-card-header { cursor: pointer; user-select: none; }

#myTab .nav-link {
    border-radius: 0 !important;
    color: #000 !important;    
}
#myTab .nav-link.active {
    color: #fff !important;        /* white text */
    background-color: #343a40 !important;
}

/* Same height behaviour as before */
#aicx-process-tab .equal-card,
#aicx-display-tab .equal-card {
    height: 79vh; 
    display: flex;
    flex-direction: column;
}

/* Card body scrolls, but does NOT clip horizontally */
#aicx-process-tab .equal-card .card-body,
#aicx-display-tab .equal-card .card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: visible;    /* ⬅️ important: was hidden */
    padding-right: 1rem;    /* give space so button isn't under scrollbar */
}

#aicx-process-tab #aicx-pdf-slot .equal-card .card-body,
#aicx-display-tab #aicx-pdf-slot-display .equal-card .card-body {
    overflow-y: hidden;
    padding-right: 0;   /* no extra space on the right side */
}

#aicx-process-tab .input-group,
#aicx-display-tab .input-group {
    width: 100%;
}

#aicx-process-tab .input-group .form-control,
#aicx-display-tab .input-group .form-control {
    min-width: 0;   /* prevents the input from forcing the group wider than the card */
}
/* Patient Files row hover effect */
.patient-file-item {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.patient-file-item:hover {
    background-color: #f8f9fa;                 /* light grey highlight */
    box-shadow: inset 3px 0 0 #0d6efd;         /* blue left border highlight */
    cursor: pointer;
}

.aicx-conf {
  min-width: 64px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
}