/* ===========================================================================
   TABMENU - VERSION B (Modern FEX Style - Light Internal Tabs)
   Matches menu.css styling but adapted for content-level tabs
   =========================================================================== */

.tab-menu {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 4px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

/* Base tab button */
.tab-menu .tab-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: var(--color-gray-dark);
    padding: 10px 16px;
    font-size: small;
    font-weight: 500;
    border-radius: var(--radius-tiny);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Hover effect (same family as menu.css) */
.tab-menu .tab-btn:hover {
    background: var(--color-blue-primary);
    color: #fff;
    border: 1px solid var(--color-blue-primary);
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

/* Active tab (matches menu.css but lighter) */
.tab-menu .tab-btn.active {
    background: #fff;
    color: var(--color-blue-primary);
    border: 1px solid var(--color-blue-primary);
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Search area aligned to right */
.tab-menu .tab-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid #e5e7eb;
}

/* Input identical to Form.css */
.tab-menu .tab-search input {
    padding: 10px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-tiny);
    background: #fff;
    font-size: var(--font-size-small);
    color: var(--color-text);
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tab-menu .tab-search input:focus {
    border-color: var(--color-border-default-focus);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    outline: none;
}