/* Savana Milk ATM — the little that Tailwind utilities cannot do inline.
   Tailwind itself comes from the Play CDN, so there is no build step and
   nothing to compile here. Keep this file small. */

/* Alpine sets x-cloak until it has initialised. Without this rule the sidebar
   drawer and the user menu flash open on a slow connection. */
[x-cloak] {
  display: none !important;
}

/* ── Scrollbars ──────────────────────────────────────────────────────
   Thin, grey, and only visible against a scrolling area. The browser
   default bar is wide enough to crowd a modal and a table. Firefox reads
   the two `scrollbar-*` properties; Chrome and Safari read the
   ::-webkit rules. */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Modals ──────────────────────────────────────────────────────────
   The structure static/js/modal.js expects. A page writes the markup and
   the utility does the rest. Do not restyle these per screen. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 640px) {
  .modal {
    align-items: center;
    padding: 1.5rem;
  }
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(15 23 42 / 45%);
}

.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  background: #fff;
  border-radius: 0.75rem 0.75rem 0 0;
  box-shadow: 0 20px 45px rgb(15 23 42 / 20%);
}

/* On a phone the panel is a sheet off the bottom edge, which is where a thumb
   already is. From the small breakpoint up it becomes a wide centred card. */
@media (min-width: 640px) {
  .modal-panel {
    max-width: 48rem;
    border-radius: 0.75rem;
  }
}

.modal-panel:focus {
  outline: none;
}

/* Only the middle scrolls. The title row and the buttons stay put, so the
   buttons are always reachable on a short screen.

   The <form> sits between the panel and the body, so it has to carry the
   column layout too. Without this the body is not a flex child of anything
   that grows, and the whole panel scrolls instead. `min-height: 0` is what
   lets a flex child actually shrink and scroll. */
.modal-panel > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ── Form controls ───────────────────────────────────────────────────
   One look for every input on every screen, so a new page cannot drift. */

.field {
  display: block;
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: #1e293b;
}

.field:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 1px #2196f3;
}

.field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #334155;
}

.field-hint {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
}

/* ── Sidebar ─────────────────────────────────────────────────────────
   Light, like the rest of the app. One rule per state so a new module
   cannot invent its own look. */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #334155;
}

.nav-item:hover {
  background: #f1f5f9;
}

.nav-item.is-current {
  background: #f1f5f9;
  font-weight: 600;
  color: #0f172a;
}

.nav-item i {
  width: 1.125rem;
  text-align: center;
  color: #94a3b8;
}

.nav-item.is-current i {
  color: #1e88e5;
}

.nav-section {
  padding: 1rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ── Console presets ─────────────────────────────────────────────────
   templates/atms/console.html. One small button per SAVP-1 command, with the
   opcode it sends shown in mono so the preset teaches the raw command. The
   words are in the title, for a hover. */
.preset-group {
  margin-right: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.preset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #334155;
  background: #fff;
}

.preset:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}

.preset:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.preset-code {
  border-radius: 0.25rem;
  padding: 0 0.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: #1565c0;
  background: #e3f2fd;
}

.preset-stop {
  border-color: #fca5a5;
  color: #b91c1c;
}

.preset-stop .preset-code {
  color: #b91c1c;
  background: #fee2e2;
}

.preset-stop:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}