/* Unity Ops Playbook — Mobile Responsiveness Layer */
/* Breakpoint: 768px tablets, 480px phones */

@media (max-width: 768px) {
  /* Nav */
  #site-nav, .site-nav { flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
  #site-nav a, .site-nav a { font-size: 0.7rem; padding: 5px 8px; }

  /* Page containers */
  main, .main-content, .page-wrap { padding: 12px 10px !important; }
  .page-header { padding: 10px 14px; }
  .page-header h1 { font-size: 0.9rem; }

  /* Cards */
  .card, .metric-card, .kpi-card { padding: 12px 10px !important; margin-bottom: 12px; }

  /* Domain grid → single column */
  .domain-grid, .qa-grid {
    display: block !important;
  }
  .domain-card, .qa-card {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
  }

  /* Tables → horizontal scroll */
  .table-wrap, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* But keep table structure inside wrapper */
  table table { display: table; }

  /* Buttons — minimum touch target */
  button, .btn, input[type="submit"], a.btn {
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
  }

  /* Micro-text floor */
  .tag, .badge, .status-badge, small, .small-text {
    font-size: 0.75rem !important;
  }

  /* Modals */
  .modal-content, .modal-box, [id$="-modal"] > div {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto;
    padding: 14px 10px;
  }

  /* Status strips */
  .status-strip, .summary-strip {
    display: block !important;
  }
  .status-strip > *, .summary-strip > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px;
  }

  /* Metrics row */
  .metrics-row, .kpi-row, .stat-row {
    display: block !important;
  }
  .metric-item, .kpi-item, .stat-item {
    display: inline-block !important;
    width: 48% !important;
    vertical-align: top;
    margin-bottom: 8px;
  }

  /* Forms */
  input, select, textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 0.875rem !important;
  }
  label { font-size: 0.8rem; }

  /* Hide non-essential columns on mobile */
  .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .page-header h1 { font-size: 0.82rem; }
  #site-nav a { font-size: 0.65rem; padding: 4px 6px; }
  .metric-item, .kpi-item, .stat-item {
    width: 100% !important;
    display: block !important;
  }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.9rem; }
}