/* ============================================================================
   UTILITY CLASSES - Minimal, composable, production-grade
   Use these instead of inline styles for common patterns
   ============================================================================ */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.grid { display: grid; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Spacing - margin */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }

/* Spacing - padding */
.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.pt-20 { padding-top: 20px; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-xs { font-size: 10px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 14px; }
.text-md { font-size: 15px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 20px; }
.text-3xl { font-size: 24px; }
.text-4xl { font-size: 28px; }
.text-5xl { font-size: 32px; }
.text-6xl { font-size: 48px; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.leading-tight { line-height: 1.3; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.7; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 1px; }
.tracking-wider { letter-spacing: 2px; }
.italic { font-style: italic; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline Icons - Mars-themed icon replacement for emojis */
.inline-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 2px;
    object-fit: contain;
}
.inline-icon-sm { width: 14px; height: 14px; }
.inline-icon-md { width: 20px; height: 20px; }
.inline-icon-lg { width: 24px; height: 24px; }
.inline-icon-xl { width: 32px; height: 32px; }
.whitespace-nowrap { white-space: nowrap; }

/* Text Colors - WCAG compliant
   These use --text-brand-* which automatically adjust for light/dark mode */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

/* Brand colors - use theme-aware versions for WCAG compliance */
.text-mars { color: var(--text-brand-mars); }
.text-sepolia { color: var(--text-brand-sepolia); }
.text-success { color: var(--text-brand-success); }
.text-danger { color: var(--text-brand-danger); }
.text-primary-brand { color: var(--text-brand-primary); }

/* White text - for use on colored/dark backgrounds only */
.text-white { color: #ffffff; }
.text-inverse { color: var(--text-inverse); }

/* Light text on dark backgrounds (WCAG compliant alternatives to rgba opacity)
   Use these INSTEAD of inline rgba(255,255,255,0.x) colors */
.text-light { color: #f5f0ea; }                    /* 12.8:1 on #1a1614 - highest emphasis */
.text-light-secondary { color: #d4c9bd; }          /* 8.1:1 - medium emphasis */
.text-light-tertiary { color: #b5a89a; }           /* 5.5:1 - low emphasis */
.text-light-muted { color: #8a7d6f; }              /* 4.0:1 - hint/disabled (large text only) */
.text-light-disabled { color: #6d6259; }           /* 3.0:1 - disabled state visual only */

/* Dark text on light backgrounds (for use in light cards/sections in dark mode) */
.text-dark { color: #1e1916; }                     /* 13.5:1 on cream - highest emphasis */
.text-dark-secondary { color: #3d3530; }           /* 8.2:1 - medium emphasis */
.text-dark-tertiary { color: #5c5045; }            /* 5.5:1 - low emphasis */
.text-dark-muted { color: #7d6f5f; }               /* 4.0:1 - hint/disabled (large text only) */

/* Legacy brand colors (raw values) - use only on contrasting backgrounds */
.text-mars-raw { color: var(--color-mars); }
.text-sepolia-raw { color: var(--color-sepolia); }
.text-success-raw { color: var(--color-success); }
.text-danger-raw { color: var(--color-danger); }
.bg-card { background: var(--bg-card); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }
.bg-mars { background: var(--gradient-mars); }
.bg-sepolia { background: var(--gradient-sepolia); }
.bg-success { background: var(--gradient-success); }
.bg-dark { background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%); }

/* Borders & Radius */
.border { border: 1px solid var(--border-default); }
.border-strong { border: 1px solid var(--border-strong); }
.border-mars { border: 2px solid var(--color-mars); }
.border-none { border: none; }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 50%; }

/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.max-w-500 { max-width: 500px; }
.max-w-700 { max-width: 700px; }
.aspect-square { aspect-ratio: 1; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Global: hide scrollbars on all modals/overlays — content still scrolls */
.mm-dialog, .mars-modal, .er-content, .aria-chat-messages,
.pb-chat-list, .pb-chat-messages {
    scrollbar-width: none; -ms-overflow-style: none;
}
.mm-dialog::-webkit-scrollbar, .mars-modal::-webkit-scrollbar,
.er-content::-webkit-scrollbar, .aria-chat-messages::-webkit-scrollbar,
.pb-chat-list::-webkit-scrollbar, .pb-chat-messages::-webkit-scrollbar { display: none; }

/* Effects */
.shadow { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Opacity - USE SPARINGLY: reduces contrast and may fail WCAG
   Prefer using text-secondary, text-tertiary, text-muted instead */
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* Dark mode: boost opacity for better contrast (accessibility) */
@media (prefers-color-scheme: dark) {
    .opacity-50 { opacity: 0.7; }
    .opacity-60 { opacity: 0.8; }
    .opacity-70 { opacity: 0.85; }
    .opacity-80 { opacity: 0.9; }
}
/* Also support .dark class for manual toggle */
.dark .opacity-50 { opacity: 0.7; }
.dark .opacity-60 { opacity: 0.8; }
.dark .opacity-70 { opacity: 0.85; }
.dark .opacity-80 { opacity: 0.9; }

/* Text emphasis levels (WCAG-compliant alternatives to opacity) */
.text-emphasis-high { color: var(--text-primary); }      /* Full emphasis */
.text-emphasis-medium { color: var(--text-secondary); }  /* Medium emphasis */
.text-emphasis-low { color: var(--text-tertiary); }      /* Low emphasis */
.text-emphasis-disabled { color: var(--text-muted); }    /* Disabled/hint text */

.cursor-pointer { cursor: pointer; }
.transition { transition: all var(--tr); }
.no-underline { text-decoration: none; }

/* ============================================================================
   TABLET BREAKPOINTS - Optimize for tablet sizes
   ========================================================================== */

/* Tablet Portrait (600-768px) - iPad Mini, small tablets */
@media (min-width: 600px) and (max-width: 767px) {
    .main-content {
        padding: 90px 24px 30px;
    }

    .card, .dashboard-card, .profile-card {
        padding: 20px;
    }

    .depot-grid, .expedition-grid, .colony-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mm-dialog {
        max-width: 520px;
    }

    h1 {
        font-size: 2.2em;
    }
}

/* Tablet Landscape (1024-1279px) - iPad landscape, small laptops */
@media (min-width: 1024px) and (max-width: 1279px) {
    .main-content {
        padding: 90px 40px 30px;
    }

    .depot-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #mars-map {
        height: min(850px, calc(100vh - 240px));
    }
}

/* Global mobile safety — prevents ANY page from overflowing viewport.
   Uses attribute selectors so new *-grid, *-tabs, *-status-item classes
   are automatically covered without editing this file. */
@media (max-width: 768px) {
    /* Grids: clamp minmax so columns never exceed viewport */
    [class*="-grid"], .grid-auto,
    [style*="grid-template-columns"] {
        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) !important;
    }
    /* Status bars: let items shrink instead of overflowing */
    [class*="-status-item"] { min-width: 0; flex: 1 1 calc(50% - 8px); }
    /* Tab bars: horizontal scroll when needed */
    [class*="-tabs"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    [class*="-tab"] { min-width: 0; }
    /* Filter groups: wrap and shrink */
    .filter-group, [class*="-controls"] { flex-wrap: wrap; }
}
@media (max-width: 380px) {
    /* Tiny screens: single column everything */
    [class*="-grid"], .grid-auto {
        grid-template-columns: 1fr !important;
    }
    [class*="-status-item"] { flex: 1 1 100%; }
    [class*="-tab-label"] { display: none; }
}

/* ============================================================================
   ORIENTATION-SPECIFIC OPTIMIZATIONS
   ========================================================================== */

/* Phone landscape: Maximize vertical space */
@media (max-width: 768px) and (orientation: landscape) {
    .main-content {
        padding: 60px 15px calc(var(--bottom-nav-height) + var(--sai-bottom) + 10px);
    }

    .top-nav {
        padding: 8px 15px;
    }

    .bottom-nav {
        padding: 4px 0;
        padding-bottom: var(--sai-bottom);
    }

    .nav-item {
        padding: 6px 4px;
        gap: 2px;
    }

    .nav-label {
        font-size: 9px;
    }

    h1 {
        font-size: 1.6em;
        margin-bottom: 12px;
    }

    .card, .dashboard-card {
        padding: 12px;
    }

    .aria-orb {
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

    .aria-chat {
        max-height: calc(100vh - 140px);
        bottom: 80px;
    }
}

/* Tablet portrait: Optimize for vertical scrolling */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
    .depot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .expedition-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #mars-map {
        height: calc(100vh - 300px);
        max-height: 900px;
    }
}

/* Responsive hiding */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* Component shortcuts - common patterns */
.card-dark {
    background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
    color: #f5f0ea;  /* Same as dark mode --text-primary for WCAG compliance */
    border: none;
}
/* Override text colors inside card-dark for proper contrast on dark backgrounds */
.card-dark .text-primary { color: #f5f0ea; }
.card-dark .text-secondary { color: #d4c9bd; }
.card-dark .text-tertiary { color: #b5a89a; }
.card-dark .text-muted { color: #8a7d6f; }
.card-dark .text-mars { color: var(--mars-400); }
.card-dark .text-sepolia { color: var(--sepolia-300); }
.card-dark .text-success { color: var(--success-300); }
.card-dark .text-danger { color: var(--danger-400); }
.card-dark .section-label { color: var(--mars-400); }
.section-label { font-size: 11px; color: var(--text-brand-mars); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.stat-box { background: var(--bg-secondary); border-radius: 12px; padding: 20px; text-align: center; border: 2px solid var(--border-default); }
.stat-value-lg { font-size: 48px; font-weight: 700; margin-bottom: 8px; color: var(--color-success); }
.stat-label-sm { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.info-box { background: rgba(var(--color-success-rgb),0.1); border-radius: 8px; padding: 12px; font-size: 13px; border-left: 4px solid var(--color-success); }
.warning-box { background: rgba(var(--color-mars-rgb),0.1); border-radius: 8px; padding: 12px; font-size: 13px; border-left: 4px solid var(--color-mars); }
.danger-box { background: rgba(var(--color-danger-rgb),0.1); border-radius: 8px; padding: 12px; font-size: 13px; border-left: 4px solid var(--color-danger); }
.step-indicator { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 20px; }
.step-number { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.step-label { font-size: 11px; font-weight: 600; }
.step-active { background: linear-gradient(135deg, rgba(236,116,39,0.3) 0%, rgba(236,116,39,0.15) 100%); border: 2px solid var(--color-mars); box-shadow: 0 0 12px rgba(236,116,39,0.3); }
.step-active .step-number { background: var(--color-mars); color: white; }
.step-active .step-label { color: var(--color-mars); font-weight: 700; }
.step-inactive { background: var(--overlay-white-05); border: 1px solid var(--border-default); }
.step-inactive .step-number { background: var(--bg-tertiary); color: var(--text-muted); }
.step-inactive .step-label { color: var(--text-muted); font-weight: 600; }
.step-complete { background: rgba(var(--color-success-rgb), 0.2); border: 1px solid rgba(var(--color-success-rgb), 0.4); }
.step-complete .step-number { background: var(--color-success); color: white; }
.step-complete .step-label { color: var(--color-success); font-weight: 600; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,26,46,0.4) 0%, rgba(26,26,46,0.75) 100%); z-index: 1; }
.hero-title { color: #ffffff; text-shadow: 0 3px 20px rgba(0,0,0,0.7); }
.hero-subtitle { color: #d4c9bd; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; }  /* 8.1:1 contrast on dark overlay */
.hero-text { color: #b5a89a; }  /* 5.5:1 contrast - for body text in hero sections */


/* ARIA speaking indicator */
.aria-speaking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aria-speaking-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sepolia-400);
    animation: aria-speak 1.4s ease-in-out infinite;
}

.aria-speaking-dot:nth-child(2) { animation-delay: 0.2s; }
.aria-speaking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes aria-speak {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}