/* Phone layout for the Chatadel CRM, plus the staleness bar and install affordances.
 *
 * Loaded after styles.css and scoped to a max-width, so the desktop CRM is byte-for-byte unchanged.
 * Nothing here restyles the desktop; it only takes over below 860px.
 *
 * The desktop layout is a fixed 240px sidebar beside the content. On a phone that spends a third
 * of the screen on navigation the owner is not reading, so below 860px the sidebar becomes a
 * horizontally scrolling strip pinned to the BOTTOM - within reach of a thumb, which the top of a
 * 6.8" screen is not.
 */

/* ---------------------------------------------------------------- the staleness bar
 * Deliberately loud, deliberately not dismissible, and present on desktop as well as phone: the
 * whole point is that a remembered number can never be mistaken for a current one. Sticky rather
 * than fixed so it scrolls with the top of the document but never overlays content. */
#crm-stale-bar {
  position: sticky; top: 0; z-index: 80;
  padding: 10px 16px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
}
#crm-stale-bar.crm-stale   { background: #7a4a06; color: #ffe9c7; }
#crm-stale-bar.crm-offline { background: #6d1f1f; color: #ffd9d9; }
#crm-stale-bar[hidden]     { display: none; }

/* The update prompt. Bottom-centre, above the nav strip, and it waits for a tap - an update that
 * reloads on its own takes away whatever the owner was reading. */
.crm-update {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #13233f; color: #e8f0ff;
  border: 1px solid #2d4c7a;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  font-size: 13px;
}
.crm-update button {
  padding: 7px 14px; border-radius: 9px; border: 0;
  background: linear-gradient(135deg, #69b5ff, #1f6fd6); color: #06111f;
  font-weight: 700; cursor: pointer;
}

#crm-install {
  padding: 7px 12px; border-radius: 9px;
  border: 1px solid #2d4c7a; background: #13233f; color: #e8f0ff;
  font-weight: 600; font-size: 13px; cursor: pointer;
}
#crm-install[hidden] { display: none; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 860px) {

  #app { grid-template-columns: 1fr; }

  /* Navigation to the bottom, where a thumb is. A 6.8" phone held one-handed cannot reach the
     top corner, which is exactly where a desktop sidebar puts everything. */
  #sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    /* styles.css sets #sidebar{width:240px} at <=900px for the off-canvas drawer. On a
       position:fixed box a specified width BEATS `right`, so without resetting it this bar
       renders as a 240px stub and the nav is clipped mid-word - the owner saw "Waitli".
       Two media queries disagreeing about the same element is the whole bug: this one wins
       on the properties it names and silently loses on the one it does not. */
    width: auto; max-width: none;
    transition: none;
    height: auto; z-index: 70;
    flex-direction: row; align-items: center;
    gap: 0; padding: 4px 6px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    border-right: 0; border-top: 1px solid var(--line);
    background: rgba(8, 12, 22, .96);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #sidebar::-webkit-scrollbar { display: none; }

  /* 18 routes, about six of which fit. A strip that scrolls with no edge treatment reads as
     a complete list, so the ones past the fold are never looked for. Fading the right edge
     is the cheapest honest signal that there is more. */
  #sidebar {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  #sidebar.scrolled-end {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* The brand block and the health readout are desktop furniture: on a phone they would eat the
     nav strip. The health numbers still exist on the Overview screen. */
  #sidebar .brand,
  #sidebar .side-foot { display: none; }

  #nav { flex-direction: row; gap: 2px; flex-wrap: nowrap; }
  #nav a {
    flex: 0 0 auto;
    flex-direction: column; gap: 3px;
    padding: 7px 11px; border-radius: 10px;
    font-size: 10px; font-weight: 600; letter-spacing: .2px;
    text-align: center; white-space: nowrap;
    min-width: 58px;
  }
  #nav a .ico { font-size: 17px; line-height: 1; }

  /* Clear the fixed nav strip so the last row of any table is reachable. */
  #content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  #topbar {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  #global-search { flex: 1 1 100%; min-width: 0; }

  #main { padding: 14px 12px; }

  /* One column. Two half-width cards on a 390px screen are two unreadable cards. */
  .grid { grid-template-columns: 1fr !important; gap: 12px; }
  .section { margin-bottom: 18px; }
  .card { border-radius: 12px; }

  /* Tables are the CRM's real content and they do not reflow. Let each scroll inside its own card
     rather than pushing the whole page sideways - a horizontally scrolling PAGE loses the nav and
     the header, and on a phone the reader cannot find their way back. */
  .card table,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th, table td { white-space: nowrap; }

  /* Numbers line up in columns; tabular figures keep them from jittering as they update. */
  table td, .metric, .big-number { font-variant-numeric: tabular-nums; }

  h1 { font-size: 21px; }
  h2 { font-size: 16px; }

  /* Anything tappable gets a real target. 44px is the smallest reliable one. */
  button, .btn, #nav a, select, input[type="submit"] { min-height: 44px; }
}

/* Installed from the home screen: no browser chrome, so the app owns the status-bar area. */
@media (display-mode: standalone) {
  #topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  /* A browser back button does not exist here; the nav strip is the only way out of a screen,
     so it must never be hidden. */
  #sidebar { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}