html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; }
  * { box-sizing: border-box; }
  #root { min-height: 100vh; }
  img { max-width: 100%; }

  /* ---------------------------------------------------------------
     Mobile-first responsive layout classes.
     Base (unprefixed) rules = mobile (< 600px).
     600px+  = tablet adjustments.
     900px+  = desktop layout kicks in.
     1200px+ = wide desktop, content can use more width.
  --------------------------------------------------------------- */

  .page-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 12px; }
  @media (min-width: 600px) { .page-wrap { padding: 18px 20px; } }
  @media (min-width: 1200px) { .page-wrap { max-width: 1320px; padding: 24px 32px; } }

  .page-wrap-full { width: 100%; padding: 14px 12px; }
  @media (min-width: 600px) { .page-wrap-full { padding: 18px 20px; } }
  @media (min-width: 1200px) { .page-wrap-full { padding: 24px 32px; } }

  /* Top nav */
  .top-nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 12px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 4px 10px;
  }
  @media (min-width: 600px) { .top-nav-inner { padding: 0 20px; } }
  @media (min-width: 1200px) { .top-nav-inner { max-width: 1320px; padding: 0 32px; } }
  .top-nav-left { display: flex; align-items: center; flex-wrap: wrap; }

  /* Dashboard stat cards */
  .stat-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
  .stat-card { flex: 1 1 140px; min-width: 140px; }
  .dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .dash-actions > a { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

  /* Jobs Register: always a real table. On narrow screens it scrolls
     horizontally within its own box (not the whole page), and the Id
     column stays pinned on the left so you never lose context. */
  .jobs-table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .jobs-table { width: 100%; min-width: 640px; border-collapse: collapse; }
  @media (min-width: 900px) { .jobs-table { min-width: 0; } }

  .jobs-table th:first-child, .jobs-table td:first-child {
    position: sticky; left: 0; z-index: 1;
  }
  [data-theme="dark"] .jobs-table thead th:first-child { background: #161B20; }
  [data-theme="dark"] .jobs-table tbody td:first-child { background: #161B20; }
  [data-theme="light"] .jobs-table thead th:first-child { background: #f7f8fa; }
  [data-theme="light"] .jobs-table tbody td:first-child { background: #ffffff; }
  /* A subtle right-edge shadow hints there's more to scroll to. */
  .jobs-table-wrap { position: relative; }
  .jobs-table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14px; pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.12));
  }
  @media (min-width: 900px) { .jobs-table-wrap::after { display: none; } }

  /* Create Incident form rows: stacked on mobile, label+field on tablet+ */
  .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
  @media (min-width: 640px) {
    .form-row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
  }
  .form-row-label { font-size: 13px; }
  @media (min-width: 640px) { .form-row-label { padding-top: 8px; } }

  .tag-picker-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .create-incident-panel { padding: 14px; }
  @media (min-width: 600px) { .create-incident-panel { padding: 24px; } }

  /* Incident Detail page */
  .incident-header {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 14px 16px; border-radius: 8px 8px 0 0;
  }
  @media (min-width: 560px) {
    .incident-header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  }
  .incident-header-title { font-size: 17px; word-break: break-word; }
  @media (min-width: 600px) { .incident-header-title { font-size: 19px; } }
  .incident-header-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  .incident-detail-body {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    border-radius: 0 0 8px 8px; padding: 16px;
  }
  @media (min-width: 600px) { .incident-detail-body { padding: 20px; gap: 22px; } }
  @media (min-width: 900px) {
    .incident-detail-body { grid-template-columns: 1.4fr 1fr; gap: 28px; padding: 24px; }
  }

  .detail-row { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; font-size: 13.5px; }
  @media (min-width: 480px) {
    .detail-row { flex-direction: row; gap: 14px; }
    .detail-row .row-label { min-width: 150px; flex-shrink: 0; }
  }