/**
 * Mobile Responsive Styles
 *
 * Makes the admin panel work beautifully on phones and tablets
 *
 * Breakpoints:
 * - Mobile: 0-767px
 * - Tablet: 768px-1023px
 * - Desktop: 1024px+
 *
 * @version 1.0
 * @date 2025-11-11
 */

/* ===== BASE MOBILE OPTIMIZATIONS ===== */

/* Improve text readability on mobile */
@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }

    /* Prevent horizontal scroll */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Container padding */
    .container {
        padding: 12px !important;
        max-width: 100% !important;
    }

    /* Main content area */
    main {
        padding: 12px !important;
    }
}

/* ===== TOUCH-FRIENDLY CONTROLS ===== */

/* Larger tap targets for mobile */
@media screen and (max-width: 767px) {
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-refresh,
    .refresh-btn,
    a.menu-link {
        min-height: 44px; /* Apple's recommended touch target size */
        min-width: 44px;
        padding: 12px 16px;
        font-size: 15px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        border-radius: 8px;
    }

    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        margin: 8px;
    }
}

/* ===== RESPONSIVE HEADER ===== */

@media screen and (max-width: 767px) {
    .header,
    header {
        padding: 12px !important;
        flex-wrap: wrap;
    }

    .header h1,
    header h1 {
        font-size: 20px !important;
        margin-bottom: 8px;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: flex-start;
    }

    .header-actions button {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* ===== RESPONSIVE TABLES ===== */

@media screen and (max-width: 767px) {
    /* Make tables scroll horizontally */
    .log-table-container,
    .table-container,
    table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        max-width: 100%;
    }

    table {
        font-size: 13px;
        min-width: 600px; /* Force horizontal scroll for better readability */
    }

    table th,
    table td {
        padding: 8px 12px !important;
        white-space: nowrap;
    }

    /* Responsive table option - stack on mobile */
    .table-responsive-stack {
        min-width: 100% !important;
    }

    .table-responsive-stack thead {
        display: none;
    }

    .table-responsive-stack tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #2a3544;
        border-radius: 8px;
        background: #11161d;
    }

    .table-responsive-stack td {
        display: flex;
        justify-content: space-between;
        padding: 12px !important;
        border-bottom: 1px solid #2a3544;
        white-space: normal !important;
    }

    .table-responsive-stack td:last-child {
        border-bottom: none;
    }

    .table-responsive-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #cbd5e1;
        margin-right: 12px;
    }
}

/* ===== RESPONSIVE GRID LAYOUTS ===== */

@media screen and (max-width: 767px) {
    /* Stats grid */
    .stats-grid,
    .metric-grid,
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Two-column layouts become single column */
    .two-columns,
    .col-2 {
        grid-template-columns: 1fr !important;
    }

    /* Filter groups */
    .log-filters,
    .filters {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }
}

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .stats-grid,
    .metric-grid,
    .card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .log-filters,
    .filters {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== RESPONSIVE CARDS ===== */

@media screen and (max-width: 767px) {
    .card,
    .stat-card,
    .metric-card {
        padding: 16px !important;
        margin-bottom: 12px;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .card-title {
        font-size: 16px !important;
    }

    .card-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-actions button {
        flex: 1 1 auto;
    }
}

/* ===== RESPONSIVE MODALS ===== */

@media screen and (max-width: 767px) {
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 20px auto;
    }

    .modal-header {
        padding: 16px !important;
    }

    .modal-header h2 {
        font-size: 18px !important;
    }

    .modal-body {
        padding: 16px !important;
        max-height: calc(90vh - 120px);
        overflow-y: auto;
    }

    .modal-footer {
        padding: 16px !important;
        flex-direction: column;
    }

    .modal-footer button {
        width: 100%;
        margin: 4px 0;
    }
}

/* ===== RESPONSIVE NAVIGATION ===== */

@media screen and (max-width: 767px) {
    /* Hamburger menu is already mobile-friendly, but ensure good spacing */
    .hamburger-btn {
        width: 44px;
        height: 44px;
        padding: 12px;
    }

    .hamburger-dropdown {
        width: 280px !important;
        max-width: 85vw;
    }

    .menu-link {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

/* ===== RESPONSIVE FORMS ===== */

@media screen and (max-width: 767px) {
    form {
        padding: 0;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-row {
        flex-direction: column !important;
        gap: 16px;
    }

    .form-row > * {
        width: 100% !important;
        flex: none !important;
    }

    label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        display: block;
    }

    /* Form buttons stack */
    .form-actions,
    .form-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .form-actions button,
    .form-buttons button {
        width: 100%;
    }
}

/* ===== RESPONSIVE CHARTS ===== */

@media screen and (max-width: 767px) {
    .chart-container,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Reduce chart height on mobile for better scrolling */
    .chart-wrapper {
        max-height: 250px;
    }
}

/* ===== RESPONSIVE PAGINATION ===== */

@media screen and (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 16px 12px;
    }

    .pagination button {
        min-width: 100px;
        padding: 10px 16px;
    }

    .pagination-info,
    #pageInfo,
    #pagination-info {
        width: 100%;
        text-align: center;
        order: -1; /* Show page info first */
        margin-bottom: 12px;
    }
}

/* ===== RESPONSIVE ALERTS/NOTIFICATIONS ===== */

@media screen and (max-width: 767px) {
    .alert,
    .notification,
    .toast {
        width: 95% !important;
        margin: 8px auto;
        padding: 12px !important;
        font-size: 14px !important;
    }

    .alert-icon {
        width: 20px;
        height: 20px;
    }
}

/* ===== RESPONSIVE DASHBOARD STATS ===== */

@media screen and (max-width: 767px) {
    .stat-value,
    .metric-value {
        font-size: 28px !important;
    }

    .stat-label,
    .metric-label {
        font-size: 13px !important;
    }

    .stat-change {
        font-size: 12px !important;
    }
}

/* ===== RESPONSIVE TEXT SIZING ===== */

@media screen and (max-width: 767px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    h5 { font-size: 14px !important; }
    h6 { font-size: 13px !important; }

    p, li, td, th {
        font-size: 14px;
    }

    small, .small-text {
        font-size: 12px;
    }
}

/* ===== RESPONSIVE SPACING ===== */

@media screen and (max-width: 767px) {
    /* Reduce margins and padding */
    .section,
    .panel,
    .box {
        margin-bottom: 16px !important;
        padding: 16px !important;
    }

    /* Tighter spacing between elements */
    .mb-4 { margin-bottom: 16px !important; }
    .mb-3 { margin-bottom: 12px !important; }
    .mb-2 { margin-bottom: 8px !important; }
    .mb-1 { margin-bottom: 4px !important; }

    .mt-4 { margin-top: 16px !important; }
    .mt-3 { margin-top: 12px !important; }
    .mt-2 { margin-top: 8px !important; }
    .mt-1 { margin-top: 4px !important; }
}

/* ===== HIDE ON MOBILE ===== */

@media screen and (max-width: 767px) {
    .hide-mobile,
    .desktop-only {
        display: none !important;
    }
}

/* ===== SHOW ONLY ON MOBILE ===== */

.mobile-only {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }

    .mobile-inline {
        display: inline !important;
    }

    .mobile-flex {
        display: flex !important;
    }
}

/* ===== RESPONSIVE SECURITY DASHBOARD ===== */

@media screen and (max-width: 767px) {
    .security-score {
        font-size: 48px !important;
    }

    .score-gauge {
        width: 200px !important;
        height: 200px !important;
    }

    .audit-log-section,
    .security-metrics {
        padding: 16px !important;
    }

    /* Only apply column layout to security dashboard section headers, not main dashboard collapsible sections */
    .audit-log-section .section-header,
    .security-metrics .section-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .audit-log-section .section-header > div,
    .security-metrics .section-header > div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Keep main dashboard collapsible sections horizontal on mobile */
    .collapsible-section .section-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* ===== RESPONSIVE USER MANAGEMENT ===== */

@media screen and (max-width: 767px) {
    .user-card {
        padding: 12px !important;
    }

    .user-actions {
        flex-direction: column;
        width: 100%;
    }

    .user-actions button {
        width: 100%;
        margin: 4px 0;
    }
}

/* ===== RESPONSIVE LOGIN PAGE ===== */

@media screen and (max-width: 767px) {
    .login-container {
        width: 95% !important;
        padding: 24px 16px !important;
        margin: 20px auto !important;
    }

    .login-logo {
        width: 60px !important;
        height: 60px !important;
    }

    .login-title {
        font-size: 22px !important;
    }

    .login-form input {
        padding: 14px !important;
        font-size: 16px !important;
    }

    .login-button {
        padding: 14px !important;
        font-size: 16px !important;
    }
}

/* ===== LANDSCAPE PHONE OPTIMIZATIONS ===== */

@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .container {
        padding: 8px !important;
    }

    .card,
    .stat-card {
        padding: 12px !important;
        margin-bottom: 8px;
    }

    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }

    /* Make modals more compact */
    .modal-content {
        max-height: 85vh !important;
    }
}

/* ===== TABLET OPTIMIZATIONS ===== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 20px !important;
    }

    /* Touch-friendly but less extreme than mobile */
    button,
    .btn {
        min-height: 40px;
        padding: 10px 16px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    select {
        min-height: 40px;
        padding: 10px;
        font-size: 15px;
    }

    /* Tables can be slightly more compact */
    table {
        font-size: 14px;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus states more visible on touch devices */
@media (hover: none) and (pointer: coarse) {
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus {
        outline: 3px solid #f5a623;
        outline-offset: 2px;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    /* Hide navigation and interactive elements */
    .hamburger-menu-container,
    .hamburger-btn,
    .btn-refresh,
    .refresh-btn,
    button,
    .pagination,
    .filters {
        display: none !important;
    }

    /* Optimize for printing */
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    table {
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}