/**
 * Responsive Layout Styles
 * Mobile and tablet breakpoints, responsive adjustments
 * Using design system tokens
 */

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
  /* Character Creation - Stack inputs and buttons */
  .flex-row {
    flex-direction: column;
    gap: var(--spacing-md, 15px);
  }

  .btn-generate {
    padding: var(--spacing-md, 15px);
    justify-content: center;
    width: 100%;
  }

  .secondary-actions {
    flex-direction: column;
    gap: var(--spacing-sm, 10px);
    align-items: flex-start;
  }

  .btn-skip {
    width: 100%;
    text-align: center;
  }

  /* Tactical Dashboard - Stack columns */
  .tactical-dashboard-final {
    grid-template-columns: 1fr;
    gap: var(--spacing-md, 15px);
  }

  .col-console {
    order: 1;
  }

  .col-dossier {
    order: 2;
  }

  /* Hangar - Stack columns */
  .ship-display-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md, 15px);
  }

  .ship-list {
    order: 1;
  }

  .blueprint-viewer {
    order: 2;
  }

  .squadron-panel {
    order: 3;
  }

  /* Cockpit Dashboard - Mobile Optimized */
  .cockpit-container {
    display: grid !important; /* Keep grid layout */
    position: fixed !important; /* Keep fixed positioning */
    top: 0 !important; /* Ensure it's at the top */
  }

  .cockpit-top-nav {
    padding: 0 var(--spacing-sm, 10px);
    font-size: var(--font-size-sm, 0.8rem);
    position: relative !important; /* Keep in grid flow */
    top: 0 !important; /* Ensure it's at the top */
    left: auto !important;
    right: auto !important;
    z-index: 10 !important;
    flex-shrink: 0;
    display: flex !important; /* Ensure it's always visible */
    visibility: visible !important; /* Ensure it's always visible */
    opacity: 1 !important; /* Ensure it's not transparent */
    margin-top: 0 !important; /* No top margin */
  }

  /* SHOW TOGGLE BUTTONS IN HEADER */
  .mobile-toggle-btn {
    display: block;
  }

  /* MAIN CONTENT ADJUSTMENTS */
  .main-feed-area {
    height: calc(100vh - 50px);
    width: 100%;
    margin-top: 50px;
  }

  .mode-tabs {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0;
    gap: 2px;
  }

  .tab-btn {
    flex-shrink: 0;
    padding: var(--spacing-sm, 10px) var(--spacing-md, 15px);
    font-size: var(--font-size-sm, 0.8rem);
    clip-path: none;
    border-radius: var(--radius-sm, 5px) var(--radius-sm, 5px) 0 0;
  }

  /* Mobile Toggle Buttons */
  .mobile-sidebar-toggle {
    position: fixed;
    top: 60px;
    left: var(--spacing-sm, 10px);
    width: 40px;
    height: 40px;
    background: rgba(0, 20, 0, 0.9);
    border: 1px solid var(--terminal-green, var(--signal-emerald));
    color: var(--terminal-green, var(--signal-emerald));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    font-size: var(--font-size-lg, 1.2rem);
  }

  .mobile-sidebar-toggle.right {
    left: auto;
    right: var(--spacing-sm, 10px);
  }

  .cockpit-main-feed {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
  }

  .command-input-wrapper {
    grid-column: 1;
    grid-row: 3;
    padding: var(--spacing-sm, 10px);
  }

  .cmd-form {
    flex-direction: column;
    gap: 8px;
  }

  .cmd-input {
    width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .send-btn {
    width: 100%;
    padding: var(--spacing-md, 15px);
  }

  /* Touch-optimized buttons */
  .choice-button,
  .encounter-widget-btn,
  .roll-button-terminal {
    min-height: 44px; /* iOS touch target */
    padding: var(--spacing-sm, 12px) var(--spacing-md, 20px);
  }

  /* Terminal feed mobile */
  .terminal-feed-container {
    padding: var(--spacing-md, 15px) var(--spacing-sm, 10px);
  }

  .log-entry {
    margin-bottom: var(--spacing-md, 15px);
    padding-left: 5px;
  }

  .log-meta {
    min-width: 60px;
    font-size: var(--font-size-xs, 0.7rem);
  }

  .log-body {
    font-size: var(--font-size-sm, 0.9rem);
  }

  /* Mission Log - Stack columns (legacy) */
  .mission-log-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-md, 15px);
    height: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .log-status-panel {
    order: 1;
    max-height: 300px;
  }

  .log-terminal-panel {
    order: 2;
    min-height: 300px;
  }

  .log-action-panel {
    order: 3;
  }

  /* Mission Board - Stack cards on mobile */
  .mission-board-grid {
    grid-template-columns: 1fr;
  }

  .contracts-grid {
    grid-template-columns: 1fr;
  }

  .mission-card {
    max-width: 100%;
    min-width: 100%;
  }

  .mission-board-container {
    padding: var(--spacing-md, 15px);
  }

  /* Resolution Screen - Adjust sizing */
  .resolution-container {
    width: 95%;
    padding: var(--spacing-md, 20px);
    max-height: 95vh;
  }

  .roll-summary {
    flex-direction: column;
    gap: 8px;
  }

  /* Encounter Modal - Adjust sizing */
  .encounter-modal-content {
    width: 95%;
    padding: var(--spacing-md, 20px);
  }

  .encounter-actions {
    flex-direction: column;
  }

  /* Level Up Screen - Adjust sizing */
  .level-up-container {
    width: 95%;
    padding: var(--spacing-md, 20px);
  }

  .stat-allocation-grid {
    gap: var(--spacing-md, 15px);
  }

  /* Tooltip/Modal - Adjust sizing */
  .tooltip-container {
    width: 95%;
    max-width: 95%;
    padding: var(--spacing-md, 20px);
  }

  /* Character Selection - Stack cards */
  .card-grid {
    grid-template-columns: 1fr;
  }

  .profile-card {
    max-width: 100%;
  }
}

/* ============================================
   DESKTOP BREAKPOINT (min-width: 1025px)
   ============================================ */

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

  .mobile-close-btn {
    display: none;
  }

  .alert-ticker .scrolling-part {
    display: block;
  }
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
  /* SHOW TOGGLE BUTTONS IN HEADER */
  .mobile-toggle-btn {
    display: block;
    background: transparent;
    border: 1px solid var(--terminal-green, var(--signal-emerald));
    color: var(--terminal-green, var(--signal-emerald));
    font-family: var(--font-mono, "Roboto Mono", monospace);
    font-weight: bold;
    padding: 5px var(--spacing-sm, 10px);
    cursor: pointer;
    font-size: var(--font-size-xs, 0.7rem);
  }

  .mobile-toggle-btn.left {
    margin-right: auto;
  }

  .mobile-toggle-btn.right {
    margin-left: auto;
  }

  /* CONVERT SIDEBARS TO DRAWERS */
  .cockpit-sidebar-left,
  .cockpit-sidebar-right {
    position: fixed;
    top: 50px;
    bottom: 0;
    width: 85%;
    background: var(--surface-0, #0a0a00);
    z-index: 100;
    border: 1px solid var(--terminal-green, var(--signal-emerald));
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
    transition: transform var(--transition-base, 0.3s) ease-in-out;
    padding: var(--spacing-md, 20px);
    overflow-y: auto;
  }

  /* HIDE/SHOW LOGIC */
  .cockpit-sidebar-left {
    left: 0;
    transform: translateX(-100%);
  }

  .cockpit-sidebar-left.open {
    transform: translateX(0);
  }

  .cockpit-sidebar-right {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }

  .cockpit-sidebar-right.open {
    transform: translateX(0);
  }

  /* CLOSE BUTTON INSIDE DRAWER */
  .mobile-close-btn {
    display: block;
    position: absolute;
    top: var(--spacing-sm, 10px);
    right: var(--spacing-sm, 10px);
    color: var(--signal-crimson, #ff0033);
    font-weight: bold;
    border: 1px solid var(--signal-crimson, #ff0033);
    padding: 5px var(--spacing-sm, 10px);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.8);
    z-index: 101;
  }
}

/* ============================================
   TABLET ADJUSTMENTS (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .mission-log-layout {
    grid-template-columns: 250px 1fr 180px;
  }

  .ship-display-grid {
    grid-template-columns: 200px 1fr 200px;
  }

  .tactical-dashboard-final {
    grid-template-columns: 200px minmax(0, 1fr) 250px;
  }
}