/* Responsive Mobile Enhancement CSS for Spotlight Dashboard */

/* Enhanced Mobile Viewport Settings */
@viewport { width: device-width; }

/* Base responsive foundation */
* {
    box-sizing: border-box;
}

/* Enhanced container responsiveness */
.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* Enhanced Table Responsiveness with Bidirectional Scroll */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh; /* Allow vertical scrolling */
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #007883;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #005f66;
}

/* Enhanced table styling for mobile */
.table {
    min-width: 600px; /* Prevent table from becoming too narrow */
    margin-bottom: 0;
    font-size: 0.9rem;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 10;
    border-bottom: 2px solid #007883;
    font-weight: 600;
    color: #495057;
}

.table tbody tr:hover {
    background-color: rgba(0, 120, 131, 0.05);
}

/* Mobile-first summary cards */
.summary-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    border-left: 4px solid #007883;
    transition: all 0.3s ease;
}

/* Enhanced mobile responsiveness */
@media (max-width: 767px) {
    /* Main content adjustments */
    .main-content-container {
        margin: 10px 0;
        padding: 15px;
        border-radius: 0;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Header adjustments */
    .page-header-with-nav {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .enhanced-nav {
        margin-top: 15px;
    }
    
    .nav-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-buttons .btn {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* Summary cards mobile optimization */
    .summary-card {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .summary-card h3 {
        font-size: 2.2rem;
        margin-bottom: 5px;
    }
    
    .summary-card p {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .summary-card i {
        font-size: 1.5rem;
        top: 15px;
        right: 15px;
    }
    
    .card-subtitle {
        margin-top: 3px;
    }
    
    .card-subtitle small {
        font-size: 0.75rem;
    }
    
    /* Form container mobile optimization */
    .form-container {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    .form-container h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }
    
    /* Button container mobile optimization */
    .btn-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .btn-container .btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
        padding: 12px;
        font-size: 0.9rem;
    }
    
    /* Table mobile enhancements */
    .table-responsive {
        font-size: 0.8rem;
        max-height: 60vh;
        border-radius: 8px;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.3rem;
        max-width: 120px;
        font-size: 0.8rem;
    }
    
    .table th {
        font-size: 0.75rem;
        font-weight: 700;
    }
    
    /* Badge adjustments for mobile */
    .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.6em;
    }
    
    /* Alert item mobile optimization */
    .alert-item {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .alert-item h4 {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    
    .alert-item p {
        font-size: 0.85rem;
        margin-bottom: 5px;
    }
    
    .severity-badge {
        position: relative;
        top: auto;
        right: auto;
        display: inline-block;
        margin-top: 8px;
        font-size: 0.65rem;
    }
    
    /* Chart container mobile optimization */
    #threatlockerTrendsChart,
    .empty-chart {
        min-height: 250px;
    }
    
    .empty-chart {
        padding: 20px;
    }
    
    .empty-chart i {
        font-size: 2rem;
    }
    
    .empty-chart h5 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .empty-chart p {
        font-size: 0.85rem;
    }
    
    /* Modal mobile optimization */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-footer {
        padding: 15px;
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin-bottom: 8px;
        margin-left: 0;
    }
    
    /* Form elements mobile optimization */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-control {
        padding: 10px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 6px;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    /* Performance metrics mobile */
    .performance-metrics {
        font-size: 0.75rem;
    }
    
    /* Device table specific mobile enhancements */
    .device-table th,
    .device-table td {
        padding: 0.4rem 0.2rem;
        font-size: 0.75rem;
    }
    
    .storage-info {
        font-size: 0.7rem;
    }
    
    .metric-container {
        min-width: 60px;
    }
    
    .progress {
        height: 8px;
        margin-bottom: 2px;
    }
    
    /* Navigation mobile fixes */
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        padding: 10px;
        border-radius: 0 0 8px 8px;
    }
    
    .navbar-nav {
        flex-direction: column;
    }
    
    .navbar-nav > li {
        width: 100%;
    }
    
    .navbar-nav > li > a {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Statistics section mobile */
    .unblock-stats {
        text-align: center;
    }
    
    .stat-item {
        margin-bottom: 15px;
        padding: 10px;
        background-color: rgba(0, 120, 131, 0.05);
        border-radius: 6px;
    }
    
    .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
    }
    
    .stat-label {
        font-size: 0.85rem;
        margin-top: 5px;
    }
}

/* Tablet specific adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .summary-card h3 {
        font-size: 2.4rem;
    }
    
    .table-responsive {
        font-size: 0.85rem;
    }
    
    .btn-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .btn-container .btn {
        flex: 1;
        min-width: 150px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
}

/* Extra small devices (phones in landscape) */
@media (max-width: 575px) {
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .main-content-container {
        padding: 10px;
        margin: 5px 0;
    }
    
    .summary-card {
        padding: 12px;
    }
    
    .summary-card h3 {
        font-size: 1.8rem;
    }
    
    .form-container {
        padding: 12px;
    }
    
    .table th,
    .table td {
        padding: 0.3rem 0.2rem;
        font-size: 0.7rem;
        max-width: 80px;
    }
    
    .btn {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .summary-card,
    .alert-item,
    .table tbody tr {
        transition: none;
        transform: none !important;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .table tbody tr:active {
        background-color: rgba(0, 120, 131, 0.1);
    }
}

/* High DPI display adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .table th,
    .table td {
        border-width: 0.5px;
    }
}

/* Landscape phone specific */
@media (max-height: 500px) and (orientation: landscape) {
    .main-content-container {
        padding: 10px;
    }
    
    .summary-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .summary-card h3 {
        font-size: 1.6rem;
        margin-bottom: 2px;
    }
    
    .summary-card p {
        font-size: 0.8rem;
        margin-bottom: 2px;
    }
    
    .table-responsive {
        max-height: 40vh;
    }
    
    #threatlockerTrendsChart,
    .empty-chart {
        min-height: 200px;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    .form-control {
        font-size: 16px; /* Prevents zoom */
    }
    
    .btn {
        -webkit-appearance: none;
        border-radius: 6px;
    }
}

/* Print styles */
@media print {
    .table-responsive {
        overflow: visible !important;
        max-height: none !important;
    }
    
    .table {
        min-width: auto !important;
    }
    
    .btn-container,
    .modal,
    .navbar {
        display: none !important;
    }
    
    .summary-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}