/* ================================================================================= */
/* GENERAL STYLES                                                                    */
/* ================================================================================= */

/* Footer */
.hhs-footer {
    background-color: #1b1b1b;
}

/* List of Names */
.hhs-candid-record-list .hh-names a {
    font-size: 3vw;
}

@media (min-width: 640px) {
    .hhs-candid-record-list .hh-names a {
        font-size: 2vw;
    }
}

@media (min-width: 960px) {
    .hhs-candid-record-list .hh-names a {
        font-size: 1.2vw;
    }
}

.hhs-candid-record-list .hh-names > div {
    padding: 0px 5px 15px 5px;
}

.hhs-candid-record-list .hh-names a {
    padding: 0px 5px 15px 5px;
    white-space: nowrap;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0);
    transition: 0.2s ease;
    color: #888888 !important;
}

.hhs-candid-record-list .hh-names a:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transition: 0.2s ease;
    color: #ffffff !important;
}


/* ================================================================================= */
/* FILTER CONTROLS                                                                   */
/* ================================================================================= */

/* Reset Button */
.hhs-candid-record-list .hh-filter .hh-reset-button {
    color: #ccc;
    letter-spacing: 1px;
}

.hhs-candid-record-list .hh-filter .hh-reset-button .uk-icon {
    padding-right: 8px;
}


/* ================================================================================= */
/* STATE AND AGE SELECT DROPDOWNS                                                    */
/* ================================================================================= */

.hh-select {
    color: #fff;
    border: 1px solid #999;
    padding-left: 45px;
    margin-right: 20px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* General select styles */
.hhs-candid-record-list .hh-filter .uk-select {
    color: rgba(255,255,255,0.8) !important;
    letter-spacing: 1px;
}

/* State and Age select hover states */
.hhs-candid-record-list .hh-filter .uk-select.hh-select:hover {
    border-color: #dcad61 !important;
    color: #dcad61 !important;
}

/* State and Age select focus/active states - keep styling until clicked away */
.hhs-candid-record-list .hh-filter .uk-select.hh-select:focus,
.hhs-candid-record-list .hh-filter .uk-select.hh-select:active,
.hhs-candid-record-list .hh-filter .uk-select.hh-select:focus-visible {
    border-color: #dcad61 !important;
    color: #dcad61 !important;
    outline: none;
}

/* Icon color on hover */
.hh-select-wrapper:hover .hh-select-icon {
    color: #dcad61 !important;
}

/* Icon color when select has focus/active - target through parent wrapper */
.hh-select-wrapper:has(.hh-select:focus) .hh-select-icon,
.hh-select-wrapper:has(.hh-select:active) .hh-select-icon,
.hh-select-wrapper:has(.hh-select:focus-visible) .hh-select-icon {
    color: #dcad61 !important;
}

/* Persistent active state — applied via JS when a non-default filter value is selected */
.hhs-candid-record-list .hh-filter .uk-select.hh-select.hh-filter-active {
    border-color: #dcad61 !important;
    color: #dcad61 !important;
}

.hh-select-wrapper:has(.hh-select.hh-filter-active) .hh-select-icon {
    color: #dcad61 !important;
}


/* ================================================================================= */
/* ATTRIBUTES FILTER BUTTON + MODAL                                                  */
/* ================================================================================= */

/* Toggle button in the filter bar that opens the attributes modal */
.hh-attribute-summary {
    cursor: pointer;
    padding: 0 15px;
    min-height: 43px;
    background-color: transparent;
    border: 1px solid #999999;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.hh-summary-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.hh-icon {
    flex-shrink: 0;
    color: #999999;
}

.hh-summary-text {
    flex: 1;
    text-align: left;
}

/* Hover state */
.hh-attribute-summary:hover {
    color: #dcad61;
    border-color: #dcad61;
    background-color: transparent;
}

.hh-attribute-summary:hover .hh-icon {
    color: #dcad61;
}

/* Persistent active state — applied via JS when any attribute checkboxes are checked */
.hh-attribute-summary.hh-filter-active {
    color: #dcad61;
    border-color: #dcad61;
}

.hh-attribute-summary.hh-filter-active .hh-icon {
    color: #dcad61;
}

/* Focus state for keyboard navigation */
.hh-attribute-summary:focus {
    outline: none;
}

.hh-attribute-summary:focus-visible {
    color: #dcad61;
    border-color: #dcad61;
}

.hh-attribute-summary:focus-visible .hh-icon {
    color: #dcad61;
}

/* Attributes modal — dark theme to match the page */
.hhs-attributes-modal .uk-modal-dialog {
    background-color: #1a1a1a;
}

.hhs-attributes-modal .uk-modal-header {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.hhs-attributes-modal .uk-modal-title {
    color: #fff;
}

.hhs-attributes-modal .uk-modal-body {
    background-color: #1a1a1a;
}

/* AND/OR logic toggle */
.hh-attribute-logic-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* "Search operators:" label above the AND/OR buttons */
.hh-logic-toggle-label {
    color: #999;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Size down the toggle buttons so they don't dominate the dropdown */
.hh-attribute-logic-toggle .uk-button {
    padding: 0 15px;
    min-height: 30px;
    line-height: 30px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Column heading inside each grid column */
.hh-attribute-column-title {
    color: #dcad61;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 6px;
}

/* Checkbox options — single column within each grid child.
   font-family inherits from .uk-font-primary (applied via CSS to avoid adding the class to 41 labels) */
.hh-attribute-option {
    display: flex;
    align-items: flex-start;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.hh-attribute-option:hover {
    color: #dcad61;
}

/* Checked state — highlight the label text white */
.hh-attribute-option:has(input[type="checkbox"]:checked) {
    color: #ffffff;
}

.hh-attribute-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #999999;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    background-color: transparent;
}

.hh-attribute-option input[type="checkbox"]:checked {
    border-color: #dcad61;
    background-color: #dcad61;
}

/* Checkmark */
.hh-attribute-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #131313;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hh-attribute-option:hover input[type="checkbox"] {
    border-color: #dcad61;
}

/* Attributes modal footer — mobile only, dark theme */
.hhs-attributes-modal .hh-attributes-modal-footer {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

/* Reset button inside attributes modal — styled like the primary filter reset */
.hh-attributes-reset-btn {
    color: #ccc;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-decoration: none;
}

.hh-attributes-reset-btn:hover {
    color: #dcad61;
}

.hh-attributes-reset-btn .uk-icon {
    margin-right: 4px;
}

/* Continue button inside attributes modal */
.hh-attributes-continue-btn {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
    min-width: 120px;
}


/* ================================================================================= */
/* SEARCH BY NAME INPUT                                                              */
/* ================================================================================= */

.hhs-candid-record-list .uk-input {
    background-color: #131313;
}

.hhs-candid-record-list .uk-input::placeholder {
    color: #fff;
    opacity: 0.9;
}

#name_filter .uk-input {
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Hover state for wrapper affects icon, border, placeholder, and text */
#name_filter:hover .uk-form-icon {
    color: #dcad61 !important;
    transition: color 0.2s ease;
}

#name_filter:hover .uk-input {
    border-color: #dcad61 !important;
    color: #dcad61 !important;
}

#name_filter:hover .uk-input::placeholder {
    color: #dcad61 !important;
    transition: color 0.2s ease;
}

/* Focus state for input - reset text color back to normal and change background */
#name_filter .uk-input:focus {
    border-color: #dcad61 !important;
    color: rgba(255,255,255,0.8) !important;
    background-color: #131313 !important;
}

/* When input is focused, also change the icon color */
#name_filter .uk-input:focus ~ .uk-form-icon {
    color: #dcad61 !important;
}


/* ================================================================================= */
/* MODAL — INCIDENT FACTOR QUESTIONS & RATIONALE                                     */
/* ================================================================================= */

/* Individual question row */
.hh-question-row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hh-question-row:last-child {
    border-bottom: none;
}

/* Question text — base style */
.hh-question-text {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

/* True/found state — highlighted */
.hh-question-found .hh-question-text {
    color: #fff;
}

.hh-question-icon-true {
    color: #dcad61;
}

/* False/not-found state — grayed out */
.hh-question-not-found .hh-question-text {
    color: #666;
}

.hh-question-icon-false {
    color: #555;
}

/* Expand/shrink toggle buttons — forced to perfect squares */
.hh-toggle-unanswered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
}

.hh-toggle-unanswered svg {
    display: block;
}

/* Compact mode: hide not-found question rows */
.hh-questions-compact .hh-question-not-found {
    display: none;
}

/* "None found" placeholder shown under empty categories in compact mode */
.hh-question-none-found {
    color: #555;
    font-style: italic;
    padding: 8px 0;
}

/* Category heading inserted between question groups (matches attribute modal column titles) */
.hh-question-category-heading {
    padding-top: 20px;
}

/* Remove extra top padding on the first category heading */
.hh-question-category-heading:first-child {
    padding-top: 0;
}

.hh-question-category-title {
    color: #dcad61;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Rationale text shown below true questions */
.hh-rationale {
    color: #eee;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* ================================================================================= */
/* MODAL — LOADING SPINNER                                                           */
/* ================================================================================= */

/* Full viewport height with centered spinner while AJAX data loads.
   Prevents an abrupt height jump when the content (which always exceeds
   the viewport) appears. Only takes effect when JS removes the inline
   display:none — when hidden, the element collapses and doesn't affect layout. */
#modal-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
}


/* ================================================================================= */
/* MODAL — DEATH RECORDS / STATE REPORTS DOWNLOAD BUTTONS                            */
/* ================================================================================= */

/* Scoped overrides for the download buttons only — does not affect global uk-button */
.hh-download-btn {
    letter-spacing: 1px;
    font-size: 0.9rem;
    padding: 6px 15px;
    line-height: 1.6;
    min-height: 0;
}


/* ================================================================================= */
/* MODAL — SHARE LINK / STATE INFO / CANDID ID (below child's name)                  */
/* ================================================================================= */

/* Links — gray, no underline, gold on hover */
.hh-modal-meta .hh-link {
    text-decoration: none;
    color: #999;
}

.hh-modal-meta .hh-link:hover {
    text-decoration: none;
    color: #dcad61;
}

/* Custom copy icon — vertically centered with adjacent text */
.hh-modal-meta .hh-copy-icon {
    vertical-align: -2px;
    margin-right: 2px;
}

/* Copy-to-clipboard button — pointer cursor + relative for tooltip positioning */
.hh-modal-meta .hh-copy-btn {
    cursor: pointer;
    position: relative;
}

/* Brief tooltip that appears below the item after a successful copy */
.hh-modal-meta .hh-copy-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #dcad61;
    color: #222;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 10;
}

/* Fade-out state added by JS after a delay */
.hh-modal-meta .hh-copy-tooltip-fade {
    opacity: 0;
}

/* Slightly smaller text for all three items */
.hh-modal-meta .uk-h6 {
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* Remove vertical gutter when items wrap on small screens */
.hh-modal-meta > * {
    margin-top: 0 !important;
}