/* ============================================
   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: 1em;
    padding-right: 1em;
}

/* 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: 1em;
}

/* 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;
}

/* 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%;
}

/* Larger input - comfortable size for typing */
.ajax-contents-table .top-toolbar .input-group .form-control {
    height: auto;
    padding: 0.6rem 1rem;
    font-size: 1rem;
}

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


/* ===========================================
   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: 1em;
    order: 1;  /* Same as search, appears after it */
    margin-bottom: 0.75em;
    background-color: #f4f4f5;
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid #f4f4f5;
}

/* Chips container - left side */
.ehrplus-date-filter .date-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.5em;
    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.5em;
    flex-shrink: 0;
}

/* Labels inline with inputs */
.ehrplus-date-filter .date-filter-label {
    font-size: 0.875rem;
    color: #666;
    white-space: nowrap;
}

/* Date inputs - fixed width for consistency */
.ehrplus-date-filter .date-input {
    width: 150px;
    display: inline-block;
}

/* 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.5em;
    border-radius: 4px;
    border: 1px solid #ffc107;
}


/* ===========================================
   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.35em 0.75em;
}

.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;
    }
}