/*
 * Torvi — shared form input corrections.
 *
 * The first shared stylesheet in this codebase. Every page carries its own inline <style>
 * with the same `input, select { width:100%; padding:10px 12px; font-size:13.5px }` rule
 * copied into it, which is why the date fields broke identically in several places at once:
 * one rule, duplicated, not three separate bugs. Fixes that have to hold everywhere belong
 * in one file rather than being pasted eleven more times.
 *
 * WHAT WAS WRONG ON MOBILE
 *
 * WebKit does not render <input type="date"> as a plain text box. The value lives in a
 * ::-webkit-date-and-time-value pseudo-element which:
 *   - is centred by default, so the text drifts to the middle of the field rather than
 *     sitting where every other input's text sits;
 *   - carries its own intrinsic width and margins, so at narrow widths it collides with the
 *     calendar indicator instead of shrinking;
 *   - ignores the container's line-height, so the field collapses shorter than a text input
 *     beside it, which is what makes a row of fields look misaligned and overlapping.
 *
 * Separately, iOS Safari zooms the whole page in when a focused input's font-size is below
 * 16px. At 13.5px every date field yanked the layout about on tap, which reads as the field
 * being broken even when it is not.
 */

input[type="date"],
input[type="datetime-local"] {
  /* Stops WebKit imposing its own control metrics over the page's padding and border. */
  -webkit-appearance: none;
  appearance: none;
  /* Never let the intrinsic width of the internal value push the control past its column. */
  max-width: 100%;
}

/* The actual fix for the drifting, overlapping text. */
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  /* Fills the field so the value cannot sit centred with the indicator over the top of it. */
  min-width: 100%;
}

/* Keep the calendar button on the right and out of the value's way. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.6;
}

/*
 * iOS zooms the page in whenever a focused input's font-size is below 16px, and it does so on
 * every touch device it runs on -- not only narrow ones. Two things were wrong here:
 *
 *   1. `max-width: 767px` alone misses the iPad entirely (744-1024pt), and the app ships to
 *      iPad as well as iPhone (TARGETED_DEVICE_FAMILY = "1,2"). `pointer: coarse` is the
 *      condition that actually matches "a device that will zoom" -- a mouse-driven desktop is
 *      not one, so the website is untouched.
 *
 *   2. `!important`, because this rule loses on SPECIFICITY, not on source order. A page that
 *      writes `.thread-input textarea { font-size:13.5px }` outranks a bare
 *      `input, select, textarea` no matter how late this file is linked, so the shared fix
 *      silently did nothing on exactly the pages that qualified their selectors -- the message
 *      composer, the Leaderboard and Reports filter rows, availability's time pickers, and
 *      signup's typed fields. This is the one place allowed to overrule them: a field that
 *      zooms the layout out from under the user is broken regardless of what a page intended
 *      it to look like.
 */
@media (max-width: 767px), (pointer: coarse) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/*
 * NOTHING SIDEWAYS ON A PHONE (S1, 19 Sep).
 *
 * A tick box or a radio is never a full-width field. Pages style `input { width:100% }` for their
 * text boxes and the rule caught these too, stretching a 16px control across the row and pushing
 * its label onto a line of its own -- or past the edge.
 *
 * Two fields side by side in a dialog -- Start and End, a date beside a time -- stack at phone
 * width. Each was a `1fr` column, whose minimum is its content's, and a date or time control will
 * not go narrower than itself: the second one ran off the screen (mobilecheck's dialog sweep found
 * seven dialogs doing it). Stacked, each gets the whole width; a date field needs it.
 */
input[type="checkbox"], input[type="radio"] { width: auto; }
@media (max-width: 480px) {
  /* ON THE PAGE AS WELL AS IN A DIALOG (1.3.1 item 4). This stacked the pairs inside dialogs only,
     and Availability & Leave has the same pair on the page itself: its second date field ended
     12px past a 375px screen and the whole page panned. The reason does not depend on being in a
     dialog -- a date field cannot go narrower than a date. */
  .form-row,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  .modal .form-row,
  .modal [style*="grid-template-columns:1fr 1fr"],
  .modal [style*="grid-template-columns: 1fr 1fr"],
  [id$="Backdrop"] .form-row,
  [id$="Backdrop"] [style*="grid-template-columns:1fr 1fr"],
  [id$="Backdrop"] [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  .modal .time-picker, [id$="Backdrop"] .time-picker { max-width: 100%; }
  .time-picker { max-width: 100%; }
  /*
   * ── A PAIR OF TIMES STAYS A PAIR (8 Oct, item 5) ────────────────────────────────────────
   *
   * The rule above stacks every 1fr/1fr pair on a phone, and its reason is written beside it: a
   * DATE field cannot go narrower than a date. A TIME field can -- "07:00" is half the width of
   * "07/10/2026" -- so Start and End fitted side by side all along and were being stacked by a
   * rule that was never about them. Add timesheet asks for a start and an end one under the
   * other, with room to spare beside each.
   *
   * OPT-IN, by class, so the date rule keeps every field it was written for. Higher specificity
   * than both the class and the inline-style selectors above, so it wins where it is asked for
   * and nowhere else.
   */
  .form-row.pair-times,
  .modal .form-row.pair-times,
  [id$="Backdrop"] .form-row.pair-times { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* ---- An empty date field says so (S6, 19 Sep) --------------------------------------------------
 *
 * At phone width a date, time or date-time field is at least a finger tall and wide enough to read
 * a date, and while it is empty (app-shell.js keeps data-empty on it) it says what it is for. The
 * browser's own empty rendering -- nothing at all on iOS, a dd/mm/yyyy mask elsewhere -- is hidden
 * behind the hint until the field is focused. The hint is drawn in the palette's muted grey, which
 * reads on both the page and a dialog's forced-light card.
 */
@media (max-width: 900px) {
  input[type="date"], input[type="time"], input[type="datetime-local"] { min-height: 44px; min-width: 9.5em; box-sizing: border-box; }
  input[type="date"][data-empty]:not(:focus), input[type="datetime-local"][data-empty]:not(:focus),
  input[type="time"][data-empty]:not(:focus) {
    color: transparent; background-repeat: no-repeat; background-position: 12px center; background-size: 120px 20px;
  }
  input[type="date"][data-empty]:not(:focus), input[type="datetime-local"][data-empty]:not(:focus) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='-apple-system,Inter,system-ui,sans-serif'%20font-size='15'%20fill='%235F5E5A'%3ESelect%20date%3C/text%3E%3C/svg%3E"); }
  input[type="time"][data-empty]:not(:focus) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='-apple-system,Inter,system-ui,sans-serif'%20font-size='15'%20fill='%235F5E5A'%3ESelect%20time%3C/text%3E%3C/svg%3E"); }
}
/* The dark palette's muted grey on a dark-ready screen -- never inside a dialog, which stays light. */
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  html[data-dark-ready]:not([data-theme="light"]) input[type="date"][data-empty]:not(:focus):not([data-force-light] *), html[data-dark-ready]:not([data-theme="light"]) input[type="datetime-local"][data-empty]:not(:focus):not([data-force-light] *) { color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='-apple-system,Inter,system-ui,sans-serif'%20font-size='15'%20fill='%23A9AEC4'%3ESelect%20date%3C/text%3E%3C/svg%3E"); }
  html[data-dark-ready]:not([data-theme="light"]) input[type="time"][data-empty]:not(:focus):not([data-force-light] *) { color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='-apple-system,Inter,system-ui,sans-serif'%20font-size='15'%20fill='%23A9AEC4'%3ESelect%20time%3C/text%3E%3C/svg%3E"); }
}
@media (max-width: 900px) {
  html[data-dark-ready][data-theme="dark"] input[type="date"][data-empty]:not(:focus):not([data-force-light] *), html[data-dark-ready][data-theme="dark"] input[type="datetime-local"][data-empty]:not(:focus):not([data-force-light] *) { color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='-apple-system,Inter,system-ui,sans-serif'%20font-size='15'%20fill='%23A9AEC4'%3ESelect%20date%3C/text%3E%3C/svg%3E"); }
  html[data-dark-ready][data-theme="dark"] input[type="time"][data-empty]:not(:focus):not([data-force-light] *) { color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='20'%3E%3Ctext%20x='0'%20y='15'%20font-family='-apple-system,Inter,system-ui,sans-serif'%20font-size='15'%20fill='%23A9AEC4'%3ESelect%20time%3C/text%3E%3C/svg%3E"); }
}