/* ============================================== RESPONSIVE CSS - System Zarządzania Flotą ============================================== */ /* Podstawowe meta viewport - upewnij się że masz w : */ /* Mobile - telefony (do 768px) */ @media (max-width: 768px) { /* NAGŁÓWEK I NAWIGACJA */ .header { padding: 10px 0; } .container { padding: 0 15px; } .header-content { flex-direction: column; gap: 10px; text-align: center; } .logo { font-size: 18px; } .user-info { flex-direction: column; gap: 10px; width: 100%; text-align: center; } .user-info span { font-size: 14px; } /* Nawigacja */ .nav { padding: 5px 0; } .nav ul { flex-direction: column; gap: 5px; padding: 10px 0; } .nav a { display: block; padding: 12px 15px; font-size: 14px; text-align: center; } /* GŁÓWNY CONTENT */ .main { padding: 15px 0; } .card { padding: 15px; margin-bottom: 15px; } /* PAGE HEADER */ .page-header { flex-direction: column; gap: 15px; align-items: stretch; text-align: center; } .page-header h1 { font-size: 22px; text-align: center; } .page-header .btn { width: 100%; text-align: center; } /* PRZYCISKI */ .btn { padding: 10px 15px; font-size: 14px; display: block; width: 100%; text-align: center; margin: 5px 0; } .btn-sm { padding: 8px 12px; font-size: 12px; } /* FORMULARZ - GRID */ .form-row { grid-template-columns: 1fr !important; gap: 10px; } .form-group { margin-bottom: 12px; } .form-group label { font-size: 14px; } .form-group input, .form-group select, .form-group textarea { font-size: 16px; /* Zapobiega zoom na iOS */ padding: 10px; } /* FILTRY */ .filters, .filters-row { flex-direction: column; align-items: stretch; gap: 10px; } .filters div, .filters-row div { width: 100%; flex-direction: column; gap: 5px; } .filters label { font-size: 14px; } .filters input, .filters select { width: 100%; padding: 10px; font-size: 16px; } /* TABELE - RESPONSIVE */ table { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Ukryj mniej ważne kolumny na mobile */ table th:nth-child(4), table td:nth-child(4), table th:nth-child(5), table td:nth-child(5), table th:nth-child(6), table td:nth-child(6) { display: none; } th, td { padding: 8px 6px; font-size: 12px; white-space: nowrap; } /* Tabele jako karty (opcjonalnie) */ table.mobile-cards thead { display: none; } table.mobile-cards, table.mobile-cards tbody, table.mobile-cards tr, table.mobile-cards td { display: block; width: 100%; } table.mobile-cards tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white; } table.mobile-cards td { text-align: left; padding: 8px 10px; border: none; position: relative; white-space: normal; } table.mobile-cards td:before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 5px; color: #2c3e50; font-size: 11px; text-transform: uppercase; } /* STATYSTYKI / GRID */ .stats, .stats-grid { grid-template-columns: 1fr !important; gap: 10px; } .stat-card { padding: 15px; } .stat-value { font-size: 28px; } .stat-label { font-size: 13px; } /* INFO GRID */ .info-grid, .detail-grid, .tile-info-grid { grid-template-columns: 1fr !important; gap: 10px; } .info-item, .detail-item { padding: 10px; } .info-label, .detail-label { font-size: 12px; } .info-value, .detail-value { font-size: 14px; word-break: break-word; } /* VEHICLE HEADER */ .vehicle-header { padding: 15px; text-align: center; } .vehicle-title { font-size: 20px; } .vehicle-subtitle { font-size: 14px; } .vehicle-status { font-size: 12px; padding: 4px 8px; } /* SECTION */ .section { padding: 15px; margin-bottom: 15px; } .section h2, .section h3 { font-size: 18px; margin-bottom: 10px; } .section-header h2 { font-size: 18px; } /* PLAN ITEMS */ .plan-item { padding: 12px; margin-bottom: 10px; } .plan-name { font-size: 14px; } .plan-details { font-size: 12px; } .plan-remaining { font-size: 13px; padding: 6px 10px; } /* KALENDARZ / WIZYTY */ .calendar-item { padding: 12px; margin-bottom: 10px; } .calendar-date { font-size: 16px; } .calendar-actions { display: flex; flex-direction: column; gap: 8px; } .calendar-actions .btn { width: 100%; } /* MODAL */ .modal-content { margin: 5% auto; padding: 15px; max-width: 95%; width: 95%; } .modal-header { padding: 12px 15px; } .modal-header h2 { font-size: 16px; } .modal-body { padding: 15px; } .modal-buttons { flex-direction: column; gap: 10px; } .modal-buttons .btn { width: 100%; } /* TILES / KARTY POJAZDÓW */ .vehicles-grid, .tiles-container { grid-template-columns: 1fr !important; gap: 15px; } .vehicle-tile, .tile { padding: 15px; } /* BADGES */ .badge { font-size: 11px; padding: 3px 6px; } /* MECHANIK INFO */ .mechanik-info { text-align: center; } .mechanik-info h3 { font-size: 18px; } .mechanik-info p { font-size: 13px; } /* BACK LINK */ .back-link { padding: 8px 12px; font-size: 13px; } /* SEARCH BAR */ .search-bar { flex-direction: column; gap: 10px; } .search-bar input { width: 100%; } /* HISTORIA / TIMELINE */ .history-item, .timeline-item { padding: 12px; margin-bottom: 10px; } /* KOSZT SUMMARY */ .koszt-summary { padding: 12px; font-size: 13px; } .cost-highlight { font-size: 18px; } /* TOGGLE SECTIONS */ .toggle-section { margin-bottom: 10px; } .toggle-header { padding: 12px; font-size: 15px; } .toggle-icon { font-size: 18px; } /* EMPTY STATE */ .empty-state { padding: 30px 15px; font-size: 14px; } /* NO RESULTS */ .no-results { padding: 30px 15px; font-size: 14px; } /* FLASH MESSAGES */ .flash, .alert, .success, .error { padding: 12px; font-size: 14px; margin-bottom: 10px; } } /* Tablet - średnie ekrany (768px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .container { max-width: 100%; } .form-row { grid-template-columns: 1fr 1fr; } .stats-grid, .info-grid { grid-template-columns: 1fr 1fr; } .vehicles-grid { grid-template-columns: repeat(2, 1fr); } table { font-size: 13px; } th, td { padding: 10px 8px; } } /* Bardzo małe telefony (do 375px) */ @media (max-width: 375px) { .logo { font-size: 16px; } .page-header h1 { font-size: 20px; } .btn { padding: 8px 12px; font-size: 13px; } table { font-size: 11px; } th, td { padding: 6px 4px; } } /* Landscape orientation dla telefonów */ @media (max-width: 768px) and (orientation: landscape) { .header { padding: 8px 0; } .nav { padding: 3px 0; } .nav a { padding: 8px 12px; } .main { padding: 10px 0; } } /* Print styles */ @media print { .header, .nav, .btn, .back-link, .filters, .toggle-icon, .calendar-actions { display: none !important; } .section-content { display: block !important; } .card { page-break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } }