/**
 * Mobile Responsiveness Improvements
 *
 * Optimizes DataMastr for tablet and mobile devices.
 * Breakpoints: sm (576px), md (768px), lg (992px), xl (1200px)
 *
 * Version: 1.0
 * Date: February 9, 2026
 */

/* ===== GENERAL MOBILE IMPROVEMENTS ===== */

/* Ensure tables are scrollable on mobile */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack form groups vertically */
    .form-row,
    .row.form-group {
        flex-direction: column;
    }

    .form-row > div,
    .row.form-group > div {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Adjust modal sizing */
    .modal-dialog {
        margin: 0.5rem;
        max-width: none;
    }

    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
}

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

@media (max-width: 992px) {
    /* Hamburger menu for mobile */
    .navbar-toggler {
        display: block;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        z-index: 1000;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }

    /* Breadcrumbs: show only last 2 items */
    .breadcrumb-item:not(:nth-last-child(-n+2)) {
        display: none;
    }

    .breadcrumb-item:nth-last-child(2)::before {
        content: "... / ";
    }
}

/* ===== DASHBOARD & CARDS ===== */

@media (max-width: 768px) {
    /* Stack dashboard cards */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    /* KPI cards */
    .kpi-card {
        min-height: auto;
        padding: 1rem;
    }

    .kpi-card .kpi-value {
        font-size: 2rem;
    }

    /* Chart containers */
    .chart-container {
        height: 250px !important;
    }

    .chart-container.chart-sm {
        height: 200px !important;
    }
}

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

@media (max-width: 768px) {
    /* Hide less important columns */
    .table th.d-none-mobile,
    .table td.d-none-mobile {
        display: none;
    }

    /* Compact table cells */
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
    }

    /* Stack table cells for very small screens */
    @media (max-width: 576px) {
        .table-stacked thead {
            display: none;
        }

        .table-stacked tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }

        .table-stacked td {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem;
            border: none;
            border-bottom: 1px solid #dee2e6;
        }

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

        .table-stacked td::before {
            content: attr(data-label);
            font-weight: bold;
            margin-right: 1rem;
        }
    }
}

/* ===== BUTTONS ===== */

@media (max-width: 768px) {
    /* Full-width buttons on mobile */
    .btn-mobile-full {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Button groups stack vertically */
    .btn-group-mobile-vertical {
        flex-direction: column;
    }

    .btn-group-mobile-vertical .btn {
        width: 100%;
        border-radius: 0.25rem !important;
        margin-bottom: 0.5rem;
    }

    /* Compact button text */
    .btn .btn-text-desktop {
        display: none;
    }

    .btn .btn-text-mobile {
        display: inline;
    }
}

@media (min-width: 769px) {
    .btn .btn-text-mobile {
        display: none;
    }

    .btn .btn-text-desktop {
        display: inline;
    }
}

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

@media (max-width: 768px) {
    /* Larger touch targets */
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px; /* Apple's recommended touch target */
    }

    /* Stack form labels and inputs */
    .form-label {
        margin-bottom: 0.25rem;
    }

    /* Adjust spacing */
    .form-group,
    .mb-3 {
        margin-bottom: 1.5rem;
    }
}

/* ===== ASSET PROFILE ===== */

@media (max-width: 768px) {
    /* Stack asset profile sections */
    .asset-profile-layout {
        grid-template-columns: 1fr !important;
    }

    /* Column table */
    .columns-table .column-card {
        padding: 1rem;
    }

    /* Quality indicators */
    .quality-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ===== DATA LINEAGE ===== */

@media (max-width: 768px) {
    /* Lineage graph */
    #lineage-graph {
        height: 400px !important;
    }

    /* Lineage controls */
    .lineage-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .lineage-controls .control-group {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Lineage legend */
    .lineage-legend {
        flex-direction: column;
    }

    /* Suggestion carousel */
    .suggestion-card {
        padding: 1rem;
    }

    .confidence-breakdown {
        flex-direction: column;
    }
}

/* ===== QUALITY ISSUES ===== */

@media (max-width: 768px) {
    /* Issue filters */
    .quality-filters {
        flex-direction: column;
    }

    .quality-filters > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Issue cards */
    .issue-card {
        padding: 1rem;
    }

    /* Bulk actions bar */
    .bulk-actions-bar {
        flex-wrap: wrap;
    }

    .bulk-actions-bar .btn {
        flex: 1 1 calc(50% - 0.5rem);
        margin: 0.25rem;
    }
}

/* ===== AI ACT DASHBOARD ===== */

@media (max-width: 768px) {
    /* AI system cards */
    .ai-system-card {
        padding: 1rem;
    }

    /* Risk badges */
    .risk-badge {
        font-size: 0.75rem;
    }

    /* FRIA form */
    .fria-assessment-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== COMPLIANCE (ROPA, DSR) ===== */

@media (max-width: 768px) {
    /* ROPA form sections */
    .ropa-section {
        padding: 1rem;
    }

    /* Processing activity cards */
    .processing-activity-card {
        padding: 1rem;
    }

    /* DSR scanning results */
    .dsr-findings-list {
        padding: 0.5rem;
    }
}

/* ===== GOVERNANCE (ACTION ITEMS) ===== */

@media (max-width: 768px) {
    /* Action item cards */
    .action-item-card {
        padding: 1rem;
    }

    /* Priority badges */
    .priority-badge {
        font-size: 0.75rem;
    }

    /* Action log table */
    .action-log-table {
        font-size: 0.875rem;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */

/* Larger tap targets for mobile */
@media (max-width: 768px) {
    a, button, .btn, .clickable {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Icon buttons */
    .btn-icon {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    /* Dropdown items */
    .dropdown-item {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    /* Checkbox and radio larger */
    .form-check-input {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.1rem;
    }

    .form-check-label {
        margin-left: 0.5rem;
    }
}

/* ===== UTILITY CLASSES ===== */

/* Show/hide based on screen size */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block;
    }
}

/* Responsive spacing */
@media (max-width: 768px) {
    .container-fluid,
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mb-responsive {
        margin-bottom: 1rem;
    }

    .mt-responsive {
        margin-top: 1rem;
    }
}

@media (min-width: 769px) {
    .mb-responsive {
        margin-bottom: 1.5rem;
    }

    .mt-responsive {
        margin-top: 1.5rem;
    }
}

/* ===== LANDSCAPE MODE (Tablets) ===== */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Optimize for landscape tablets */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-dialog {
        max-width: 90%;
    }

    /* Two-column layout for forms */
    .form-two-col-tablet {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

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

@media print {
    /* Hide navigation and controls */
    header, footer, .navbar, .sidebar,
    .btn, .controls, .action-buttons {
        display: none !important;
    }

    /* Full width for content */
    .container, .container-fluid {
        max-width: 100%;
        padding: 0;
    }

    /* Page breaks */
    .page-break {
        page-break-after: always;
    }

    /* Expand collapsed sections */
    .collapse {
        display: block !important;
        height: auto !important;
    }
}