/**
 * Price list page (view=prices). Uses tokens from design-tokens.css and the
 * .md-input / .md-button-group components from doctors-list.css.
 * @package     com_doctors
 * @license     GNU General Public License version 2 or later
 */

.prices-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--md-spacing-2) 0 var(--md-spacing-4);
    color: var(--md-text-primary);
}

.prices-page [hidden] {
    display: none;
}

.prices-note {
    color: var(--md-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 var(--md-spacing-3);
}

/* Link to the lab test page (view=labtests) */
.prices-labtests-link {
    margin: 0 0 var(--md-spacing-3);
    padding: var(--md-spacing-2);
    border-radius: var(--md-input-border-radius);
    background: var(--md-primary-alpha);
    font-weight: 500;
}

.prices-page .prices-labtests-link a {
    color: var(--md-primary);
}

/* Controls: city switch + search. Without JS they do nothing, so they stay hidden. */
.prices-page:not(.is-enhanced) .prices-controls {
    display: none;
}

.prices-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--md-spacing-2);
    margin-bottom: var(--md-spacing-3);
}

.prices-city-switch {
    flex: 0 0 auto;
    max-width: 100%;
}

.prices-search-wrapper {
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
}

/* Category index: wrapping chips */
.prices-category-filter {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-1);
    flex: 0 1 auto;
    min-width: 0;
}

.prices-category-label {
    font-size: 0.85rem;
    color: var(--md-text-secondary);
}

.prices-category-select {
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    padding: 4px 8px;
    border: var(--md-input-border-width) solid var(--md-border-color);
    border-radius: var(--md-input-border-radius);
    background: var(--md-surface);
    color: var(--md-text-primary);
    font: inherit;
}

.prices-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--md-spacing-1);
    margin-bottom: var(--md-spacing-4);
}

/* prices-filter.js hides the index once the category select works */
.prices-nav[hidden] {
    display: none;
}

.prices-page .prices-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 14px;
    border-radius: var(--md-chip-border-radius);
    background: var(--md-chip-bg);
    color: var(--md-chip-text);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background var(--md-transition-duration-short) var(--md-transition-easing-standard),
                color var(--md-transition-duration-short) var(--md-transition-easing-standard);
}

.prices-page .prices-nav a:hover,
.prices-page .prices-nav a:focus-visible {
    background: var(--md-primary-alpha);
    color: var(--md-primary);
}

.prices-no-results {
    text-align: center;
}

.prices-no-results .alert {
    margin: 0;
    border: 0;
    border-radius: var(--md-input-border-radius);
    background: var(--md-chip-bg);
    color: var(--md-text-secondary);
}

.prices-no-results p {
    margin: 0;
}

/* Sections and tables */
.prices-section {
    margin-bottom: var(--md-spacing-4);
    scroll-margin-top: var(--md-spacing-3);
}

.prices-section-summary {
    display: flex;
    align-items: baseline;
    gap: var(--md-spacing-1);
    padding: var(--md-spacing-1) 0;
    border-bottom: 2px solid var(--md-primary);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--md-text-dark);
    cursor: pointer;
    list-style: none;
}

.prices-section-summary::-webkit-details-marker {
    display: none;
}

.prices-section-summary::before {
    content: "\25B8";
    flex: 0 0 auto;
    color: var(--md-primary);
    transition: transform var(--md-transition-duration-short) var(--md-transition-easing-standard);
}

.prices-section[open] > .prices-section-summary::before {
    transform: rotate(90deg);
}

.prices-section-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.prices-section-count {
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--md-text-secondary);
}

.prices-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.prices-table th,
.prices-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--md-divider);
    vertical-align: baseline;
    background: transparent;
}

.prices-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--md-text-secondary);
    text-align: left;
}

.prices-table tbody tr:nth-child(even) {
    background: var(--md-background);
}

.prices-table tbody tr:hover {
    background: var(--md-primary-alpha);
}

.prices-table tbody th {
    font-weight: 500;
    text-align: left;
    color: var(--md-text-dark);
    overflow-wrap: anywhere;
}

/* Price columns */
.prices-table td,
.prices-table thead th[data-city] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.prices-table td {
    font-weight: 600;
    color: var(--md-text-dark);
}

.prices-table td[data-empty] {
    font-weight: 400;
    color: var(--md-text-disabled);
}

.prices-name {
    display: block;
}

.prices-code {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--md-text-grey);
}

@media (max-width: 575px) {
    .prices-city-switch {
        flex: 1 1 100%;
    }

    .prices-city-switch .md-button-group-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .prices-table th,
    .prices-table td {
        padding: 10px 4px;
    }
}

/* Narrow screens: two-line rows (name, then code + price), no horizontal scroll */
@media (max-width: 599px) {
    .prices-table,
    .prices-table tbody {
        display: block;
    }

    .prices-table thead {
        display: none;
    }

    .prices-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px var(--md-spacing-1);
        padding: 10px 4px;
        border-bottom: 1px solid var(--md-divider);
    }

    .prices-table th,
    .prices-table td {
        padding: 0;
        border-bottom: 0;
    }

    .prices-table tbody th {
        display: contents;
    }

    .prices-name {
        flex: 0 0 100%;
        min-width: 0;
    }

    .prices-code {
        flex: 1 1 auto;
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .prices-table td::before {
        content: attr(data-label) ": ";
        font-weight: 400;
        color: var(--md-text-secondary);
    }

    .prices-table td[data-empty] {
        display: none;
    }
}