/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Mobile Enhancements - Sprint 1
 * Touch target optimization, mobile navigation, mobile-specific improvements
 */

/* ============================================
   TOUCH TARGET OPTIMIZATION
   ============================================ */

/* Ensure all interactive elements meet 44px minimum */
button,
.btn,
.button,
input[type="button"],
input[type="submit"],
a.button,
.clickable,
[role="button"],
[tabindex="0"] {
    min-height: calc(var(--spacing-2xl) * 1.375);
    min-width: calc(var(--spacing-2xl) * 1.375);
    padding: var(--spacing-md) var(--spacing-lg);
    touch-action: manipulation; /* Disable double-tap zoom */

/* Small buttons should still meet minimum */
.btn-sm,
button.small {
    min-height: calc(var(--spacing-2xl) * 1.375);
    min-width: calc(var(--spacing-2xl) * 1.375);
    padding: var(--spacing-sm) calc(var(--spacing-md) * 1.167);

/* Icon buttons */
.icon-button,
button.icon-only {
    min-width: calc(var(--spacing-2xl) * 1.375);
    min-height: calc(var(--spacing-2xl) * 1.375);
    padding: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;

/* Links should also meet minimum */
a:not(.no-touch-target) {
    min-height: calc(var(--spacing-2xl) * 1.375);
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    min-height: calc(var(--spacing-2xl) * 1.375);
    padding: var(--spacing-md);
    font-size: var(--font-size-base); /* Prevents zoom on iOS */

/* Checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    width: calc(var(--spacing-2xl) * 1.375);
    height: calc(var(--spacing-2xl) * 1.375);
    min-width: calc(var(--spacing-2xl) * 1.375);
    min-height: calc(var(--spacing-2xl) * 1.375);

/* Touch feedback */
button:active,
.btn:active,
.button:active,
a.button:active,
.clickable:active {
    background-color: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    transform: scale(0.95);

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

/* Mobile menu */
@media (max-width: 768px) {
    .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.95);
        z-index: 10000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
        overflow-y: auto;
        backdrop-filter: blur(10px);

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

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid var(--color-border, #444);
        background: var(--color-bg-card, var(--color-bg-card));

    .mobile-menu-header h2 {
        margin: 0;
        color: var(--color-text-primary, var(--color-text-primary));
        font-family: var(--font-heading, 'Orbitron', sans-serif);
        font-size: 1.25rem;

    .mobile-menu-close {
        background: transparent;
        border: none;
        color: var(--color-text-primary, var(--color-text-primary));
        font-size: 2rem;
        cursor: pointer;
        width: calc(var(--spacing-2xl) * 1.375);
        height: calc(var(--spacing-2xl) * 1.375);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        transition: background 0.2s;

    .mobile-menu-close:hover,
    .mobile-menu-close:focus {
        background: var(--color-bg-hover, #333);
        outline: 2px solid var(--color-info, #4a90e2);
        outline-offset: 2px;

    .mobile-menu-toggle {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 10001;
        min-width: calc(var(--spacing-2xl) * 1.375);
        min-height: calc(var(--spacing-2xl) * 1.375);
        background: var(--color-bg-card, var(--color-bg-card));
        border: 1px solid var(--color-border, #444);
        border-radius: var(--radius-sm);
        color: var(--color-text-primary, var(--color-text-primary));
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 2px 8px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);
        transition: all 0.2s;

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: var(--color-bg-hover, #333);
        transform: scale(1.05);
        outline: 2px solid var(--color-info, #4a90e2);
        outline-offset: 2px;

    .mobile-menu-toggle:active {
        transform: scale(0.95);

    .mobile-menu-nav {
        padding: 1rem;
        padding-top: 1rem;

    .mobile-menu-link {
        display: block;
        padding: 1rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-border, #444);
        color: var(--color-text-primary, var(--color-text-primary));
        text-decoration: none;
        min-height: calc(var(--spacing-2xl) * 1.375);
        display: flex;
        align-items: center;
        border-radius: var(--radius-sm);
        transition: all 0.2s;
        font-size: 1rem;

    .mobile-menu-link:hover,
    .mobile-menu-link:focus {
        background: var(--color-bg-hover, #333);
        transform: translateX(4px);
        outline: 2px solid var(--color-info, #4a90e2);
        outline-offset: -2px;

    .mobile-menu-link:active {
        transform: translateX(2px) scale(0.98);

/* Hide desktop navigation on mobile */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;

/* Show mobile navigation on mobile */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;

/* ============================================
   MOBILE LAYOUT OPTIMIZATIONS
   ============================================ */

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

    /* Full width on mobile */
    .full-width-mobile {
        width: 100%;

    /* Adjust spacing */
    .container {
        padding: 1rem;

    /* Larger text on mobile */
    body {
        font-size: var(--font-size-base); /* Prevents zoom on iOS */

    /* Better spacing for touch */
    .section {
        margin-bottom: 2rem;

    /* Cards full width */
    .card {
        width: 100%;
        margin-bottom: 1rem;

/* ============================================
   SWIPE GESTURES
   ============================================ */

.swipeable {
    touch-action: pan-y;
    user-select: none;

.swipeable-left {
    touch-action: pan-x;

.swipeable-right {
    touch-action: pan-x;

/* Swipe indicators */
.swipe-hint {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 0.875rem;
    pointer-events: none;

/* ============================================
   MOBILE KEYBOARD HANDLING
   ============================================ */

/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-size: var(--font-size-base); /* Prevents zoom on iOS */

/* Better mobile keyboard experience */
@media (max-width: 768px) {
    /* Adjust viewport when keyboard appears */
    .keyboard-open {
        padding-bottom: 50vh; /* Space for keyboard */

    /* Scroll input into view */
    input:focus,
    textarea:focus,
    select:focus {
        scroll-margin-top: 104px;

/* ============================================
   MOBILE-SPECIFIC UI PATTERNS
   ============================================ */

/* Bottom sheet pattern */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-card, var(--color-bg-card));
    border-radius: 1rem 1rem 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 10000;

.bottom-sheet.open {
    transform: translateY(0);

.bottom-sheet-handle {
    width: calc(var(--spacing-2xl) * 1.25);
    height: var(--spacing-sm);
    background: var(--color-border, #444);
    border-radius: var(--radius-xs);
    margin: 0.5rem auto;

/* Mobile tabs */
@media (max-width: 768px) {
    .mobile-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;

    .mobile-tabs::-webkit-scrollbar {
        display: none;

    .mobile-tab {
        min-width: 104px;
        padding: 1rem;
        white-space: nowrap;
        border-bottom: calc(var(--spacing-xs) / 2) solid transparent;

    .mobile-tab.active {
        border-bottom-color: var(--color-info, #4a90e2);

/* ============================================
   MOBILE PERFORMANCE
   ============================================ */

/* Optimize animations on mobile */
@media (max-width: 768px) {
    /* Reduce animation complexity */
    * {
        will-change: auto;

    /* Simplify transitions */
    .card {
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;

    /* Disable parallax on mobile */
    .parallax {
        transform: none !important;

/* ============================================
   MOBILE ACCESSIBILITY
   ============================================ */

/* Larger hit areas */
@media (max-width: 768px) {
    /* Increase spacing between interactive elements */
    button + button,
    .btn + .btn {
        margin-left: 0.5rem;

    /* Better focus indicators */
    button:focus-visible,
    .btn:focus-visible,
    a:focus-visible {
        outline: 3px solid var(--color-info, #4a90e2);
        outline-offset: 4px;

/* ============================================
   MOBILE TESTING HELPERS
   ============================================ */

/* Debug touch targets */
.debug-touch-targets * {
    outline: 1px dashed rgba(255, 0, 0, 0.3);

.debug-touch-targets button,
.debug-touch-targets .btn,
.debug-touch-targets a {
    outline: 2px solid rgba(0, 255, 0, 0.5);

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