/* ═══════════════════════════════════════════════════════════
   GMK COMMAND CENTER — Mobile Responsive Stylesheet
   Applies to all command-center/* pages
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ TABLET ≤ 1100px ═══════════ */
@media (max-width: 1100px) {
  /* Reduce sidebar width */
  #root > div:first-child {
    grid-template-columns: 200px 1fr !important;
  }
  
  /* Tighten dashboard grid */
  .dashboard-grid,
  [style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════ MOBILE ≤ 900px ═══════════ */
@media (max-width: 900px) {
  /* Hide sidebar, show mobile nav */
  #root > div:first-child {
    grid-template-columns: 1fr !important;
  }
  
  #root > div:first-child > div:first-child {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 200;
    transition: left 0.3s;
    box-shadow: 2px 0 12px rgba(0,0,0,0.2);
  }
  
  #root > div:first-child > div:first-child.open {
    left: 0;
  }
  
  /* Mobile hamburger for sidebar */
  body::after {
    content: '☰';
    position: fixed;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    background: var(--rust, #C8401E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 100;
    border-radius: 4px;
  }
  
  /* Top bar adjustments */
  [style*="height:52px"] {
    padding-left: 60px !important;
  }
  
  /* Stack all dashboard panels */
  .dashboard-grid,
  [style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Panel adjustments */
  [style*="border:1px solid"] {
    padding: 12px !important;
  }
  
  /* Table overflow scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* Reduce font sizes */
  h1, h2 {
    font-size: 20px !important;
  }
  
  h3, h4 {
    font-size: 16px !important;
  }
  
  /* Tighten spacing */
  [style*="gap:24px"],
  [style*="gap: 24px"] {
    gap: 12px !important;
  }
  
  [style*="gap:20px"],
  [style*="gap: 20px"] {
    gap: 12px !important;
  }
  
  /* Stack flex containers */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Event cards */
  [style*="grid-template-columns"][style*="200px"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Pipeline stages - horizontal scroll */
  [style*="display:flex"][style*="gap:8px"][style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Buttons stack */
  [style*="display:flex"][style*="gap:8px"] button {
    width: 100%;
    justify-content: center;
  }
  
  /* Modal adjustments */
  [style*="position:fixed"][style*="inset:0"] > div {
    width: 90% !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* ═══════════ LOGIN PAGE MOBILE ═══════════ */
@media (max-width: 900px) {
  .login-container {
    padding: 32px 20px !important;
    margin: 0 !important;
  }
  
  h1 {
    font-size: 22px !important;
  }
  
  .subtitle {
    font-size: 13px !important;
  }
  
  input {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* ═══════════ SMALL PHONE ≤ 480px ═══════════ */
@media (max-width: 480px) {
  /* Even tighter spacing */
  [style*="padding:20px"],
  [style*="padding: 20px"] {
    padding: 12px !important;
  }
  
  /* Smaller pills */
  span[style*="font-size:8px"] {
    font-size: 7px !important;
    padding: 2px 6px !important;
  }
  
  /* Context switcher */
  [style*="display:flex"][style*="border:1px solid"] button {
    padding: 6px 10px !important;
    font-size: 8px !important;
  }
}

/* ═══════════ UTILITIES ═══════════ */
@media (max-width: 900px) {
  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }
  
  /* Show only on mobile */
  .show-mobile {
    display: block !important;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Touch-friendly hit targets */
  button, a, input, select {
    min-height: 44px;
  }
}