/* ============================================
   ZeroLabs Security - Responsive Styles
   Consolidated from mobile-fixes.css + responsive-fix.css
   Breakpoints: sm(640) md(768) lg(1024) xl(1280)
   ============================================ */


/* ============================================
   Base - Non-breakpoint Responsive Defaults
   ============================================ */

/* Touch targets: minimum 44x44px (WCAG 2.1 AA) */
.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;
}

.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;
}

/* Table containers: always scrollable */
.vuln-table-container,
.table-container,
.result-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dark mode: mobile dropdown */
[data-theme="dark"] .mobile-user-dropdown {
    background: var(--bg-surface, #0f172a);
    border-color: var(--border-default, #1e293b);
}

/* Focus-visible for mobile interactive elements */
.mobile-menu-btn:focus-visible,
.mobile-actions .icon-btn:focus-visible {
    outline: 2px solid var(--color-primary-500, #6366f1);
    outline-offset: 2px;
}

.sidebar.mobile-open .nav-link:focus-visible {
    outline: 2px solid var(--color-primary-500, #6366f1);
    outline-offset: 2px;
}


/* ===== Large (max-width: 1024px) ===== */
@media (max-width: 1024px) {

    /* --- Overflow: single source of truth --- */
    /* Root cause: sidebar width + table min-width can exceed viewport */
    .app-layout {
        overflow-x: hidden;
        max-width: 100vw;
    }

    html, body {
        max-width: 100vw;
    }

    /* --- Main wrapper: sidebar collapses --- */
    .main-wrapper {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
    }

    .main-content {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* --- Sidebar: off-canvas slide from left --- */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width, 260px);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar .brand-text,
    .sidebar .nav-text,
    .sidebar .user-info,
    .sidebar .user-actions {
        opacity: 1;
        width: auto;
        overflow: visible;
    }

    .sidebar .sidebar-header {
        justify-content: space-between;
    }

    .sidebar .nav-link {
        justify-content: flex-start;
        padding: 12px 16px;
    }

    .sidebar .user-menu {
        justify-content: flex-start;
        padding: 12px;
    }
}


/* ===== Tablet Sidebar Overlay (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {

    .sidebar-overlay {
        display: none;
        pointer-events: none;
        opacity: 0;
    }

    .sidebar.mobile-open ~ .sidebar-overlay,
    .sidebar-overlay.active {
        display: block;
        pointer-events: auto;
        opacity: 1;
    }
}


/* ===== Medium (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* --- Layout --- */
    .main-wrapper {
        padding-top: 56px;
    }

    .main-content {
        padding: 16px;
    }

    /* --- Mobile Header --- */
    .mobile-header {
        display: flex;
        visibility: visible;
        opacity: 1;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        z-index: var(--z-header, 500);
        background: var(--bg-surface, #ffffff);
        border-bottom: 1px solid var(--border-default, #e4e4e7);
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-menu-btn {
        display: flex;
        visibility: visible;
        opacity: 1;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: var(--text-primary, #18181b);
        cursor: pointer;
        z-index: 1;
        flex-shrink: 0;
    }

    .mobile-menu-btn i {
        font-size: 20px;
        display: block;
    }

    .mobile-menu-btn:hover,
    .mobile-menu-btn:active {
        background: var(--interactive-hover, #fafafa);
    }

    /* --- Mobile Actions --- */
    .mobile-actions {
        display: flex;
        gap: 4px;
        z-index: 1;
        position: relative;
    }

    .mobile-actions .icon-btn {
        min-width: 40px;
        min-height: 40px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .mobile-user-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 180px;
        background: var(--bg-surface, #ffffff);
        border: 1px solid var(--border-default, #e4e4e7);
        border-radius: 10px;
        box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
        padding: 6px;
        z-index: calc(var(--z-header, 500) + 10);
    }

    /* --- Sidebar Overlay (mobile) --- */
    .sidebar-overlay {
        display: none;
        pointer-events: none;
    }

    .sidebar.mobile-open ~ .sidebar-overlay,
    .sidebar-overlay.active {
        display: block !important;
        pointer-events: auto;
    }

    /* --- Page Header --- */
    .page-header h1 {
        font-size: 22px;
    }

    .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;
    }

    /* --- Sidebar Brand & Logout Touch Targets --- */
    .sidebar-brand {
        min-height: 44px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
    }

    .logout-btn,
    .sidebar-footer .user-actions a,
    .sidebar-footer .user-actions button {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Table: Horizontal Scroll --- */
    .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: 900px;
        max-width: none;
        width: max-content;
    }

    .vuln-table th,
    .vuln-table td {
        display: table-cell;
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 13px;
    }

    .table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .result-table th,
    .result-table td {
        white-space: nowrap;
        padding: 10px 8px;
        font-size: 13px;
    }

    table {
        display: table;
    }

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

    /* --- Touch Targets (WCAG 2.1 AA: 44x44px) --- */

    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
        cursor: pointer;
    }

    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 */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-sm,
    button[type="submit"],
    button[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }

    .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;
    }

    .btn-detail,
    .modal-close {
        width: 44px;
        height: 44px;
    }

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

    .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;
    }

    /* Selects */
    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; /* prevents iOS zoom on focus */
    }

    /* Tabs */
    .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 */
    .severity-option .severity-badge {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Path tags */
    .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 */
    .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;
    }

    /* --- Card Layouts --- */

    /* Stat cards: 2-column grid */
    .vuln-stats,
    .stat-cards,
    .stats-grid,
    .severity-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

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

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

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

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

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

    .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 groups: full width */
    .action-group {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

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

    .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;
    }

    /* Single-column grids */
    .chart-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .chart-card {
        padding: 16px;
    }

    .vuln-cards,
    .history-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .scan-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-grid,
    .form-grid.three-cols {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .options-grid {
        grid-template-columns: 1fr;
    }

    .scanner-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .detail-grid,
    .detail-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .progress-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

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

    .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;
    }

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

    .pagination-controls {
        order: 1;
    }

    .pagination-info {
        order: 2;
    }

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

    /* --- Dark Mode (mobile header) --- */
    [data-theme="dark"] .mobile-header {
        background: var(--bg-surface, #0f172a);
        border-color: var(--border-default, #1e293b);
    }

    [data-theme="dark"] .mobile-menu-btn {
        color: var(--text-primary, #f8fafc);
    }

    [data-theme="dark"] .mobile-menu-btn:hover,
    [data-theme="dark"] .mobile-menu-btn:active {
        background: var(--interactive-hover, #1e293b);
    }
}


/* ===== Small (max-width: 640px) ===== */
@media (max-width: 640px) {

    .main-content {
        padding: 12px;
    }

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

    /* Larger touch targets for small screens */
    .mobile-actions .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Language chips: 2-column grid */
    .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;
    }

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

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

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

    /* Binary analysis: format badges 2-column grid */
    .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 */
    .upload-area {
        padding: 32px 16px;
    }

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

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

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

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

    /* Form inputs: 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: adequate touch targets */
    .btn,
    .btn-primary,
    button[type="submit"],
    button[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Checkbox / 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;
    }
}


/* ===== Extra Small (max-width: 480px) ===== */
@media (max-width: 480px) {

    .main-content {
        padding: 10px;
    }

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

    .mobile-header {
        padding: 0 12px;
    }

    .mobile-brand span {
        font-size: 14px;
    }

    /* Tables: tighter spacing */
    .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 table columns */
    .vuln-table .col-date,
    .vuln-table .col-assignee {
        display: none;
    }

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

    /* Stats: 2-column grid persists */
    .vuln-stats,
    .stat-cards,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Severity cards: single column */
    .severity-cards {
        grid-template-columns: 1fr;
    }

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

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

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

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

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

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


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