/**
 * SAW Admin - Table Wrapper & Split Layout
 * @package SAW_Visitors
 * @version 9.0.0 - FIXED: Proper scroll container for CSS Sticky
 */

/* ============================================
   SPLIT LAYOUT
   ============================================ */
.sa-table-split {
    flex: 1 !important;
    display: flex !important;
    min-height: 0 !important;
    overflow: hidden !important;
    
    /* Light blue gradient background */
    background: linear-gradient(
        135deg,
        #f0f9ff 0%,
        #e0f2fe 50%,
        #f0f9ff 100%
    );
}

/* ============================================
   TABLE PANEL
   ============================================ */
.sa-table-panel {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: transparent;
}

/* ============================================
   TABLE SCROLL - JEDINÝ SCROLL CONTAINER!
   ============================================ */
.sa-table-scroll {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background: transparent;
    
    /* Scroll padding pro sticky header - browser ví kde začít obsah */
    scroll-padding-top: calc(16px + var(--saw-toolbar-height, 54px) + 40px);
}

/* Custom scrollbar */
.sa-table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sa-table-scroll::-webkit-scrollbar-track {
    background: var(--saw-bg-secondary, #f1f5f9);
}

.sa-table-scroll::-webkit-scrollbar-thumb {
    background: var(--saw-gray-300, #cbd5e1);
    border-radius: var(--saw-radius-md, 6px);
}

.sa-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--saw-gray-400, #94a3b8);
}

/* ============================================
   SIDEBAR VARIANT
   ============================================ */
.sa-table-split--has-sidebar .sa-table-panel {
    border-right: 1px solid var(--saw-border-color, #e2e8f0);
}

/* ============================================
   SCROLL TO TOP BUTTON
   Subtle, light gray style - positioned above FAB
   ============================================ */
.sa-scroll-to-top {
    position: fixed;
    bottom: 140px; /* Higher position - above FAB button */
    right: var(--saw-space-6, 24px);
    width: 56px; /* Same size as FAB */
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtle light gray style */
    background: rgba(148, 163, 184, 0.6); /* Gray-400 with transparency */
    color: #ffffff;
    border: none;
    border-radius: var(--saw-radius-full, 9999px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--saw-transition-base, 0.2s);
    z-index: 1001;
    pointer-events: none;
}

.sa-scroll-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sa-scroll-to-top:hover {
    background: rgba(100, 116, 139, 0.85); /* Darker gray on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sa-scroll-to-top svg {
    width: 24px;
    height: 24px;
}

/* Tablet - account for bottom nav */
@media (max-width: 1024px) {
    .sa-scroll-to-top {
        bottom: calc(var(--saw-bottom-nav-height, 64px) + 100px);
    }
}

/* Mobile - smaller size, account for bottom nav */
@media (max-width: 768px) {
    .sa-scroll-to-top {
        bottom: calc(var(--saw-bottom-nav-height-mobile, 58px) + 90px);
        right: var(--saw-space-3, 12px);
        width: 48px;
        height: 48px;
    }
}

/* Footer clearance for last row visibility */
.sa-table-scroll {
    padding-bottom: 60px;
}