/* Sign-in gate, inline message boxes, record forms, and the role matrix.
   Loaded after pos.css so it can lean on the same tokens and button styles. */

/* ------------------------------------------------------------------ gate */
.login {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgb(12 157 77 / 18%), transparent 70%),
    var(--ink);
}
/* Everything behind the gate is inert until a role is established. */
.is-locked .pos-main,
.is-locked .pos-tabs { visibility: hidden; }

.login-card {
  width: min(380px, 100%);
  display: grid;
  gap: 12px;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
  text-align: left;
}
.login-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.login-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
}
.login-sub { margin: -6px 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.login-field { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.login-field input,
.login-field select {
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #0c1322;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.login-field input { letter-spacing: 0.4em; }
.login-error {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: #3a1414;
  border: 1px solid #7a2323;
  color: #ffc4c4;
  font-size: 13px;
}
.login-role { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* Who is on the counter, in the top bar. */
.who { display: grid; line-height: 1.15; text-align: right; }
.who b { font-size: 13px; }
.who small { font-size: 11px; opacity: 0.85; font-weight: 500; }
.ghost-btn--sm { padding: 0.3rem 0.6rem; font-size: 12px; }

/* ------------------------------------------------- inline message boxes */
/* The replacement for prompt/confirm/alert: rendered in the page, above the
   list it refers to, with one labelled input per value. */
.ask-host { margin-bottom: 14px; }
.ask {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  background: var(--surface-raised);
}
.ask--danger { border-left-color: #c2453f; }
.ask--warn { border-left-color: #c9922c; }
.ask--good { border-left-color: #1f9d4d; }
.ask-head strong { display: block; font-size: 15px; }
.ask-head p { margin: 4px 0 0; color: var(--soft); font-size: 13px; line-height: 1.5; }
.ask-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 14px;
}
.ask-field { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ask-field--wide { grid-column: 1 / -1; }
.ask-field b { color: #ff9f9f; }
.ask-field input,
.ask-field select,
.ask-field textarea {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0c1322;
  color: var(--text);
  font: inherit;
}
.ask-field small { color: var(--muted); font-weight: 500; font-size: 11px; }
.ask-error {
  margin: 0;
  color: #ffc4c4;
  font-size: 13px;
  font-weight: 600;
}
.ask-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------- record form */
/* A booking is written up here rather than through a chain of popups. */
.record-form {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}
.record-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.record-head strong { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.03em; }
.record-slot { color: var(--blue); font-size: 13px; font-weight: 600; }
.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.record-grid label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.record-grid label.span2 { grid-column: span 2; }
.record-grid b { color: #ff9f9f; }
.record-grid input,
.record-grid select {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0c1322;
  color: var(--text);
  font: inherit;
}
.record-error {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: #3a1414;
  border: 1px solid #7a2323;
  color: #ffc4c4;
  font-size: 13px;
}
.record-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .record-grid label.span2 { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- role matrix */
.matrix-table th.c, .matrix-table td.c { text-align: center; }
.matrix-table thead th small {
  display: block;
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.matrix-table thead th .mini { margin-top: 4px; }
.matrix-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: #1f9d4d; cursor: pointer; }

.pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}
.pill--on { background: #12321f; border-color: #1f9d4d; color: #8fe3ac; }
.pill--off { background: #3a1414; border-color: #7a2323; color: #ffc4c4; }

/* When the board is a cached copy it must look like one: bookings cannot be
   taken offline, so the grid is dimmed rather than quietly pretending. */
.stale-note {
  margin: 0 0 12px;
  padding: 0.6rem 0.75rem;
  border: 1px solid #7a5b1a;
  border-left: 3px solid #c9922c;
  border-radius: 8px;
  background: #2a2110;
  color: #ffd479;
  font-size: 13px;
  line-height: 1.5;
}
.court-board.is-stale { opacity: 0.55; filter: saturate(0.6); pointer-events: none; }