/**
 * Tablet Layout Styles (768px - 1024px)
 * Mobile-First UI Redesign - Phase 3
 */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* ========== Side Menu Tablet (Narrow) ========== */
    .side-menu {
        width: var(--menu-width-tablet); /* 80px - icons only */
    }
    
    /* Hide labels by default */
    .menu-label {
        display: none;
        position: absolute;
        left: 100%;
        background: var(--menu-bg);
        padding: 8px 12px;
        border-radius: 4px;
        box-shadow: var(--menu-shadow);
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--transition-fast);
    }
    
    /* Show labels on hover */
    .menu-item:hover .menu-label {
        display: block;
        opacity: 1;
    }
    
    /* Center icons in narrow menu */
    .menu-item {
        justify-content: center;
        padding: var(--menu-padding-vertical) 10px;
    }
    
    .menu-icon {
        margin-right: 0;
    }
    
    /* ========== Menu Header Compact ========== */
    .menu-header {
        padding: 16px 10px;
    }
    
    .menu-title,
    .menu-subtitle {
        display: none;
    }
    
    .menu-logo {
        font-size: 32px;
        margin-bottom: 0;
    }
    
    /* ========== Content Area ========== */
    .container {
        margin-left: var(--menu-width-tablet);
        padding: 20px;
    }
    
    body.menu-visible .container {
        margin-left: var(--menu-width-tablet);
    }
    
    /* ========== Menu Footer Compact ========== */
    .menu-user .menu-label,
    .menu-logout .menu-label {
        display: none;
    }
    
    .menu-user:hover .menu-label,
    .menu-logout:hover .menu-label {
        display: block;
        opacity: 1;
        position: absolute;
        left: 100%;
        background: var(--menu-bg);
        padding: 8px 12px;
        border-radius: 4px;
        box-shadow: var(--menu-shadow);
        white-space: nowrap;
    }
    
    /* ========== Typography ========== */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    /* ========== Grid Layouts ========== */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .admin-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ========== Tables ========== */
    .table {
        font-size: 13px;
    }
    
    .table th,
    .table td {
        padding: 10px;
    }
    
    /* ========== Tab Navigation (Hide) ========== */
    .tab-navigation {
        display: none !important;
    }
    
    /* ========== Sync Stats Tablet ========== */
    .sync-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}