/* ============================================================
   Toolbox Minute — brand theme
   Layers the Toolbox Minute design system on top of Bootstrap 5.
   Source of truth: /BrandKit (tokens copied here so wwwroot is
   self-contained). Bootstrap keeps all its functionality; this file
   re-skins it to the brand. Load AFTER bootstrap.min.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens  (sampled from the logo: yellow #F0C010,
      navy #205080, orange #E0761C)
   ------------------------------------------------------------ */
:root {
  /* Brand: Safety Yellow (hard hat) — signal only, never body text */
  --tm-yellow-100: #FDF3CC;
  --tm-yellow-200: #FAE69A;
  --tm-yellow-300: #F7D75C;
  --tm-yellow-500: #F0C010;
  --tm-yellow-600: #D4A60C;
  --tm-yellow-700: #A87E12;

  /* Brand: Work-site Navy (wordmark / clock body) */
  --tm-blue-50:  #EEF4F9;
  --tm-blue-100: #DCE8F2;
  --tm-blue-200: #B6CEE2;
  --tm-blue-300: #7FA8C9;
  --tm-blue-400: #4A7FAB;
  --tm-blue-500: #2D6398;
  --tm-blue-600: #205080;   /* primary brand color */
  --tm-blue-700: #1A4268;
  --tm-blue-800: #143350;
  --tm-blue-900: #0E2435;   /* ink */

  /* Brand: Site Orange (CTA) */
  --tm-orange-100: #FBEADB;
  --tm-orange-300: #F2B377;
  --tm-orange-500: #E0761C;
  --tm-orange-600: #C46315;
  --tm-orange-700: #9E4F11;

  /* Neutrals (cool, slate-tinted) */
  --tm-gray-0:   #FFFFFF;
  --tm-gray-50:  #F6F8FA;
  --tm-gray-100: #EDF1F4;
  --tm-gray-200: #DDE4EA;
  --tm-gray-300: #C3CDD6;
  --tm-gray-400: #97A5B1;
  --tm-gray-500: #6B7C8A;
  --tm-gray-600: #4E5E6B;
  --tm-gray-700: #38464F;
  --tm-gray-900: #1B262D;

  /* Status */
  --tm-green-500: #1E8A4C;
  --tm-green-100: #E2F3E9;
  --tm-red-500:   #D8232A;
  --tm-red-100:   #FBE4E5;
  --tm-amber-bg:  #FBF3D9;

  /* Semantic — surfaces */
  --surface-page:    var(--tm-gray-50);
  --surface-card:    var(--tm-gray-0);
  --surface-sunken:  var(--tm-gray-100);
  --surface-inverse: var(--tm-blue-900);
  --surface-brand:   var(--tm-blue-600);

  /* Semantic — text */
  --text-heading:   var(--tm-blue-900);
  --text-body:      var(--tm-gray-700);
  --text-muted:     var(--tm-gray-500);
  --text-inverse:   #F4F8FB;
  --text-inverse-muted: #9DB4C6;
  --text-link:      var(--tm-blue-500);
  --text-on-accent: #FFFFFF;
  --text-on-signal: var(--tm-blue-900);

  /* Semantic — actions */
  --action-primary:        var(--tm-orange-500);
  --action-primary-hover:  var(--tm-orange-600);
  --action-primary-press:  var(--tm-orange-700);
  --action-brand:          var(--tm-blue-600);
  --action-brand-hover:    var(--tm-blue-700);
  --action-brand-press:    var(--tm-blue-800);

  /* Semantic — signal / borders / status / focus */
  --signal:        var(--tm-yellow-500);
  --signal-hover:  var(--tm-yellow-600);
  --border-default: var(--tm-gray-200);
  --border-strong:  var(--tm-gray-300);
  --border-inverse: rgba(255,255,255,0.14);
  --status-pass:     var(--tm-green-500);
  --status-pass-bg:  var(--tm-green-100);
  --status-due:      var(--tm-yellow-600);
  --status-due-bg:   var(--tm-amber-bg);
  --status-overdue:  var(--tm-red-500);
  --status-overdue-bg: var(--tm-red-100);
  --focus-ring: 0 0 0 3px rgba(45, 99, 152, 0.35);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --tracking-caps: 0.08em;

  /* Radii / shadows / motion */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;
  --shadow-card:    0 1px 2px rgba(14, 36, 53, 0.06), 0 1px 3px rgba(14, 36, 53, 0.08);
  --shadow-raised:  0 4px 10px rgba(14, 36, 53, 0.10), 0 2px 4px rgba(14, 36, 53, 0.06);
  --shadow-overlay: 0 16px 40px rgba(14, 36, 53, 0.22), 0 4px 12px rgba(14, 36, 53, 0.10);
  --hazard-stripe: repeating-linear-gradient(135deg,
      var(--tm-yellow-500) 0 10px, var(--tm-blue-900) 10px 20px);
  --hazard-stripe-h: 5px;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ------------------------------------------------------------
   2. Bootstrap variable bridge  (re-points Bootstrap's theme
      to brand tokens — keeps every Bootstrap component working)
   ------------------------------------------------------------ */
:root {
  --bs-body-bg: var(--surface-page);
  --bs-body-color: var(--text-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 0.95rem;
  --bs-emphasis-color: var(--text-heading);
  --bs-secondary-color: var(--text-muted);

  --bs-primary: var(--tm-orange-500);
  --bs-primary-rgb: 224, 118, 28;
  --bs-secondary: var(--tm-gray-500);
  --bs-success: var(--tm-green-500);
  --bs-success-rgb: 30, 138, 76;
  --bs-danger: var(--tm-red-500);
  --bs-danger-rgb: 216, 35, 42;
  --bs-warning: var(--tm-yellow-600);
  --bs-info: var(--tm-blue-500);
  --bs-link-color: var(--text-link);
  --bs-link-color-rgb: 45, 99, 152;
  --bs-link-hover-color: var(--tm-blue-700);
  --bs-border-color: var(--border-default);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
}

/* ------------------------------------------------------------
   3. Base elements
   ------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--text-heading);
  text-wrap: balance;
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-heading);
}
p { text-wrap: pretty; }
a { color: var(--text-link); text-underline-offset: 2px; }
a:hover { color: var(--tm-blue-700); }
code, kbd, samp { font-family: var(--font-mono); }

/* Focus — 3px blue ring on every interactive */
.btn:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus,
.nav-link:focus-visible, .page-link:focus, a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
  border-color: var(--tm-blue-400);
}

/* ------------------------------------------------------------
   4. Brand utilities / motifs
   ------------------------------------------------------------ */
.tm-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.04; }
.tm-mono    { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tm-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
}
.tm-ink { color: var(--text-heading) !important; }
.tm-muted { color: var(--text-muted) !important; }
.tm-signal { color: var(--signal) !important; }

/* Hazard stripe — the brand's signature. Thin top accent, never a fill. */
.tm-hazard-top { position: relative; }
.tm-hazard-top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--hazard-stripe-h);
  background: var(--hazard-stripe);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.tm-stripe-rule { height: var(--hazard-stripe-h); background: var(--hazard-stripe); border: 0; }

/* Navy panel */
.tm-inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.tm-inverse h1, .tm-inverse h2, .tm-inverse h3, .tm-inverse h4 { color: #fff; }
.tm-inverse .tm-muted, .tm-inverse .text-muted { color: var(--text-inverse-muted) !important; }

/* Super-admin "acting as a company" banner — navy bar with a signal-yellow hazard edge */
.tm-acting-banner {
  background: var(--surface-inverse); color: var(--text-inverse);
  border-radius: 8px; border-left: 4px solid var(--signal);
}
.tm-acting-banner strong { color: #fff; }
/* Platform (super-admin) nav row sits below the company nav, slightly recessed */
.tm-platformnav { --bs-nav-pills-link-active-bg: var(--surface-inverse); }
.tm-platformnav .tm-eyebrow [data-lucide] { width: 1rem; height: 1rem; vertical-align: -2px; }

/* Numbered/iconed step chip — yellow signal tile, navy glyph */
.tm-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--signal); color: var(--tm-blue-900);
}
.tm-step-num [data-lucide] { width: 1.25rem; height: 1.25rem; }

/* Big stat number — the brand's hero graphic */
.tm-stat-value { font-family: var(--font-display); font-weight: 700; line-height: 1; color: var(--text-heading); font-size: clamp(2.2rem, 4vw, 3rem); }
.tm-stat-value.is-mono { font-family: var(--font-mono); font-weight: 700; }

/* Lucide icon sizing helpers */
[data-lucide] { width: 1.15em; height: 1.15em; stroke-width: 2; vertical-align: -0.18em; }
.tm-icon-lg [data-lucide], [data-lucide].tm-icon-lg { width: 1.4rem; height: 1.4rem; }

/* ------------------------------------------------------------
   5. App bar (navy top chrome)  — used by _Layout header
   ------------------------------------------------------------ */
.tm-appbar { background: var(--surface-inverse); border: 0; padding-top: .55rem; padding-bottom: .55rem; }
.tm-appbar .navbar-brand { display: inline-flex; align-items: center; gap: .55rem; padding: 0; }
.tm-appbar .tm-brand-tile {
  width: 34px; height: 34px; border-radius: 8px; background: #fff; padding: 2px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.tm-appbar .tm-brand-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tm-appbar .tm-wordmark {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.32rem; letter-spacing: 0.02em; line-height: 1; color: #fff;
}
.tm-appbar .tm-wordmark em { font-style: normal; color: var(--signal); }
.tm-appbar .nav-link { color: var(--text-inverse-muted); font-weight: 500; }
.tm-appbar .nav-link:hover, .tm-appbar .nav-link.active { color: #fff; }
.tm-appbar .btn-link.nav-link { text-decoration: none; }
.tm-appbar .navbar-toggler { border-color: var(--border-inverse); }
.tm-appbar .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(244,248,251,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ------------------------------------------------------------
   6. Buttons  (orange = the one CTA; navy = brand action)
   ------------------------------------------------------------ */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn-lg { --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1.4rem; --bs-btn-font-size: 1.06rem; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .8rem; }

.btn-primary {
  --bs-btn-bg: var(--action-primary); --bs-btn-border-color: var(--action-primary);
  --bs-btn-hover-bg: var(--action-primary-hover); --bs-btn-hover-border-color: var(--action-primary-hover);
  --bs-btn-active-bg: var(--action-primary-press); --bs-btn-active-border-color: var(--action-primary-press);
  --bs-btn-disabled-bg: var(--action-primary); --bs-btn-disabled-border-color: var(--action-primary);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-brand, .btn-navy {
  --bs-btn-bg: var(--action-brand); --bs-btn-border-color: var(--action-brand);
  --bs-btn-hover-bg: var(--action-brand-hover); --bs-btn-hover-border-color: var(--action-brand-hover);
  --bs-btn-active-bg: var(--action-brand-press); --bs-btn-active-border-color: var(--action-brand-press);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-success { --bs-btn-bg: var(--status-pass); --bs-btn-border-color: var(--status-pass); --bs-btn-hover-bg: #1A7A43; --bs-btn-hover-border-color: #1A7A43; --bs-btn-color:#fff; --bs-btn-hover-color:#fff; }
.btn-danger  { --bs-btn-bg: var(--status-overdue); --bs-btn-border-color: var(--status-overdue); --bs-btn-hover-bg: #B91C22; --bs-btn-hover-border-color: #B91C22; --bs-btn-color:#fff; --bs-btn-hover-color:#fff; }

/* Secondary / outline = white with slate border */
.btn-secondary, .btn-outline-secondary {
  --bs-btn-bg: #fff; --bs-btn-border-color: var(--border-strong); --bs-btn-color: var(--tm-blue-700);
  --bs-btn-hover-bg: var(--tm-gray-50); --bs-btn-hover-border-color: var(--tm-gray-400); --bs-btn-hover-color: var(--tm-blue-800);
  --bs-btn-active-bg: var(--tm-gray-100); --bs-btn-active-border-color: var(--tm-gray-400); --bs-btn-active-color: var(--tm-blue-800);
}
.btn-outline-primary {
  --bs-btn-color: var(--action-primary); --bs-btn-border-color: var(--action-primary);
  --bs-btn-hover-bg: var(--action-primary); --bs-btn-hover-border-color: var(--action-primary); --bs-btn-hover-color: #fff;
}
.btn-link { --bs-btn-color: var(--text-link); --bs-btn-hover-color: var(--tm-blue-700); font-weight: 500; }

/* On a navy surface, a secondary button stays legible */
.tm-inverse .btn-secondary, .tm-inverse .btn-outline-secondary {
  --bs-btn-bg: transparent; --bs-btn-border-color: var(--border-inverse); --bs-btn-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,0.08); --bs-btn-hover-border-color: rgba(255,255,255,0.5); --bs-btn-hover-color:#fff;
}

/* ------------------------------------------------------------
   7. Cards  (borders do the work, shadows whisper)
   ------------------------------------------------------------ */
.card {
  --bs-card-bg: var(--surface-card);
  --bs-card-border-color: var(--border-default);
  --bs-card-border-radius: var(--radius-md);
  --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
  --bs-card-cap-bg: #fff;
  box-shadow: var(--shadow-card);
}
.card-header { font-family: var(--font-body); font-weight: 600; color: var(--text-heading); border-bottom-color: var(--border-default); }
.card-title, .card h2, .card h3 { color: var(--text-heading); }

/* ------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------ */
.form-label { font-weight: 600; color: var(--text-heading); margin-bottom: .35rem; }
.form-control, .form-select {
  border-color: var(--border-strong); border-radius: var(--radius-sm); color: var(--text-body);
  background-color: #fff;
}
.form-control::placeholder { color: var(--tm-gray-400); }
.form-control:focus, .form-select:focus { border-color: var(--tm-blue-400); }
.form-check-input:checked { background-color: var(--action-brand); border-color: var(--action-brand); }
.form-switch .form-check-input:checked { background-color: var(--status-pass); border-color: var(--status-pass); }
.input-group-text { background: var(--surface-sunken); border-color: var(--border-strong); color: var(--text-muted); border-radius: var(--radius-sm); }

/* ------------------------------------------------------------
   9. Nav pills (admin sub-nav)
   ------------------------------------------------------------ */
.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-sm);
  --bs-nav-pills-link-active-bg: var(--action-brand);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-link-color: var(--text-muted);
  --bs-nav-link-hover-color: var(--tm-blue-700);
  gap: .15rem;
}
.nav-pills .nav-link { font-weight: 600; }
.nav-pills .nav-link:not(.active):hover { background: var(--tm-blue-50); }
.tm-adminnav .nav-link { display: inline-flex; align-items: center; gap: .4rem; }
.tm-adminnav .nav-link [data-lucide] { width: 1rem; height: 1rem; }
.btn [data-lucide] { width: 1rem; height: 1rem; vertical-align: -0.15em; margin-right: .1rem; }

/* ------------------------------------------------------------
   10. Badges / status pills
   ------------------------------------------------------------ */
.badge { font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-pill); padding: .35em .7em; letter-spacing: .01em; }
.badge.text-bg-primary { background: var(--action-primary) !important; color: #fff !important; }
.badge.text-bg-secondary { background: var(--surface-sunken) !important; color: var(--text-body) !important; }
.badge.text-bg-success, .tm-pill-pass { background: var(--status-pass-bg) !important; color: #14663A !important; }
.badge.text-bg-warning, .tm-pill-due  { background: var(--status-due-bg) !important; color: var(--tm-yellow-700) !important; }
.badge.text-bg-danger,  .tm-pill-overdue { background: var(--status-overdue-bg) !important; color: #A21319 !important; }
.tm-pill-brand { background: var(--tm-blue-50) !important; color: var(--tm-blue-700) !important; }
.tm-pill { display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-body); font-weight: 600; font-size: .78rem; border-radius: var(--radius-pill); padding: .28em .7em; }
.tm-pill .tm-dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------
   11. Tables
   ------------------------------------------------------------ */
.table { --bs-table-color: var(--text-body); --bs-table-border-color: var(--border-default); vertical-align: middle; }
.table > thead { color: var(--text-heading); }
.table > thead th { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1.5px solid var(--border-strong); }
.table td .tm-mono, .table td.tm-mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------
   12. Alerts  (left accent + brand tints)
   ------------------------------------------------------------ */
.alert { border: 1px solid transparent; border-left-width: 4px; border-radius: var(--radius-sm); font-size: .92rem; }
.alert-info    { background: var(--tm-blue-50); border-color: var(--tm-blue-200); border-left-color: var(--tm-blue-500); color: var(--tm-blue-800); }
.alert-warning { background: var(--status-due-bg); border-color: var(--tm-yellow-300); border-left-color: var(--tm-yellow-600); color: var(--tm-yellow-700); }
.alert-danger  { background: var(--status-overdue-bg); border-color: #F3C2C4; border-left-color: var(--status-overdue); color: #A21319; }
.alert-success { background: var(--status-pass-bg); border-color: #BFE6CE; border-left-color: var(--status-pass); color: #14663A; }

/* ------------------------------------------------------------
   13. Progress  (yellow signal fill)
   ------------------------------------------------------------ */
.progress { background: var(--surface-sunken); border-radius: var(--radius-pill); }
.progress-bar { background: var(--signal); color: var(--text-on-signal); font-family: var(--font-mono); font-weight: 700; font-size: .72rem; transition: width var(--dur-slow) var(--ease-out); }

/* ------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------ */
.tm-footer { background: var(--surface-inverse); color: var(--text-inverse-muted); }
.tm-footer a { color: var(--text-inverse); text-decoration: none; }
.tm-footer a:hover { color: #fff; text-decoration: underline; }
.tm-footer .tm-wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .03em; color: #fff; }
.tm-footer .tm-wordmark em { font-style: normal; color: var(--signal); }

/* Container width to match brand (1160px) */
@media (min-width: 1200px) { .container { max-width: 1160px; } }