/* ============================================================
   QPAS on Bootstrap 5 — theme + new component styles.
   Load order (see layout.php):
     1. vendor/bootstrap/css/bootstrap.min.css   (framework, untouched)
     2. style.css                                (legacy rules — still used
                                                    by views not yet converted;
                                                    left exactly as-is so those
                                                    pages keep working)
     3. qpas-bootstrap.css  <- this file          (brand theme + styles for
                                                    Bootstrap-converted pages)
   No Sass, no build step: theming is done entirely through Bootstrap 5.3's
   CSS custom-property API, which is designed to be overridden in plain CSS.
   ============================================================ */

:root{
  /* ---- brand palette (same values as the original design) ---- */
  --ink:#16211c; --soft:#5c6b64; --faint:#93a19a; --ghost:#b8c2bc;
  --paper:#fbfaf7; --panel:#fff; --rule:#e3e0d8; --rule-soft:#eeece5;
  --pine:#1f5c46; --pine-wash:#eaf2ee; --pine-deep:#194a38;
  --rust:#a8442a; --rust-wash:#f9ece8;
  --amber:#8a6413; --amber-wash:#fbf1dc;
  --slate:#3f5666; --slate-wash:#eaeff2;
  --lock:#6b4d8a; --lock-wash:#f1ecf7; --lock-rule:#e0d4ee;

  /* ---- Bootstrap semantic colors, mapped onto that palette ---- */
  --bs-body-font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--rule);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .4rem;
  --bs-border-radius-lg: .65rem;
  --bs-border-radius-xl: .9rem;
  --bs-link-color: var(--pine);
  --bs-link-color-rgb: 31,92,70;
  --bs-link-hover-color: var(--pine-deep);
  --bs-link-decoration: none;
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--soft);
  --bs-tertiary-color: var(--faint);
  --bs-tertiary-bg: var(--rule-soft);
  --bs-secondary-bg: var(--pine-wash);

  --bs-primary: var(--pine);           --bs-primary-rgb: 31,92,70;
  --bs-primary-text-emphasis: var(--pine);
  --bs-primary-bg-subtle: var(--pine-wash);
  --bs-primary-border-subtle: #cfe3da;

  --bs-secondary: var(--slate);        --bs-secondary-rgb: 63,86,102;
  --bs-secondary-text-emphasis: var(--slate);
  --bs-secondary-bg-subtle: var(--slate-wash);
  --bs-secondary-border-subtle: #d6e0e6;

  --bs-success: var(--pine);           --bs-success-rgb: 31,92,70;
  --bs-success-text-emphasis: var(--pine);
  --bs-success-bg-subtle: var(--pine-wash);
  --bs-success-border-subtle: #cfe3da;

  --bs-danger: var(--rust);            --bs-danger-rgb: 168,68,42;
  --bs-danger-text-emphasis: var(--rust);
  --bs-danger-bg-subtle: var(--rust-wash);
  --bs-danger-border-subtle: #f0d6cd;

  --bs-warning: var(--amber);          --bs-warning-rgb: 138,100,19;
  --bs-warning-text-emphasis: var(--amber);
  --bs-warning-bg-subtle: var(--amber-wash);
  --bs-warning-border-subtle: #ecddb6;

  --bs-info: var(--slate);             --bs-info-rgb: 63,86,102;
  --bs-info-text-emphasis: var(--slate);
  --bs-info-bg-subtle: var(--slate-wash);
  --bs-info-border-subtle: #d6e0e6;

  --bs-light: var(--paper);            --bs-light-rgb: 251,250,247;
  --bs-dark: var(--ink);               --bs-dark-rgb: 22,33,28;
}

body{-webkit-font-smoothing:antialiased}
a{text-decoration:none}
a:hover{text-decoration:underline}
.mono,.font-monospace{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
::selection{background:var(--pine-wash);color:var(--pine-deep)}

h1,.h1{font-size:1.375rem;font-weight:600;letter-spacing:-.02em}
h2,.h2{font-size:1.05rem;font-weight:600}

/* ---- buttons ----
   IMPORTANT: legacy style.css has its own bare `.btn{background:var(--panel);
   color:var(--ink);...}` rule (pre-dating Bootstrap, still used by views not
   yet converted). It loads after bootstrap.min.css and shares the same
   specificity as Bootstrap's own `.btn` base rule, so on a Bootstrap-styled
   button it would otherwise win by source order and flatten every variant to
   a plain white button. Since THIS file loads last, setting the actual
   background-color/border-color/color here (not just Bootstrap's --bs-btn-*
   custom properties) is what makes the variant colors win back. */
.btn{font-weight:500;font-size:.875rem;letter-spacing:-.005em}
.btn-sm{font-size:.8125rem}
.btn-primary{background-color:var(--pine);border-color:var(--pine);color:#fff}
.btn-primary:hover,.btn-primary:focus{background-color:var(--pine-deep);border-color:var(--pine-deep);color:#fff}
.btn-primary:disabled,.btn-primary.disabled{background-color:var(--pine);border-color:var(--pine);color:#fff}
.btn-outline-secondary{background-color:#fff;border-color:var(--rule);color:var(--soft)}
.btn-outline-secondary:hover,.btn-outline-secondary:focus{background-color:var(--paper);border-color:var(--ghost);color:var(--ink)}
.btn-outline-danger{background-color:#fff;border-color:var(--rust);color:var(--rust)}
.btn-outline-danger:hover,.btn-outline-danger:focus{background-color:var(--rust);border-color:var(--rust);color:#fff}
.btn-danger{background-color:var(--rust);border-color:var(--rust);color:#fff}
.btn-danger:hover,.btn-danger:focus{background-color:#8f3a24;border-color:#8f3a24;color:#fff}
.btn-link{font-weight:500;color:var(--pine)}
.btn-link:hover{color:var(--pine-deep)}
.btn-close{opacity:.5}
.btn-close:hover{opacity:.85}

/* ---- badges: the old semantic pill set, as Bootstrap badge variants ---- */
.text-bg-go{background:var(--pine-wash)!important;color:var(--pine)!important}
.text-bg-wait{background:var(--amber-wash)!important;color:var(--amber)!important}
.text-bg-stop{background:var(--rust-wash)!important;color:var(--rust)!important}
.text-bg-cool{background:var(--slate-wash)!important;color:var(--slate)!important}
.text-bg-idle{background:var(--rule-soft)!important;color:var(--soft)!important}
.text-bg-lock{background:var(--lock-wash)!important;color:var(--lock)!important}
.badge{font-weight:500;font-size:.72em;letter-spacing:0}
.badge.rounded-pill{padding-inline:.7em}

/* ---- role badge in the top bar (unique enough to keep bespoke) ---- */
.rolebadge{font-size:.6875rem;font-weight:500;padding:.15rem .55rem;border-radius:1rem}
.r-super{background:var(--pine-wash);color:var(--pine)}
.r-authorized{background:var(--slate-wash);color:var(--slate)}
.r-viewonly{background:var(--rule-soft);color:var(--soft)}
.r-supplier{background:var(--amber-wash);color:var(--amber)}

/* ---- form controls: Bootstrap's compiled CSS bakes the focus ring/checked
   colors in as literal hex (from its Sass $primary), not as a var() reference
   to --bs-primary, so overriding the CSS variable alone does not retheme
   these — they need direct overrides, same reasoning as the buttons above. */
.form-control:focus,.form-select:focus{border-color:var(--pine);box-shadow:0 0 0 .25rem rgba(31,92,70,.2)}
.form-check-input:checked{background-color:var(--pine);border-color:var(--pine)}
.form-check-input:focus{border-color:var(--pine);box-shadow:0 0 0 .25rem rgba(31,92,70,.2)}
.form-switch .form-check-input:checked{background-color:var(--pine);border-color:var(--pine)}
.form-label{font-size:.8125rem;font-weight:500;color:var(--soft)}

/* ---- cards standing in for the old .panel/.ph/.row list ---- */
.card{box-shadow:0 1px 2px rgba(22,33,28,.04)}
.card-header{background:var(--panel);font-weight:600;font-size:.875rem}
.list-group-item-action{color:inherit}
.list-group-item-action:hover,.list-group-item-action:focus{background:var(--paper);z-index:0}
.list-group-flush > .list-group-item{padding:.85rem 1rem}

/* ---- stat strip (dashboard counts) ---- */
.stat-cell{padding:.9rem 1rem;border-right:1px solid var(--bs-border-color)}
.stat-cell:last-child{border-right:none}
.stat-k{font-size:.78rem;color:var(--soft)}
.stat-v{font-size:1.55rem;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.stat-n{font-size:.72rem;color:var(--faint);margin-top:1px}
.stat-n.text-warn{color:var(--rust)}

/* ---- sidebar navigation (I4/L6) ---- */
.qsidebar{width:232px;flex:none;background:var(--panel);border-right:1px solid var(--bs-border-color);
  min-height:100vh}
.qsidebar .brand{padding:1rem 1.1rem;border-bottom:1px solid var(--bs-border-color)}
.qsidebar .brand b{font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.qsidebar .brand span{display:block;font-size:.72rem;color:var(--faint);margin-top:1px}
.qsidebar .navgroup{padding:.9rem .7rem 0}
.qsidebar .navgroup-h{font-size:.68rem;font-weight:600;letter-spacing:.05em;color:var(--faint);
  text-transform:uppercase;padding:0 .6rem;margin-bottom:.25rem}
.qsidebar .nav-link{color:var(--soft);font-size:.86rem;padding:.45rem .6rem;border-radius:.45rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.qsidebar .nav-link:hover{background:var(--paper);color:var(--ink)}
.qsidebar .nav-link.active{background:var(--pine-wash);color:var(--pine);font-weight:500}
.qsidebar .nav-link .badge{font-size:.68rem}
.qmain{flex:1;min-width:0}
.qtopbar{background:var(--panel);border-bottom:1px solid var(--bs-border-color);height:56px}
@media (min-width: 992px){ .qsidebar{position:sticky;top:0;align-self:flex-start} }

/* ---- requirement sub-tabs (Overview / Offers / Amendments / …) ---- */
.nav-underline .nav-link{color:var(--soft);font-size:.875rem;padding:.6rem .1rem;margin-right:1.25rem;
  border-bottom:2px solid transparent}
.nav-underline .nav-link.active{color:var(--pine);border-bottom-color:var(--pine);font-weight:500}

/* ---- stage strip: where the project has actually got to ---- */
.stagebar{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.stage-pip{font-size:.72rem;padding:.28rem .7rem;border-radius:1rem;border:1px solid var(--bs-border-color);
  background:#fff;color:var(--ghost);white-space:nowrap;text-decoration:none}
.stage-pip.done{background:var(--pine-wash);border-color:var(--pine-wash);color:var(--pine)}
.stage-pip.now{background:var(--pine);border-color:var(--pine);color:#fff;font-weight:500}
.stage-pip.skip{background:var(--paper);border-style:dashed;color:var(--faint)}
a.stage-pip:hover{border-color:var(--pine);text-decoration:none}

/* ---- next-action banner ---- */
.nextup{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.nextup-k{font-size:.65rem;font-weight:600;letter-spacing:.05em;color:var(--amber);text-transform:uppercase}
.nextup-v{font-size:.875rem;color:#6b4f10;font-weight:500}

/* ---- internal/lock blocks ---- */
.internal{background:var(--lock-wash);border:1px solid var(--lock-rule);border-radius:var(--bs-border-radius)}
.itag{font-size:.66rem;font-weight:500;color:var(--lock);background:#fff;
  border:1px solid var(--lock-rule);border-radius:.25rem;padding:.05rem .45rem}

/* ---- offcanvas panels: match the old panel-sheet feel ---- */
.offcanvas-header{border-bottom:1px solid var(--bs-border-color)}
.offcanvas-footer{padding:.85rem 1.25rem;border-top:1px solid var(--bs-border-color);
  display:flex;justify-content:flex-end;gap:.5rem;background:var(--paper)}
.offcanvas-title{font-size:1rem;font-weight:600}

/* ---- toasts ----
   legacy style.css also has a bare `.toast{opacity:0;transform:translateY(8px)}`
   rule (its own hand-rolled toast, pre-Bootstrap). Bootstrap's `.fade.show`
   (two classes) is more specific and correctly wins for visibility, but
   nothing ever resets that leftover transform, so a real Bootstrap toast
   would sit permanently offset by 8px. Reset both explicitly here. */
.toast-container{z-index:1090}
.toast{opacity:1;transform:none}
.toast.text-bg-primary{--bs-toast-bg:var(--pine)}
.toast.text-bg-danger{--bs-toast-bg:var(--rust)}

/* ---- hint popover: point at the field, don't just complain at the top ---- */
.popover.qpas-hint-popover{
  --bs-popover-bg: var(--rust);
  --bs-popover-border-color: var(--rust);
  --bs-popover-arrow-height: .5rem;
  --bs-popover-max-width: 280px;
  --bs-popover-body-padding-x: .75rem;
  --bs-popover-body-padding-y: .5rem;
  z-index:1080;
}
.popover.qpas-hint-popover .popover-body{color:#fff;font-size:.8rem;line-height:1.45}
.popover.qpas-hint-popover .popover-arrow::before,
.popover.qpas-hint-popover .popover-arrow::after{border-bottom-color:var(--rust)}
.field-bad{outline:2px solid var(--rust)!important;outline-offset:-1px}

/* ---- empty state ---- */
.empty-state{padding:2.2rem 1rem;text-align:center;color:var(--soft);font-size:.875rem}
.empty-state b{display:block;font-weight:500;color:var(--ink);margin-bottom:.25rem;font-size:.94rem}

/* ---- sample/order "mini" cards, document slots, etc. keep the original
        bespoke selectors from style.css (.slot, .wiz-*, .crit-*, table.cmp,
        .msg*, .keybox, .proj-banner) — they render correctly as-is because
        style.css still loads before this file and nothing here removes them. */