/*
 * Core CSS - Common Utilities and Patterns
 * Shared styles used across multiple features and pages
 */

/* ===========================================
   FLEXBOX UTILITIES AND LAYOUT PATTERNS
   =========================================== */

/* Full-height viewport container with flex layout */
.vh-flex-container {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
    box-sizing: border-box;
}

/* Flex row that fills available space */
.flex-row-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Flex column that fills available space */
.flex-col-fill {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Prevent flex item from growing or shrinking */
.flex-fixed {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Scrollable wrapper for tables or content */
.scrollable-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* Sticky table header */
.sticky-table-header thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #343a40;
}

/* ===========================================
   PAGE-LEVEL UTILITIES
   =========================================== */

/* Prevent page body from scrolling */
.no-scroll {
    overflow: hidden;
}

/* ===========================================
   COMMON CARD PATTERNS
   =========================================== */

/* Card with fixed height in flex layouts */
.flex-card-fixed {
    flex-shrink: 0;
    flex-grow: 0;
}

.flex-card-fixed .card-body {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Card that expands to fill available space */
.flex-card-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.flex-card-fill .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ===========================================
   FAQ / ACCORDION PATTERNS
   =========================================== */

.faq-toggle {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.faq-toggle:hover {
    text-decoration: none !important;
}

.faq-toggle:focus {
    box-shadow: none !important;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-toggle.collapsed .faq-icon {
    transform: rotate(0deg);
}

.faq-toggle:not(.collapsed) .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    transition: all 0.3s ease;
}

.faq-item:hover .faq-question h5 {
    color: #0d6efd !important;
}

/* ===========================================
   GENERAL STYLING UTILITIES
   =========================================== */

/* Badge styling */
.badge {
    font-size: 0.875rem;
}

/* Small text utility */
.small {
    font-size: 0.875rem;
}

/* Material icons sizing */
.material-icons.md-18 {
    font-size: 18px;
}

/* ===========================================
   FILTER STATUS INDICATORS (GLOBAL)
   =========================================== */

/* Container for filter status messages */
#filterStatus,
.filter-status {
    display: none;
}

#filterStatusContainer,
.filter-status-container {
    min-height: 24px;
}

/* Keep individual filter term badges styled */
#filterStatusContainer .badge,
.filter-status-container .badge {
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

/* Style overall filter status messages as plain text */
#overallFilterStatus,
.overall-filter-status,
#filterStatus,
#filterStatusContainer .badge.bg-warning,
.filter-status-container .badge.bg-warning {
    background: none !important;
    color: #495057 !important;
    font-size: 0.875rem;
    font-weight: 400;
    padding: 0;
    border-radius: 0;
}