/* Mobile Responsive - Standar Version */

@media (max-width: 991.98px) {
    body { font-size: 14px; }
    .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0 !important; padding: 10px; width: 100%; }
    .table-wrapper { overflow-x: auto; }
    .table { min-width: 600px; }
    .modal .table, #deviceDetailModal .table { min-width: auto !important; }
}

@media (max-width: 575.98px) {
    .modal-dialog { margin: 15px; }
    .modal-body { padding: 15px; }
    
    /* Tracking Modal */
    #deviceDetailModal .modal-dialog {
        margin: 15px auto;
        max-width: calc(100vw - 30px);
    }
    #deviceDetailModal .modal-content {
        border-radius: 16px;
    }
    #deviceDetailModal .modal-body {
        padding: 20px;
    }
    #deviceDetailModal #detail-map {
        height: 220px;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    
    /* Layout - hapus card styling */
    #deviceDetailModal .row { flex-direction: column; }
    #deviceDetailModal .col-md-7,
    #deviceDetailModal .col-md-5 { width: 100%; padding: 0; }
    #deviceDetailModal .card { border: none !important; box-shadow: none !important; background: transparent !important; }
    #deviceDetailModal .card-body { padding: 0 !important; }
    
    /* Device Info */
    #deviceDetailModal .card { border: none !important; box-shadow: none !important; background: transparent !important; }
    #deviceDetailModal .card-body { padding: 0 !important; }
    #deviceDetailModal .table-borderless { 
        margin-bottom: 25px; 
        border-collapse: collapse; 
        border: none !important;
    }
    #deviceDetailModal .table-borderless tr {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border: none !important;
    }
    #deviceDetailModal .table-borderless tr:last-child { border: none !important; }
    #deviceDetailModal .table-borderless td {
        padding: 0;
        border: none !important;
        box-shadow: none !important;
    }
    #deviceDetailModal .table-borderless td:first-child {
        width: 100px;
        color: #666;
        font-size: 15px;
    }
    #deviceDetailModal .table-borderless td:last-child {
        flex: 1;
        text-align: left;
        font-weight: 500;
        font-size: 15px;
        padding-left: 15px;
    }
    
    /* History Table */
    #deviceDetailModal .mt-2 { margin-top: 25px; }
    #deviceDetailModal .table-responsive {
        max-height: 250px;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-top: 15px;
    }
    #deviceDetailModal .table-responsive table {
        table-layout: fixed;
        width: 100%;
        margin: 0;
    }
    #deviceDetailModal .table-responsive th,
    #deviceDetailModal .table-responsive td {
        padding: 15px;
        font-size: 14px;
    }
    #deviceDetailModal .table-responsive th:first-child,
    #deviceDetailModal .table-responsive td:first-child {
        width: 60px;
    }
    #deviceDetailModal .table-responsive th:nth-child(2),
    #deviceDetailModal .table-responsive td:nth-child(2),
    #deviceDetailModal .table-responsive th:nth-child(3),
    #deviceDetailModal .table-responsive td:nth-child(3) {
        width: calc((100% - 60px - 50px) / 2);
    }
    #deviceDetailModal .table-responsive th:nth-child(4),
    #deviceDetailModal .table-responsive td:nth-child(4) {
        width: 50px;
        text-align: center;
    }
    #deviceDetailModal .table-responsive td:nth-child(4) .btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    /* Button */
    #deviceDetailModal .btn-success {
        margin-top: 15px;
        padding: 15px;
        font-size: 15px;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-link { min-height: 44px; }
}

/* Utilities */
.d-mobile-none { display: none !important; }
@media (min-width: 992px) {
    .d-mobile-none { display: block !important; }
    .mobile-toggle { display: none !important; }
}