/* Phone sizing for every page. Loaded last so it wins, and only below 820
   pixels, so nothing changes on the office screens. The aim is that every
   page is usable one-handed: menus tap open, tables scroll sideways rather
   than squashing, windows fill the screen, and boxes are big enough to hit. */

@media (max-width: 820px) {

  /* ---- the page itself */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }
  main, .wrap, .page { padding-left: 10px !important; padding-right: 10px !important; }
  h1, .page-title { font-size: 26px !important; margin: 10px 0 12px !important; }
  h2 { font-size: 18px !important; }

  /* ---- the top bar: logo, name and menus wrap instead of overflowing */
  .site-head, .topbar, header .inner { flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; }
  .site-head img, header img { max-height: 54px !important; }
  .brand, .site-name { font-size: 16px !important; }
  .site-links { flex-wrap: wrap !important; gap: 4px !important; row-gap: 6px !important; width: 100%; justify-content: flex-start !important; }
  .site-links > a, .site-links .menu > button { font-size: 13px !important; padding: 7px 9px !important; }
  /* a dropdown drops in place and takes the width, so it is never off screen */
  .site-links .menu { position: static !important; }
  /* the menus are an accordion on a phone: a dropdown opens in place under
     its heading on a tap, never floating over the page, and hover does
     nothing (a touch leaves hover stuck) */
  .site-links .drop { position: static !important; display: none !important; width: auto !important; min-width: 0 !important; box-shadow: none !important; }
  .site-links .menu:hover .drop, .site-links .menu:focus-within .drop { display: none !important; }
  .site-links .menu.open .drop { display: block !important; }
  .site-links .sub:hover > .drop-sub { display: none !important; }
  .site-links .sub.open > .drop-sub { display: block !important; }
  .site-links .drop-sub { display: none !important; }
  .site-links .drop a, .site-links .drop .sub-top { padding: 11px 12px !important; font-size: 14px !important; }
  .site-links .drop-sub { position: static !important; width: auto !important; box-shadow: none !important; border-left: 3px solid var(--orange, #E85B34) !important; margin: 0 0 0 10px !important; }

  /* ---- cards and bars */
  .card { padding: 12px !important; border-radius: 10px !important; }
  .bar { flex-wrap: wrap !important; gap: 8px !important; }
  .bar .fill { display: none !important; }
  .bar input, .bar select, .bar .btn, .bar .btn-plain { flex: 1 1 auto; min-width: 140px; max-width: none !important; }
  .btn, .btn-plain, button { min-height: 40px; font-size: 14px !important; }
  /* a close cross stays a small square rather than stretching across the bar */
  .bar .win-x, .win-x, .bar button[title="Close"], #bkClose, #outClose, #lClose, #vClose, #absClose, #payClose {
    flex: 0 0 auto !important; min-width: 44px !important; max-width: 56px !important; margin-left: auto; }
  input, select, textarea,
  .bk .form .cust-grid input, .bk .form .cust-grid select, .bk .form .biz-grid input, .bk .form .biz-grid select,
  .cust-grid input, .bill-grid input, .form input, .form select, .form textarea,
  .grid input, .grid select,
  .bk .form input, .bk .form select, .bk .form textarea,
  .modal-card .form input, .modal-card .form select, .modal-card .form textarea { font-size: 16px !important; padding: 6px 8px !important; height: auto !important; }   /* 16px stops the phone zooming in on a tap */

  /* ---- tables: scroll sideways, never squash */
  .report, .due-table, #vBody, #lBody, #dBody, #svBody, #nBody, #cBody, #gBody, #hBody, #kBody,
  #outBody, #inBody, #stockBody, #infoBody, #agentsBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { font-size: 13px !important; }
  th, td { padding: 8px 6px !important; white-space: nowrap; }
  td.l, th.l { white-space: normal; }

  /* ---- the dashboards */
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stat .num, .stat b { font-size: 22px !important; }
  .two-col, .vans-split, .van-split, .sale-grid, .comm-layout, .grid.three, .grid.job-line { grid-template-columns: 1fr !important; }
  .profit-box, .order-details, .abs-tiles, .comm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .actions-card { position: static !important; }

  /* ---- windows fill the screen */
  .modal, #bkWindow.modal { padding: 0 !important; align-items: flex-start !important; }
  .modal-card { max-width: 100% !important; width: 100% !important; min-height: 100vh; border-radius: 0 !important; padding: 12px !important; font-size: 15px !important; }
  .modal-card .bar { position: sticky; top: 0; background: #fff; z-index: 5; padding-bottom: 8px; }
  .form .grid, .form .grid.two, .form .grid.three, .form .cust-grid,
  .bk .form .cust-grid, .bk .form .grid.cust-grid, .bk .biz-grid, .bk-cols { grid-template-columns: 1fr !important; }
  .form .half, .form .wide { grid-column: 1 / -1 !important; }
  .checks, .work-ticks { grid-template-columns: 1fr 1fr !important; }
  .charges-head { flex-wrap: wrap !important; }

  /* ---- the sale card's charge rows stack rather than shrink */
  .charge-row, .charges-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .inv-head { display: none !important; }
  .inv-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .modal-card.sale.bk { max-height: none !important; }

  /* ---- odds and ends */
  .tick { font-size: 14px !important; max-width: 100%; }
  label.tick { white-space: normal; }
  .tag, .tag-hol, .tag-sick { font-size: 12px !important; }
  img.van-pic, .pic-box { max-width: 100% !important; height: auto !important; }
}
@media (max-width: 820px) {

  /* ---- the repair card: its three columns stack, the type choice wraps
     neatly, every section full width */
  .bk-cols { display: block !important; }
  .bk-sec { grid-column: auto !important; grid-row: auto !important; margin-bottom: 12px; display: block !important; }
  .bk-sec > .appliance-box { flex: none !important; }
  .bk-for { display: flex !important; flex-wrap: wrap !important; gap: 6px 14px !important; align-items: center; }
  .bk-for-lab { width: 100%; font-size: 22px !important; }
  .bk-for label.tick { flex: 0 0 auto !important; width: auto !important; min-height: 0 !important; }
  .modal-card.sale.bk > .bar:first-child { position: static !important; }
  .modal-card.sale.bk > .bar:first-child .btn, .modal-card.sale.bk > .bar:first-child .btn-plain { flex: 1 1 40%; }
  .inv-head-row { flex-wrap: wrap !important; }
  .inv-desc-row { flex-wrap: wrap !important; }
  .inv-comm { flex-wrap: wrap !important; }
  .diag-opt { font-size: 13px !important; padding: 5px 10px !important; }
  /* ---- the sale card: the title line wraps, the type choice under the title */
  .modal-card.sale > .bar:first-child { flex-wrap: wrap !important; position: static !important; }
  .modal-card.sale > .bar:first-child h2 { width: 100%; font-size: 22px !important; }
  .sale-for { display: flex !important; flex-wrap: wrap !important; margin-left: 0 !important; width: 100%; gap: 6px 12px !important; }
  .sale-for .choices-all, .sale-for .choice-group { display: flex !important; flex-wrap: wrap !important; gap: 6px 14px !important; width: 100%; }
  .sale-for .tick { white-space: nowrap; flex: 0 0 auto; }
  .sale-for #custOrig { width: 100%; }
  .sale-for #custOrig input { width: 100% !important; }
  .sale-for .choice-group.status { border-left: 0 !important; padding-left: 0 !important; }
  .sale-for #custOrig input, .inv-top input, .inv-top select, .inv-row input, .sale-grid .bill-grid > div.third input, .sale-grid .bill-grid > div.half input, .sale-grid .bill-grid input, .sale-grid .customer .cust-grid input, .sale-grid .customer .cust-grid select,
  .comm-line input, .comm-line select, .inv-comm input, .inv-comm select, #cCommModeSel, #outCategory, .sale-grid .bill-grid > div.cat-cell select { font-size: 16px !important; height: auto !important; min-height: 40px; }
  .charge, .charge.head { grid-template-columns: 1fr !important; }
  .inv-sums, .sums { width: 100% !important; }
  .inv-foot { flex-wrap: wrap !important; }
  .summary-box .profit-box, .profit-box.six { grid-template-columns: 1fr 1fr !important; }
  /* ---- the employees page: its wide table scrolls sideways */
  #paneEng, #engBody, .wide-eng main { max-width: 100%; overflow-x: auto !important; }
  /* radios and ticks stay small beside their words */
  input[type=radio], input[type=checkbox], .bar input[type=radio], .bar input[type=checkbox] { width: 18px !important; min-width: 0 !important; height: 18px !important; min-height: 0 !important; padding: 0 !important; margin: 0 6px 0 0 !important; flex: 0 0 auto !important; }
  label.tick { display: inline-flex !important; align-items: center; gap: 4px; }
@media (max-width: 820px) {
  /* ---- the job card: everything in one column - the details, then the
     conversation, then the call; the header wraps; the card scrolls itself */
  #rbView.modal { padding: 8px !important; align-items: flex-start !important; }
  #rbView .job-card, #rbView .job-card.with-call, #rbView .job-card.with-mail { max-width: none !important; width: 100% !important; max-height: calc(100vh - 16px) !important; padding: 12px 12px 14px !important; }
  #rbView .job-head { flex-wrap: wrap; gap: 8px; }
  #rbView .job-head h2 { white-space: normal !important; font-size: 18px !important; line-height: 1.25; width: 100%; }
  #rbView .job-head .btn-plain { flex: 1 1 auto; }
  #rbView .job-split, #rbView .job-card.with-call .job-split, #rbView .job-card.with-mail .job-split { grid-template-columns: 1fr !important; gap: 10px; }
  #rbView .job-body { grid-template-columns: 1fr !important; gap: 10px; }
  #rbView .job-col { gap: 10px; }
  #rbView .job-sec .row { grid-template-columns: 1fr !important; gap: 0 !important; padding: 4px 0; }
  #rbView .job-sec .row span:first-child { padding-top: 0; }
  #rbView .job-talk { max-height: none; }
  #rbView .talk-lines { max-height: 50vh; }
  #rbView .talk-line { grid-template-columns: 28px minmax(0, 1fr); padding: 6px 2px; }
  #rbView .job-foot { flex-wrap: wrap; gap: 6px; }
  #rbView .job-foot audio { width: 100%; flex: 1 1 100%; }
  #rbView .mail-text { max-height: 50vh; }
}
/* A narrow phone: one column everywhere that was still two */
}

@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr 1fr !important; }
  .profit-box, .order-details, .abs-tiles, .comm-grid, .checks, .work-ticks { grid-template-columns: 1fr !important; }
  h1, .page-title { font-size: 22px !important; }
}

@media (max-width: 820px) {
  /* ---- Employee Information on a phone ---- */
  /* the tool row wraps: title, then the depot boxes, then the buttons full width */
  .eng-top { flex-wrap: wrap; gap: 8px; }
  .eng-top h2 { flex: 1 1 100%; }
  .eng-top .depot-box, .eng-top .depot-pc { flex: 1 1 100%; max-width: none; }
  .eng-top .btn, .eng-top .btn-plain { flex: 1 1 45%; }
  /* the list keeps the picture, the name (with their role beneath) and their number; the rest is on the card */
  #engTable .grp-row { display: none; }
  #engTable th:nth-child(3), #engTable td:nth-child(3), #engTable th:nth-child(4), #engTable td:nth-child(4), #engTable th:nth-child(n+6), #engTable td:nth-child(n+6) { display: none; }
  #engTable { width: 100%; }
  #engTable td, #engTable th { padding: 8px 4px; white-space: normal; font-size: 12.5px; }
  #engTable td.who b { font-size: 13.5px; }
  #engTable td.pic { width: 38px; }
  #engTable td.pic span, #engTable td.pic img { width: 30px !important; height: 30px !important; font-size: 10px !important; }
  #engTable td:nth-child(5) { font-size: 12.5px; white-space: nowrap; }
  .eng-top label, .eng-top .depot-lab { display: none; }
  /* the calendar under the list, days a little smaller, the totals scrolling if they must */
  .eng-split { grid-template-columns: 1fr !important; gap: 12px; }
  .eng-cal { position: static; padding: 10px 8px 8px; }
  .cal-grid .day { min-height: 44px !important; padding: 3px 2px 2px; font-size: 11px; }
  .cal-grid .pip { width: 20px; height: 20px; font-size: 8.5px; }
  .cal-head b { font-size: 18px; }
  .cal-totals { overflow-x: auto; }
  .cal-totals table { min-width: 460px; }
  /* the employee card: a smaller round photo beside the name, the buttons in a row under, the totals four to a row */
  .emp-card .emp-top { grid-template-columns: 84px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 12px !important; row-gap: 10px; position: relative; }
  .emp-card .emp-top .picdrop { grid-row: 1 !important; grid-column: 1 !important; width: 84px !important; height: 84px !important; flex: 0 0 84px !important; margin: 0 !important; align-self: start !important; }
  .emp-card .emp-top .emp-head { grid-row: 1 !important; grid-column: 2 !important; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding-right: 30px; }
  .emp-card .emp-top .emp-head .who { flex: 1 1 100%; }
  .emp-card .emp-top .emp-head .who h2 { font-size: 20px !important; }
  .emp-card .emp-top .emp-head .fill, .emp-card .emp-top .emp-head .clear { display: none; }
  .emp-card .emp-top .emp-head .btn, .emp-card .emp-top .emp-head .btn-plain { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; }
  .emp-card .emp-top .emp-head .win-x { position: absolute; top: 0; right: 0; }
  .emp-card .emp-top .abs-tiles { grid-row: 2 !important; grid-column: 1 / -1 !important; grid-template-columns: repeat(4, 1fr) !important; }
  .abs-tiles button, .abs-tiles > div { padding: 6px 4px !important; }
  .abs-tiles .fl { font-size: 9px !important; }
  .abs-tiles b { font-size: 16px !important; }
}

/* ---- a plainer phone layout throughout */
@media (max-width: 820px) {
  body { background: #F4F3F5; }
  .card { box-shadow: none !important; border: 1px solid #E5E3E7; margin-bottom: 10px !important; }
  h1, .page-title, .page-crumb.alone, .page-crumb-row { font-size: 21px !important; }
  .page-crumb.in-bar { font-size: 19px !important; }
  .stat-row, .tiles, .src-row, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stat, .tile { padding: 10px 12px !important; border-radius: 10px !important; }
  .stat .lab, .tile .lab { font-size: 11px !important; }
  .toolbar, .tool-bar, .filters { gap: 6px !important; }
  .toolbar select, .tool-bar select, .toolbar input[type=date], .tool-bar input[type=date] { height: 42px !important; line-height: 40px !important; font-size: 16px !important; }
  .chips button, .fchip { padding: 7px 11px !important; font-size: 13px !important; }
  /* the wide lists scroll sideways inside their card, the page itself never does */
  .card > table, .card > .report, .card > .list, .card > div > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 8px 8px !important; font-size: 12.5px !important; }
  thead th { position: sticky; top: 0; }
  /* every window fills the phone */
  .modal-card, .job-card, .call-card { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; padding: 12px 12px 16px !important; }
  .job-body, .job-split, .call-body.two { display: block !important; }
  .job-col, .job-talk, .call-left, .call-right { margin-bottom: 10px; }
  .job-sec .row { grid-template-columns: 110px minmax(0, 1fr) !important; }
  .bk-done { width: 100% !important; }
  /* buttons stretch to a comfortable tap */
  .btn, .btn-plain { padding: 10px 14px !important; border-radius: 10px !important; }
  .bar .btn, .bar .btn-plain { flex: 1 1 45% !important; }
}

/* the time-off calendar on a phone: one month across, not three */
@media (max-width: 820px) {
  #calGrid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .cal-grid .day { min-height: 44px; }
  .cal-grid .pip { width: 18px; height: 18px; font-size: 8px; }
}

/* the repair card on a phone: the smaller desktop fields go back to tap size */
@media (max-width: 820px) {
  .modal-card.sale.bk .form input, .modal-card.sale.bk .form select, .modal-card.sale.bk .form textarea,
  .modal-card.sale.bk .cust-grid input { height: 42px !important; font-size: 16px !important; padding: 8px 10px !important; }
  .modal-card.sale.bk .form textarea { height: auto !important; min-height: 64px !important; }
  .modal-card.sale.bk .form label, .modal-card.sale.bk .cust-grid label { font-size: 11px !important; }
  .modal-card.sale.bk .bk-cols { display: block !important; }
}