/* ============================================================================
   Tonight's Targets — Phase 4 shell styles
   Reuses --astroutah-* custom properties already defined in foundation.css
   so this matches the rest of the app without redefining a color palette.
   ============================================================================ */

.att-container {
    align-items: start;
}

/* ---- Selection panel (left) ---- */

.att-selection-content {
    padding: var(--astroutah-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--astroutah-spacing-lg);
}

.att-control-group {
    display: flex;
    flex-direction: column;
    gap: var(--astroutah-spacing-sm);
}

.att-control-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--astroutah-text-secondary, #9ca3af);
}

.att-select {
    background: var(--astroutah-bg-primary, #111827);
    border: 1px solid var(--astroutah-border-light);
    border-radius: var(--astroutah-radius-sm);
    color: var(--astroutah-text-primary);
    padding: 8px 10px;
    font-size: 14px;
    width: 100%;
}

.att-select-small {
    width: auto;
    flex: 1;
}

.att-no-sites {
    color: var(--astroutah-text-secondary, #9ca3af);
    font-size: 13px;
    line-height: 1.5;
}
.att-no-sites a { color: var(--astroutah-accent-blue); }

.att-loading,
.att-error {
    padding: var(--astroutah-spacing-lg);
    text-align: center;
    color: var(--astroutah-text-secondary, #9ca3af);
    font-size: 14px;
}
.att-error { color: var(--astroutah-error); }

.att-toggle-caret {
    display: inline-block;
    transition: transform 0.15s ease;
}
.att-not-visible-toggle.expanded .att-toggle-caret {
    transform: rotate(90deg);
}

.att-date-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.att-date-input {
    background: var(--astroutah-bg-primary, #111827);
    border: 1px solid var(--astroutah-border-light);
    border-radius: var(--astroutah-radius-sm);
    color: var(--astroutah-text-primary);
    padding: 6px 10px;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

.att-date-tonight-btn {
    background: var(--astroutah-accent-blue);
    border: none;
    border-radius: var(--astroutah-radius-sm);
    color: #ffffff;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.att-date-tonight-btn:hover { opacity: 0.9; }

.att-filter-row {
    display: flex;
    align-items: center;
    gap: var(--astroutah-spacing-sm);
}

.att-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--astroutah-text-secondary, #9ca3af);
    white-space: nowrap;
    cursor: pointer;
}

/* ---- Results panel (right) ---- */

.att-results-content {
    padding: var(--astroutah-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--astroutah-spacing-lg);
}

/* Conditions banner */
.att-conditions-banner {
    background: var(--astroutah-bg-primary, #111827);
    border: 1px solid var(--astroutah-border-light);
    border-left: 4px solid var(--astroutah-success);
    border-radius: var(--astroutah-radius-sm);
    padding: var(--astroutah-spacing-md, 12px) var(--astroutah-spacing-lg);
}
.att-conditions-banner--fair { border-left-color: var(--astroutah-warning); }
.att-conditions-banner--poor { border-left-color: var(--astroutah-error); }

.att-conditions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--astroutah-spacing-lg);
}

.att-conditions-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--astroutah-text-primary);
}

.att-conditions-note {
    margin-top: 6px;
    font-size: 11px;
    color: var(--astroutah-text-secondary, #9ca3af);
    font-style: italic;
}

/* Target list */
.att-target-list {
    display: flex;
    flex-direction: column;
    gap: var(--astroutah-spacing-sm);
}

.att-target-card {
    background: var(--astroutah-bg-primary, #111827);
    border: 1px solid var(--astroutah-border-light);
    border-left: 4px solid var(--astroutah-border-medium);
    border-radius: var(--astroutah-radius-sm);
    padding: var(--astroutah-spacing-md, 12px) var(--astroutah-spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--astroutah-spacing-lg);
}

.att-card--good   { border-left-color: var(--astroutah-success); }
.att-card--fair   { border-left-color: var(--astroutah-warning); }
.att-card--poor   { border-left-color: var(--astroutah-error); }
.att-card--dimmed { opacity: 0.55; }
.att-card--highlighted {
    box-shadow: 0 0 0 2px var(--astroutah-accent-blue);
    animation: att-highlight-fade 2.5s ease-out;
}
@keyframes att-highlight-fade {
    0%   { background: var(--astroutah-accent-blue, #3b82f6); opacity: 1; }
    100% { background: transparent; }
}

.att-card-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.att-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--astroutah-text-primary);
}

.att-card-window {
    font-size: 13px;
    color: var(--astroutah-text-primary);
}

.att-card-note {
    font-size: 12px;
    color: var(--astroutah-text-secondary, #9ca3af);
}

.att-card-link {
    background: transparent;
    border: none;
    color: var(--astroutah-accent-blue);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 10px;
}
.att-card-link:hover { text-decoration: underline; }

/* Not-visible collapsed section */
.att-not-visible-toggle {
    background: transparent;
    border: none;
    color: var(--astroutah-text-secondary, #9ca3af);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 0;
}

.att-not-visible-list {
    margin-top: var(--astroutah-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--astroutah-spacing-sm);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .att-target-card {
        flex-direction: column;
        align-items: flex-start;
    }
}