/* ============================================================
   TRYGGBUILT Construction Management Portal — theme layer
   Aesthetic: the client's own branded paper forms, alive on a
   phone. Deep forest-green chrome, warm cream "paper" surfaces,
   condensed industrial type, gloved-thumb-sized targets.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-semi-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-semi-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-semi-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-semi-700.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  --tb-pine-950: #0E1B15;
  --tb-pine-900: #14291E;   /* header band on the paper forms */
  --tb-pine-800: #1E4B2E;   /* brand green — section bars */
  --tb-pine-700: #2A5F3C;
  --tb-pine-600: #3A7350;
  --tb-pine-100: #DFE9E0;
  --tb-pine-050: #EEF3EE;

  --tb-paper:  #F7F4EC;     /* page background */
  --tb-cream:  #F3EEE0;     /* logo-card cream */
  --tb-card:   #FFFDF8;     /* card surfaces */
  --tb-ink:    #212A22;
  --tb-muted:  #68715F;
  --tb-line:   #E2DECE;
  --tb-line-2: #CFC9B4;

  --tb-amber:  #E8A33D;     /* action accent */
  --tb-amber-deep: #C97F1B;
  --tb-terra:  #C65D39;

  --tb-pass:   #2F7D4C;
  --tb-fail:   #BC4430;
  --tb-na:     #8B927F;

  --tb-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --tb-body: 'Barlow Semi Condensed', 'Segoe UI', sans-serif;

  --tb-radius: 14px;
  --tb-radius-sm: 9px;
  --tb-shadow: 0 1px 2px rgba(26, 34, 24, .05), 0 10px 24px -12px rgba(26, 34, 24, .22);
  --tb-shadow-lift: 0 3px 6px rgba(26, 34, 24, .08), 0 16px 32px -12px rgba(26, 34, 24, .28);
  --tb-tap: 48px;           /* minimum touch target */

  accent-color: var(--tb-pine-700); /* native checkboxes/radios/progress match the brand */
}

::selection { background: var(--tb-amber); color: var(--tb-pine-950); }

/* focus is amber everywhere — one visible language for keyboard users */
:focus-visible { outline: 3px solid rgba(232, 163, 61, .6); outline-offset: 2px; }

/* themed thin scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--tb-line-2); border-radius: 6px; border: 2px solid var(--tb-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--tb-pine-600); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Base ---------- */
html { scroll-padding-top: 72px; }

body {
  font-family: var(--tb-body);
  font-size: 1rem;
  color: var(--tb-ink);
  background-color: var(--tb-paper);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* room for bottom nav */
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4, .tb-display {
  font-family: var(--tb-display);
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--tb-ink);
}
h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }

a { color: var(--tb-pine-700); }
a:hover { color: var(--tb-pine-800); }

/* iOS: 16px inputs prevent focus zoom */
.form-control, .form-select { font-size: 1rem; }

/* ---------- App bar ---------- */
.tb-appbar {
  background: linear-gradient(180deg, var(--tb-pine-900), var(--tb-pine-950));
  color: var(--tb-cream);
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 10px rgba(10, 20, 14, .35);
  border-bottom: 1px solid rgba(232, 163, 61, .28); /* amber hairline, echoes the sign-off rule on the paper forms */
  padding-top: env(safe-area-inset-top);
}
.tb-appbar .inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding: 0 1.15rem;
}
@media (min-width: 768px) {
  .tb-appbar .inner { padding: 0 1.75rem; }
}
.tb-brand {
  display: flex; align-items: center; line-height: 1;
  color: var(--tb-cream); text-decoration: none;
}
.tb-brand:hover { color: #fff; }
/* "brand-mark", NOT "mark" — Bootstrap's .mark helper paints a highlight background */
.tb-brand .brand-mark { width: 34px; height: auto; margin-right: .6rem; flex-shrink: 0; }
.tb-brand .stack { display: flex; flex-direction: column; }
.tb-brand .word {
  font-family: var(--tb-display); font-weight: 700;
  font-size: 1.45rem; letter-spacing: .04em;
}
.tb-brand .sub {
  font-size: .58rem; letter-spacing: .34em; font-weight: 600;
  color: rgba(243, 238, 224, .72); margin-top: 2px; text-transform: uppercase;
}

.tb-topnav { display: none; margin-left: 1.25rem; gap: .25rem; }
@media (min-width: 768px) { .tb-topnav { display: flex; } }
.tb-topnav a {
  color: rgba(243, 238, 224, .85); text-decoration: none;
  font-weight: 600; padding: .55rem .8rem; border-radius: 8px;
  font-size: .95rem;
}
.tb-topnav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.tb-topnav a.active {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--tb-amber);
  border-radius: 8px 8px 0 0;
}

.tb-avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tb-amber); color: var(--tb-pine-950);
  border: 0; font-weight: 700; font-family: var(--tb-display);
  font-size: 1.05rem; letter-spacing: .02em;
}
.tb-avatar-btn:hover { background: #f0b357; }

/* ---------- Bottom tab bar (phones) ---------- */
.tb-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex;
  background: rgba(14, 27, 21, .94);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid rgba(243, 238, 224, .1);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) { .tb-tabbar { display: none; } }
.tb-tabbar a {
  position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 9px 2px 7px;
  min-height: var(--tb-tap);
  color: rgba(243, 238, 224, .62); text-decoration: none;
  font-size: .66rem; font-weight: 600; letter-spacing: .05em;
  transition: color .15s ease;
}
.tb-tabbar a i { font-size: 1.25rem; line-height: 1; transition: transform .15s ease; }
.tb-tabbar a.active { color: var(--tb-amber); }
.tb-tabbar a.active i { transform: translateY(-1px); }
.tb-tabbar a.active::before {
  content: "";
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--tb-amber);
}

/* ---------- Cards & section bars ---------- */
.tb-card {
  background: var(--tb-card);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  overflow: hidden;
}
.tb-card + .tb-card { margin-top: 1rem; }

.section-bar {
  background: linear-gradient(120deg, var(--tb-pine-800), var(--tb-pine-700) 130%);
  color: #fff;
  font-family: var(--tb-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.02rem;
  padding: .6rem 1.15rem;
  display: flex; align-items: center; gap: .5rem;
}
.section-bar > i:first-child { color: var(--tb-amber); font-size: 1.05em; }
.section-bar .count {
  margin-left: auto; font-family: var(--tb-body); font-weight: 600;
  font-size: .78rem; letter-spacing: 0; text-transform: none;
  background: rgba(255, 255, 255, .14); border-radius: 20px; padding: .1rem .6rem;
}
.tb-card .body { padding: 1.1rem 1.15rem 1.25rem; }
@media (min-width: 768px) {
  .tb-card .body { padding: 1.35rem 1.5rem 1.5rem; }
}

/* dashboard tiles */
.tb-tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--tb-card);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  padding: 1.1rem 1.15rem;
  height: 100%;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  animation: tb-rise .38s both;
}
.tb-tile:hover {
  transform: translateY(-2px);
  border-color: var(--tb-pine-600);
  box-shadow: 0 4px 6px rgba(26,34,24,.07), 0 14px 28px -10px rgba(26,34,24,.24);
  color: inherit;
}
.tb-tile .icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--tb-pine-050); color: var(--tb-pine-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: .6rem;
}
.tb-tile h3 { font-size: 1.05rem; margin: 0; }
.tb-tile .meta { color: var(--tb-muted); font-size: .85rem; }
.tb-tile.locked { opacity: .45; pointer-events: none; }
@keyframes tb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tb-stagger > *:nth-child(1) .tb-tile { animation-delay: .02s; }
.tb-stagger > *:nth-child(2) .tb-tile { animation-delay: .06s; }
.tb-stagger > *:nth-child(3) .tb-tile { animation-delay: .10s; }
.tb-stagger > *:nth-child(4) .tb-tile { animation-delay: .14s; }
.tb-stagger > *:nth-child(5) .tb-tile { animation-delay: .18s; }
.tb-stagger > *:nth-child(6) .tb-tile { animation-delay: .22s; }
.tb-stagger > *:nth-child(7) .tb-tile { animation-delay: .26s; }
.tb-stagger > *:nth-child(8) .tb-tile { animation-delay: .30s; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--tb-radius-sm); font-weight: 600;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-tb {
  background: linear-gradient(180deg, var(--tb-pine-700), var(--tb-pine-800));
  border-color: var(--tb-pine-800); color: #fff;
  box-shadow: 0 2px 6px -2px rgba(20, 41, 30, .5);
}
.btn-tb:hover, .btn-tb:focus {
  background: linear-gradient(180deg, var(--tb-pine-600), var(--tb-pine-700));
  border-color: var(--tb-pine-700); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(20, 41, 30, .55);
}
.btn-amber {
  background: linear-gradient(180deg, #F2B24E, var(--tb-amber));
  border-color: var(--tb-amber-deep);
  color: var(--tb-pine-950); font-weight: 700;
  box-shadow: 0 2px 8px -2px rgba(201, 127, 27, .55);
}
.btn-amber:hover, .btn-amber:focus {
  background: linear-gradient(180deg, #F6BC61, #EFAC48);
  border-color: var(--tb-amber-deep); color: var(--tb-pine-950);
  box-shadow: 0 4px 14px -4px rgba(201, 127, 27, .6);
}
.btn-outline-tb {
  color: var(--tb-pine-800); border-color: var(--tb-pine-600);
}
.btn-outline-tb:hover { background: var(--tb-pine-050); color: var(--tb-pine-800); border-color: var(--tb-pine-600); }
@media (max-width: 767.98px) {
  .btn-lg-touch { min-height: var(--tb-tap); display: inline-flex; align-items: center; justify-content: center; }
}

/* full-width sticky action bar on phones for form save/submit */
.tb-actionbar {
  position: sticky; bottom: calc(56px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(247,244,236,0), var(--tb-paper) 30%);
  padding: .75rem 0 .4rem;
  z-index: 900;
}
@media (min-width: 768px) {
  .tb-actionbar { position: static; background: none; padding: 1rem 0 0; }
}

/* ---------- Checklist answer segments (P / F / N/A) ---------- */
.seg {
  display: flex; gap: 6px;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  min-width: 52px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .25rem .6rem;
  border: 1.5px solid var(--tb-line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--tb-muted);
  font-weight: 700; font-size: .85rem;
  cursor: pointer;
  transition: all .1s ease;
  user-select: none;
}
.seg input:focus-visible + label { outline: 3px solid var(--tb-amber); outline-offset: 1px; }
.seg input.ans-pass:checked + label { background: var(--tb-pass); border-color: var(--tb-pass); color: #fff; }
.seg input.ans-fail:checked + label { background: var(--tb-fail); border-color: var(--tb-fail); color: #fff; }
.seg input.ans-na:checked + label   { background: var(--tb-na); border-color: var(--tb-na); color: #fff; }

.check-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--tb-line);
}
@media (min-width: 768px) {
  .check-row { padding: .9rem 1.5rem; }
}
.check-row:last-child { border-bottom: 0; }
.check-row:nth-child(even) { background: rgba(238, 243, 238, .45); }
.check-row .num {
  font-family: var(--tb-display); font-weight: 700; color: var(--tb-pine-700);
  min-width: 1.6rem; text-align: right; padding-top: .45rem;
}
.check-row .text { flex: 1; padding-top: .42rem; }
/* keep the item number and content on one line on phones: flex wrap is decided
   on the BASE size, so the content column needs flex-basis 0 (not just min-width) */
.check-row > .flex-grow-1 { flex-basis: 0%; min-width: 0; }
.check-row .text { min-width: 0; }
.check-row.answer-fail { box-shadow: inset 3px 0 0 var(--tb-fail); }
@media (max-width: 575.98px) {
  .check-row { flex-wrap: wrap; }
  .check-row .seg { width: 100%; justify-content: flex-end; }
  .check-row .seg label { flex: 1; max-width: 110px; }
}

/* ---------- Status badges ---------- */
.badge-tb {
  font-weight: 600; border-radius: 6px; padding: .35em .6em; font-size: .78rem;
  letter-spacing: .015em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.badge-active    { background: var(--tb-pass); color: #fff; }
.badge-draft     { background: #EFE9D6; color: #7A6E43; }
.badge-submitted { background: var(--tb-pine-100); color: var(--tb-pine-800); }
.badge-approved  { background: var(--tb-pass); color: #fff; }
.badge-rejected  { background: var(--tb-fail); color: #fff; }
.badge-onhold    { background: var(--tb-amber); color: var(--tb-pine-950); }
.badge-completed { background: var(--tb-pine-800); color: #fff; }
.badge-archived  { background: var(--tb-na); color: #fff; }

/* ---------- Tables (desktop) → stacked cards (phones) ---------- */
.table-tb { --bs-table-bg: transparent; margin-bottom: 0; }
.table-tb thead th {
  background: var(--tb-pine-800); color: #fff;
  font-family: var(--tb-display); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; font-size: .8rem;
  border: 0; white-space: nowrap;
}
.table-tb td { border-color: var(--tb-line); vertical-align: middle; }
.table-tb th, .table-tb td { padding: .6rem .75rem; }
.table-tb { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .table-tb tbody tr:nth-child(even) td { background: rgba(238, 243, 238, .4); }
  .table-tb tbody tr:hover td { background: rgba(232, 163, 61, .08); }
}
.table-tb th:first-child, .table-tb td:first-child { padding-left: 1.15rem; }
.table-tb th:last-child, .table-tb td:last-child { padding-right: 1.15rem; }
@media (min-width: 768px) {
  .table-tb th:first-child, .table-tb td:first-child { padding-left: 1.5rem; }
  .table-tb th:last-child, .table-tb td:last-child { padding-right: 1.5rem; }
}

@media (max-width: 767.98px) {
  .stack-sm thead { display: none; }
  .stack-sm tbody tr {
    display: block;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    margin: .35rem .75rem .85rem;
    background: #fff;
    box-shadow: var(--tb-shadow);
    padding: .5rem .35rem;
  }
  .stack-sm td, .stack-sm td:first-child, .stack-sm td:last-child {
    display: flex; justify-content: space-between; gap: 1rem;
    border: 0; padding: .45rem .85rem;
    text-align: right;
  }
  .stack-sm td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--tb-muted);
    text-align: left; flex-shrink: 0;
  }
  .stack-sm td.no-label { justify-content: flex-end; }
  .stack-sm td.no-label::before { display: none; }
}

/* ---------- Forms ---------- */
.form-label { font-weight: 600; margin-bottom: .3rem; }
.form-control, .form-select {
  border-color: var(--tb-line-2);
  border-radius: var(--tb-radius-sm);
  background-color: #fff;
  min-height: 44px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: #A9AF9F; }
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: var(--tb-pine-600); }
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-select:focus {
  border-color: var(--tb-pine-600);
  box-shadow: 0 0 0 .2rem rgba(42, 95, 60, .18);
}
/* pine chevron on selects instead of Bootstrap's gray */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232A5F3C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
/* server-side validation states in brand colors */
.input-validation-error, .input-validation-error:focus {
  border-color: var(--tb-fail);
  box-shadow: 0 0 0 .2rem rgba(188, 68, 48, .15);
}
.field-validation-error, .validation-summary-errors { color: var(--tb-fail); }
.field-hint { font-size: .8rem; color: var(--tb-muted); }
.tb-readonly {
  background: var(--tb-pine-050); border-radius: var(--tb-radius-sm);
  padding: .5rem .75rem; min-height: 44px; display: flex; align-items: center;
  font-weight: 600; color: var(--tb-pine-800);
}

/* repeating table editors */
.rowgrid { border: 1px solid var(--tb-line); border-radius: var(--tb-radius-sm); overflow: hidden; }
.rowgrid .rg-row { border-bottom: 1px solid var(--tb-line); padding: .9rem 1rem; background: #fff; }
.rowgrid .rg-row:nth-child(even) { background: rgba(238, 243, 238, .4); }
.rowgrid .rg-row:last-child { border-bottom: 0; }
.rg-remove { color: var(--tb-fail); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(58, 115, 80, .55), transparent 60%),
    linear-gradient(180deg, var(--tb-pine-900) 0%, var(--tb-pine-950) 100%);
  position: relative; overflow: hidden;
}
.login-wrap::before {
  /* faint mountain silhouette */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 42vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cpath d='M0 320 L260 140 L360 210 L520 40 L660 180 L780 90 L960 240 L1060 190 L1200 320 Z' fill='%230B1712' opacity='.55'/%3E%3C/svg%3E") bottom / cover no-repeat;
  pointer-events: none;
}
.login-wrap::after {
  /* second, closer ridge for depth */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 26vh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240 L180 120 L300 180 L470 60 L640 170 L820 100 L1000 200 L1200 130 L1200 240 Z' fill='%23081209' opacity='.7'/%3E%3C/svg%3E") bottom / cover no-repeat;
  pointer-events: none;
}
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: var(--tb-cream);
  border-radius: 18px;
  border-top: 4px solid var(--tb-amber);
  box-shadow: 0 24px 70px -18px rgba(0, 0, 0, .55);
  padding: 2rem 1.75rem;
  animation: tb-rise .4s both;
}
.login-card .logo { display: block; width: 168px; margin: 0 auto .4rem; mix-blend-mode: multiply; }

/* ---------- Misc ---------- */
/* main content gutters: a little wider than Bootstrap's default so nothing
   sits close to the screen edge, esp. on phones */
.tb-main {
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  padding-bottom: 1.75rem;
}
@media (min-width: 768px) {
  .tb-main { padding-left: 1.75rem; padding-right: 1.75rem; padding-bottom: 2.5rem; }
}

/* slight site footer: credit left, version right */
.tb-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 1.15rem;
  font-size: .7rem; color: var(--tb-muted);
  border-top: 1px solid rgba(20, 41, 30, .12);
  letter-spacing: .02em;
}
@media (min-width: 768px) { .tb-footer { padding-left: 1.75rem; padding-right: 1.75rem; } }
.tb-footer a { color: inherit; font-weight: 600; text-decoration: none; }
.tb-footer a:hover { color: var(--tb-amber); text-decoration: underline; }
/* on the dark stand-alone pages (login / set password / shared file) it
   overlays the bottom of the scene instead of adding a light band */
.login-wrap .tb-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 0; color: rgba(243, 238, 224, .5);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}

.tb-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0 1.1rem; }
.tb-page-head .spacer { flex: 1; }
/* amber tick under page titles — plan-sheet title vibe */
.tb-page-head h1::after {
  content: "";
  display: block;
  width: 46px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tb-amber), rgba(232, 163, 61, .25));
  margin-top: .4rem;
}
.tb-breadcrumb { font-size: .85rem; color: var(--tb-muted); margin: 1.1rem 0 .1rem; }
.tb-breadcrumb a { text-decoration: none; color: var(--tb-pine-700); font-weight: 600; }
.tb-breadcrumb a:hover { color: var(--tb-pine-800); text-decoration: underline; }
.tb-breadcrumb + .tb-page-head { margin-top: .5rem; }

.empty-state {
  text-align: center; color: var(--tb-muted); padding: 2.5rem 1rem;
}
.empty-state i { font-size: 2.2rem; color: var(--tb-line-2); display: block; margin-bottom: .5rem; }

.tb-toast-zone { position: fixed; top: 70px; right: 12px; left: 12px; z-index: 2000; }
@media (min-width: 576px) { .tb-toast-zone { left: auto; width: 360px; } }
.tb-flash {
  background: var(--tb-pine-800); color: #fff;
  border-radius: 10px; padding: .8rem 1rem; box-shadow: var(--tb-shadow-lift);
  border-left: 4px solid var(--tb-amber);
  display: flex; gap: .6rem; align-items: center;
  animation: tb-rise .3s both;
}
.tb-flash i { color: var(--tb-amber); }
.tb-flash.error { background: var(--tb-fail); border-left-color: #F3D0C8; }
.tb-flash.error i { color: #F3D0C8; }

.sig-pad { border: 1.5px dashed var(--tb-line-2); border-radius: var(--tb-radius-sm); background: #fff; width: 100%; height: 130px; touch-action: none; margin-bottom: .35rem; }
.sig-img { max-height: 90px; }

/* ---------- QA/QC document library (file-manager) ---------- */
.path-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.path-chips .chip {
  display: inline-flex; align-items: center;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--tb-pine-050); border: 1px solid var(--tb-line);
  color: var(--tb-pine-800); font-weight: 600; font-size: .85rem;
  text-decoration: none; transition: background-color .12s ease;
}
.path-chips a.chip:hover { background: var(--tb-pine-100); }
.path-chips .chip.current { background: var(--tb-pine-800); border-color: var(--tb-pine-800); color: #fff; }

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .65rem;
  padding: .25rem 1.15rem 1rem;
}
@media (min-width: 768px) { .folder-grid { padding: .25rem 1.5rem 1.1rem; } }
.folder-tile {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .8rem; min-height: var(--tb-tap);
  background: #fff; border: 1px solid var(--tb-line); border-radius: 10px;
  text-decoration: none; color: var(--tb-ink);
  transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease;
}
.folder-tile:hover { transform: translateY(-1px); border-color: var(--tb-pine-600); box-shadow: var(--tb-shadow); color: var(--tb-ink); }
.folder-tile i { color: var(--tb-amber); font-size: 1.35rem; }
.folder-tile .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dz-hint {
  padding: .5rem 1.15rem .9rem; color: var(--tb-muted); font-size: .8rem;
}
@media (max-width: 767.98px) { .dz-hint { display: none; } }
.dropzone { position: relative; }
.dropzone .dz-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1rem; text-align: center;
  background: rgba(238, 243, 238, .93);
  border: 2px dashed var(--tb-pine-600); border-radius: var(--tb-radius);
  color: var(--tb-pine-800); font-weight: 700;
}
.dropzone .dz-overlay i { font-size: 2.2rem; color: var(--tb-pine-600); }
.dropzone.dragover .dz-overlay, .dropzone.dz-busy .dz-overlay { display: flex; }
.dropzone.dz-busy .dz-overlay { border-style: solid; }

/* week strip for timesheets */
.week-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.week-strip a {
  flex: 1; min-width: 44px; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--tb-line);
  background: #fff; text-decoration: none; color: var(--tb-ink);
}
.week-strip a .d { font-size: .68rem; color: var(--tb-muted); text-transform: uppercase; font-weight: 600; }
.week-strip a .n { font-family: var(--tb-display); font-weight: 700; font-size: 1.1rem; }
.week-strip a .h { font-size: .68rem; color: var(--tb-pine-700); font-weight: 700; }
.week-strip .n, .display-6 { font-variant-numeric: tabular-nums; }
.week-strip a { transition: transform .1s ease, box-shadow .15s ease; }
.week-strip a:hover { transform: translateY(-1px); box-shadow: var(--tb-shadow); }
.week-strip a.today { border-color: var(--tb-amber); box-shadow: inset 0 -3px 0 var(--tb-amber); }
.week-strip a.sel {
  background: linear-gradient(160deg, var(--tb-pine-700), var(--tb-pine-800));
  border-color: var(--tb-pine-800);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(20, 41, 30, .5);
}
.week-strip a.sel .d, .week-strip a.sel .h { color: rgba(255,255,255,.75); }

/* print: forms should print like the branded paper docs */
@media print {
  .tb-appbar, .tb-tabbar, .tb-actionbar, .btn, .tb-toast-zone, .tb-footer { display: none !important; }
  body { background: #fff; padding: 0; }
  .tb-card { box-shadow: none; break-inside: avoid; }
}

/* QA/QC library — per-user storage meter + drop strip */
.storage-meter { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.storage-meter .bar { flex: 0 0 180px; height: 8px; border-radius: 4px; background: var(--tb-pine-050); border: 1px solid var(--tb-line); overflow: hidden; }
.storage-meter .bar span { display: block; height: 100%; border-radius: 4px; background: var(--tb-pine-600); }
.storage-meter .bar span.warn { background: var(--tb-amber); }
.storage-meter .bar span.crit { background: var(--tb-fail); }
.dz-strip {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  width: calc(100% - 2.3rem); margin: .35rem 1.15rem .9rem; padding: 1.1rem;
  border: 2px dashed var(--tb-line-2); border-radius: var(--tb-radius-sm);
  background: rgba(238, 243, 238, .35); color: var(--tb-pine-800); font-weight: 700;
  cursor: pointer; transition: border-color .12s ease, background-color .12s ease;
}
.dz-strip:hover { border-color: var(--tb-pine-600); background: var(--tb-pine-050); }
.dz-strip i { font-size: 1.8rem; color: var(--tb-pine-600); }
@media (min-width: 768px) { .dz-strip { width: calc(100% - 3rem); margin: .35rem 1.5rem 1rem; } }

/* ---------- Building tiles: the primary division, visually above folders ---------- */
.building-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .75rem;
  padding: .35rem 1.15rem 1rem;
}
@media (min-width: 768px) { .building-grid { padding: .35rem 1.5rem 1.1rem; } }
.building-tile {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.15rem; min-height: 68px; width: 100%; text-align: left;
  border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, var(--tb-pine-800), var(--tb-pine-700) 120%);
  border: 1px solid var(--tb-pine-800);
  color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px -4px rgba(20, 41, 30, .45);
  transition: transform .1s ease, box-shadow .15s ease;
}
.building-tile:hover { transform: translateY(-2px); box-shadow: var(--tb-shadow-lift); color: #fff; }
.building-tile i { font-size: 1.55rem; color: var(--tb-amber); }
.building-tile .name {
  font-family: var(--tb-display); font-size: 1.1rem; letter-spacing: .03em;
  text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.building-tile .cnt {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255, 255, 255, .18); border-radius: 999px;
  padding: .15rem .65rem; font-size: .8rem; font-weight: 600; font-family: var(--tb-body);
}
.building-tile.general {
  background: var(--tb-pine-050); border-color: var(--tb-line);
  color: var(--tb-pine-800); box-shadow: none;
}
.building-tile.general:hover { color: var(--tb-pine-800); border-color: var(--tb-pine-600); }
.building-tile.general i { color: var(--tb-pine-600); }
.building-tile.general .cnt { background: var(--tb-pine-100); }
.building-tile.new {
  background: transparent; border: 2px dashed var(--tb-line-2);
  color: var(--tb-pine-700); box-shadow: none; cursor: pointer;
}
.building-tile.new:hover { border-color: var(--tb-pine-600); background: var(--tb-pine-050); color: var(--tb-pine-800); }
.building-tile.new i { color: var(--tb-pine-600); }

/* ================================================================
   QA/QC file-manager interactions (context menu, drag-move, shares)
   Append-only block owned by Pages/Projects/Qaqc/Index.cshtml
   ================================================================ */
.ctx-menu {
  position: fixed; z-index: 2100; min-width: 190px;
  background: #fff; border: 1px solid var(--tb-line); border-radius: 10px;
  box-shadow: var(--tb-shadow-lift); padding: .3rem 0;
}
.ctx-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .85rem; border: 0; background: none;
  text-align: left; font-weight: 600; font-size: .9rem; color: var(--tb-ink);
}
.ctx-menu button:hover { background: var(--tb-pine-050); }
.ctx-menu button i { color: var(--tb-pine-600); width: 1.1rem; text-align: center; }
.ctx-menu button.danger { color: var(--tb-fail); }
.ctx-menu button.danger i { color: var(--tb-fail); }
.ctx-menu .sep { height: 1px; margin: .3rem .5rem; background: var(--tb-line); }

.drop-target-hover {
  outline: 2px dashed var(--tb-pine-600); outline-offset: 2px;
  background: var(--tb-pine-050) !important;
}
a.chip.drop-target-hover { outline-offset: 0; }

.share-ico { margin-left: .35rem; font-size: .85em; }
.share-ico.private, .ico-private { color: var(--tb-amber-deep); }
/* keep the public globe readable on the dark building tiles */
.building-tile:not(.general) .share-ico.text-success { color: #8FD8A4 !important; }
.building-tile:not(.general) .share-ico.private { color: var(--tb-amber) !important; }

.qq-kebab {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; min-width: 34px; min-height: 34px;
  border: 0; background: none; padding: .3rem .5rem; border-radius: 8px;
  color: var(--tb-muted); line-height: 1;
}
.qq-kebab:hover { background: var(--tb-pine-050); color: var(--tb-pine-800); }

.tile-wrap { position: relative; }
.tile-wrap > .folder-tile, .tile-wrap > .building-tile { width: 100%; height: 100%; }
.tile-wrap.has-kebab > .folder-tile { padding-right: 2.4rem; }
.tile-wrap.has-kebab > .building-tile { padding-right: 2.6rem; }
.tile-wrap .tile-kebab { position: absolute; top: 50%; right: .3rem; transform: translateY(-50%); z-index: 2; }
.tile-wrap .tile-kebab.on-dark { color: rgba(255, 255, 255, .75); }
.tile-wrap .tile-kebab.on-dark:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.qq-rename { display: inline-block; width: auto; max-width: 320px; }

/* ---------- QA/QC file preview modal (append-only block) ---------- */
.preview-img { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border-radius: 8px; }
.preview-frame { width: 100%; height: 72vh; border: 0; }
.preview-media { width: 100%; max-height: 72vh; }
.preview-text { max-height: 65vh; overflow: auto; background: #fff; border: 1px solid var(--tb-line); border-radius: 8px; padding: .9rem; font-size: .85rem; }
.preview-fallback { text-align: center; padding: 2.5rem 1rem; color: var(--tb-muted); }
.preview-fallback i { font-size: 3rem; display: block; margin-bottom: .5rem; }

/* ---------- Add-to-Home-Screen banner ---------- */
.a2hs-banner {
  position: fixed; left: .75rem; right: .75rem;
  bottom: calc(64px + env(safe-area-inset-bottom) + .6rem);
  z-index: 1900;
  display: flex; align-items: center; gap: .7rem;
  background: var(--tb-card); border: 1px solid var(--tb-line);
  border-radius: 14px; padding: .7rem .8rem;
  box-shadow: var(--tb-shadow-lift);
  animation: tb-rise .35s both;
}
.a2hs-banner.d-none { display: none !important; }
@media (min-width: 768px) { .a2hs-banner { max-width: 430px; left: auto; bottom: 1rem; right: 1rem; } }