/* SNALS Billing Desk — platform differences
 *
 * Loaded last, after app.css and motion.css. Everything here exists because a
 * particular platform behaves differently, and each rule says which one and
 * why. Keeping them together means none of them look like arbitrary noise in
 * the middle of the main stylesheet, and any that stop being necessary can be
 * removed without reading the rest.
 */

/* ==========================================================================
   Colour handling
   ========================================================================== */

/* Samsung Internet and Chrome's "force dark" will otherwise invent a dark
   theme by inverting the page, which turns the navy chrome pale and makes the
   printed documents grey. Declaring the scheme tells them not to. */
:root{ color-scheme: light; }

/* ==========================================================================
   iOS and iPadOS
   ========================================================================== */

/* Safari on iPhone counts the address bar inside 100vh, so a full-height
   layout ends up taller than the screen and the page rocks as the bar hides.
   dvh is the fix; the vh line stays first for anything that predates it. */
#app{ min-height:100vh; min-height:100dvh; }
body{ min-height:100vh; min-height:100dvh; }

/* Landscape on iPhone inflates body text unless this is set. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* The grey flash when tapping a button on iOS reads as a rendering fault next
   to the app's own press animation. */
*{ -webkit-tap-highlight-color: rgba(46,139,214,.18); }

/* iOS zooms the whole page in when a field smaller than 16px takes focus, and
   does not zoom back out. Touch devices therefore get 16px fields; a mouse and
   keyboard keep the tighter 13.5px, because nothing zooms there. */
@media (pointer: coarse){
  .in,
  .lines .in,
  input, select, textarea{ font-size:16px; }
  .lines .in{ padding:8px; }
  /* Taller targets: a fingertip is about 9mm, a mouse pointer is one pixel. */
  .btn{ min-height:38px; }
  .btn.sm{ min-height:32px; }
  .navb{ min-height:42px; }
  .xb{ min-width:34px; min-height:34px; }
  .lnk{ padding:4px 0; display:inline-block; }
}

/* Notched and rounded screens: keep the chrome clear of the cutout in both
   orientations, and clear of the home indicator at the bottom. */
@supports (padding: max(0px)){
  .brand{ padding-left: max(14px, env(safe-area-inset-left)); }
  .topbar{
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .rail{ padding-left: max(10px, env(safe-area-inset-left)); }
  main{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  #toasts{ bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)); }
  .signin{ padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width:760px){
  @supports (padding: max(0px)){
    main{
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    .topbar{ padding-right: max(10px, env(safe-area-inset-right)); }
  }
}

/* Momentum scrolling inside the cards that hold wide tables. Without it, a
   swipe on older iOS stops dead instead of gliding. */
.card, #previewWrap, main, .md{ -webkit-overflow-scrolling: touch; }

/* Safari before 14.1 knows only the prefixed form. */
.sticky{ position:-webkit-sticky; position:sticky; }

/* Safari before 14.1 ignores `inset`, which would drop the splash and the
   modal backdrop out of position rather than covering the screen. */
#splash, .ov{ top:0; right:0; bottom:0; left:0; }

/* The select chevron is drawn by hand, so the native one has to go on every
   engine that draws its own. */
select.in{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/* iOS renders date fields with its own inner padding and left-aligns oddly
   inside a flex row unless this is set. */
input[type="date"]{ -webkit-appearance:none; appearance:none; min-height:1.2em; }
input[type="date"]::-webkit-date-and-time-value{ text-align:left; }

/* Safari applies its own inner shadow to text fields. */
.in{ -webkit-appearance:none; appearance:none; }

/* ==========================================================================
   Keyboard focus
   ========================================================================== */

/* :focus-visible arrived in Safari 15.4. Older engines get a visible ring
   from the plain :focus rule; newer ones use :focus-visible so the ring does
   not appear on every mouse click. */
.btn:focus, .navb:focus, .lnk:focus, .who:focus{ outline:2px solid var(--azure); outline-offset:2px; }
@supports selector(:focus-visible){
  .btn:focus, .navb:focus, .lnk:focus, .who:focus{ outline:none; }
  .btn:focus-visible, .navb:focus-visible, .lnk:focus-visible, .who:focus-visible{
    outline:2px solid var(--azure); outline-offset:2px;
  }
}

/* ==========================================================================
   Firefox
   ========================================================================== */

/* Firefox puts a dotted inner border on focused buttons. */
.btn::-moz-focus-inner, .navb::-moz-focus-inner{ border:0; padding:0; }

/* Firefox shows spinner arrows on number fields, which sit on top of the
   right-hand padding in the narrow qty and rate columns. */
.lines input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.lines input[type="number"]::-webkit-outer-spin-button,
.lines input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Firefox needs the scrollbar colours set explicitly or they stay default. */
@supports (scrollbar-width: thin){
  main, .card, .md{ scrollbar-width:thin; scrollbar-color:#C3D4E5 transparent; }
}

/* ==========================================================================
   Windows and Linux
   ========================================================================== */

/* Chrome and Edge on Windows draw a wide grey scrollbar over the content.
   This matches it to the page without hiding it. */
main::-webkit-scrollbar, .card::-webkit-scrollbar, .md::-webkit-scrollbar{ width:10px; height:10px; }
main::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb, .md::-webkit-scrollbar-thumb{
  background:#C3D4E5; border-radius:6px; border:2px solid var(--shell);
}
main::-webkit-scrollbar-track{ background:transparent; }

/* Segoe UI on Windows and Cantarell on Linux both sit in the font stack
   already; this only stops synthetic bolding where a weight is missing. */
h1,h2,h3,h4,.num{ font-synthesis: none; }

/* ==========================================================================
   Installed as an app
   ========================================================================== */

/* With no browser chrome there is no address bar to give the window its
   colour, so the top strip has to reach the edge of the screen itself. */
@media (display-mode: standalone){
  @supports (padding: max(0px)){
    .brand, .topbar{ padding-top: env(safe-area-inset-top); height: calc(58px + env(safe-area-inset-top)); }
    .rail{ padding-top: calc(14px + env(safe-area-inset-top)); }
  }
  /* Nothing to go "back" to, so the sign-out route must always be reachable. */
  .whoami{ display:block !important; }
}

/* ==========================================================================
   Printing
   ========================================================================== */

/* Safari and Firefox both ignore @page size unless the printed element is
   sized in absolute units, which .page already is. These rules stop the two
   engines adding their own margin on top of the 13mm the document carries. */
@page{ size:A4; margin:0; }

@media print{
  html, body{ width:210mm; background:#fff; }
  /* Firefox needs this or backgrounds on the table header and totals bar
     print as white, which loses the structure of the document. */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* Safari otherwise carries the screen scroll position into the printout. */
  #printMount{ position:static; }
  #printMount .page{ box-shadow:none; }
}

/* ==========================================================================
   Very old engines
   ========================================================================== */

/* If custom properties are not understood, every colour above resolves to
   nothing and the app would render as black text on white with no structure.
   This is the one thing worth a plain fallback rather than a polyfill. */
@supports not (--a: 0){
  body{ background:#EDF1F6; color:#0B1E33; }
  .brand, .topbar, .rail{ background:#0B1E33; }
  .btn.p{ background:#1E5F9E; color:#fff; border-color:#1E5F9E; }
  .card, .kpi{ background:#fff; border:1px solid #D5DFEA; }
}