/*
 * The operator console, made usable with a thumb.
 *
 * The console's views are deliberately raw HTML — twelve <table border="1">,
 * not one class between them — and that is worth keeping. This does not
 * redesign them. It makes the things you tap big enough to hit, keeps the wide
 * tables from pushing the page sideways, and puts air between actions that must
 * not be confused for one another.
 *
 * Named console.css, not admin.css, on purpose. stylesheet_link_tag :app
 * includes this directory sorted by name and that sort is the cascade order —
 * see tokens.css. "admin" would load before base.css and components.css and
 * lose every tie; "console" lands after both and wins by document order.
 *
 * Everything is scoped to .console, which layouts/application.html.erb puts on
 * <main>. That layout also serves sign-in, password reset and the signed-out
 * home on every host, and those pages are built from the customer component
 * classes — so every rule below either targets an element the console leaves
 * unclassed, or excludes classed ones explicitly. Touching .button here would
 * restyle the sign-in page.
 */

.console {
  /* Overrides .screen's phone column. A no-op on a phone, where width: 100% is
     still the smaller of the two. */
  max-width: var(--console-max-width);
}

/* ---- Tables -----------------------------------------------------------
   Seven columns of charge points, six of sessions, and a WebSocket URL in a
   <pre> that never wraps. display: block is what lets the table scroll inside
   the page instead of making the page itself wider than the screen — the
   alternative is a wrapper div in twelve views, several of which are Turbo
   replace targets whose outermost node is spoken for. */

.console table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: var(--space-4);
}

/* cellpadding="4" is in the markup and stays there; this is what actually
   spaces the cells once there is a stylesheet to do it. */
.console :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
}

.console th {
  font-weight: var(--fw-semibold);
  background: var(--surface-sunken);
  white-space: nowrap;
}

/* ---- Things you tap ---------------------------------------------------
   A link in a table cell used to be bare text about eighteen pixels tall. The
   :not([class]) guard is what keeps this off the auth pages, which compose from
   .button and .field and already size themselves. */

.console :is(td, th, p, li, .links) a:not([class]) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* button_to renders <form class="button_to"><button>. Neither carries a class
   of ours anywhere in the console, so both are fair game — and neither has had
   any styling at all until now beyond base.css's `font: inherit`. */
.console :is(button, input[type="submit"]):not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.console :is(button, input[type="submit"]):not([class]):hover {
  background: var(--surface-sunken);
}

.console :is(button, input[type="submit"]):not([class])[disabled] {
  background: var(--action-disabled);
  color: var(--action-disabled-text);
  border-color: var(--action-disabled);
  cursor: not-allowed;
}

/* button_to wraps its button in a form, which is a block and would otherwise
   force a line break after every action. */
.console form.button_to {
  display: inline-block;
  margin: 0;
}

/* No 300ms wait, no grey flash on tap. */
.console :is(a, button, input, label, summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Actions that must not be confused --------------------------------
   Stop charging sits next to Sell a session; six plug checkboxes sit next to
   Save. Stacked full-width with a real gap, so a thumb cannot land between two
   meanings. The row variant is for the wider screen below. */

.console .actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 12rem;
}

.console .actions > * {
  margin: 0;
}

/* Inside an action stack a link is a target in its own right, not a word in a
   sentence, so it gets the full width and a border to say so. */
.console .actions a:not([class]) {
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.console .actions a:not([class]):hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

.console .actions :is(form.button_to, button, input[type="submit"]) {
  display: flex;
  width: 100%;
}

/* A row of checkboxes twelve pixels apart is a row of misses. Each becomes its
   own line, tappable across the whole width — the label is the target, so the
   word counts as much as the box. */
.console .checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block: var(--space-3);
}

.console .checks label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.console .checks label:hover {
  background: var(--surface-sunken);
}

/* The native box is 13px; nothing about a phone makes that a target. */
.console :is(.checks, .choice) input[type="checkbox"],
.console :is(.checks, .choice) input[type="radio"] {
  width: 22px;
  height: 22px;
  flex: none;
}

/* The sell form's two mode rows. Flipping one clears the other's field, so the
   gap between them is doing real work. */
.console .choice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-block: var(--space-2);
}

.console .choice + .choice {
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.console .choice label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* ---- Odds and ends ---------------------------------------------------- */

/* The WebSocket URL and the one-time credential. Both are <pre> and both are
   longer than a phone is wide; neither may take a class, because
   ChargePointsControllerTest matches `<pre>…</pre>` as a bare tag. */
.console pre {
  overflow-x: auto;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

.console :is(h1, h2) {
  margin-top: var(--space-6);
}

.console > :first-child {
  margin-top: 0;
}

.console p {
  margin-block: var(--space-3);
}

.console .warn {
  color: var(--semantic-danger);
  font-weight: var(--fw-semibold);
}

/* Two short links either side of a pipe, at the foot of most pages. */
.console .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
}

/* The email between the brand and Sign out has no give in it, and squeezes both
   on a narrow screen. The topbar is outside .console deliberately — it is the
   same bar on every host. */
.topbar .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Wider than a phone ------------------------------------------------
   The project's first width query. It exists only so the stacks above stop
   being stacks when there is room; everything else is already fluid. */

@media (min-width: 40rem) {
  .console .actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .console .actions :is(form.button_to, button, input[type="submit"]) {
    width: auto;
  }

  .console .checks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
}