/* Responsive CSS for GPS Tracking System */

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
    .sidebar {
        width: 250px;
    }
    
    .event-panel {
        width: 250px;
    }
    
    .nav-icons {
        gap: 6px;
    }
    
    .nav-icon {
        width: 28px;
        height: 28px;
    }
    
    .tab-button {
        padding: 8px 6px;
        font-size: 10px;
    }
    
    .object-item {
        padding: 8px 12px;
    }
    
    .event-item {
        padding: 12px;
    }
}

/* Mobile Landscape (768px and below) */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1500;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .event-panel {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1500;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    
    .event-panel.open {
        transform: translateX(0);
    }
    
    .map-container {
        flex: 1;
    }
    
    /* Mobile Navigation */
    .nav-icons {
        gap: 4px;
    }
    
    .nav-icon {
        width: 24px;
        height: 24px;
    }
    
    .nav-icon i {
        font-size: 14px;
    }
    
    .nav-separator {
        display: none;
    }
    
    .language-selector {
        display: none;
    }
    
    .user-menu span {
        display: none;
    }
    
    /* Mobile Controls */
    .map-controls {
        top: 10px;
        right: 10px;
        gap: 5px;
    }
    
    .control-btn {
        width: 28px;
        height: 28px;
    }
    
    /* Mobile Status Bar */
    .status-bar {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .status-left {
        gap: 10px;
    }
    
    .status-btn {
        padding: 3px 6px;
    }
    
    /* Mobile Sidebar */
    .sidebar-header {
        padding: 12px;
    }
    
    .tab-buttons {
        flex-wrap: wrap;
        gap: 2px;
    }
    
    .tab-button {
        flex: 1;
        min-width: calc(50% - 1px);
        padding: 8px 4px;
        font-size: 9px;
    }
    
    .tab-button i {
        font-size: 12px;
    }
    
    /* Mobile Filter Tabs */
    .filter-tabs {
        flex-wrap: wrap;
    }
    
    .filter-tab {
        flex: 1;
        min-width: calc(33.33% - 1px);
        padding: 8px 4px;
        font-size: 10px;
    }
    
    /* Mobile Search */
    .search-container {
        padding: 8px;
    }
    
    .search-input {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    /* Mobile Object List */
    .object-item {
        padding: 12px 10px;
        font-size: 13px;
    }
    
    .object-name {
        font-size: 13px;
    }
    
    .object-time {
        font-size: 11px;
    }
    
    .object-speed {
        font-size: 11px;
    }
    
    /* Mobile History Filters */
    .history-filters {
        padding: 12px;
    }
    
    .filter-group {
        margin-bottom: 12px;
    }
    
    .filter-label {
        font-size: 13px;
    }
    
    .filter-select,
    .date-input,
    .time-input {
        font-size: 14px;
        padding: 10px;
    }
    
    .filter-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* Mobile Events */
    .event-item {
        padding: 12px 10px;
    }
    
    .event-title {
        font-size: 10px;
    }
    
    .event-object {
        font-size: 12px;
    }
    
    .event-type,
    .event-location,
    .event-time {
        font-size: 11px;
    }
    
    /* Mobile Modal */
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    /* Mobile Toast */
    .toast-container {
        top: 60px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
    }
    
    /* Mobile Context Menu */
    .context-menu {
        min-width: 160px;
        font-size: 13px;
    }
    
    .context-menu-item {
        padding: 12px 14px;
    }
}

/* Mobile Portrait (480px and below) */
@media (max-width: 480px) {
    .top-nav {
        padding: 0 10px;
        height: 45px;
    }
    
    .main-container {
        height: calc(100vh - 45px);
    }
    
    /* Ultra Mobile Navigation */
    .nav-icons {
        gap: 2px;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    
    .nav-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    
    .nav-icon i {
        font-size: 12px;
    }
    
    .nav-right {
        gap: 8px;
    }
    
    .alert-count,
    .cart-count {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    /* Ultra Mobile Controls */
    .map-controls {
        top: 5px;
        right: 5px;
        gap: 3px;
    }
    
    .control-group {
        padding: 3px;
    }
    
    .control-btn {
        width: 24px;
        height: 24px;
    }
    
    .control-btn i {
        font-size: 12px;
    }
    
    /* Ultra Mobile Status Bar */
    .status-bar {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .status-left {
        gap: 8px;
    }
    
    .status-btn {
        padding: 2px 4px;
        font-size: 10px;
    }
    
    /* Ultra Mobile Sidebar */
    .sidebar-header {
        padding: 10px;
    }
    
    .tab-button {
        padding: 6px 2px;
        font-size: 8px;
        gap: 2px;
    }
    
    .tab-button i {
        font-size: 10px;
    }
    
    /* Ultra Mobile Filter Tabs */
    .filter-tab {
        padding: 6px 2px;
        font-size: 9px;
    }
    
    /* Ultra Mobile Search */
    .search-container {
        padding: 6px;
    }
    
    .search-input {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .search-btn {
        padding: 8px 10px;
    }
    
    /* Ultra Mobile List Header */
    .list-header {
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .header-icon {
        width: 25px;
        font-size: 10px;
    }
    
    /* Ultra Mobile Object Items */
    .object-item {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .object-icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        font-size: 10px;
    }
    
    .object-name {
        font-size: 12px;
    }
    
    .object-time {
        font-size: 10px;
    }
    
    .object-speed {
        font-size: 10px;
        min-width: 40px;
    }
    
    /* Ultra Mobile History */
    .history-filters {
        padding: 10px;
    }
    
    .filter-group {
        margin-bottom: 10px;
    }
    
    .filter-label {
        font-size: 12px;
        margin-bottom: 4px;
    }
    
    .filter-select,
    .date-input,
    .time-input {
        font-size: 13px;
        padding: 8px;
    }
    
    .time-input {
        width: 70px;
    }
    
    .filter-buttons {
        gap: 6px;
    }
    
    .filter-btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .info-section {
        margin-top: 12px;
        padding-top: 12px;
    }
    
    .info-content {
        padding: 8px;
        font-size: 10px;
    }
    
    /* Ultra Mobile History Items */
    .history-item {
        padding: 10px 8px;
    }
    
    .history-time {
        font-size: 10px;
    }
    
    .history-location {
        font-size: 11px;
    }
    
    .history-details {
        font-size: 10px;
        gap: 10px;
    }
    
    /* Ultra Mobile Events */
    .events-header,
    .places-header {
        padding: 12px 10px;
    }
    
    .events-header h3,
    .places-header h3 {
        font-size: 13px;
    }
    
    .event-item {
        padding: 10px 8px;
    }
    
    .event-title {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .event-object {
        font-size: 11px;
    }
    
    .event-type,
    .event-location,
    .event-time {
        font-size: 10px;
    }
    
    .show-event-btn {
        font-size: 11px;
        margin-top: 6px;
    }
    
    /* Ultra Mobile Modal */
    .modal-content {
        width: 98%;
        max-height: 95vh;
    }
    
    .modal-header {
        padding: 12px;
    }
    
    .modal-header h3 {
        font-size: 16px;
    }
    
    .modal-body {
        padding: 12px;
    }
    
    /* Ultra Mobile Toast */
    .toast-container {
        top: 55px;
        right: 5px;
        left: 5px;
    }
    
    .toast {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    /* Ultra Mobile Context Menu */
    .context-menu {
        min-width: 140px;
        font-size: 12px;
    }
    
    .context-menu-item {
        padding: 10px 12px;
    }
    
    .context-menu-item i {
        width: 12px;
        font-size: 11px;
    }
}

/* Landscape Orientation Adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .top-nav {
        height: 40px;
    }
    
    .main-container {
        height: calc(100vh - 40px);
    }
    
    .sidebar {
        width: 50%;
    }
    
    .event-panel {
        width: 50%;
    }
    
    .sidebar-header {
        padding: 8px;
    }
    
    .tab-button {
        padding: 6px 4px;
        font-size: 9px;
    }
    
    .filter-tab {
        padding: 6px 4px;
        font-size: 9px;
    }
    
    .object-item {
        padding: 8px 10px;
    }
    
    .event-item {
        padding: 8px 10px;
    }
    
    .history-filters {
        padding: 8px;
    }
    
    .filter-group {
        margin-bottom: 8px;
    }
}

/* High DPI Display Adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .nav-icon,
    .control-btn,
    .action-btn {
        border: 1px solid transparent;
    }
    
    .custom-marker {
        border-width: 1px;
    }
    
    .object-icon {
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .nav-icon,
    .control-btn,
    .action-btn,
    .filter-btn,
    .status-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .object-item,
    .history-item,
    .event-item {
        min-height: 44px;
    }
    
    .context-menu-item {
        min-height: 44px;
        padding: 12px 16px;
    }
    
    .search-input,
    .filter-select,
    .date-input,
    .time-input {
        min-height: 44px;
    }
}

/* Print Styles */
@media print {
    .top-nav,
    .sidebar,
    .event-panel,
    .map-controls,
    .status-bar,
    .context-menu,
    .modal,
    .toast-container {
        display: none !important;
    }
    
    .main-container {
        height: auto;
    }
    
    .map-container {
        height: 100vh;
    }
    
    body {
        overflow: visible;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (when implemented) */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #1976d2;
        --secondary-color: #388e3c;
        --accent-color: #f57c00;
        --danger-color: #d32f2f;
        --background-color: #121212;
        --surface-color: #1e1e1e;
        --text-primary: #ffffff;
        --text-secondary: #b3b3b3;
        --text-muted: #777777;
        --border-color: #333333;
    }
}

/* Very Large Screens (1400px+) */
@media (min-width: 1400px) {
    .sidebar {
        width: 350px;
    }
    
    .event-panel {
        width: 350px;
    }
    
    .object-item {
        padding: 12px 20px;
        font-size: 13px;
    }
    
    .event-item {
        padding: 18px 20px;
    }
    
    .history-filters {
        padding: 20px;
    }
    
    .filter-group {
        margin-bottom: 20px;
    }
    
    .tab-button {
        padding: 12px 10px;
        font-size: 12px;
    }
    
    .filter-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Ultra Wide Screens (1920px+) */
@media (min-width: 1920px) {
    /* Allow the app to use the full viewport width */
    .main-container {
        max-width: none;
        width: 100vw;
        margin: 0;
    }

    /* Optionally grow side panels a bit on very wide screens */
    .sidebar {
        width: 400px;
    }
    
    .event-panel {
        width: 400px;
    }
}

/* Hover Effects for Non-Touch Devices */
@media (hover: hover) and (pointer: fine) {
    .object-item:hover .object-actions {
        opacity: 1;
    }
    
    .nav-icon:hover,
    .control-btn:hover,
    .action-btn:hover {
        transform: translateY(-1px);
    }
    
    .tab-button:hover:not(.active),
    .filter-tab:hover:not(.active) {
        transform: translateY(-1px);
    }
}