/* ============================================
   ENHANCED LISTING - STRUCTURAL CHANGES ONLY
   senaite.ehrplus - EHRPlus customizations
   
   This CSS only changes the STRUCTURE/LAYOUT:
   - Moves search bar to full-width position above tabs
   - Keeps original SENAITE design language intact
   ============================================ */

/* ===========================================
   SECTION 1: TOP TOOLBAR LAYOUT
   Restructure to put search bar above filter tabs
   =========================================== */

/* Stack toolbar vertically: search on top, filters below */
.ajax-contents-table .top-toolbar.row {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5em;
    padding-right: 0.5em;
}

/* Search container - first (on top), full width */
.ajax-contents-table .top-toolbar > .col-sm-3 {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0.35em;
}

/* Filter bar container - second (below search), full width */
.ajax-contents-table .top-toolbar > .col-sm-8 {
    order: 2;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Compact state/transition tabs */
.ajax-contents-table .top-toolbar .nav-item.btn {
    padding: 0.15em 0.4em;
    font-size: 0.75rem;
    margin-right: 0.25em !important;
    margin-bottom: 0.25em !important;
    border-radius: 3px;
}

/* Loader column - position inline with search */
.ajax-contents-table .top-toolbar > .col-sm-1 {
    order: 1;
    position: absolute;
    right: 0;
    top: 0;
}


/* ===========================================
   SECTION 2: SEARCH INPUT SIZE
   Make search input slightly larger
   =========================================== */

/* Make input group full width */
.ajax-contents-table .top-toolbar .input-group {
    width: 100%;
}

/* Compact search input */
.ajax-contents-table .top-toolbar .input-group .form-control {
    height: auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
}

.ajax-contents-table .top-toolbar .input-group .btn {
    padding: 0.35rem 0.75rem;
}


/* ===========================================
   SECTION 3: RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 576px) {
    .ajax-contents-table .top-toolbar > .col-sm-1 {
        position: static;
        order: 1;
        flex: 0 0 auto;
        max-width: none;
        text-align: right;
        margin-bottom: 0.5em;
    }
}


/* ===========================================
   SECTION 4: DATE PICKER FILTER
   Chips on left, date inputs on right
   Uses SENAITE's design language (Bootstrap)
   =========================================== */

/* Date filter - flex row with space-between for chips left, inputs right */
.ehrplus-date-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    order: 1;  /* Same as search, appears after it */
    margin-bottom: 0.35em;
    background-color: #f8f9fa;
    padding: 0.3em 0.5em;
    border-radius: 3px;
    border: 1px solid #e9ecef;
}

/* Chips container - left side */
.ehrplus-date-filter .date-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.35em;
    flex-wrap: wrap;
}

/* Individual filter chip */
.ehrplus-date-filter .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background-color: #e7f1ff;
    border: 1px solid #b6d4fe;
    color: #0c5460;
    padding: 0.25em 0.5em;
    border-radius: 16px;
    font-size: 0.875rem;
    white-space: nowrap;
}

.ehrplus-date-filter .filter-chip .chip-icon {
    font-size: 0.8rem;
}

.ehrplus-date-filter .filter-chip .chip-text {
    font-weight: 500;
}

.ehrplus-date-filter .filter-chip .chip-remove {
    background: none;
    border: none;
    color: #0c5460;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.2em;
    cursor: pointer;
    opacity: 0.7;
}

.ehrplus-date-filter .filter-chip .chip-remove:hover {
    opacity: 1;
    color: #dc3545;
}

/* Date inputs container - right side */
.ehrplus-date-filter .date-filter-inputs {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex-shrink: 0;
}

/* Date range separator (em dash between inputs) */
.ehrplus-date-filter .date-range-separator {
    color: #adb5bd;
    font-size: 0.9rem;
    padding: 0 0.1em;
}

/* Date inputs - fixed width for consistency */
.ehrplus-date-filter .date-input {
    width: 130px;
    display: inline-block;
    padding: 0.2em 0.4em;
    font-size: 0.8rem;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .ehrplus-date-filter {
        flex-wrap: wrap;
    }
    
    .ehrplus-date-filter .date-filter-inputs {
        flex-wrap: wrap;
    }
    
    .ehrplus-date-filter .date-input {
        width: 130px;
    }
}

@media (max-width: 480px) {
    .ehrplus-date-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5em;
    }
    
    .ehrplus-date-filter .date-filter-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ehrplus-date-filter .date-input {
        width: 100%;
    }
}

/* Visual indicator when date filter is active */
.ehrplus-date-filter.filter-active {
    background-color: #fff3cd;
    padding: 0.3em 0.5em;
    border-radius: 3px;
    border: 1px solid #ffc107;
}

/* Sample/Department filter row */
.ehrplus-sample-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    order: 10;  /* Ensure it appears after date picker (order: 0) */
    margin-bottom: 0.35em;
    background-color: #f8f9fa;
    padding: 0.3em 0.5em;
    border-radius: 3px;
    border: 1px solid #e9ecef;
}

/* Sample filter chips container - left side */
.ehrplus-sample-filter .sample-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex-wrap: wrap;
}

/* Individual sample preset chip - icon + label */
.sample-chip.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.5em;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    color: #495057;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}

.sample-chip.preset-chip .chip-label {
    font-weight: 500;
}

.sample-chip.preset-chip svg {
    flex-shrink: 0;
    color: #6c757d;
}

.sample-chip.preset-chip:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.sample-chip.preset-chip:hover svg {
    color: #495057;
}

.sample-chip.preset-chip:active {
    background-color: #dee2e6;
}

/* Active state for sample preset chips */
.sample-chip.preset-chip.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.sample-chip.preset-chip.active svg {
    color: #fff;
}

.sample-chip.preset-chip.active:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Separator between sample types and departments */
.chip-separator {
    width: 1px;
    height: 18px;
    background-color: #dee2e6;
    margin: 0 0.15em;
}

.ehrplus-sample-filter .sample-filter-inputs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35em;
    flex-wrap: wrap;
}

.ehrplus-sample-filter .sample-filter-label {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
}

.ehrplus-sample-filter .form-control {
    width: 160px;
    padding: 0.2em 0.4em;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .ehrplus-sample-filter .form-control {
        width: 130px;
    }
}

@media (max-width: 480px) {
    .ehrplus-sample-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .ehrplus-sample-filter .form-control {
        width: 100%;
    }
}

/* ===========================================
   SECTION 4b: ICON FILTER BUTTONS
   Compact icon-only buttons for Apply/Clear
   =========================================== */

/* Base icon button style */
.ehrplus-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background-color: #fff;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.ehrplus-filter-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.ehrplus-filter-btn:active {
    background-color: #dee2e6;
}

.ehrplus-filter-btn svg {
    flex-shrink: 0;
}

/* Apply button - subtle green tint on hover */
.ehrplus-filter-btn-apply:hover {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #198754;
}

/* Clear button - subtle red tint on hover */
.ehrplus-filter-btn-clear:hover {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #dc3545;
}

/* When filter is active, highlight the clear button */
.filter-active .ehrplus-filter-btn-clear {
    background-color: #fff3cd;
    border-color: #ffda6a;
    color: #997404;
}

.filter-active .ehrplus-filter-btn-clear:hover {
    background-color: #ffe69c;
    border-color: #ffda6a;
    color: #664d03;
}


/* ===========================================
   SECTION 5: PRESET DATE CHIPS
   Quick filter buttons for common date ranges
   =========================================== */

/* Preset chips - look like buttons */
.ehrplus-date-filter .filter-chip.preset-chip {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    padding: 0.2em 0.5em;
    font-size: 0.8rem;
}

.ehrplus-date-filter .filter-chip.preset-chip:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.ehrplus-date-filter .filter-chip.preset-chip:active {
    background-color: #dee2e6;
}

/* Active preset chip - highlighted */
.ehrplus-date-filter .filter-chip.preset-chip.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.ehrplus-date-filter .filter-chip.preset-chip.active:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* Custom date range chip (when not a preset) */
.ehrplus-date-filter .filter-chip.active-filter {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}


/* ===========================================
   SECTION 6: PANELS COLUMN COMPACTION
   Truncate long Panels/Profile strings in listings
   =========================================== */

.ajax-contents-table td[data-col="Panels"],
.ajax-contents-table td[data-col="Profiles"],
.ajax-contents-table td[data-col="ProfilesTitle"],
.ajax-contents-table td[data-col="getProfilesTitle"] {
    max-width: 240px;
    width: 240px;
}

.ehrplus-panels-cell {
    display: inline-block;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

@media (max-width: 768px) {
    .ajax-contents-table td[data-col="Panels"],
    .ajax-contents-table td[data-col="Profiles"],
    .ajax-contents-table td[data-col="ProfilesTitle"],
    .ajax-contents-table td[data-col="getProfilesTitle"] {
        max-width: 180px;
        width: 180px;
    }

    .ehrplus-panels-cell {
        max-width: 180px;
    }
}


.LabNumber, .getId, .MRN,  .getSampleTypeTitle{
    width: 120px;
}

 .Patient, .getDateReceived {
    width: 200px;
 }

 .getProfilesTitle {
    max-width: 300px;
 }

 .ehrplus-row-delete-cell {
     width: 90px;
     text-align: right;
 }

 .ehrplus-row-delete {
     padding: 0.15rem 0.4rem;
     font-size: 0.75rem;
     line-height: 1.2;
 }