/* ============================================================================
   Barmaso — login card, form fields, tab strip
   ============================================================================ */

/* --- Login ----------------------------------------------------------------- */
.login-screen {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 24px 0;
}

.login-card {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.login-title {
  font-size: 26px;
  font-weight: 700;
}

.login-intro {
  margin-top: -10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.login-submit { width: 100%; }

/* --- Fields ---------------------------------------------------------------- */
.field {
  display: grid;
  gap: 6px;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.field-input {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-input::placeholder { color: var(--ink-faint); }

/* iOS zooms the page into any box under 16px when it is tapped, and leaves it
   zoomed. Every box is 16px on a phone; a page that wants it bigger still can. */
@media (max-width: 720px) {
  .field-input { font-size: 16px; }
}

.field-with-toggle {
  position: relative;
  display: block;
}

.field-with-toggle .field-input { padding-right: 44px; }

.field-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 15px;
  line-height: 1;
}
.field-toggle:hover { background: var(--surface-alt); }

/* --- Messages -------------------------------------------------------------- */
.form-error {
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: #98241D;
  font-size: 13px;
  font-weight: 600;
  /* Some messages carry a setup instruction on its own line, and a document
     id that has to be copied exactly — so honour newlines, keep the id from
     overflowing the card, and let a tap select the whole thing. */
  white-space: pre-line;
  overflow-wrap: anywhere;
  user-select: all;
}

.form-note {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

.form-note--warn {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 600;
  text-align: left;
}

/* --- Header user chip ------------------------------------------------------ */
.user-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.user-chip-role {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.btn--sm { padding: 7px 13px; font-size: 13px; }

/* --- Tabs ------------------------------------------------------------------ */
.search-shell { display: grid; gap: 20px; }

.tab-strip {
  display: flex;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-strip::-webkit-scrollbar { display: none; }
/* More tabs behind an edge: that edge fades (app.js tuneStrips). */
.tab-strip.more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tab-strip.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.pur-nav.more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pur-nav.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.pur-nav.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tab-strip.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.tab-btn {
  flex: none;
  padding: 11px 15px;
  /* Reset the border and fill a <button> gets by default: the Exam strip is
     built from buttons and the Search strip from links, and both have to
     read as the same underlined tab. */
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--ink); }

.tab-btn.is-active {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

/* On a phone a module's pages are all in sight: they wrap, as chips, onto as
   many lines as they need. The strip used to scroll sideways, and the pages
   past the edge — most of them, in a module of six — were not found. (A strip
   that chooses within a page, .ast-strip, shares its width and never wraps.) */
@media (max-width: 860px) {
  .route-outlet .tab-strip:not(.ast-strip) {
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 10px;
    overflow: visible;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .route-outlet .tab-strip:not(.ast-strip) .tab-btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border: 0;
    border-radius: 20px;
    background: var(--surface-alt);
    font-size: 13px;
  }
  .route-outlet .tab-strip:not(.ast-strip) .tab-btn.is-active {
    background: var(--ink);
    color: #fff;
  }
}

/* --- Page loading ---------------------------------------------------------- */
.page-loading {
  padding: 48px 0;
  text-align: center;
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .login-card { padding: 24px; }
  .user-chip-name { display: none; }
}

/* ============================================================================
   Confirmation dialog — replaces window.confirm, which cannot be styled and
   arrives on a phone looking like a browser warning rather than a question
   the page is asking.
   ========================================================================= */

.confirm-dialog {
  width: min(420px, calc(100vw - 40px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.confirm-dialog::backdrop { background: rgba(16, 32, 58, 0.5); }

.confirm-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.confirm-message {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  /* A message with two paragraphs in it should read as two. */
  white-space: pre-line;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-action { flex: 1; }

/* On a phone the pair stacks. The confirm sits at the bottom, nearest the
   thumb: this dialog is already the safety step, and someone who opened it
   meant to submit. Making the intended action the awkward reach would be
   friction pretending to be caution. */
@media (max-width: 460px) {
  .confirm-dialog { padding: 20px; }
  .confirm-actions { flex-direction: column; }
  .confirm-action { padding-top: 13px; padding-bottom: 13px; }
}

/* A dialog offering several ways forward, each on its own line so a long
   label is readable rather than squeezed into a row of buttons. */
/* The export column list. A column of ticks, scrollable, because twelve of
   them plus the dialog's own chrome does not fit a phone. */
.column-picker {
  max-height: 45vh;
  overflow-y: auto;
  margin: 12px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.column-pick {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 14px;
  cursor: pointer;
}

/* A locked column is the sheet's spine, not a choice somebody failed to
   make — so it reads as settled rather than as disabled-and-maybe-broken. */
.column-pick input:disabled { cursor: default; }
.column-pick input:disabled + span { color: var(--ink-soft); }

.choose-actions {
  display: grid;
  gap: 8px;
  margin: 14px 0 4px;
}

/* --- On a touch screen, nothing smaller than a fingertip --------------------
   44px is the smallest target a thumb hits reliably (WCAG 2.5.5, Apple HIG).
   A mouse is precise, so desktop keeps the compact look; a phone or tablet
   gets the room. The tick keeps its 20px box and grows its hit area around it
   with a margin-free outline of padding from its cell. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .btn { min-height: 44px; }
  .field-input--sm { min-height: 44px; }
  .fin-tick { width: 24px; height: 24px; }
  td:has(> .fin-tick), label:has(> .fin-tick) { min-width: 44px; min-height: 44px; }
  .field-toggle { min-width: 44px; min-height: 44px; }
}