/* PompositesStyles.css - Composite component styles */

/* Dialog */
.UnB-Dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.UnB-Dialog[aria-hidden="true"] {
    display: none;
}

.UnB-Dialog-Backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.UnB-Dialog-Container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    inline-size: min(90vw, 40em);
    max-block-size: 90vh;
    background-color: var(--unb-surface-elevated, #1e1e32);
    border-radius: var(--unb-border-radius, 0.75em);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: dialog-enter 0.3s ease-out;
}

@keyframes dialog-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(1em);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.UnB-Dialog-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 1.25em;
    border-block-end: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
}

.UnB-Dialog-Title {
    margin: 0;
    font-size: var(--unb-font-size-heading, 1.25rem);
    font-weight: 600;
    color: var(--unb-text-primary, #e8e8f0);
}

.UnB-Dialog-Body {
    flex: 1;
    padding: 1.25em;
    overflow-y: auto;
}

.UnB-Dialog-Footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75em;
    padding: 1em 1.25em;
    border-block-start: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
}

/* Card */
.UnB-Card {
    display: flex;
    flex-direction: column;
    background-color: var(--unb-surface-elevated, #1e1e32);
    border-radius: var(--unb-border-radius, 0.75em);
    overflow: hidden;
    transition: transform var(--unb-transition-duration, 300ms) ease-out,
                box-shadow var(--unb-transition-duration, 300ms) ease-out;
}

.UnB-Card--interactive {
    cursor: pointer;
}

.UnB-Card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.UnB-Card-Header {
    padding: 1em;
    border-block-end: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
}

.UnB-Card-Title {
    margin: 0;
    font-size: var(--unb-font-size-heading, 1.25rem);
    font-weight: 600;
}

.UnB-Card-Body {
    flex: 1;
    padding: 1em;
}

.UnB-Card-Footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    padding: 1em;
    border-block-start: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
}

/* Tabs */
.UnB-Tabs {
    display: flex;
    flex-direction: column;
}

.UnB-Tabs-List {
    display: flex;
    gap: 0.25em;
    border-block-end: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
}

.UnB-Tab {
    padding: 0.75em 1em;
    background: transparent;
    border: none;
    color: var(--unb-text-secondary, rgba(232, 232, 240, 0.7));
    font-family: inherit;
    font-size: var(--unb-font-size-label, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--unb-transition-duration, 200ms) ease-out,
                background-color var(--unb-transition-duration, 200ms) ease-out;
}

.UnB-Tab:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--unb-text-primary, #e8e8f0);
}

.UnB-Tab--active {
    color: var(--unb-accent-color, #64b5f6);
    border-bottom: 2px solid var(--unb-accent-color, #64b5f6);
}

.UnB-Tabs-Panel {
    padding: 1em;
}

.UnB-Tabs-Panel[hidden] {
    display: none;
}

/* Menu */
.UnB-Menu {
    display: flex;
    flex-direction: column;
    min-inline-size: 10em;
    padding: 0.5em 0;
    background-color: var(--unb-surface-elevated, #1e1e32);
    border-radius: var(--unb-border-radius, 0.5em);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.UnB-Menu-Item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0.75em;
    background: transparent;
    border: none;
    color: var(--unb-text-primary, #e8e8f0);
    font-family: inherit;
    font-size: var(--unb-font-size-body, 1rem);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--unb-transition-duration, 200ms) ease-out;
}

.UnB-Menu-Item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.UnB-Menu-Item[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.08);
}

.UnB-Menu-Divider {
    block-size: 1px;
    margin: 0.5em 0;
    background-color: var(--unb-border-color, rgba(255, 255, 255, 0.1));
}

/* Tooltip */
.UnB-Tooltip {
    position: absolute;
    z-index: 1001;
    padding: 0.5em 0.75em;
    background-color: var(--unb-surface-elevated, #1e1e32);
    border: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--unb-border-radius, 0.25em);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: var(--unb-font-size-caption, 0.75rem);
    color: var(--unb-text-primary, #e8e8f0);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--unb-transition-duration, 200ms) ease-out;
}

.UnB-Tooltip[data-visible="true"] {
    opacity: 1;
}

/* Popover */
.UnB-Popover {
    position: absolute;
    z-index: 1000;
    background-color: var(--unb-surface-elevated, #1e1e32);
    border: 1px solid var(--unb-border-color, rgba(255, 255, 255, 0.1));
    border-radius: var(--unb-border-radius, 0.5em);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: popover-enter 0.2s ease-out;
}

@keyframes popover-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}