/* ==========================================================================
   SalesScoutNG design system
   Layered over Bootstrap 5.3. Load this AFTER the Bootstrap stylesheet.
   ========================================================================== */

:root {
  /* Ground */
  --canvas:        #EBF0EF;
  --surface:       #FFFFFF;
  --surface-sunk:  #F5F8F7;

  /* Text */
  --ink:           #13221F;
  --ink-soft:      #3A4A47;
  --muted:         #5E6E6C;

  /* Structure */
  --line:          #D5DEDC;
  --line-strong:   #B9C6C4;

  /* Hisense brand */
  --teal:          #00AAA6;
  --teal-deep:     #00706D;
  --teal-wash:     #E2F4F3;

  /* Record status */
  --ok:            #15794A;
  --ok-wash:       #E3F3EA;
  --warn:          #A96D12;
  --warn-wash:     #FBF0DD;
  --stop:          #B5342A;
  --stop-wash:     #FAE7E5;

  --radius:        10px;
  --radius-sm:     7px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background-color: var(--canvas);
  color: var(--ink);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
}

h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

code {
  font-family: 'Barlow Semi Condensed', ui-monospace, monospace;
  font-size: 0.95em;
  color: var(--ink-soft);
  background: var(--surface-sunk);
  padding: 1px 5px;
  border-radius: 4px;
}

/* A solid highlight, like the browser's own. The pale wash used here before
   was almost invisible against white -- selected text didn't look selected. */
::selection    { background: var(--teal-deep); color: #fff; }
::-moz-selection { background: var(--teal-deep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   App frame: top bar
   -------------------------------------------------------------------------- */

.app-navbar {
  background-color: var(--ink);
  border-bottom: 3px solid var(--teal);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.app-navbar .navbar-brand {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Brand mark: a teal keyline, echoing the status edge used on records */
.app-navbar .brand-mark {
  width: 4px;
  height: 1.5rem;
  background: var(--teal);
  border-radius: 2px;
  display: inline-block;
}

.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 500;
  padding: 0.4rem 0.8rem !important;
  border-radius: var(--radius-sm);
  transition: background-color 0.14s ease, color 0.14s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.app-navbar .dropdown-menu {
  background-color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.app-navbar .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 5px;
  padding: 0.42rem 0.7rem;
  font-weight: 500;
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
  background-color: var(--teal);
  color: #fff;
}

.app-navbar .navbar-text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
}

.app-navbar .navbar-text strong { color: #fff; font-weight: 600; }

.app-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
  padding: 0.4rem 0.65rem;
}

/* Bootstrap's default toggler icon is a dark SVG meant for light navbars.
   On this dark bar it was invisible -- the menu button looked like an empty
   box. This is the white version. */
.app-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  /* Sizing restated rather than inherited: if the CDN is slow, Bootstrap's
     own rules aren't there and the button renders as an empty box -- which is
     precisely how this bug showed up on a phone. */
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  vertical-align: middle;
}

.app-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(0, 170, 166, 0.45);
}

/* The menu itself needs breathing room once it drops down on a phone. */
@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .app-navbar .nav-link { padding: 0.6rem 0.75rem !important; font-size: 1.05rem; }
  .app-navbar .navbar-text { margin: 0.75rem 0 0.5rem; }
  .app-navbar .btn-signout { display: inline-block; margin-bottom: 0.5rem; }
}

.btn-signout {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.85rem;
}

.btn-signout:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-head h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.page-head .page-sub {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0.15rem 0 0;
}

/* --------------------------------------------------------------------------
   Cards — hairline border carries separation, not a shadow on everything
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* The status edge: a record's state, encoded structurally.
   Applied to cards and table rows alike so the language stays consistent. */
.edge          { border-left: 4px solid var(--line-strong); }
.edge-active   { border-left: 4px solid var(--teal); }
.edge-ok       { border-left: 4px solid var(--ok); }
.edge-warn     { border-left: 4px solid var(--warn); }
.edge-stop     { border-left: 4px solid var(--stop); }
.edge-off      { border-left: 4px solid var(--line-strong); }

/* --------------------------------------------------------------------------
   Tables — semi-condensed headers instead of all-caps labels
   -------------------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  color: var(--ink);
  margin-bottom: 0;
}

.table > thead > tr > th {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
  text-align: left;
}

/* Numeric column headers align with the figures beneath them */
.table > thead > tr > th.num { text-align: right; }

/* Row-label cells (used on the printable report's summary block) */
.table > tbody > tr > th {
  font-weight: 600;
  color: var(--ink-soft);
  text-align: left;
  padding: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.table > tbody > tr > td {
  border-bottom: 1px solid var(--line);
  padding: 0.6rem;
  vertical-align: middle;
}

.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th { border-bottom: none; }

.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-sunk);
  color: var(--ink);
}

/* Numeric columns line up when they're right-aligned and tabular */
.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.table .row-total {
  font-weight: 600;
  background: var(--surface-sunk);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0.45rem 1rem;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn-sm { padding: 0.28rem 0.7rem; font-size: 0.9rem; }

.btn-primary {
  background-color: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--teal-deep) !important;
  border-color: var(--teal-deep) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--teal-deep);
  border-color: var(--line-strong);
  background: var(--surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.btn-outline-secondary,
.btn-outline-dark {
  color: var(--ink-soft);
  border-color: var(--line-strong);
  background: var(--surface);
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn-outline-success {
  color: var(--ok);
  border-color: var(--line-strong);
  background: var(--surface);
}

.btn-outline-success:hover {
  background-color: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.btn-success {
  background-color: var(--ok);
  border-color: var(--ok);
}

.btn-success:hover, .btn-success:focus {
  background-color: #10603A !important;
  border-color: #10603A !important;
}

/* Field staff tap targets: comfortably large on phones */
@media (max-width: 767.98px) {
  .btn { padding: 0.6rem 1.1rem; }
  .btn-sm { padding: 0.42rem 0.85rem; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label {
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.form-control,
.form-select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  background-color: var(--surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-wash);
}

.form-control::placeholder { color: #9AA8A6; }

.form-text { color: var(--muted); font-size: 0.86rem; }

.input-group-text {
  background: var(--surface-sunk);
  border-color: var(--line-strong);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Phone keyboards get bigger inputs so they're tappable one-handed */
@media (max-width: 767.98px) {
  .form-control, .form-select { padding: 0.65rem 0.75rem; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Status pills — paired with the edge, never used alone to carry meaning
   -------------------------------------------------------------------------- */

.pill {
  display: inline-block;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pill-ok     { background: var(--ok-wash);   color: var(--ok); }
.pill-active { background: var(--teal-wash); color: var(--teal-deep); }
.pill-warn   { background: var(--warn-wash); color: var(--warn); }
.pill-stop   { background: var(--stop-wash); color: var(--stop); }
.pill-off    { background: var(--surface-sunk); color: var(--muted); }

/* Reference codes: INS-20260905-0004 */
.ref {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.96rem;
}

.alert-success { background: var(--ok-wash);   border-left-color: var(--ok);   color: #0E5636; }
.alert-danger  { background: var(--stop-wash); border-left-color: var(--stop); color: #8C271F; }
.alert-warning { background: var(--warn-wash); border-left-color: var(--warn); color: #7D5010; }
.alert-info    { background: var(--teal-wash); border-left-color: var(--teal); color: var(--teal-deep); }
.alert-light   { background: var(--surface-sunk); border-left-color: var(--line-strong); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Section headings inside a record (Items on Display, Training, etc.)
   -------------------------------------------------------------------------- */

.section-head {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--teal);
  margin-bottom: 0.75rem;
}

.items-category-header {
  cursor: pointer;
  user-select: none;
  padding: 0.65rem 0.2rem;
  border-bottom: 1px solid var(--line-strong);
  transition: background-color 0.12s ease;
}

.items-category-header:hover { background: var(--surface-sunk); }

.items-category-header strong {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
}

.items-category-header .chev {
  color: var(--teal);
  transition: transform 0.16s ease;
  display: inline-block;
}

.items-category-header[aria-expanded="false"] .chev { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   Photos
   -------------------------------------------------------------------------- */

.photo-thumb {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin: 0 6px 6px 0;
  background: var(--surface-sunk);
}

.photo-thumb:hover { border-color: var(--teal); }

/* --------------------------------------------------------------------------
   Dashboard tiles
   -------------------------------------------------------------------------- */

.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  height: 100%;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.14s ease, transform 0.14s ease;
}

.tile:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  border-left-color: var(--teal-deep);
  transform: translateY(-1px);
}

.tile-label { font-weight: 600; font-size: 1.05rem; }
.tile-hint  { color: var(--muted); font-size: 0.88rem; margin-top: 0.15rem; }

/* Key figures on the overview */
.stat { padding: 0.15rem 0; }

.stat-value {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-label { color: var(--muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Empty states — an invitation to act, not a shrug
   -------------------------------------------------------------------------- */

.empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
}

.empty-title { font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}

.filter-bar .form-label { font-size: 0.88rem; margin-bottom: 0.2rem; }

/* Day grouping in the inspection inbox */
.day-head {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  border-bottom: 2px solid var(--teal);
  padding-bottom: 0.35rem;
  margin: 1.5rem 0 0.6rem;
}

.day-head:first-of-type { margin-top: 0; }

.day-count { color: var(--muted); font-weight: 500; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal-content {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(19, 34, 31, 0.22);
}

.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-weight: 600; }

/* Keep the header and footer on screen and scroll the middle.
   Without this the Add User form ran off the bottom of the screen and the
   Create Account button couldn't be reached at all. Stated here rather than
   relying on Bootstrap's scrollable rule, so a slow CDN can't take the
   submit button away with it. */
.modal-dialog-scrollable {
  max-height: calc(100vh - 2rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The header, body and footer sit inside a <form>, not directly inside
   .modal-content -- so the form is the flex item and has to become a flex
   column itself, or nothing inside it is height-constrained and the footer
   is pushed off the bottom of the screen. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

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

.modal-header, .modal-footer { flex: 0 0 auto; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
}

/* On a phone the confirm button should be the full width of the sheet and
   sit at the bottom where a thumb reaches. */
@media (max-width: 575.98px) {
  .modal-dialog-scrollable { max-height: calc(100vh - 1rem); margin: 0.5rem; }
  .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Sign-in screen
   -------------------------------------------------------------------------- */

body.signin-page { background: var(--ink); }

.signin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.signin-brand {
  background: var(--ink);
  color: #fff;
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.signin-brand .keyline {
  width: 56px;
  height: 4px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 1.75rem;
}

.signin-brand h1 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1rem;
}

.signin-brand p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.08rem;
  max-width: 34ch;
  margin: 0;
}

.signin-form {
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.signin-form-inner { width: 100%; max-width: 360px; }

.signin-form h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.signin-form .form-control { padding: 0.7rem 0.85rem; font-size: 1.02rem; }

.signin-form .btn { padding: 0.7rem 1rem; font-size: 1.02rem; width: 100%; }

.signin-flash { margin-bottom: 1.25rem; }

@media (max-width: 820px) {
  .signin { grid-template-columns: 1fr; min-height: 100vh; }
  .signin-brand { padding: 2.5rem 1.75rem 2rem; }
  .signin-brand h1 { font-size: 2.4rem; }
  .signin-brand p { font-size: 1rem; }
  .signin-form { padding: 2rem 1.75rem 3rem; align-items: flex-start; }
  .signin-form-inner { max-width: none; }
}

/* --------------------------------------------------------------------------
   Print: the inspection report as a shareable document
   -------------------------------------------------------------------------- */

@media print {
  @page { margin: 14mm; }

  body { background: #fff; font-size: 11pt; }

  .app-navbar,
  .no-print,
  .btn,
  .alert-dismissible .btn-close { display: none !important; }

  .container { max-width: none; width: 100%; padding: 0; }

  .card {
    border: none;
    border-radius: 0;
    padding: 0 !important;
    margin: 0 0 0.6rem !important;
  }

  /* Collapsed sections must print open, or the report arrives half empty */
  .collapse { display: block !important; height: auto !important; visibility: visible !important; }

  .items-category-header { break-after: avoid; }
  table, .photo-row { break-inside: avoid; }
  h5, h6, .section-head { break-after: avoid; }

  .photo-thumb { width: 30%; height: auto; max-height: 62mm; border: 1px solid #ccc; }

  a { text-decoration: none; color: #000; }

  .print-header {
    display: block !important;
    border-bottom: 2px solid var(--teal);
    padding-bottom: 6pt;
    margin-bottom: 10pt;
  }
}

.print-header { display: none; }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tile:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Inspection form: the 52-item checklist grid
   -------------------------------------------------------------------------- */

.checklist-item {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  height: 100%;
  transition: border-color 0.14s ease;
}

.checklist-item:hover { border-color: var(--teal); }

.checklist-item label {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-right: 0.5rem;
  line-height: 1.25;
}

.checklist-subcategory { color: var(--teal-deep); }

/* ==========================================================================
   Resilience layer
   Field staff work on mobile data where a CDN can be slow or briefly fail.
   These rules restate the handful of Bootstrap primitives the app depends on
   for basic legibility, so a page that loads without the CDN is still
   readable and usable rather than a stack of unstyled text.
   Bootstrap, when it loads, wins on everything it defines.
   ========================================================================== */

/* The single most important fallback: without border-box, every padded
   full-width element overflows its column and the page scrolls sideways. */
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; overflow-x: hidden; }

img { max-width: 100%; }

.form-label { display: block; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn:hover { text-decoration: none; }

.form-control, .form-select { display: block; width: 100%; }

.table { width: 100%; border-collapse: collapse; }

.card { display: block; }

.text-muted { color: var(--muted); }
.text-end   { text-align: right; }
.text-center{ text-align: center; }
.fw-semibold{ font-weight: 600; }
.small      { font-size: 0.88rem; }

.d-flex { display: flex; }
.d-inline { display: inline; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.flex-grow-1 { flex-grow: 1; }

/* Spacing and grid primitives, so a CDN-less page keeps its rhythm */
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.me-3{margin-right:1rem}.ms-auto{margin-left:auto}
.p-4{padding:1.5rem}.pb-5{padding-bottom:3rem}.pt-4{padding-top:1.5rem}
.gap-2{gap:.5rem}.gap-3{gap:1rem}
.w-100{width:100%}
.row{display:flex;flex-wrap:wrap;margin-inline:-.5rem}
.row > *{padding-inline:.5rem}
.g-2 > *{margin-bottom:.5rem}.g-3 > *{margin-bottom:1rem}
.col-6{flex:0 0 50%;max-width:50%}
.col-md-4{flex:0 0 33.333%;max-width:33.333%}
.col-md-5{flex:0 0 41.666%;max-width:41.666%}
.col-md-6{flex:0 0 50%;max-width:50%}
.col-md-7{flex:0 0 58.333%;max-width:58.333%}
.col-sm-4{flex:0 0 33.333%;max-width:33.333%}
.col-sm-6{flex:0 0 50%;max-width:50%}
.col-lg-4{flex:0 0 33.333%;max-width:33.333%}
.col-lg-8{flex:0 0 66.666%;max-width:66.666%}
.col-lg-9{flex:0 0 75%;max-width:75%}
.col-md-12,.col-lg-12{flex:0 0 100%;max-width:100%}
.table-responsive{overflow-x:auto}
@media (max-width: 767.98px){
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"],
  .row > [class*="col-sm-"]{flex:0 0 100%;max-width:100%}
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.brand-logo { height: 30px; width: auto; display: block; }

@media (max-width: 575.98px) { .brand-logo { height: 26px; } }

.signin-brand .signin-mark {
  width: 64px;
  height: 64px;
  display: block;
  margin-bottom: 1.75rem;
  border-radius: 15px;
}

.wordmark-ng { color: var(--teal); }

/* Scoped to beat `.signin-brand p`, which would otherwise win on specificity
   and flatten the slogan back into body copy. */
.signin-brand .signin-slogan {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: #fff;
  margin: 0.35rem 0 1.1rem;
  letter-spacing: 0.01em;
  max-width: none;
}

@media (max-width: 820px) {
  .signin-brand .signin-mark { width: 52px; height: 52px; margin-bottom: 1.25rem; }
  .signin-brand .signin-slogan { font-size: 1.2rem; }
}

/* Printable report letterhead */
.print-logo { height: 34px; width: auto; display: block; margin-bottom: 0.6rem; }

.print-doc-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0;
}

@media print {
  .print-logo { height: 12mm; margin-bottom: 3mm; }
  .print-doc-title { font-size: 15pt; }
}

/* --------------------------------------------------------------------------
   Pivot tables (premium sales, weekly items analysis)
   -------------------------------------------------------------------------- */

.pivot-table th,
.pivot-table td {
  white-space: nowrap;
  text-align: center;
  border: 1px solid var(--line);
}

.pivot-table thead th { background: var(--surface-sunk); }

.pivot-table .category-header {
  background: var(--teal-wash);
  color: var(--teal-deep);
  font-weight: 600;
}

/* The row label stays put while the model columns scroll sideways -- without
   this, scrolling right leaves a wall of numbers with nothing to identify
   which shop each row belongs to.

   Scoped deliberately: the header has two rows, and only the FIRST row's
   first cell is the row-label column (it spans both via rowspan). The second
   header row starts with a model name, which must scroll away like the rest
   rather than being pinned on top of the label. */
.pivot-table thead > tr:first-child > th:first-child,
.pivot-table tbody > tr > td:first-child {
  position: sticky;
  left: 0;
  text-align: left;
  border-right: 2px solid var(--line-strong);
}

.pivot-table tbody > tr > td:first-child {
  z-index: 2;
  background: var(--surface);
}

.pivot-table thead > tr:first-child > th:first-child {
  z-index: 3;
  background: var(--surface-sunk);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Idle sign-out warning
   -------------------------------------------------------------------------- */

.idle-warning {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1080;
  background: var(--ink);
  color: #fff;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  box-shadow: 0 14px 34px rgba(19, 34, 31, 0.3);
  max-width: calc(100vw - 2rem);
  text-align: center;
}

.idle-warning[hidden] { display: none; }

@media print { .idle-warning { display: none !important; } }

/* --------------------------------------------------------------------------
   Profile pictures
   Falls back to initials so a row never has an empty hole where a face
   should be, and the layout doesn't shift once a picture is added.
   -------------------------------------------------------------------------- */

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-initials {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--teal-deep);
  background: var(--teal-wash);
  border-color: transparent;
  user-select: none;
}

.avatar-sm { width: 28px; height: 28px; }
.avatar-sm.avatar-initials { font-size: 0.78rem; }

.avatar-lg { width: 92px; height: 92px; }
.avatar-lg.avatar-initials { font-size: 2rem; }

.avatar-nav {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.28);
}

.avatar-nav.avatar-initials {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.user-cell { display: flex; align-items: center; gap: 0.6rem; }

/* --------------------------------------------------------------------------
   Phone polish
   The dashboard is the first thing field staff see each morning, usually
   one-handed, often in sunlight. Tiles get taller, text gets larger, and the
   teal edge is thicker so the page reads as a set of buttons rather than a
   pale sheet of cards.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .tile {
    padding: 1.15rem 1.2rem;
    border-left-width: 6px;
    display: flex;
    align-items: center;
    min-height: 68px;
    box-shadow: 0 1px 2px rgba(19, 34, 31, 0.06);
  }

  .tile-label { font-size: 1.12rem; }

  .tile:active {
    background: var(--teal-wash);
    border-color: var(--teal);
    transform: none;
  }

  .page-head { margin-bottom: 1rem; }
  .page-head h1 { font-size: 1.4rem; }

  .card { padding: 1.1rem !important; }

  /* Full-width action buttons are far easier to hit than inline ones. */
  .page-head .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   New-version bar
   Offered, not forced: nobody gets reloaded out of a half-finished form.
   -------------------------------------------------------------------------- */

.update-bar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1085;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: #fff;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  box-shadow: 0 14px 34px rgba(19, 34, 31, 0.32);
  max-width: calc(100vw - 2rem);
}

@media print { .update-bar { display: none !important; } }

/* Install page steps */
.install-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }

.install-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.1rem 2.6rem;
  border-left: 2px solid var(--line);
  margin-left: 0.9rem;
}

.install-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: -0.95rem;
  top: -0.15rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal-deep);
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Show / hide password
   Added to every password box so a typo can be caught before it becomes a
   sign-in problem. It reveals what's being typed now -- stored passwords are
   one-way hashes and can't be read back by anyone, including an admin.
   -------------------------------------------------------------------------- */

.pw-field { position: relative; }

.pw-field .form-control { padding-right: 3rem; }

.pw-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}

.pw-toggle:hover { color: var(--teal-deep); background: var(--surface-sunk); }

.pw-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  color: var(--teal-deep);
}

.pw-toggle[aria-pressed="true"] { color: var(--teal-deep); }

.pw-toggle svg { width: 1.15rem; height: 1.15rem; }

/* Bigger target on a phone, where mistyping is most likely. */
@media (max-width: 767.98px) {
  .pw-toggle { width: 2.6rem; height: 2.6rem; }
  .pw-field .form-control { padding-right: 3.4rem; }
}

/* Required-field marker on the inspection form */
.req {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--stop);
  background: var(--stop-wash);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Highlight whichever section still needs filling in */
.section-incomplete { border-left: 4px solid var(--warn); padding-left: 0.75rem; }

/* Month picker: wide enough that the dropdown arrow doesn't sit on the text */
.month-picker {
  min-width: 11rem;
  padding-right: 2.25rem;
}