/* Go Small's ID — the little that Bootstrap does not already do.
   Kept short on purpose: a sign-in page is not the place for a design system. */

:root {
  --gs-ink:   #1d2430;
  --gs-muted: #6b7686;
  --gs-line:  #e3e7ec;
}

body { background: #f7f8fa; }

.gs-nav { background: #fff; border-bottom: 1px solid var(--gs-line); }

/* The lockup: the suite in grey, the app in ink. Same shape as PayPoint's, so
   the five apps read as one family rather than five separate things. */
.gs-lockup { font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.gs-lockup .gs-suite { color: var(--gs-muted); font-weight: 500; }
.gs-lockup .gs-app   { color: var(--gs-ink); }

.gs-pin-badge {
  font-size: .75rem; color: #8a6d1f; background: #fff8e1;
  border: 1px solid #f0e2b0; border-radius: 999px; padding: .1rem .6rem; margin-right: .75rem;
}

/* ---- the PIN pad ------------------------------------------------------
   Sized for a gloved hand on a warehouse touchscreen, not for a mouse. If
   the keys are small, people will use a password on a shared machine, and
   then they will share the password. */

.gs-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.gs-person { min-height: 3.5rem; font-size: 1.05rem; text-align: left; }

.gs-pin { font-size: 2rem; letter-spacing: .6rem; padding: .6rem; }

.gs-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; max-width: 20rem; }
.gs-key { min-height: 3.75rem; font-size: 1.5rem; border: 1px solid var(--gs-line); }

@media (max-width: 480px) {
  .gs-roster { grid-template-columns: 1fr; }
  .gs-pad { max-width: 100%; }
}

/* ---- the suite's look (Shawn, 2026-09-27: "pretty up the go small's id pages? Let the whole
   suite follow a similar theme for styling"): TaskPoint's colours and type on Bootstrap. The
   ink header, the warm ground, white cards, the sheet-style tables, ink buttons. ------------- */
:root {
  --gs-ink: #1B2430; --gs-ink-2: #26303D; --gs-muted: #5A6472; --gs-text-2: #3E4957;
  --gs-ground: #F4F1EA; --gs-card: #FFFFFF; --gs-line: #E2DDD2; --gs-field: #D6CFC2;
  --gs-accent: #C4570F; --gs-accent-deep: #8A3A07; --gs-blue: #1F5FA8; --gs-blue-deep: #174A83; --gs-blue-pale: #E3EDF8;
  --gs-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --gs-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-family: var(--gs-body);
  --bs-body-color: var(--gs-ink);
  --bs-body-bg: var(--gs-ground);
  --bs-border-color: var(--gs-line);
  --bs-link-color: var(--gs-blue-deep); --bs-link-color-rgb: 23, 74, 131;
  --bs-link-hover-color: var(--gs-ink); --bs-link-hover-color-rgb: 27, 36, 48;
  --bs-primary: var(--gs-ink); --bs-primary-rgb: 27, 36, 48;
  --bs-secondary-color: var(--gs-muted);
  --bs-border-radius: .6rem; --bs-border-radius-sm: .5rem; --bs-border-radius-lg: .9rem;
}
body { background: var(--gs-ground); font-family: var(--gs-body); color: var(--gs-ink); }
h1, .h1, h2.h4, h1.h4, .h4, .h3 { font-family: var(--gs-display); font-weight: 700; letter-spacing: .01em; }
h1.h4 { font-size: 1.75rem; }
h2.h6.text-uppercase { font-family: var(--gs-body); letter-spacing: .06em; font-weight: 700; font-size: .75rem; color: var(--gs-muted) !important; }

/* The header: ink, like TaskPoint's. */
.gs-nav { background: var(--gs-ink); border-bottom: 0; }
.gs-nav .navbar-brand, .gs-nav .nav-link, .gs-nav .navbar-text { color: #E9ECF1; }
.gs-nav .nav-link:hover, .gs-nav .nav-link:focus { color: #fff; }
.gs-nav .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--gs-accent); }
.gs-nav .navbar-toggler { border-color: rgba(255,255,255,.35); }
.gs-nav .navbar-toggler-icon { filter: invert(1); }
.gs-nav .gs-lockup .gs-suite { color: #AEB6C2; }
.gs-nav .gs-lockup .gs-app { color: #fff; }
.gs-nav .form-select { background-color: var(--gs-ink-2); color: #fff; border-color: #3A4656; }
.gs-nav .dropdown-menu { --bs-dropdown-link-active-bg: var(--gs-ink); }

/* Buttons: ink for the main one, outlined for the rest. */
.btn { font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--gs-ink); --bs-btn-border-color: var(--gs-ink); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-disabled-bg: #6B7480; --bs-btn-disabled-border-color: #6B7480; }
.btn-outline-primary { --bs-btn-color: var(--gs-ink); --bs-btn-border-color: var(--gs-ink); --bs-btn-hover-bg: var(--gs-ink); --bs-btn-hover-border-color: var(--gs-ink);
  --bs-btn-active-bg: var(--gs-ink); --bs-btn-active-border-color: var(--gs-ink); --bs-btn-bg: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--gs-text-2); --bs-btn-border-color: var(--gs-field); --bs-btn-bg: #fff; --bs-btn-hover-bg: #EFECE5;
  --bs-btn-hover-color: var(--gs-ink); --bs-btn-hover-border-color: #C9C1B0; --bs-btn-active-bg: #E6E1D6; --bs-btn-active-color: var(--gs-ink); }
.btn-outline-danger { --bs-btn-bg: #fff; }
.btn-check:checked + .btn-outline-secondary { background: var(--gs-ink); border-color: var(--gs-ink); color: #fff; }

/* Cards, forms, alerts. */
.card { --bs-card-border-color: var(--gs-line); --bs-card-border-radius: 14px; box-shadow: 0 1px 2px rgba(27,36,48,.04); }
.form-control, .form-select { border-color: var(--gs-field); }
.form-control:focus, .form-select:focus { border-color: var(--gs-blue); box-shadow: 0 0 0 .2rem rgba(31,95,168,.18); }
.form-check-input:checked { background-color: var(--gs-ink); border-color: var(--gs-ink); }
.alert-success { background: #E3F2E8; border-color: #C6E3CF; color: #1E5233; }
.alert-danger { background: #FDE7E2; border-color: #F4C9BE; color: #8A2008; }
.alert-warning { background: #FFF4D6; border-color: #EBD38E; color: #4F3700; }
.alert-info { background: var(--gs-blue-pale); border-color: #C7DAF0; color: var(--gs-blue-deep); }

/* Tabs and pills. */
.nav-tabs { --bs-nav-tabs-border-color: var(--gs-line); --bs-nav-tabs-link-active-bg: #fff; --bs-nav-tabs-link-active-border-color: var(--gs-line) var(--gs-line) #fff; }
.nav-tabs .nav-link { color: var(--gs-text-2); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--gs-ink); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--gs-ink); }
.nav-pills .nav-link { color: var(--gs-text-2); font-weight: 600; }
.nav-pills .nav-link:not(.active) { background: #fff; border: 1px solid var(--gs-line); }
.nav-underline .nav-link { color: var(--gs-text-2); }
.nav-underline .nav-link.active { color: var(--gs-ink); border-bottom-color: var(--gs-accent); }

/* Tables: the sheets' look. */
.table { --bs-table-bg: #fff; --bs-table-border-color: #E4E0D8; --bs-table-striped-bg: #FAF8F3; --bs-table-hover-bg: #F7F4EE; }
.table > thead > tr > th { background: #EFECE5; color: #4A5260; font-size: .78rem; text-transform: none; font-weight: 700; border-bottom: 1px solid #CFCAC0; }
.table-responsive { background: #fff; border: 1px solid #CFCAC0; border-radius: 8px; }
.table-responsive > .table { margin-bottom: 0; }
.badge.text-bg-primary { background: var(--gs-ink) !important; }

/* The sandbox (2026-09-29): a band on every page, so it's never taken for the live site. */
.gs-sandbox { padding: 5px 16px; background: repeating-linear-gradient(135deg, #5FB3E8 0 14px, #12324A 14px 28px); }
.gs-sandbox span { display: inline-block; padding: 2px 8px; background: #5FB3E8; color: #0B2233; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; }