/**
 * Site Switcher Component Styles
 *
 * Dropdown component for site selection mode switching.
 * Uses Mission Control design system tokens.
 */

.mc-site-switcher {
    position: relative;
    display: inline-flex;
}

/* Trigger Button */
.mc-site-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2, 0.5rem);
    padding: var(--mc-space-2, 0.5rem) var(--mc-space-3, 0.75rem);
    background: var(--mc-surface-elevated, #ffffff);
    border: 1px solid var(--mc-border-color, #e5e7eb);
    border-radius: var(--mc-radius-md, 0.5rem);
    color: var(--mc-text-primary, #111827);
    font-size: var(--mc-text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    max-width: 250px;
}

.mc-site-switcher__trigger:hover {
    background: var(--mc-surface-hover, #f9fafb);
    border-color: var(--mc-border-hover, #d1d5db);
}

.mc-site-switcher__trigger:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--mc-focus-ring, rgba(59, 130, 246, 0.5));
}

.mc-site-switcher__icon {
    font-size: 1.25rem;
    color: var(--mc-text-secondary, #6b7280);
}

.mc-site-switcher__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-site-switcher__caret {
    font-size: 1.25rem;
    color: var(--mc-text-tertiary, #9ca3af);
    transition: transform 0.2s ease;
}

.mc-rotate-180 {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.mc-site-switcher__dropdown {
    position: absolute;
    top: calc(100% + var(--mc-space-1, 0.25rem));
    right: 0;
    z-index: var(--mc-z-dropdown, 50);
    min-width: 320px;
    max-width: 400px;
    background: var(--mc-surface-elevated, #ffffff);
    border: 1px solid var(--mc-border-color, #e5e7eb);
    border-radius: var(--mc-radius-lg, 0.75rem);
    box-shadow: var(--mc-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    overflow: hidden;
}

/* Mode Tabs */
.mc-site-switcher__tabs {
    display: flex;
    border-bottom: 1px solid var(--mc-border-color, #e5e7eb);
    background: var(--mc-surface-subtle, #f9fafb);
}

.mc-site-switcher__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-1, 0.25rem);
    padding: var(--mc-space-3, 0.75rem) var(--mc-space-2, 0.5rem);
    background: transparent;
    border: none;
    color: var(--mc-text-secondary, #6b7280);
    font-size: var(--mc-text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.mc-site-switcher__tab:hover {
    color: var(--mc-text-primary, #111827);
    background: var(--mc-surface-hover, #f3f4f6);
}

.mc-site-switcher__tab--active {
    color: var(--mc-color-primary, #3b82f6);
    background: var(--mc-surface-elevated, #ffffff);
    border-bottom-color: var(--mc-color-primary, #3b82f6);
}

.mc-site-switcher__tab .material-symbols-rounded {
    font-size: 1.125rem;
}

/* Search */
.mc-site-switcher__search {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2, 0.5rem);
    padding: var(--mc-space-2, 0.5rem) var(--mc-space-3, 0.75rem);
    border-bottom: 1px solid var(--mc-border-subtle, #f3f4f6);
}

.mc-site-switcher__search .material-symbols-rounded {
    color: var(--mc-text-tertiary, #9ca3af);
    font-size: 1.25rem;
}

.mc-site-switcher__search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--mc-text-sm, 0.875rem);
    color: var(--mc-text-primary, #111827);
    outline: none;
}

.mc-site-switcher__search-input::placeholder {
    color: var(--mc-text-tertiary, #9ca3af);
}

/* Site List */
.mc-site-switcher__sites {
    max-height: 300px;
    overflow: visible;  /* Changed from 'hidden' to allow child scroll */
    display: flex;
    flex-direction: column;
}

.mc-site-switcher__list {
    flex: 1;
    overflow-y: auto;
    padding: var(--mc-space-2, 0.5rem);
}

.mc-site-switcher__site {
    display: flex;
    align-items: center;
    gap: var(--mc-space-3, 0.75rem);
    padding: var(--mc-space-2, 0.5rem) var(--mc-space-3, 0.75rem);
    border-radius: var(--mc-radius-md, 0.5rem);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mc-site-switcher__site:hover {
    background: var(--mc-surface-hover, #f9fafb);
}

.mc-site-switcher__site--selected {
    background: var(--mc-color-primary-subtle, #eff6ff);
}

.mc-site-switcher__site--selected:hover {
    background: var(--mc-color-primary-subtle-hover, #dbeafe);
}

.mc-site-switcher__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mc-site-switcher__site-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-1, 0.25rem);
    min-width: 0;
}

.mc-site-switcher__site-name {
    font-size: var(--mc-text-sm, 0.875rem);
    font-weight: 500;
    color: var(--mc-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-site-switcher__site-code {
    font-size: var(--mc-text-xs, 0.75rem);
    color: var(--mc-text-tertiary, #9ca3af);
    flex-shrink: 0;
}

.mc-site-switcher__check {
    color: var(--mc-color-primary, #3b82f6);
    font-size: 1.25rem;
}

/* Empty State */
.mc-site-switcher__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mc-space-2, 0.5rem);
    padding: var(--mc-space-6, 1.5rem);
    color: var(--mc-text-tertiary, #9ca3af);
    text-align: center;
}

.mc-site-switcher__empty .material-symbols-rounded {
    font-size: 2rem;
    opacity: 0.5;
}

/* No Sites Assigned Empty State (Issue #7) */
.mc-site-switcher__empty--no-sites {
    padding: var(--mc-space-8, 2rem) var(--mc-space-4, 1rem);
}

.mc-site-switcher__empty--no-sites .material-symbols-rounded {
    color: var(--mc-color-warning, #f59e0b);
    opacity: 1;
}

.mc-site-switcher__empty-title {
    font-size: var(--mc-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--mc-text-primary, #111827);
    margin-top: var(--mc-space-1, 0.25rem);
}

.mc-site-switcher__empty-desc {
    font-size: var(--mc-text-xs, 0.75rem);
    max-width: 200px;
}

/* All Sites Info */
.mc-site-switcher__all-info {
    display: flex;
    align-items: flex-start;
    gap: var(--mc-space-3, 0.75rem);
    padding: var(--mc-space-4, 1rem);
    background: var(--mc-color-info-subtle, #eff6ff);
    color: var(--mc-color-info, #3b82f6);
}

.mc-site-switcher__all-info .material-symbols-rounded {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.mc-site-switcher__all-info p {
    margin: 0;
    font-size: var(--mc-text-sm, 0.875rem);
    line-height: 1.5;
}

/* Error Message Display (Issue #3) */
.mc-site-switcher__error {
    display: flex;
    align-items: center;
    gap: var(--mc-space-2, 0.5rem);
    padding: var(--mc-space-3, 0.75rem);
    background: var(--mc-color-error-subtle, #fef2f2);
    color: var(--mc-color-error, #dc2626);
    font-size: var(--mc-text-sm, 0.875rem);
    border-bottom: 1px solid var(--mc-color-error-border, #fecaca);
}

.mc-site-switcher__error .material-symbols-rounded {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.mc-site-switcher__error-dismiss {
    margin-left: auto;
    padding: var(--mc-space-1, 0.25rem);
    background: transparent;
    border: none;
    color: var(--mc-color-error, #dc2626);
    cursor: pointer;
    border-radius: var(--mc-radius-sm, 0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-site-switcher__error-dismiss:hover {
    background: var(--mc-color-error-subtle-hover, #fee2e2);
}

.mc-site-switcher__error-dismiss .material-symbols-rounded {
    font-size: 1rem;
}

/* Mobile Close Button (Issue #6) */
.mc-site-switcher__mobile-close {
    display: none;
    position: absolute;
    top: var(--mc-space-3, 0.75rem);
    right: var(--mc-space-3, 0.75rem);
    padding: var(--mc-space-2, 0.5rem);
    background: var(--mc-surface-elevated, #ffffff);
    border: 1px solid var(--mc-border-color, #e5e7eb);
    border-radius: var(--mc-radius-full, 9999px);
    color: var(--mc-text-secondary, #6b7280);
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--mc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.mc-site-switcher__mobile-close:hover {
    background: var(--mc-surface-hover, #f9fafb);
    color: var(--mc-text-primary, #111827);
}

.mc-site-switcher__mobile-close .material-symbols-rounded {
    font-size: 1.25rem;
}

/* Loading State in Button (Issue #1) */
.mc-site-switcher__btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-1, 0.25rem);
}

.mc-site-switcher__btn-loading .mc-spin {
    animation: mc-spin 1s linear infinite;
}

@keyframes mc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Action Buttons */
.mc-site-switcher__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--mc-space-2, 0.5rem);
    padding: var(--mc-space-3, 0.75rem);
    border-top: 1px solid var(--mc-border-color, #e5e7eb);
    background: var(--mc-surface-subtle, #f9fafb);
}

/* Transitions */
.mc-transition {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-duration-fast {
    transition-duration: 150ms;
}

.mc-opacity-0 {
    opacity: 0;
}

.mc-opacity-100 {
    opacity: 1;
}

.mc-translate-y-1 {
    transform: translateY(0.25rem);
}

.mc-translate-y-0 {
    transform: translateY(0);
}

/* Dark Mode */
[data-theme="dark"] .mc-site-switcher__trigger {
    background: var(--mc-surface-elevated, #1f2937);
    border-color: var(--mc-border-color, #374151);
    color: var(--mc-text-primary, #f9fafb);
}

[data-theme="dark"] .mc-site-switcher__trigger:hover {
    background: var(--mc-surface-hover, #374151);
}

[data-theme="dark"] .mc-site-switcher__dropdown {
    background: var(--mc-surface-elevated, #1f2937);
    border-color: var(--mc-border-color, #374151);
}

[data-theme="dark"] .mc-site-switcher__tabs {
    background: var(--mc-surface-subtle, #111827);
}

[data-theme="dark"] .mc-site-switcher__tab--active {
    background: var(--mc-surface-elevated, #1f2937);
}

[data-theme="dark"] .mc-site-switcher__site:hover {
    background: var(--mc-surface-hover, #374151);
}

[data-theme="dark"] .mc-site-switcher__site--selected {
    background: var(--mc-color-primary-subtle, rgba(59, 130, 246, 0.1));
}

[data-theme="dark"] .mc-site-switcher__actions {
    background: var(--mc-surface-subtle, #111827);
}

/* Responsive */
@media (max-width: 640px) {
    .mc-site-switcher__dropdown {
        position: fixed;
        top: auto;
        right: var(--mc-space-4, 1rem);
        bottom: var(--mc-space-4, 1rem);
        left: var(--mc-space-4, 1rem);
        min-width: auto;
        max-width: none;
        border-radius: var(--mc-radius-xl, 1rem);
        /* Add padding top for mobile close button */
        padding-top: var(--mc-space-12, 3rem);
    }

    /* Show mobile close button on small screens (Issue #6) */
    .mc-site-switcher__mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mc-site-switcher__label {
        display: none;
    }

    .mc-site-switcher__trigger {
        padding: var(--mc-space-2, 0.5rem);
    }

    /* Adjust tabs for mobile close button */
    .mc-site-switcher__tabs {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}