/* =============================================
 * GHOLAMI - Responsive Design
 * 6 Breakpoints: 1200, 1024, 768, 480, 360, landscape
 * ============================================= */

/* ===== BREAKPOINT: 1200px (Tablet Landscape) ===== */
@media (max-width: 1200px) {
    .stats { grid-template-columns: repeat(3, 1fr); }
    .charts { grid-template-columns: 1fr; }
    .depots-grid { grid-template-columns: repeat(2, 1fr); }
    .chat-container { grid-template-columns: 200px 1fr; }
}

/* ===== BREAKPOINT: 1024px ===== */
@media (max-width: 1024px) {
    .sidebar { width: 200px; }
    .main { margin-left: 200px; }
    #appFooter { left: 200px; }
    .form-row { grid-template-columns: repeat(2, 1fr); }
    .doc-signatures { gap: 20px; }
    .privileges-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== BREAKPOINT: 768px (Mobile) ===== */
@media (max-width: 768px) {
    /* Sidebar cachée par défaut */
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        z-index: 150;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    
    .main { margin-left: 0; padding: 12px; padding-top: 56px; }
    #appFooter { left: 0; }
    
    /* Burger visible */
    .burger-btn { display: block; }
    
    /* Grids */
    .stats { grid-template-columns: repeat(2, 1fr); }
    .depots-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .doc-meta { grid-template-columns: 1fr; }
    .privileges-grid { grid-template-columns: 1fr; }
    
    /* Page header */
    .page-header { flex-direction: column; align-items: stretch; }
    .page-title { font-size: 16px; }
    .page-actions { justify-content: flex-start; overflow-x: auto; }
    
    /* Tables en mode card */
    .card { padding: 10px; overflow-x: auto; }
    table { min-width: 600px; }
    
    /* Modals plein écran */
    .modal-box { max-width: 100%; max-height: 100%; border-radius: 0; margin: 0; height: 100vh; }
    .modal { padding: 0; }
    
    /* Chat */
    .chat-container { grid-template-columns: 1fr; height: auto; }
    .chat-sidebar { max-height: 200px; }
    
    /* Documents */
    .doc-header { flex-direction: column; text-align: center; gap: 10px; }
    .doc-signatures { grid-template-columns: 1fr; }
}

/* ===== BREAKPOINT: 480px (Small Mobile) ===== */
@media (max-width: 480px) {
    .main { padding: 8px; padding-top: 52px; }
    .stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    .stat { padding: 8px; }
    .stat-value { font-size: 14px; }
    .stat-label { font-size: 8px; }
    
    .page-title { font-size: 14px; }
    .btn { padding: 6px 10px; font-size: 9px; }
    .btn-sm { padding: 4px 8px; font-size: 8px; }
    
    .card { padding: 8px; border-radius: 8px; }
    th, td { padding: 6px; font-size: 10px; }
    
    .login-box { padding: 24px 16px; width: 95%; }
    .login-header h1 { font-size: 18px; }
    .login-logo { max-width: 120px; }
    
    .modal-box { padding: 12px; }
    .modal-title { font-size: 13px; }
    
    .form-input, .form-select, .form-textarea { padding: 8px; font-size: 12px; }
    
    .toast { max-width: 280px; font-size: 11px; padding: 10px 14px; }
}

/* ===== BREAKPOINT: 360px (Very Small) ===== */
@media (max-width: 360px) {
    .stats { grid-template-columns: 1fr; }
    .stat { display: flex; align-items: center; gap: 10px; text-align: left; }
    .page-actions .btn span { display: none; }
    .login-box { padding: 20px 12px; }
    .login-header h1 { font-size: 16px; }
    .login-header h2 { font-size: 12px; }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .login-box { padding: 16px; max-width: 400px; }
    .login-logo { max-width: 80px; margin-bottom: 8px; }
    .login-header { margin-bottom: 12px; padding-bottom: 10px; }
    .login-box input { padding: 10px; margin: 4px 0; }
    .login-box button { padding: 10px; margin-top: 8px; }
    
    .sidebar { padding: 6px; }
    .sidebar-logo { padding: 8px; margin-bottom: 8px; }
    .sidebar-logo img { height: 40px; width: 40px; }
    .nav-item { padding: 5px 8px; font-size: 12px; }
}

/* ===== SAFE AREA (iPhone Notch/Island) ===== */
@supports (padding: env(safe-area-inset-top)) {
    .burger-btn { top: calc(12px + env(safe-area-inset-top)); }
    .main { padding-top: calc(56px + env(safe-area-inset-top)); }
    #appFooter { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    .nav-item { padding: 10px 12px; min-height: 44px; }
    .btn { min-height: 44px; padding: 10px 16px; }
    .btn-sm { min-height: 36px; }
    .form-input, .form-select, .form-textarea { min-height: 44px; font-size: 16px; }
    
    /* Disable hover effects on touch */
    .stat:hover { transform: none; }
    .btn:hover { transform: none; }
    .nav-item:hover { background: transparent; }
}

/* ===== HIGH DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sidebar-logo img { image-rendering: -webkit-optimize-contrast; }
    .login-logo { image-rendering: -webkit-optimize-contrast; }
}