/* ============================================
   XDOCKET UNIVERSAL TABS SYSTEM
   Version: 2.0.0
   Path: /css/core/xdocket-tabs.css
   Description: Uniform tab styling for all xDocket modules
   Style: MatterDetails pattern (bordered, rounded corners)
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Tab Colors */
    --xd-tab-active-color: #007bff;
    --xd-tab-inactive-color: #6c757d;
    --xd-tab-hover-color: #212529;
    --xd-tab-border-color: #dee2e6;
    --xd-tab-bg: #ffffff;
    /* Tab Dimensions */
    --xd-tab-height: 48px;
    --xd-tab-padding-x: 0.75rem;
    --xd-tab-padding-y: 0.5rem;
    --xd-tab-indicator-height: 3px;
    --xd-tab-border-radius: 12px;
    /* Tab Typography */
    --xd-tab-font-size: 0.8125rem;
    --xd-tab-font-weight: 500;
    /* Tab Transitions */
    --xd-tab-transition: all 0.2s ease;
}

/* ============================================
   TAB CONTAINER - MatterDetails Style
   ============================================ */
.nav-tabs-container,
.tab-navigation,
.tab-navigation.page-level {
    display: flex;
    background: var(--xd-tab-bg);
    border: 1px solid var(--xd-tab-border-color);
    border-radius: var(--xd-tab-border-radius) var(--xd-tab-border-radius) 0 0;
    padding: 0 2rem;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    flex-shrink: 0;
    /* Connect seamlessly with content */
    border-bottom: 1px solid var(--xd-tab-border-color); /* Keep internal separator */
}

    /* Hide scrollbar but maintain functionality */
    .nav-tabs-container::-webkit-scrollbar,
    .tab-navigation::-webkit-scrollbar,
    .tab-navigation.page-level::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs-container,
    .tab-navigation,
    .tab-navigation.page-level {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

        /* ============================================
   TAB ITEMS
   ============================================ */
        .tab-item,
        .tab-navigation .tab-item,
        .nav-tabs-container .tab-item {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            padding: var(--xd-tab-padding-y) var(--xd-tab-padding-x);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--xd-tab-inactive-color);
            font-size: var(--xd-tab-font-size);
            font-weight: var(--xd-tab-font-weight);
            cursor: pointer;
            white-space: nowrap;
            transition: var(--xd-tab-transition);
            position: relative;
            flex: 0 0 auto;
            height: var(--xd-tab-height);
            user-select: none;
            font-family: inherit;
            letter-spacing: -0.01em;
        }

            /* Tab Hover State */
            .tab-item:hover {
                color: var(--xd-tab-hover-color);
                background: #f8f9fa;
            }

            /* Tab Active State */
            .tab-item.active {
                color: var(--xd-tab-hover-color);
                border-bottom-color: var(--xd-tab-active-color);
            }

                /* Active Tab Indicator - 3px blue line */
                .tab-item.active::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: var(--xd-tab-padding-x);
                    right: var(--xd-tab-padding-x);
                    height: var(--xd-tab-indicator-height);
                    background: var(--xd-tab-active-color);
                    border-radius: 1px;
                }

            /* ============================================
   TAB ICONS
   ============================================ */
            .tab-item i {
                font-size: 0.9375rem;
                opacity: 0.9;
            }

            .tab-item.active i {
                opacity: 1;
            }

            /* ============================================
   TAB BADGES
   ============================================ */
            .tab-badge,
            .tab-item .badge {
                background: rgba(0, 123, 255, 0.1);
                color: var(--xd-tab-active-color);
                padding: 1px 6px;
                border-radius: 20px;
                font-size: 0.625rem;
                font-weight: 600;
                margin-left: 0.375rem;
                min-width: 18px;
                text-align: center;
            }

            /* Active tab badge */
            .tab-item.active .tab-badge,
            .tab-item.active .badge {
                background: var(--xd-tab-active-color);
                color: white;
            }

            /* Danger/warning badge variant */
            .tab-badge.danger,
            .tab-item .badge.danger {
                background: #ff3b30;
                color: white;
            }

/* ============================================
   TAB CONTENT CONTAINER - MatterDetails Style
   ============================================ */
.tab-content-container,
.tab-content-container.page-level {
    background: var(--xd-tab-bg);
    border: 1px solid var(--xd-tab-border-color);
    border-top: none; /* No top border - connects to tabs */
    border-radius: 0 0 var(--xd-tab-border-radius) var(--xd-tab-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 400px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* ============================================
   TAB PANES
   ============================================ */
.tab-pane {
    display: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    position: relative;
    min-height: 200px;
    -webkit-overflow-scrolling: touch;
}

    .tab-pane.active {
        display: flex;
        flex-direction: column;
    }

/* Scrollbar styling */
.tab-pane {
    scrollbar-width: thin;
    scrollbar-color: var(--xd-tab-inactive-color) var(--xd-tab-bg);
}

    .tab-pane::-webkit-scrollbar {
        width: 6px;
    }

    .tab-pane::-webkit-scrollbar-track {
        background: #f8f9fa;
    }

    .tab-pane::-webkit-scrollbar-thumb {
        background: var(--xd-tab-inactive-color);
        border-radius: 3px;
    }

/* ============================================
   ENSURE SEAMLESS CONNECTION
   ============================================ */
/* Remove any potential gaps between tabs and content */
.nav-tabs-container + .tab-content-container,
.tab-navigation + .tab-content-container,
.tab-navigation.page-level + .tab-content-container.page-level {
    margin-top: 0 !important;
}

/* Ensure page-container doesn't add gaps */
.page-container[data-module="accounting"] .nav-tabs-container,
.page-container[data-module="matter-details"] .tab-navigation {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .nav-tabs-container,
    .tab-navigation {
        border-radius: 0;
        margin: 0;
    }

    .tab-content-container {
        border-radius: 0;
        margin: 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .nav-tabs-container,
    .tab-navigation {
        display: none !important;
    }

    .tab-pane {
        display: block !important;
        page-break-inside: avoid;
    }
}