/* ==================================================================
   CallMitra on a phone

   The dashboard was built for a desktop and had one media query in
   the whole stylesheet, for the login page. Everything else assumed a
   wide window: a 220px sidebar taking most of a phone's width before
   any content starts, tables wider than the screen pushing the page
   sideways, modals sized for a laptop, side-by-side panes.

   Loaded after style.css so it can override without touching it —
   every rule here is additive, and deleting this file returns the
   dashboard to exactly what it was.

   The breakpoint is the one the login page already used, so both
   halves of the product change shape at the same width.
   ================================================================== */

@media (max-width: 860px) {
  /* ---------------------------------------------------------------
     The shell: side by side becomes stacked
     --------------------------------------------------------------- */
  .shell {
    flex-direction: column;
  }

  /* The sidebar becomes a strip along the top. A drawer would be
     tidier but needs JavaScript and a button to open it; a strip that
     scrolls sideways is reachable with one thumb and cannot get stuck
     open over the content. */
  .sidebar {
    width: 100%;
    flex-shrink: 1;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .sidebar .brand {
    padding: 0 1rem 0.5rem;
    font-size: 1rem;
  }

  .sidebar nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.15rem;
    padding: 0 0.6rem;
    /* Hides the scrollbar without hiding that it scrolls — the last
       item is deliberately left half-visible by the padding. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar nav button {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
  }

  /* Anything the sidebar keeps at its foot — an account block, a sign
     out — belongs at the end of the strip, not below the content. */
  .sidebar > *:not(nav):not(.brand) {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .content {
    padding: 1rem;
    max-width: 100%;
  }

  /* ---------------------------------------------------------------
     Headers and toolbars
     --------------------------------------------------------------- */
  .view-header {
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }
  .view-header h1 {
    font-size: 1.15rem;
  }

  /* ---------------------------------------------------------------
     Tables

     Fourteen of them, all `width: 100%` with enough columns to need a
     laptop. Left alone they stretch the page and the whole layout
     scrolls sideways — including the header and the nav, so a person
     loses the buttons while trying to read a row. Making the table
     itself the scrolling element keeps the rest of the page still.
     --------------------------------------------------------------- */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  table th,
  table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* ---------------------------------------------------------------
     Panes that sat beside each other
     --------------------------------------------------------------- */
  .provider-layout {
    flex-direction: column;
  }
  .provider-list {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.3rem;
  }
  .provider-item {
    flex-shrink: 0;
  }

  /* Any remaining two-column grid stacks. Written as a broad rule
     because these are laid out inline in places and naming each one
     would miss the next. */
  [class*="grid"],
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ---------------------------------------------------------------
     Modals

     Sized for a laptop, they left a strip of backdrop on each side and
     a cramped column in the middle. On a phone a dialog is the screen.
     --------------------------------------------------------------- */
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .modal-backdrop {
    padding: 0;
  }
  .modal-body {
    padding: 1rem;
  }

  /* ---------------------------------------------------------------
     Touch targets

     A control that is comfortable under a mouse is a coin-toss under a
     thumb. Everything clickable gets to the size a finger expects.
     --------------------------------------------------------------- */
  button,
  .btn,
  select,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 40px;
  }
  input,
  select,
  textarea {
    /* Under 16px, iOS Safari zooms the whole page in on focus and does
       not zoom back out — the page is then permanently too wide. */
    font-size: 16px;
  }

  /* Forms that were rows become columns. */
  form,
  .form-row,
  .filters {
    flex-wrap: wrap;
  }

  /* Nothing should push the page sideways. If something still does,
     it scrolls inside itself rather than dragging the layout with it. */
  body {
    overflow-x: hidden;
  }
}

/* ==================================================================
   Motion, for people who would rather not
   Matches the WhatsApp panel, so both products behave the same way.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
   Reaching the dashboard without a mouse

   The default focus outline had been styled away with the rest of the
   browser's defaults, leaving a keyboard user tabbing blind.
   `:focus-visible` shows it for keyboard focus only, so a click never
   leaves a ring behind.
   ================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #6c7cff);
  outline-offset: 2px;
  border-radius: 4px;
}