/* public/css/responsive.css
 *
 * Shared phone / tablet layer. Loaded LAST on every page (see the <link> at
 * the bottom of each view's <head>) so it can override a page's own
 * stylesheet where that page breaks on a small screen.
 *
 * Rules of the road:
 *   - Everything that changes layout is inside a max-width media query or a
 *     (pointer: coarse) query, so a desktop browser at normal size renders
 *     exactly as it did before this file existed.
 *   - Breakpoints:  tablet  <= 1024px   |   large phone / small tablet <= 768px
 *                   phone   <= 600px    |   small phone <= 380px
 *   - Phones (Galaxy S/Note/Ultra ~412px, iPhone ~390-430px), iPad portrait
 *     (~768-834px) and Galaxy Tab (~800px) are the design targets;
 *     landscape tablets (>=1024px) keep the desktop layout with bigger tap
 *     targets.
 *   - Virtual CAC is hidden on phones/tablets by responsive.js
 *     (html.no-virtual-cac); the CSS half of that lives at the bottom.
 */

/* ------------------------------------------------------------------ */
/* Base — safe everywhere                                              */
/* ------------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  max-width: 100%;
}

/* Horizontal scroll box responsive.js puts around wide tables. */
.rt-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rt-scroll th,
.rt-scroll td {
  overflow-wrap: normal;
  word-break: normal;
}

.rt-scroll th {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Touch devices (phones AND tablets, any orientation)                 */
/* ------------------------------------------------------------------ */
@media (pointer: coarse) {
  html {
    -webkit-tap-highlight-color: rgba(13, 110, 253, 0.15);
  }

  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"] {
    touch-action: manipulation; /* no 300ms tap delay / double-tap zoom */
  }

  /* >=44px hit areas (Apple HIG / WCAG 2.5.5) */
  .btn,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* iOS Safari zooms the whole page when a focused field's font is <16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  /* Small icon-ish buttons Bootstrap sizes down. */
  .btn-sm {
    min-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Hamburger: 44px round target with its own backdrop so it stays legible
     when page content scrolls beneath it. */
  .hamburger-menu {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }

  .hamburger-menu i {
    font-size: 1.4rem;
  }

  /* The whole menu row is the tap target, not just the text. */
  .sidebar li {
    padding: 0;
  }

  .sidebar li a {
    padding: 15px 20px;
    min-height: 48px;
    box-sizing: border-box;
  }

  .sidebar {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }

  /* Hover-lift effects have no meaning without a hover and can "stick" after
     a tap on touch screens. */
  .device-btn:hover:not(.active) {
    transform: none;
    box-shadow: none;
  }
}

html[data-theme="dark"] .hamburger-menu {
  background: rgba(31, 35, 42, 0.92);
}

/* ------------------------------------------------------------------ */
/* Tablet & down (<= 1024px)                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .container {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Modals: never taller than the screen; scroll inside instead. */
  .modal > .modal-content {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Ticket tables as cards up to <= 900px                               */
/* dashboard-style.css switches the ticket table to stacked cards at   */
/* 768px; iPad / Galaxy Tab in portrait are 800-834px wide, where the  */
/* 9-column table is too cramped and the "Work Ticket" button ends up   */
/* off-screen. Same card rules, wider trigger.                          */
/* ------------------------------------------------------------------ */
@media (min-width: 769px) and (max-width: 900px) {
  .workorder-table thead {
    display: none;
  }

  .workorder-table,
  .workorder-table tbody {
    display: block;
    width: 100%;
  }

  .workorder-table tbody tr {
    display: block;
    margin-bottom: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
  }

  .workorder-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    min-height: 44px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .workorder-table tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 14px;
    font-size: 0.85rem;
    text-align: left;
    flex: 0 0 auto;
  }
}

/* ------------------------------------------------------------------ */
/* Large phone / small tablet (<= 768px)                               */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body {
    /* Room for the fixed hamburger so it never sits on top of a page title
       (pages that place their own header, e.g. Service Bench / MDM, opt out
       below). */
    padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body:has(#service-bench),
  body:has(.mdm-shell) {
    padding-top: 0;
  }

  .container {
    padding: 14px 12px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  header h1,
  .page-header h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .logo,
  .home-logo-link .home-logo {
    height: 56px;
  }

  /* Logo cleared the hamburger at desktop; the body padding handles it now. */
  .home-logo-link--offset {
    margin-left: 0;
  }

  /* ---- Login screens (index + every "Technician/Section login") ---- */
  .login-options {
    flex-direction: column;
    gap: 16px;
    margin: 18px 0;
  }

  .login-card {
    flex: 0 0 auto; /* index-style.css uses flex:1, which makes cards stretch tall once stacked */
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    min-width: 0;
  }

  .login-card .card-button {
    padding: 14px 0 0;
  }

  .btn-cac,
  .btn-manual {
    width: 100%;
    margin: 0;
    min-height: 48px;
    box-sizing: border-box;
  }

  #searchResults,
  .list-group {
    max-width: 100%;
  }

  /* ---- Generic button rows: stack full width ---- */
  .action-buttons,
  .bottom-buttons,
  .button-row,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .action-buttons .btn,
  .bottom-buttons .btn,
  .action-buttons button,
  .bottom-buttons button,
  .action-buttons a,
  .bottom-buttons a {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }

  /* style.css makes every .btn 100% wide at this size; controls that live
     inside a row/toolbar (pager arrows, input-group buttons, button groups)
     must keep their natural width. */
  .page-navigation .btn,
  .input-group .btn,
  .btn-group .btn,
  .btn-group-vertical .btn,
  .d-flex .btn:not(.w-100),
  .text-end .btn:not(.w-100),
  .text-center .btn-sm:not(.w-100),
  .btn-toolbar .btn,
  .signin-toolbar .btn {
    width: auto;
  }

  /* ---- Forms ---- */
  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group input[type="email"],
  .form-group select,
  .form-group textarea,
  .form-control,
  .form-select {
    max-width: 100%;
    box-sizing: border-box;
  }

  #serialNumberInput {
    width: 100%;
    max-width: 100%;
  }

  /* Two-column "table as form" (account block on check-in / account pages) */
  .account-table,
  .account-table tbody,
  .account-table tr,
  .account-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .account-table td {
    padding: 6px 0;
  }

  .user-info {
    padding: 16px;
  }

  .user-form,
  .workorder-form {
    padding: 16px;
    margin-bottom: 18px;
  }

  .info-table th {
    width: auto;
  }

  /* ---- Dashboard-style toolbars ---- */
  .page-controls,
  .pagination-controls,
  .tab-action-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .page-controls {
    align-items: stretch;
  }

  .page-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
  }

  .per-page-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
  }

  /* Ticket table "card" rows (thead is hidden by dashboard-style.css) */
  .workorder-table tbody td {
    min-height: 44px;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .workorder-table tbody td[data-label]::before {
    text-align: left;
    flex: 0 0 auto;
  }

  /* Bootstrap modals fill the screen width with a small margin */
  .modal-dialog {
    margin: 8px auto;
    max-width: calc(100vw - 16px);
  }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100vw - 16px);
  }

  /* Wide word-breakers: long serial numbers, emails, ids. (Not applied to
     every td/th: a table inside .rt-scroll must keep its natural column
     widths and scroll sideways instead of breaking words letter by letter.) */
  .workorder-table td,
  .detail-value,
  code {
    overflow-wrap: anywhere;
  }

  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------------ */
/* Phone (<= 600px)                                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
  /* 12px = Bootstrap's grid gutter; going tighter makes .row's negative
     margins poke past the screen edge. */
  .container {
    padding: 12px;
  }

  h1 {
    font-size: 1.45rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .user-welcome {
    font-size: 1.15rem;
  }

  .login-card h2 {
    font-size: 1.2rem;
  }

  /* Hand-rolled modals (About / Settings / Change PIN / Virtual CAC):
     nearly edge to edge. Bootstrap's own .modal-dialog modals are sized by
     .modal-dialog above. */
  .modal > .modal-content {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    padding: 16px;
    box-sizing: border-box;
  }

  #virtualCacModal .status-pill {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }

  /* Toolbars and filter rows: one control per line */
  .dashboard-filters,
  .filters,
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
    min-width: 0;
  }

  .stats-card {
    min-width: 100%;
  }

  .page-navigation .form-control {
    width: 64px !important;
  }
}

/* ------------------------------------------------------------------ */
/* Small phone (<= 380px)                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 380px) {

  h1 {
    font-size: 1.3rem;
  }
}

/* ------------------------------------------------------------------ */
/* Phone held sideways: keep the fixed hamburger from eating the header */
/* ------------------------------------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
  body {
    padding-top: calc(env(safe-area-inset-top, 0px) + 50px);
  }
}

/* ------------------------------------------------------------------ */
/* Virtual CAC is not available on phones/tablets                      */
/* (responsive.js sets html.no-virtual-cac; :has() is the CSS route,   */
/*  .cac-card-hidden is the JS route for older browsers)               */
/* ------------------------------------------------------------------ */
html.no-virtual-cac .login-card:has(.btn-cac),
html.no-virtual-cac li:has(> #virtualCacLink),
html.no-virtual-cac #virtualCacModal,
.login-card.cac-card-hidden {
  display: none !important;
}

/* With the CAC card gone the remaining Manual Login card is centred and
   given a sensible max width instead of sitting in a half-empty row. */
html.no-virtual-cac .login-options {
  justify-content: center;
}

html.no-virtual-cac .login-options .login-card {
  flex: 0 1 auto;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Face ID / fingerprint login card (public/js/passkeys.js) stays out until the device supports it. */
.login-card[hidden] {
  display: none !important;
}