/**
 * Enhanced Mobile Experience - Stream 17: UI/UX Polish & Accessibility
 * Improve mobile experience to increase UI clarity. Current: 6.8/10, Target: 8.0/10.

Actions:
- Optimize mobile layouts
- Improve touch interactions
- Better mobile navigation
- Enhanced mobile performance

Expected Impact: +0.2-0.4 points on UI clarity
Source: ACTION-PLAN-FROM-RESEARCH.md - High Priority #4
 */

/* === RESPONSIVE BREAKPOINTS === */
:root {
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;

/* === MOBILE FIRST APPROACH === */

/* Base styles are mobile-first */
/* Tablet and up */
@media (min-width: 768px) {
    /* Tablet optimizations */
    .mobile-only {
        display: none !important;

/* Desktop and up */
@media (min-width: 1024px) {
    /* Desktop optimizations */
    .tablet-only {
        display: none !important;

/* === TOUCH TARGET SIZES === */
@media (max-width: 768px) {
    /* Ensure touch targets are at least 44x44px for mobile */
    button,
    .btn-terminal,
    a,
    [role="button"],
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;

    /* Increase spacing for touch interactions */
    .button-group {
        gap: 0.75rem;

    /* Larger form inputs for mobile */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;

/* === MOBILE LAYOUT OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* Stack elements vertically on mobile */
    .flex-row-mobile {
        flex-direction: column;

    /* Full width containers on mobile */
    .container,
    .modal,
    .panel {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;

    /* Adjust padding for mobile */
    .modal-content,
    .panel-content {
        padding: 1rem;

    /* Optimize text sizes for mobile */
    h1 {
        font-size: 1.75rem;

    h2 {
        font-size: 1.5rem;

    h3 {
        font-size: 1.25rem;

    /* Better spacing on mobile */
    .section {
        margin-bottom: 1.5rem;

    /* Hide non-essential elements on mobile */
    .desktop-only {
        display: none !important;

/* === TABLET OPTIMIZATIONS === */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet-specific adjustments */
    .container {
        max-width: 90%;

    /* Two-column layouts on tablet */
    .grid-2-tablet {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

/* === DESKTOP OPTIMIZATIONS === */
@media (min-width: 1024px) {
    /* Desktop-specific enhancements */
    .container {
        max-width: 1200px;
        margin: 0 auto;

    /* Multi-column layouts on desktop */
    .grid-3-desktop {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;

    .grid-4-desktop {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;

/* === LANDSCAPE ORIENTATION === */
@media (max-width: 768px) and (orientation: landscape) {
    /* Optimize for landscape mobile */
    .modal {
        max-height: 90vh;
        overflow-y: auto;

    /* Reduce vertical spacing in landscape */
    .section {
        margin-bottom: 1rem;

/* === HIGH DPI DISPLAYS === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows on retina displays */
    .border-thin {
        border-width: 0.5px;

/* === 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;

/* === PRINT STYLES === */
@media print {
    /* Hide non-essential elements when printing */
    .no-print,
    button,
    .btn-terminal,
    nav,
    .sidebar {
        display: none !important;

    /* Optimize colors for printing */
    * {
        background: white !important;
        color: black !important;

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

/* === UTILITY CLASSES === */
.mobile-only {
    display: block;

.desktop-only {
    display: none;

@media (min-width: 768px) {
    .mobile-only {
        display: none;

    .desktop-only {
        display: block;

/* === RESPONSIVE IMAGES === */
img {
    max-width: 100%;
    height: auto;

.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;

/* === RESPONSIVE TABLES === */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

    /* Stack table rows on mobile */
    .table-responsive {
        display: block;

    .table-responsive thead {
        display: none;

    .table-responsive tbody,
    .table-responsive tr,
    .table-responsive td {
        display: block;
        width: 100%;

    .table-responsive tr {
        margin-bottom: 1rem;
        border: 1px solid var(--color-border, #333);
        border-radius: 4px;
        padding: 0.5rem;

    .table-responsive td {
        text-align: right;
        padding: 0.5rem;
        border-bottom: 1px solid var(--color-border, #333);

    .table-responsive td::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        float: left;

/* === RESPONSIVE NAVIGATION === */
@media (max-width: 768px) {
    /* Mobile navigation menu */
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-bg-secondary, #1a1a1a);
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;

    .nav-menu.active {
        left: 0;

    /* Hamburger menu button */
    .nav-toggle {
        display: block;
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1001;
        background: var(--color-bg-secondary, #1a1a1a);
        border: 2px solid var(--color-border, #333);
        padding: 0.5rem;
        cursor: pointer;

@media (min-width: 769px) {
    .nav-toggle {
        display: none;

/* === RESPONSIVE MODALS === */
@media (max-width: 768px) {
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: none;

    .modal.active {
        transform: none;

/* === RESPONSIVE FORMS === */
@media (max-width: 768px) {
    /* Stack form fields on mobile */
    .form-group {
        margin-bottom: 1rem;

    .form-row {
        flex-direction: column;

    /* Full width inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        box-sizing: border-box;

/* === RESPONSIVE GRID === */
.grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

@media (min-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);

@media (min-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);

@media (min-width: 1440px) {
    .grid-responsive {
        grid-template-columns: repeat(4, 1fr);

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}