/* ============================================
   LAYOUT SELECTOR - Dropdown menus (clean style)
   ============================================ */

.layout-selector {
    position: relative;
    display: inline-block;
    z-index: 10000;
}

.layout-selector-btn {
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 10001;
}

.layout-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 240px;
    z-index: 99999;
    overflow: hidden;
}

.layout-dropdown.show {
    display: block;
}

.layout-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: white;
    border: none;
    border-bottom: 1px solid var(--gray-100);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.layout-option:last-child {
    border-bottom: none;
}

.layout-option:hover {
    background: var(--gray-50);
}

.layout-option.active {
    background: var(--primary-light);
}

.layout-icon {
    font-size: 18px;
    line-height: 1;
    width: 24px;
    text-align: center;
}

.layout-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.layout-info strong {
    color: var(--gray-800);
    font-size: 13px;
    font-weight: 600;
}

.layout-info small {
    color: var(--gray-400);
    font-size: 11px;
    font-weight: 400;
}

.layout-kbd {
    display: none;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.layout-dropdown.show {
    animation: dropdownFadeIn 0.15s ease-out;
}