/**
 * ============================================================================
 * MUAADH SPECS — Vehicle specifications dialog + select
 * ============================================================================
 *
 * Component rules extracted from muaadh-core.css in Phase 3 Wave 4
 * (2026-05-13).
 *
 * Paired with: resources/views/catalog/partials/specs-modal.blade.php
 *
 * Owns:
 *   - .muaadh-specs-dialog__body / __footer (modal chrome)
 *   - .muaadh-specs-select (custom-styled dropdown)
 *       .muaadh-specs-select__trigger / __text / __arrow / __list / __item
 *   - state modifiers: --open, --active, --readonly
 *   - custom scrollbar styling for the spec lists
 *
 * Loaded on every page via shell layouts. The specs dialog itself only
 * renders when triggered (vehicle catalog drill-down), but the styles
 * must be present at load time to avoid a flash on first open.
 * ============================================================================
 */

.muaadh-specs-dialog__body {
    overflow-x: clip;
    padding: var(--space-4);
}
/* Modal Footer - Always visible */
.muaadh-specs-dialog__footer {
    flex-shrink: 0;
    border-top: var(--chassis-border-thin) solid var(--border-light);
}
/* Custom scrollbar for modal body */
.muaadh-specs-dialog__body::-webkit-scrollbar {
    width: 12px;
}
.muaadh-specs-dialog__body::-webkit-scrollbar-track {
    background: var(--surface-sunken);
}
.muaadh-specs-dialog__body::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--chassis-radius-xs);
}
/* ----- Flow-based Custom Select ----- */
.muaadh-specs-select {
    width: 100%;
}
.muaadh-specs-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--text-sm);
    line-height: var(--theme-line-height);
    color: var(--text-primary);
    background-color: var(--theme-bg-body);
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--chassis-duration-fast) ease, box-shadow var(--chassis-duration-fast) ease;
    text-align: start;
}
.muaadh-specs-select__trigger:hover:not(:disabled) {
    border-color: var(--theme-primary);
}
.muaadh-specs-select__trigger:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}
.muaadh-specs-select__trigger:disabled {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}
.muaadh-specs-select__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: var(--space-2);
    font-size: var(--text-sm);
}
.muaadh-specs-select__arrow {
    font-size: var(--text-xs);
    color: var(--text-muted);
    transition: transform var(--chassis-duration-quick) ease;
    flex-shrink: 0;
}
/* List - Flow-based, NO position absolute */
.muaadh-specs-select__list {
    display: none;
    margin-top: var(--space-1);
    max-height: 150px;
    overflow-y: auto;
    background: var(--theme-bg-body);
    border: var(--chassis-border-thin) solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px var(--theme-overlay-medium);
}
.muaadh-specs-select--open .muaadh-specs-select__list {
    display: block;
}
/* Scrollbar for list */
.muaadh-specs-select__list::-webkit-scrollbar {
    width: 12px;
}
.muaadh-specs-select__list::-webkit-scrollbar-track {
    background: var(--surface-sunken);
}
.muaadh-specs-select__list::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--chassis-radius-xs);
}
/* List Items */
.muaadh-specs-select__item {
    padding: var(--space-2-5);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.1s ease;
    border-bottom: var(--chassis-border-thin) solid var(--border-light);
}
.muaadh-specs-select__item:last-child {
    border-bottom: none;
}
.muaadh-specs-select__item:hover {
    background: var(--surface-sunken);
}
.muaadh-specs-select__item--active {
    background: var(--action-primary-light);
    color: var(--theme-primary);
    font-weight: var(--theme-font-medium);
}
.muaadh-specs-select__item--active:hover {
    background: var(--action-primary-light);
}
/* Readonly state */
.muaadh-specs-select--readonly .muaadh-specs-select__trigger {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
    cursor: not-allowed;
}