/* =================================================================
   TTI PROGRAM INDEX - Dedicated Styles
   ================================================================= */

/* =================================================================
   GLOBAL & SHARED STYLES (scoped to TTI index)
   ================================================================= */

/* Hides the default dropdown arrow for operator sections only */
.tti-program-index-wrapper summary::-webkit-details-marker,
.tti-program-index-wrapper summary::marker {
    display: none;
}

/* Fallback to ensure no list-style icon appears in operator sections */
.tti-program-index-wrapper summary {
    list-style: none;
}

/* Show/Hide text based on details open/closed state */
.tti-program-index-wrapper .closed-text {
    display: inline;
}

.tti-program-index-wrapper .open-text {
    display: none;
}

.tti-program-index-wrapper details[open] > summary .closed-text {
    display: none;
}

.tti-program-index-wrapper details[open] > summary .open-text {
    display: inline;
}

/* =================================================================
   TTI PROGRAM INDEX CONTAINER
   ================================================================= */

.tti-program-index-wrapper {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

.tti-program-index-wrapper h1,
.tti-program-index-wrapper h2,
.tti-program-index-wrapper h4 {
    font-family: sans-serif;
    margin: 0;
}

/* --- Alphabet Filter (Navy Blue Theme) --- */
#alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #dddddd;
}

#alphabet-filter button {
    padding: 8px 15px;
    text-decoration: none;
    background-color: #00004d;
    color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s ease;
    cursor: pointer;
}

#alphabet-filter button.active {
    background-color: #00004d;
    color: #ffffff;
    border-color: #dddddd;
}

/* Facility card text colors - using specificity instead of !important */
.tti-program-index-wrapper .facility-card {
    color: #000000;
}

.tti-program-index-wrapper .facility-card .facility-details p {
    color: #000000;
}

.tti-program-index-wrapper .facility-card .facility-details strong {
    color: #333333;
}

.tti-program-index-wrapper .facility-card .facility-name {
    color: #000000;
}

/* =================================================================
   FACILITY DIRECTORY
   ================================================================= */

.facility-card {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF5CB 100%);
    color: #000000;
    word-wrap: break-word;
    border: 2px solid #e0e0e0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.facility-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.facility-card.status-open {
    border-color: #d45500; /* Accessible orange */
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF0E6 100%);
}

.facility-card.status-transferred {
    border-color: #5a5a5a; /* Accessible gray */
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
}

.facility-card.status-closed {
    border-color: #0d7a8a; /* Accessible teal */
    background: linear-gradient(135deg, #FFFFFF 0%, #E6F7F9 100%);
}

.facility-card.status-unknown {
    border-color: #767676; /* Accessible gray */
    background: linear-gradient(135deg, #FFFFFF 0%, #F9F9F9 100%);
}

/* =================================================================
   FACILITIES GRID & OPERATORS
   ================================================================= */

.facilities-database {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    justify-content: center;
    gap: 15px;
    grid-auto-rows: auto;
    align-items: start;
}

.controls {
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #FFF5CB 0%, #AEE0ED 100%);
    border-radius: 8px;
    border: 2px solid #33A7B5;
    box-shadow: 0 3px 8px rgba(51, 167, 181, 0.2);
}

.controls input,
.controls select {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #dddddd;
    border-radius: 4px;
}

.controls input {
    width: 300px;
}

.facility-name {
    font-size: 0.9em;
    font-weight: bold;
    margin: 0 0 4px 0;
    color: #000000;
    border-bottom: 1px solid #dddddd;
    padding: 0;
}

.facility-details strong {
    color: #333333;
}

.status-badge {
    padding: 2px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    background: none;
    font-weight: bold;
}

/* Status badge colors - WCAG AA compliant */
.status-badge.status-open {
    color: #d45500; /* Darker orange for better contrast (4.54:1) */
}

.status-badge.status-closed {
    color: #0d7a8a; /* Darker teal for better contrast (4.52:1) */
}

.status-badge.status-transferred {
    color: #5a5a5a; /* Darker gray for better contrast (7.0:1) */
}

.status-badge.status-unknown {
    color: #767676; /* Darker gray for better contrast (4.54:1) */
}

.facility-details {
    color: #000000;
    font-size: 0.9em;
}

.operator-section {
    padding: 15px;
    width: 220px;
    min-height: 100%;
    background: linear-gradient(135deg, #000080 0%, #00004d 100%);
    color: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    border: 2px solid #33A7B5;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(51, 167, 181, 0.25);
}

.operator-section:hover {
    box-shadow: 0 4px 12px rgba(51, 167, 181, 0.35);
    transform: translateY(-2px);
}

.operator-name {
    color: #ffffff;
    padding: 12px;
    font-size: 1.4em;
    font-weight: bold;
    cursor: default;
    user-select: none;
    position: relative;
    margin: 0 auto;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    display: block;
}

.operator-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.operator-name-long {
    font-size: 0.9em;
}

.operator-location {
    display: block;
    color: #fff;
    font-weight: normal;
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;
    border-top: 1px solid #dddddd;
    line-height: 1.3em;
}

details.operator-section:not([open]) {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

details.operator-section[open] {
    width: 100%;
    max-width: 600px;
    grid-column: 1 / -1;
}

details.operator-section[open] .operator-header {
    padding: 12px;
    flex-shrink: 0;
}

details.operator-section[open] .operator-content-scrollable {
    height: auto;
    max-height: 600px;
    overflow-y: auto;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

/* Consistent scrollbar styling */
.operator-content-scrollable::-webkit-scrollbar {
    width: 6px;
}

.operator-content-scrollable::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.operator-content-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.operator-header {
    color: #ffffff;
    padding: 12px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.1;
    background-color: #00004d;
    cursor: pointer;
    position: relative;
}

details.operator-section summary {
    cursor: pointer;
    display: block;
}

summary.operator-header::after {
    content: '+ Click for details';
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    pointer-events: none;
}

details[open] > summary.operator-header::after {
    content: '- Collapse details';
}

.facilities-grid {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.05);
}

.facilities-grid::-webkit-scrollbar {
    width: 6px;
}

.facilities-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.facilities-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.operator-extra-content {
    max-height: 120px;
    overflow-y: auto;
    padding: 6px 8px;
}

.operator-extra-content p {
    margin: 4px 0;
    line-height: 1.3;
}

.operator-content-scrollable {
    overflow-y: auto;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.05);
}

.operator-details {
    font-size: 0.9em;
    opacity: 0.9;
    font-weight: normal;
    margin-top: 8px;
    color: #ffffff;
}

.operator-details a {
    color: #ffffff;
}

.operator-content-scrollable p {
    margin: 3px 0;
    line-height: 1.3;
    color: #ffffff;
}

.facilities-list {
    padding: 8px;
}

/* ==========================================================
CONTROLS
================================================================*/
.tti-program-index-wrapper .controls {
    grid-column: 1 / -1;
    margin-bottom: 10px;
    padding: 15px;
    background: linear-gradient(135deg, #FFF5CB 0%, #AEE0ED 100%);
    border-radius: 8px;
    border: 2px solid #33A7B5;
    box-shadow: 0 3px 8px rgba(51, 167, 181, 0.2);
}

.tti-program-index-wrapper .controls input[type="text"] {
    flex: 1;
    max-width: 400px;
    padding: 8px 12px;
    cursor: text;
}

.tti-program-index-wrapper .controls select {
    min-width: 180px;
    padding: 8px 12px;
    cursor: pointer;
}

.tti-program-index-wrapper .controls button {
    padding: 8px 16px;
    white-space: nowrap;
    cursor: pointer;
}

.open-text,
.closed-text {
    cursor: pointer;
}

/* ===========================================================
RESPONSIVE
===============================================================*/
@media (max-width: 768px) {
    .facilities-database {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        padding: 5px;
        gap: 10px;
    }

    .operator-section,
    details.operator-section:not([open]),
    details.operator-section[open] {
        width: 100%;
        min-width: 180px;
        max-width: 100%;
    }

    details.operator-section[open] .operator-content-scrollable {
        padding: 12px;
    }

    #alphabet-filter {
        gap: 4px;
        padding-bottom: 1em;
    }

    #alphabet-filter button {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    .controls input {
        width: 100%;
        max-width: 100%;
    }
}