/* ============================================
   Mobile Responsive Fixes
   ZeroLabs Security - Scan Pages
   ============================================ */

/* ============================================
   SAST Page - Language Chips Mobile Fix
   ============================================ */

/* Ensure minimum touch target size (44x44px) for language chips */
.sast-page .chip-content,
.language-chips .chip-content {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Mobile: Language chips - 2-column grid layout */
@media (max-width: 600px) {
    .sast-page .language-chips,
    .language-chips {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .sast-page .chip-item,
    .language-chips .chip-item {
        width: 100%;
    }

    .sast-page .chip-content,
    .language-chips .chip-content {
        width: 100%;
        padding: 12px 14px;
        min-height: 48px;
        border-radius: 8px;
        justify-content: center;
    }

    /* Mobile shorter placeholder text */
    .sast-page #gitUrl::placeholder {
        font-size: 12px;
    }

    .sast-page #searchInput::placeholder {
        font-size: 11px;
    }

    /* Adjust scanner grid for mobile */
    .sast-page .scanner-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Binary Analysis Page - Format Badge Mobile Fix
   ============================================ */

/* Ensure minimum touch target size (44x44px) for format badges */
.upload-formats .format-badge {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    box-sizing: border-box;
}

/* Mobile: Format badges - 2-column grid layout */
@media (max-width: 600px) {
    .upload-formats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto 24px;
    }

    .upload-formats .format-badge {
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        text-align: center;
        justify-content: center;
    }

    /* Upload area adjustments */
    .upload-area {
        padding: 32px 16px;
    }

    .upload-area h3 {
        font-size: 18px;
    }

    .upload-area p {
        font-size: 13px;
    }

    /* Options grid adjustments */
    .options-grid .option-group .checkbox {
        min-height: 44px;
        padding: 10px 0;
    }

    .options-grid .option-group .checkbox input {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }
}

/* ============================================
   General Mobile Input Improvements
   ============================================ */

@media (max-width: 600px) {
    /* Form inputs should have adequate touch targets */
    .form-input,
    input[type="text"],
    input[type="url"],
    input[type="password"],
    select {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Buttons should have adequate touch targets */
    .btn,
    .btn-primary,
    button[type="submit"],
    button[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Checkbox and radio touch targets */
    .checkbox,
    .option-group .checkbox,
    .severity-option,
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ============================================
   Mobile Placeholder Text Adjustments
   ============================================ */

@media (max-width: 480px) {
    /* Shorter placeholder for very small screens */
    input[placeholder*="https://github.com"]::placeholder {
        font-size: 11px;
    }

    input[placeholder*="ghp_"]::placeholder {
        font-size: 12px;
    }

    /* Search input placeholder */
    .search-input::placeholder {
        font-size: 11px;
    }
}

/* ============================================
   [HIGH] Mobile Table 800px Rendering Fix
   Fix tables that render at 800px exceeding 360px mobile viewport
   Affects: vulnerabilities.html, sast.html, scan.html
   ============================================ */

/* Ensure all table containers are responsive */
.vuln-table-container,
.table-container,
.result-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force tables to respect container width on mobile */
@media (max-width: 768px) {
    /* Vulnerabilities page table */
    .vuln-table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
        width: calc(100% + 24px);
    }

    .vuln-table {
        min-width: 700px;
        max-width: none;
        width: max-content;
    }

    /* SAST page result table */
    .table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .result-table {
        min-width: 700px;
        max-width: none;
        width: max-content;
    }

    /* Generic table styling for mobile */
    table {
        display: table;
    }

    /* Ensure table cells do not break layout */
    .vuln-table th,
    .vuln-table td,
    .result-table th,
    .result-table td {
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 13px;
    }

    /* Make file paths truncatable */
    .vuln-location,
    .file-path,
    .vuln-mini-location {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens - more aggressive table handling */
    .vuln-table-container,
    .table-container {
        margin: 0 -8px;
        padding: 0 8px;
        width: calc(100% + 16px);
    }

    .vuln-table th,
    .vuln-table td,
    .result-table th,
    .result-table td {
        padding: 8px 6px;
        font-size: 12px;
    }

    /* Hide less critical columns on very small screens */
    .vuln-table .col-date,
    .vuln-table .col-assignee {
        display: none;
    }

    .result-table .col-scanner {
        display: none;
    }
}

/* ============================================
   [MEDIUM/LOW] Touch Target Size Improvements
   Minimum touch target: 44x44px (WCAG 2.1 AA)
   47 instances need fixing
   ============================================ */

/* General touch target improvements */
@media (max-width: 768px) {
    /* Checkboxes - ensure 44x44px touch area */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
        cursor: pointer;
    }

    /* Checkbox/Radio wrapper labels for larger touch area */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]),
    .checkbox-field,
    .chip-item,
    .scanner-item,
    .severity-option {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        cursor: pointer;
    }

    /* Table checkboxes */
    .vuln-table .col-checkbox,
    .result-table .col-checkbox {
        min-width: 44px;
        width: 44px;
    }

    .vuln-table .col-checkbox input[type="checkbox"],
    .result-table .col-checkbox input[type="checkbox"],
    .vuln-checkbox,
    #selectAll {
        min-width: 22px;
        min-height: 22px;
        width: 22px;
        height: 22px;
        cursor: pointer;
        position: relative;
    }

    /* Buttons - ensure minimum size */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-sm,
    button[type="submit"],
    button[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    /* Small buttons should still have adequate touch area */
    .btn-sm,
    .btn-detail,
    .modal-close,
    .btn-remove-file,
    .tag-remove {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Icon-only buttons */
    .btn-detail,
    .modal-close {
        width: 44px;
        height: 44px;
    }

    /* Filter buttons */
    .filter-btn,
    .view-btn,
    .page-btn,
    .page-num {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }

    /* Pagination controls */
    .pagination button,
    .pagination-controls button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Action buttons in tables */
    .vuln-table .col-actions .btn,
    .result-table .col-actions .btn,
    .action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Toggle switches */
    .toggle-switch {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 0;
    }

    /* Dropdown and select elements */
    select,
    .filter-select,
    .sort-select,
    .page-size-select {
        min-height: 44px;
        padding: 10px 32px 10px 12px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="url"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    textarea,
    .form-input,
    .field-input,
    .search-input {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 16px;
    }

    /* Tabs and chips */
    .auth-tab,
    .source-tab {
        min-height: 48px;
        padding: 12px 16px;
    }

    /* Language chips */
    .chip-content {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }

    /* Scanner items */
    .scanner-content {
        min-height: 44px;
        padding: 14px 16px;
    }

    /* Severity badges when clickable */
    .severity-option .severity-badge {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Path tags with remove buttons */
    .path-tag {
        min-height: 44px;
        padding: 10px 12px;
    }

    .path-tag .tag-remove {
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
    }

    /* Close buttons in modals */
    .modal-close,
    .btn-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Export buttons */
    .btn-export,
    .export-buttons button {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* VNC controls */
    .vnc-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
    }

    /* Vulnerability mini items */
    .vuln-mini-item {
        min-height: 44px;
        padding: 12px;
    }

    /* History cards */
    .history-card {
        min-height: 44px;
    }

    /* Log clear button */
    .btn-clear-log {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

/* ============================================
   [MEDIUM] Mobile Card Layout Improvements
   Dashboard and vulnerabilities page cards
   ============================================ */

@media (max-width: 768px) {
    /* Dashboard stat cards - 2 column grid */
    .vuln-stats,
    .stat-cards,
    .stats-grid,
    .severity-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .stat-card,
    .severity-card {
        padding: 16px !important;
        min-height: auto;
    }

    .stat-card .stat-icon,
    .severity-card .card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        flex-shrink: 0;
    }

    .stat-card .stat-value,
    .severity-card .card-count {
        font-size: 20px !important;
    }

    .stat-card .stat-label,
    .severity-card .card-label {
        font-size: 11px !important;
    }

    /* Filter bar - stack vertically */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .filter-group {
        flex-wrap: wrap;
        width: 100%;
    }

    .filter-group.severity-filters {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .filter-group.severity-filters .filter-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .filter-group.search-group {
        width: 100%;
    }

    .filter-group .filter-select {
        flex: 1;
        min-width: 100px;
    }

    /* Action buttons - full width */
    .action-group {
        display: flex !important;
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .action-group .btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    /* Dashboard action buttons */
    .dashboard-actions,
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .dashboard-actions .btn,
    .action-buttons .btn-action {
        width: 100%;
        justify-content: center;
    }

    /* Export buttons wrap */
    .export-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .export-buttons .btn-export {
        flex: 1;
        min-width: calc(50% - 4px);
        justify-content: center;
    }

    /* Chart grid - single column */
    .chart-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .chart-card {
        padding: 16px;
    }

    /* Vulnerability cards */
    .vuln-cards {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* History grid */
    .history-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Modal improvements */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .modal-content.modal-lg {
        max-width: none !important;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Detail grid in modals */
    .detail-grid,
    .detail-info-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Progress stats cards */
    .progress-stats {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Scan grid layout */
    .scan-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Form grids */
    .form-grid,
    .form-grid.three-cols {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Options grid */
    .options-grid {
        grid-template-columns: 1fr !important;
    }

    /* Scanner grid */
    .scanner-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    /* Page header - stack elements */
    .page-header-section {
        padding: 16px;
    }

    .page-header-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .page-header-text h1 {
        font-size: 20px;
    }

    .page-header-text p {
        font-size: 13px;
    }

    /* Pagination - more compact */
    .pagination-container {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .pagination-controls {
        order: 1;
    }

    .pagination-info {
        order: 2;
    }

    .page-size-selector {
        order: 3;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens - 2 columns for stats */
    .vuln-stats,
    .stat-cards,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Severity cards single column on very small */
    .severity-cards {
        grid-template-columns: 1fr !important;
    }

    .severity-card {
        flex-direction: row;
        padding: 14px !important;
    }

    /* Smaller stat icons */
    .stat-card .stat-icon,
    .severity-card .card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .stat-card .stat-value,
    .severity-card .card-count {
        font-size: 18px !important;
    }

    /* Filter buttons - 2 column grid */
    .filter-group.severity-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Page container padding */
    .page-container {
        padding: 8px !important;
    }

    /* Scan card */
    .scan-card {
        padding: 16px;
    }
}


/* ============================================
   Fix Cycle #2 - Minor Issues
   ============================================ */

/* DEF-001: 사이드바 로고 링크 터치 타겟 (40px -> 44px) */
@media (max-width: 768px) {
    .sidebar-brand {
        min-height: 44px !important;
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* DEF-002: 로그아웃 아이콘 버튼 터치 타겟 (32px -> 44px) */
@media (max-width: 768px) {
    .logout-btn,
    .sidebar-footer .user-actions a,
    .sidebar-footer .user-actions button {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* DEF-003: 모바일에서 담당자/발견일 컬럼 표시 문제 수정 */
@media (max-width: 768px) {
    .vuln-table th,
    .vuln-table td {
        display: table-cell !important;
    }

    .vuln-table {
        min-width: 900px !important;
    }
}