/**
 * Responsive Design System for Privacy Platform
 * US-076: Implement Full Responsive Design
 * 
 * Breakpoints (comprehensive device coverage):
 * - 2xs: <360px   (small Android phones)
 * - xs:  ≥360px   (Android HD, iPhone SE, most smartphones)
 * - xs+: ≥412px   (Android FHD, Samsung Galaxy S, iPhone 14 Pro)
 * - sm:  ≥576px   (landscape phones)
 * - md-: ≥744px   (iPad mini portrait)
 * - md:  ≥768px   (iPad / tablet portrait)
 * - md+: ≥820px   (iPad Air portrait)
 * - lg:  ≥992px   (landscape tablets, small laptops)
 * - xl:  ≥1200px  (laptops mHD 1280)
 * - xl+: ≥1366px  (laptop HD)
 * - xxl: ≥1400px  (large laptops)
 * - 3xl: ≥1920px  (Full HD)
 * - 4xl: ≥2048px  (2K)
 * - 5xl: ≥2560px  (QHD)
 * - 6xl: ≥3840px  (4K UHD)
 * 
 * Mobile-First Approach: base styles target mobile,
 * min-width media queries add complexity for larger screens.
 * Fluid typography via clamp() — auto-resize on window drag/zoom.
 * Golden ratio (φ = 1.618) spacing system for consistent proportions.
 */

/* ==========================================================================
   CSS Variables for Responsive Design
   ========================================================================== */
:root {
    /* Touch target sizes (WCAG 2.1 AA: minimum 44x44px) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Golden Ratio Spacing Scale (φ = 1.618) */
    --spacing-xs: var(--gr-1, 0.25rem);     /* 4px */
    --spacing-sm: var(--gr-2, 0.404rem);    /* ~6.5px */
    --spacing-md: var(--gr-4, 1.058rem);    /* ~17px */
    --spacing-lg: var(--gr-5, 1.712rem);    /* ~27px */
    --spacing-xl: var(--gr-6, 2.769rem);    /* ~44px */
    --spacing-2xl: var(--gr-7, 4.479rem);   /* ~72px */
    
    /* Fluid Font sizes (auto-scale with viewport) */
    --font-size-xs: var(--type-xs, clamp(0.7rem, 0.65rem + 0.1vw, 0.8rem));
    --font-size-sm: var(--type-sm, clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem));
    --font-size-base: var(--type-base, clamp(0.9rem, 0.85rem + 0.12vw, 1rem));
    --font-size-lg: var(--type-md, clamp(1rem, 0.95rem + 0.15vw, 1.125rem));
    --font-size-xl: var(--type-lg, clamp(1.1rem, 1rem + 0.2vw, 1.272rem));
    --font-size-2xl: var(--type-xl, clamp(1.25rem, 1.1rem + 0.35vw, 1.618rem));
    --font-size-3xl: var(--type-2xl, clamp(1.5rem, 1.3rem + 0.5vw, 2.058rem));
    --font-size-4xl: var(--type-3xl, clamp(1.75rem, 1.5rem + 0.8vw, 2.618rem));
    
    /* Sidebar widths */
    --sidebar-width-mobile: 100%;
    --sidebar-width-tablet: 280px;
    --sidebar-width-desktop: 250px;
    
    /* Layout dimensions */
    --navbar-height: 56px;
    --footer-height: 52px;
    
    /* Z-index layers */
    --z-sidebar: 1040;
    --z-overlay: 1030;
    --z-mobile-nav: 1050;
    --z-toast: 1060;
    --z-modal: 1070;
    
    /* Consistent card dimensions (golden ratio) */
    --card-min-height: 6.854rem;  /* gr-7 * φ^0.5 */
    --card-padding: var(--gr-4, 1.058rem);
    --card-gap: var(--gr-4, 1.058rem);
    --card-radius: 0.618rem;      /* 1/φ */
    
    /* Content container */
    --content-padding: var(--gr-4, 1.058rem);
}

/* ==========================================================================
   Base Mobile Styles (Default - Mobile First)
   ========================================================================== */

/* Body and root */
html {
    /**
     * Fluid base font-size — tự động scale theo viewport width:
     * 320px → 13px | 768px → 13.4px | 1366px → 14.2px
     * 1920px → 15.1px | 2560px → 16px | 3840px → 18px
     * Tự động resize khi kéo cửa sổ browser hoặc zoom
     */
    font-size: clamp(13px, calc(12.2px + 0.15vw), 18px);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: var(--font-size-base);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Touch-friendly elements */
button,
.btn,
a.nav-link,
.form-control,
.form-select,
.dropdown-item {
    min-height: var(--touch-target-min);
}

/* Ensure buttons are touch-friendly */
.btn {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
}

.btn-sm {
    min-height: 36px;
    padding: 0.375rem 0.75rem;
}

.btn-lg {
    min-height: var(--touch-target-comfortable);
    padding: 0.75rem 1.5rem;
}

/* Form controls touch-friendly */
.form-control,
.form-select {
    padding: 0.625rem 0.875rem;
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* ==========================================================================
   Navbar Responsive
   ========================================================================== */

/* Mobile navbar */
.navbar {
    padding: var(--spacing-sm) var(--spacing-md);
}

.navbar-brand {
    font-size: var(--font-size-lg) !important;
}

.navbar-brand i {
    font-size: var(--font-size-base);
}

/* Navbar toggler */
.navbar-toggler {
    padding: var(--spacing-sm);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border: none;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Mobile collapse menu */
.navbar-collapse {
    background: inherit;
    padding: var(--spacing-md) 0;
}

/* ==========================================================================
   Sidebar Responsive
   ========================================================================== */

/* Mobile: Sidebar as overlay */
.sidebar-column {
    position: fixed;
    top: var(--navbar-height, 56px);
    left: 0;
    width: var(--sidebar-width-mobile);
    max-width: 300px;
    height: calc(100vh - var(--navbar-height, 56px));
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-column.show {
    transform: translateX(0);
}

/* Sidebar overlay backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: var(--navbar-height, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* Main content area — mobile: enough space for bottom nav (64px) + safe-area + breathing room */
@media (max-width: 991.98px) {
    .main-content-area {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
    }
}

/* ==========================================================================
   Mobile Bottom Navigation
   ========================================================================== */

.mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--dp-surface-primary);
    border-top: 1px solid var(--dp-border-default);
    z-index: var(--z-mobile-nav);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    color: var(--dp-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    transition: color 0.2s ease;
    min-height: var(--touch-target-min);
}

.mobile-bottom-nav .nav-item:active,
.mobile-bottom-nav .nav-item.active {
    color: var(--dp-interactive-primary);
}

.mobile-bottom-nav .nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.mobile-bottom-nav .nav-item span {
    font-weight: 500;
}

/* ==========================================================================
   Cards Responsive — Golden Ratio Consistent Sizing
   ========================================================================== */

/* .card, .card-body, .card-header, .card-footer base styles are in app.css — removed duplicates */

/* Stats cards grid — golden ratio gap */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--card-gap, var(--gr-4));
}

.stats-card {
    padding: var(--card-padding, var(--gr-4));
    min-height: var(--card-min-height, 6.854rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-card .stats-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.stats-card .stats-label {
    font-size: var(--font-size-xs);
    color: var(--dp-text-secondary);
}

/* ==========================================================================
   Tables Responsive
   ========================================================================== */

/* Responsive table wrapper */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--spacing-md));
    padding: 0 var(--spacing-md);
}

/* Mobile-friendly table */
.table-mobile {
    min-width: 100%;
}

.table-mobile th,
.table-mobile td {
    padding: var(--spacing-sm);
    white-space: nowrap;
}

/* Card-style table for mobile */
.table-cards-mobile {
    display: block;
}

.table-cards-mobile thead {
    display: none;
}

.table-cards-mobile tbody {
    display: block;
}

.table-cards-mobile tr {
    display: block;
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--dp-border-default);
    border-radius: 0.5rem;
    padding: var(--spacing-md);
    background: var(--dp-surface-primary);
}

.table-cards-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border: none;
}

.table-cards-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--dp-text-secondary);
    margin-right: var(--spacing-md);
}

/* ==========================================================================
   Forms Responsive
   ========================================================================== */

/* Form groups */
.form-group {
    margin-bottom: var(--spacing-md);
}

/* Stacked form on mobile */
.form-row-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Input groups */
.input-group {
    flex-wrap: nowrap;
}

/* Checkbox and radio - larger touch targets */
.form-check {
    padding: var(--spacing-sm) 0;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
}

.form-check-label {
    padding-left: var(--spacing-sm);
}

/* ==========================================================================
   Modal Responsive
   ========================================================================== */

/* Full-screen modal on mobile */
.modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
}

.modal-content {
    border: none;
    border-radius: 0;
    min-height: 100vh;
}

.modal-header {
    position: sticky;
    top: 0;
    background: var(--dp-surface-primary);
    z-index: 10;
    padding: var(--spacing-md);
}

.modal-body {
    padding: var(--spacing-md);
}

.modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--dp-surface-primary);
    padding: var(--spacing-md);
    border-top: 1px solid var(--dp-border-default);
}

/* ==========================================================================
   Assessment Pages Responsive
   ========================================================================== */

/* Assessment header */
.assessment-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--spacing-md);
}

.assessment-header .breadcrumb {
    font-size: var(--font-size-sm);
}

.assessment-header h3 {
    font-size: var(--font-size-xl);
}

.assessment-header .btn-group {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.assessment-header .btn {
    flex: 1;
    min-width: 120px;
}

/* Assessment info cards */
.assessment-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.assessment-info-card {
    padding: var(--spacing-sm);
}

.assessment-info-card .icon-box {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

/* Assessment tabs */
.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-tabs::-webkit-scrollbar {
    display: none;
}

.nav-tabs .nav-link {
    white-space: nowrap;
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Risk matrix responsive */
.risk-matrix-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.risk-matrix {
    min-width: 320px;
}

.risk-matrix-cell {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   Dashboard Responsive
   ========================================================================== */

/* Dashboard grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

/* Dashboard widgets */
.dashboard-widget {
    padding: var(--card-padding, var(--gr-4));
}

/* Chart containers */
.chart-container {
    min-height: 200px;
    max-height: 300px;
}

/* ==========================================================================
   Utilities - Mobile
   ========================================================================== */

/* Hide on mobile */
.d-mobile-none {
    display: none !important;
}

/* Show only on mobile */
.d-mobile-only {
    display: block !important;
}

/* Mobile text sizes */
.text-mobile-sm {
    font-size: var(--font-size-sm) !important;
}

.text-mobile-xs {
    font-size: var(--font-size-xs) !important;
}

/* Mobile padding — golden ratio */
.p-mobile-sm {
    padding: var(--gr-3, 0.654rem) !important;
}

.px-mobile-sm {
    padding-left: var(--gr-3, 0.654rem) !important;
    padding-right: var(--gr-3, 0.654rem) !important;
}

/* Truncate text */
.text-truncate-mobile {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stack elements vertically on mobile */
.flex-mobile-column {
    flex-direction: column !important;
}

/* Full width on mobile */
.w-mobile-100 {
    width: 100% !important;
}

/* ==========================================================================
   Color Theme Utility Classes
   Đồng nhất color theme across all components
   ========================================================================== */

/* Background utilities */
.bg-brand {
    background-color: var(--dp-surface-selected) !important;
}

.bg-brand-primary {
    background-color: var(--dp-interactive-primary) !important;
}

.bg-brand-surface {
    background-color: var(--dp-surface-primary) !important;
}

.bg-brand-soft {
    background-color: var(--dp-surface-selected) !important;
}

/* Text color utilities */
.text-brand-primary {
    color: var(--dp-text-primary) !important;
}

.text-brand-secondary {
    color: var(--dp-text-secondary) !important;
}

.text-brand-muted {
    color: var(--dp-text-tertiary) !important;
}

.text-brand-accent {
    color: var(--dp-interactive-primary) !important;
}

/* Risk level text colors */
.text-risk-critical,
.text-risk-very-high {
    color: var(--dp-status-danger) !important;
    font-weight: 600;
}

.text-risk-high {
    color: var(--dp-risk-high) !important;
    font-weight: 600;
}

.text-risk-medium,
.text-risk-warning {
    color: var(--dp-status-warning) !important;
    font-weight: 600;
}

.text-risk-low {
    color: var(--dp-status-success) !important;
    font-weight: 600;
}

/* Golden ratio spacing utilities */
.gap-gr-1 { gap: var(--gr-1, 0.25rem) !important; }
.gap-gr-2 { gap: var(--gr-2, 0.404rem) !important; }
.gap-gr-3 { gap: var(--gr-3, 0.654rem) !important; }
.gap-gr-4 { gap: var(--gr-4, 1.058rem) !important; }
.gap-gr-5 { gap: var(--gr-5, 1.712rem) !important; }
.gap-gr-6 { gap: var(--gr-6, 2.769rem) !important; }

.p-gr-3 { padding: var(--gr-3, 0.654rem) !important; }
.p-gr-4 { padding: var(--gr-4, 1.058rem) !important; }
.p-gr-5 { padding: var(--gr-5, 1.712rem) !important; }

.m-gr-3 { margin: var(--gr-3, 0.654rem) !important; }
.m-gr-4 { margin: var(--gr-4, 1.058rem) !important; }
.m-gr-5 { margin: var(--gr-5, 1.712rem) !important; }

.mb-gr-3 { margin-bottom: var(--gr-3, 0.654rem) !important; }
.mb-gr-4 { margin-bottom: var(--gr-4, 1.058rem) !important; }
.mb-gr-5 { margin-bottom: var(--gr-5, 1.712rem) !important; }

.mt-gr-3 { margin-top: var(--gr-3, 0.654rem) !important; }
.mt-gr-4 { margin-top: var(--gr-4, 1.058rem) !important; }
.mt-gr-5 { margin-top: var(--gr-5, 1.712rem) !important; }

/* ==========================================================================
   Mobile Device Breakpoints
   ========================================================================== */

/* --- Samsung Galaxy / Android HD (≥360px) --- 
   Galaxy S20/S21/S22: 360×800
   iPhone SE: 375×667, iPhone 12 mini: 375×812
*/
@media (min-width: 360px) {
    /* Card grid 1 column, full width */
    .stats-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Cards consistent sizing */
    .stats-card {
        min-height: 5rem;
    }

    /* Buttons full width */
    .btn-mobile-full {
        width: 100%;
    }
}

/* --- Android FHD / Samsung Galaxy S series (≥412px) ---
   Galaxy S21/S22/S23: 412×915
   iPhone 14 Pro: 393×852, iPhone 14 Pro Max: 430×932
   Android FHD: 412×915
*/
@media (min-width: 412px) {
    /* Stats cards 2 columns on wider phones */
    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gr-3, 0.654rem);
    }

    /* Cards slightly taller */
    .stats-card {
        min-height: 5.5rem;
    }

    /* Assessment info cards 2 columns */
    .assessment-info-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gr-3, 0.654rem);
    }
}

/* --- iPhone Pro Max / Large phones (≥430px) ---
   iPhone 14 Pro Max: 430×932
   iPhone 15 Plus: 430×932
   Galaxy S Ultra series: 412-480px
*/
@media (min-width: 430px) {
    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gr-4, 1.058rem);
    }

    /* Modal slightly less than full width */
    .modal-dialog {
        margin: var(--gr-3) var(--gr-2);
    }
}

/* ==========================================================================
   Small Tablet (≥576px) — Landscape phones
   ========================================================================== */
@media (min-width: 576px) {
    /* Content padding tăng */
    :root {
        --content-padding: var(--gr-4, 1.058rem);
    }

    /* Stats cards - 2 columns */
    .stats-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--card-gap, var(--gr-4));
    }
    
    /* Assessment info cards - 2 columns */
    .assessment-info-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--card-gap, var(--gr-4));
    }
    
    /* Modal - centered */
    .modal-dialog {
        margin: var(--gr-5) auto;
        max-width: 500px;
        min-height: auto;
    }
    
    .modal-content {
        border-radius: var(--card-radius, 0.618rem);
        min-height: auto;
    }
    
    /* Form row */
    .form-row-mobile {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .form-row-mobile > * {
        flex: 1;
        min-width: 200px;
    }
}

/* ==========================================================================
   iPad mini portrait (≥744px)
   Devices: iPad mini 6th gen (744×1133)
   ========================================================================== */
@media (min-width: 744px) {
    /* Sidebar slightly wider for iPad mini */
    .sidebar-column {
        width: 260px;
        max-width: 260px;
    }

    /* Stats cards fit 3 on iPad mini */
    .stats-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Dashboard gets 2 columns */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Tablet portrait (≥768px)
   Devices: iPad, Galaxy Tab, most tablets
   ========================================================================== */
@media (min-width: 768px) {
    :root {
        --content-padding: var(--gr-5, 1.712rem);
    }

    /* Sidebar - slide in from left, partial width */
    .sidebar-column {
        width: var(--sidebar-width-tablet);
        max-width: var(--sidebar-width-tablet);
    }
    
    /* Stats cards - 4 columns */
    .stats-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Assessment info cards - 4 columns */
    .assessment-info-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Dashboard grid - 2 columns */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Assessment header - horizontal */
    .assessment-header {
        flex-direction: row;
        align-items: center !important;
        justify-content: space-between;
    }
    
    .assessment-header .btn-group {
        width: auto;
        flex-wrap: nowrap;
    }
    
    .assessment-header .btn {
        flex: none;
        min-width: auto;
    }
    
    /* Show regular table, hide card table */
    .table-cards-mobile {
        display: table;
    }
    
    .table-cards-mobile thead {
        display: table-header-group;
    }
    
    .table-cards-mobile tbody {
        display: table-row-group;
    }
    
    .table-cards-mobile tr {
        display: table-row;
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }
    
    .table-cards-mobile td {
        display: table-cell;
        padding: var(--gr-3, 0.654rem);
        border-bottom: 1px solid var(--dp-border-default);
    }
    
    .table-cards-mobile td::before {
        display: none;
    }
    
    /* Modal larger */
    .modal-dialog.modal-lg {
        max-width: 800px;
    }
    
    /* Chart containers larger */
    .chart-container {
        min-height: 300px;
        max-height: 400px;
    }
    
    /* Hide mobile-only */
    .d-mobile-only {
        display: none !important;
    }
    
    /* Show on tablet+ */
    .d-mobile-none {
        display: block !important;
    }
}

/* ==========================================================================
   iPad Air portrait (≥820px)
   Devices: iPad Air (820×1180), Galaxy Tab S series
   ========================================================================== */
@media (min-width: 820px) {
    /* Optimized card grid for iPad Air width */
    .stats-cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gr-4, 1.058rem);
    }

    /* Cards bắt đầu có min-height chuẩn */
    .stats-card {
        min-height: var(--card-min-height, 6.854rem);
    }

    /* Dashboard grid tối ưu */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gr-4, 1.058rem);
    }
}

/* ==========================================================================
   Desktop / Small Laptops (≥992px)
   Devices: Landscape tablets, small laptops
   ========================================================================== */
@media (min-width: 992px) {
    :root {
        --content-padding: var(--gr-5, 1.712rem);
    }

    /* Sidebar - sticky, always visible */
    .sidebar-column {
        position: sticky;
        top: var(--navbar-height, 56px);
        width: var(--sidebar-width-desktop);
        max-width: var(--sidebar-width-desktop);
        height: calc(100vh - var(--navbar-height, 56px));
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(0);
        transition: none;
    }
    
    /* Hide sidebar backdrop */
    .sidebar-backdrop {
        display: none !important;
    }
    
    /* Hide mobile bottom nav */
    .mobile-bottom-nav {
        display: none;
    }
    
    /* Main content - no bottom padding needed */
    .main-content-area {
        padding-bottom: 0;
    }
    
    /* Dashboard grid - flexible */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    /* Larger font sizes */
    .assessment-header h3 {
        font-size: var(--font-size-2xl);
    }
    
    /* Risk matrix larger cells */
    .risk-matrix-cell {
        width: 60px;
        height: 60px;
        font-size: var(--font-size-sm);
    }
}

/* ==========================================================================
   Large Desktop / Laptop mHD (≥1200px)
   Devices: 1280×720 mHD, standard laptops
   ========================================================================== */
@media (min-width: 1200px) {
    /* Wider stats cards */
    .stats-card .stats-value {
        font-size: var(--font-size-2xl);
    }
    
    /* Larger chart containers */
    .chart-container {
        min-height: 350px;
        max-height: 500px;
    }
    
    /* Modal extra large */
    .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}

/* ==========================================================================
   Extra Large Desktop (≥1400px)
   ========================================================================== */
@media (min-width: 1400px) {
    /* Maximum content width */
    .container-xxl {
        max-width: 1400px;
    }
    
    /* Even larger stats */
    .stats-card .stats-value {
        font-size: var(--font-size-3xl);
    }
}

/* ==========================================================================
   Laptop HD (≥1366px)
   Devices: Most popular laptop resolution 1366×768
   ========================================================================== */
@media (min-width: 1366px) {
    :root {
        --content-padding: var(--gr-5, 1.712rem);
    }

    /* Dashboard optimized for HD */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--gr-4, 1.058rem);
    }

    /* Stats cards uniform height */
    .stats-card {
        min-height: 7.5rem;
    }
}

/* ==========================================================================
   Full HD (≥1920px)
   Devices: Full HD monitors/laptops 1920×1080
   ========================================================================== */
@media (min-width: 1920px) {
    :root {
        --content-padding: var(--gr-6, 2.769rem);
    }

    /* Container max-width for FHD */
    .container-fluid {
        max-width: 1800px;
        margin: 0 auto;
    }

    /* Dashboard grid wider */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: var(--gr-5, 1.712rem);
    }

    /* Stats cards bigger */
    .stats-card {
        min-height: 8.5rem;
        padding: var(--gr-5, 1.712rem);
    }

    .stats-card .stats-value {
        font-size: var(--font-size-4xl);
    }

    /* Chart containers larger */
    .chart-container {
        min-height: 400px;
        max-height: 600px;
    }

    /* Modal sizes upscale */
    .modal-dialog.modal-lg {
        max-width: 960px;
    }

    .modal-dialog.modal-xl {
        max-width: 1320px;
    }
}

/* ==========================================================================
   2K (≥2048px)
   Devices: 2K monitors 2048×1080
   ========================================================================== */
@media (min-width: 2048px) {
    .container-fluid {
        max-width: 1920px;
        margin: 0 auto;
    }

    /* Card sizing tăng nhẹ */
    .card-body {
        padding: var(--gr-5, 1.712rem);
    }

    .card-header,
    .card-footer {
        padding: var(--gr-4, 1.058rem) var(--gr-5, 1.712rem);
    }
}

/* ==========================================================================
   QHD (≥2560px)
   Devices: QHD monitors 2560×1440
   ========================================================================== */
@media (min-width: 2560px) {
    :root {
        --content-padding: var(--gr-6, 2.769rem);
    }

    .container-fluid {
        max-width: 2200px;
        margin: 0 auto;
    }

    /* Dashboard grid for QHD */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: var(--gr-5, 1.712rem);
    }

    /* Stats cards bigger for QHD */
    .stats-card {
        min-height: 9.5rem;
        padding: var(--gr-5, 1.712rem);
    }

    /* Chart containers QHD */
    .chart-container {
        min-height: 450px;
        max-height: 700px;
    }
}

/* ==========================================================================
   4K UHD (≥3840px)
   Devices: 4K monitors 3840×2160
   ========================================================================== */
@media (min-width: 3840px) {
    :root {
        --content-padding: var(--gr-7, 4.479rem);
    }

    .container-fluid {
        max-width: 3200px;
        margin: 0 auto;
    }

    /* Card sizing for 4K */
    .card-body {
        padding: var(--gr-6, 2.769rem);
    }

    .card-header,
    .card-footer {
        padding: var(--gr-5, 1.712rem) var(--gr-6, 2.769rem);
    }

    /* Dashboard grid for 4K */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        gap: var(--gr-6, 2.769rem);
    }

    /* Stats cards for 4K */
    .stats-card {
        min-height: 12rem;
        padding: var(--gr-6, 2.769rem);
    }

    .stats-card .stats-value {
        font-size: var(--font-size-4xl);
    }

    /* Chart containers 4K */
    .chart-container {
        min-height: 600px;
        max-height: 1000px;
    }

    /* Risk matrix 4K */
    .risk-matrix-cell {
        width: 100px;
        height: 100px;
        font-size: var(--font-size-lg);
    }

    /* Modal sizes 4K */
    .modal-dialog.modal-lg {
        max-width: 1400px;
    }

    .modal-dialog.modal-xl {
        max-width: 2000px;
    }

    /* Buttons bigger for 4K */
    .btn {
        padding: var(--gr-3, 0.654rem) var(--gr-5, 1.712rem);
    }

    .btn-lg {
        padding: var(--gr-4, 1.058rem) var(--gr-6, 2.769rem);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    /* Hide non-essential elements */
    .navbar,
    .sidebar-column,
    .mobile-bottom-nav,
    .btn,
    .toast-container,
    .modal-backdrop {
        display: none !important;
    }
    
    /* Full width content */
    .main-content-area {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove shadows and backgrounds */
    .card {
        box-shadow: none !important;
        border: 1px solid var(--dp-border-default) !important;
    }
    
    /* Page breaks */
    .card,
    .assessment-section {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    /* Font size */
    body {
        font-size: 12pt;
    }
}

/* ==========================================================================
   Safe Area Support (iOS Notch)
   ========================================================================== */
@supports (padding-top: env(safe-area-inset-top)) {
    .navbar {
        padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
    }
    
    .mobile-bottom-nav {
        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
        height: calc(64px + env(safe-area-inset-bottom));
    }
    
    .sidebar-column {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

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

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */
@media (prefers-contrast: high) {
    /* forced-colors: intentional per WCAG — system high-contrast color keywords */
    :root {
        --primary-color: #0000ff;
        --danger-color: #ff0000;
        --success-color: #008000;
        --warning-color: #ffa500;
    }

    .card {
        border: 2px solid #000; /* forced-colors: intentional per WCAG */
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ==========================================================================
   Main Content Column - Fix overflow issues
   ========================================================================== */

/* Ensure main content doesn't overflow its container */
.main-content-column {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0; /* Important: allows flex item to shrink below content size */
    max-width: 100%;
    /* Scroll khi content vượt chiều cao viewport - navbar */
    max-height: calc(100vh - var(--navbar-height, 56px));
    scroll-behavior: smooth;
}

/* Fix container-fluid inside main content */
.main-content-column > .container-fluid,
.main-content-column > .container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure row doesn't cause horizontal scroll */
.main-content-column .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Cards should respect container width */
.main-content-column .card {
    max-width: 100%;
    overflow: hidden;
}

/* Tables should be responsive */
.main-content-column table {
    max-width: 100%;
}

.main-content-column .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix for stats cards row - ensure they wrap properly */
.main-content-column .row > [class*="col-"] {
    min-width: 0; /* Allow columns to shrink */
}

/* Desktop specific fixes (lg breakpoint: 992px) */
@media (min-width: 992px) {
    .main-content-column {
        /* Calculate max-width: 100% - sidebar width (col-lg-2 = 16.666%) */
        max-width: calc(100% - var(--sidebar-width, 16.666%));
        flex: 0 0 83.333%;
    }

    /* Auth pages / no-sidebar pages: fill full width */
    .main-content-column.no-sidebar {
        max-width: 100%;
        flex: 1;
    }

    /* Sidebar column — sticky */
    .sidebar-column {
        flex: 0 0 16.666%;
        max-width: 16.666%;
        position: sticky;
        top: var(--navbar-height, 56px);
        height: calc(100vh - var(--navbar-height, 56px));
        overflow-y: auto;
    }
}

/* Medium screens (md breakpoint: 768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .main-content-column {
        /* col-md-9 = 75% */
        max-width: 75%;
        flex: 0 0 75%;
    }
    
    .sidebar-column {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Ensure body doesn't have horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==========================================================================
   Consistent Card Box Sizing — Golden Ratio
   Đồng nhất kích thước card ở tất cả breakpoint, tỉ lệ vàng
   ========================================================================== */

/* Base card uniform sizing */
.card {
    border-radius: var(--card-radius, 0.618rem);
    margin-bottom: var(--card-gap, var(--gr-4, 1.058rem));
}

/* Row of cards — consistent gap */
.row > [class*="col-"] > .card {
    display: flex;
    flex-direction: column;
}

.row > [class*="col-"] > .card > .card-body {
    flex: 1;
}

/* Golden ratio margins between blocks */
.content > .row,
.main-content-column > .p-3 > .row,
#main-content > .row {
    margin-bottom: var(--gr-4, 1.058rem);
}

/* Section spacing — golden ratio */
.section-spacing {
    margin-bottom: var(--gr-5, 1.712rem);
}

.section-spacing-sm {
    margin-bottom: var(--gr-4, 1.058rem);
}

.section-spacing-lg {
    margin-bottom: var(--gr-6, 2.769rem);
}