/* MHTech DCC: Bootstrap 5.3 themed to the MHTech family (docs/VISUAL_DESIGN.md).
   Values come from the MHTech Planner and Assistant (their src/index.css). */

:root {
  --mh-green: #689065; --mh-green-hover: #557650; --mh-green-dark: #2a3a29;
  --mh-paper: #f7f6f2; --mh-hairline: #d4d2cc; --mh-hairline-soft: #e6e4df;
  --mh-ink: #1a1a1a; --mh-muted: #5a5a5a;
  --mh-blue: #3a6dd9; --mh-blue-text: #244f9e;
  --mh-amber: #c9762e; --mh-amber-text: #8a4c11;
  --mh-red: #c0453b; --mh-red-text: #a8443c; --mh-done: #2c5a2a;

  --bs-body-font-family: 'Trebuchet MS', Trebuchet, Roboto, 'Open Sans', system-ui, sans-serif;
  --bs-font-monospace: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bs-body-font-size: 15px;
  --bs-body-color: var(--mh-ink);
  --bs-secondary-color: var(--mh-muted);
  --bs-border-color: var(--mh-hairline);
  --bs-tertiary-bg: var(--mh-paper);
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0;
  --bs-primary: var(--mh-green); --bs-primary-rgb: 104, 144, 101;
  --bs-success: var(--mh-green); --bs-success-rgb: 104, 144, 101;
  --bs-info-rgb: 58, 109, 217; --bs-warning-rgb: 201, 118, 46; --bs-danger-rgb: 192, 69, 59;
  --bs-link-color: var(--mh-blue-text); --bs-link-color-rgb: 36, 79, 158;
  --bs-link-hover-color: var(--mh-green-hover); --bs-link-hover-color-rgb: 85, 118, 80;
  --bs-focus-ring-color: rgba(104, 144, 101, .35);
}

/* Header: the paper bar with the M mark, as in the Planner and the Assistant. */
.navbar-dcc { background: var(--mh-paper); border-bottom: 1px solid var(--mh-hairline); padding: 12px 24px;
  --bs-navbar-color: var(--mh-ink); --bs-navbar-hover-color: var(--mh-green);
  --bs-navbar-active-color: var(--mh-green); --bs-navbar-brand-color: var(--mh-ink);
  --bs-navbar-brand-hover-color: var(--mh-ink); }
.navbar-dcc .navbar-brand { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dcc-mark { width: 26px; height: 26px; background: var(--mh-green); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.navbar-dcc .nav-link { font-size: 14px; }
.navbar-dcc .nav-link.active, .navbar-dcc .nav-link:hover { box-shadow: inset 0 -2px 0 var(--mh-green); }
.navbar-dcc .navbar-text { color: var(--mh-muted); }

/* Buttons: small, uppercase, square. One green button per screen moves the record forward. */
.btn { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 7px 12px; }
.btn-sm { padding: 5px 10px; }
.btn-primary, .btn-success {
  --bs-btn-bg: var(--mh-green); --bs-btn-border-color: var(--mh-green);
  --bs-btn-hover-bg: var(--mh-green-hover); --bs-btn-hover-border-color: var(--mh-green-hover);
  --bs-btn-active-bg: var(--mh-green-hover); --bs-btn-active-border-color: var(--mh-green-hover);
  --bs-btn-disabled-bg: var(--mh-green); --bs-btn-disabled-border-color: var(--mh-green);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-warning,
.btn-outline-danger, .btn-outline-light {
  --bs-btn-border-color: var(--mh-hairline); --bs-btn-bg: #fff;
  --bs-btn-hover-bg: rgba(104, 144, 101, .06); --bs-btn-hover-border-color: var(--mh-green);
  --bs-btn-active-bg: rgba(104, 144, 101, .10); --bs-btn-active-border-color: var(--mh-green);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-light {
  --bs-btn-color: var(--mh-ink); --bs-btn-hover-color: var(--mh-ink); --bs-btn-active-color: var(--mh-ink);
}
.btn-outline-warning { --bs-btn-color: var(--mh-amber-text); --bs-btn-hover-color: var(--mh-amber-text); --bs-btn-active-color: var(--mh-amber-text); }
.btn-outline-danger  { --bs-btn-color: var(--mh-red-text);   --bs-btn-hover-color: var(--mh-red-text);   --bs-btn-active-color: var(--mh-red-text); }
.btn-link { --bs-btn-color: var(--mh-green-hover); --bs-btn-hover-color: var(--mh-green-dark); }

/* Badges: outlined in the status colour, like the Planner's. Bootstrap's text-bg-* set
   colours with !important, so each is mapped here explicitly. */
.badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 3px 5px; border: 1px solid currentColor; }
.badge.fs-6 { font-size: 11px !important; }
.badge-state-draft, .badge-state-self_checked { color: var(--mh-muted); background: transparent; }
.badge-state-checked, .badge-state-approved   { color: var(--mh-blue-text); background: transparent; }
.badge-state-issued                           { color: var(--mh-done); background: transparent; }
.badge-state-returned, .badge-state-check_comments, .badge-state-approval_comments { color: var(--mh-amber-text); background: rgba(201, 118, 46, .13); }
.badge-state-superseded, .badge-state-cancelled { color: var(--mh-muted); background: transparent; text-decoration: line-through; }
.badge.text-bg-secondary { color: var(--mh-muted) !important; background-color: transparent !important; }
.badge.text-bg-success   { color: var(--mh-done) !important; background-color: transparent !important; }
.badge.text-bg-primary   { color: var(--mh-green-dark) !important; background-color: rgba(104, 144, 101, .10) !important; }
.badge.text-bg-info      { color: var(--mh-blue-text) !important; background-color: transparent !important; }
.badge.text-bg-warning   { color: var(--mh-amber-text) !important; background-color: rgba(201, 118, 46, .13) !important; }
.badge.text-bg-danger    { color: var(--mh-red-text) !important; background-color: transparent !important; }
.badge.text-bg-dark      { color: var(--mh-ink) !important; background-color: transparent !important; }
.badge.text-bg-light     { color: var(--mh-muted) !important; background-color: var(--mh-paper) !important; }

/* Cards, tables, forms: hairlines, paper headers, no shadows. */
.card { border-color: var(--mh-hairline); }
.card-header { background: var(--mh-paper); padding: 13px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--mh-muted); }
.table > thead th { background: var(--mh-paper); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mh-muted); }
.table > :not(caption) > * > * { border-bottom-color: var(--mh-hairline-soft); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(104, 144, 101, .08); }
.form-control:focus, .form-select:focus { border-color: var(--mh-green); box-shadow: 0 0 0 2px rgba(104, 144, 101, .35); }
.form-check-input:checked { background-color: var(--mh-green); border-color: var(--mh-green); }
input[type=checkbox], input[type=radio] { accent-color: var(--mh-green); }
.dropdown-menu { box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }

/* Existing DCC rules. */
.doc-number { font-family: var(--bs-font-monospace); white-space: nowrap; }
.table-register td { vertical-align: middle; }
.audit-data { font-size: .8rem; color: var(--bs-secondary-color); word-break: break-word; }

/* The DEV instance must never be mistaken for production (wave 0). */
.dcc-dev .navbar-dcc { background: #fdf4e3; border-bottom-color: var(--mh-amber); }