/*
 * ============================================================
 * DrevOps — Framework
 * ============================================================
 *
 * Component styles that consume design tokens from variables.css.
 * Bare element selectors define the default look of standard
 * HTML elements within the design system.
 *
 * ============================================================
 */

/* ── Rendering context ── */
.body {
  background-color: var(--page-bg);
  font-family: var(--body-font-family);
  color: var(--page-color);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

/* Printable document context — grey preview background for screen editing only. */
@media screen { .body-print { background: #E8E8E8; } }

/* ── Mark (accent highlight) ── */
mark {
  background: none;
  color: var(--text-accent-color);
}

/* ── Links ── */
a {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  text-underline-offset: var(--link-underline-offset);
  transition: color 0.15s, background 0.15s;
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 2px;
}
a:hover {
  color: var(--page-bg);
  background: var(--link-color);
  text-decoration: var(--link-hover-decoration);
}
a[data-color="accent"] { color: var(--text-accent-color); }
a[data-color="accent"]:hover { color: var(--page-bg); background: var(--text-accent-color); }

/* ── Headings ── */
h1 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-h1-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
  color: var(--text-color);
  margin-bottom: var(--space-y-3);
}
h2 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-h2-font-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
  color: var(--text-color);
  margin-bottom: var(--space-y-2);
}
h3 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-h3-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--line-height-sm);
  color: var(--text-color);
  margin-bottom: var(--space-y-2);
}
h4 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-h4-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--line-height-sm);
  color: var(--text-color);
  margin-bottom: var(--space-y-1);
}
h5 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-h5-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--line-height-sm);
  color: var(--text-color);
  margin-bottom: var(--space-y-1);
}
h6 {
  font-family: var(--font-family-primary);
  font-size: var(--heading-h6-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--line-height-sm);
  color: var(--text-color);
  margin-bottom: var(--space-y-1);
}

/* ── Progress bar ── */
.progress-bar {
  display: flex;
  align-items: stretch;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  height: 44px;
  margin: var(--space-y-2) 0 var(--space-y-3) 0;
}
.progress-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--color-neutral-2);
  color: var(--text-muted-color);
  font-weight: var(--font-weight-normal);
}
.progress-step:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.progress-step:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.progress-step-complete {
  background: var(--color-primary-1);
  color: var(--color-primary-6);
  font-weight: var(--font-weight-semibold);
}
.progress-step-current {
  background: var(--color-secondary-6);
  color: #FFFFFF;
  font-weight: var(--font-weight-bold);
}
.progress-step-label {
  font-size: var(--font-size-2xs);
  text-transform: none;
  letter-spacing: 0;
}
.progress-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 44px;
}

/* ── Body text ── */
p {
  color: var(--text-color);
}

/* ── Text colour utilities ── */
.text-accent {
  position: relative;
  color: var(--text-accent-color);
}
.text-muted {
  position: relative;
  color: var(--text-muted-color);
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  padding: var(--space-y-2) var(--space-x-4);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.btn:hover { text-decoration: none; background: none; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.btn:hover::before { transform: scaleX(1); }
.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
}
.btn-primary::before { background: var(--btn-primary-hover-bg); }
.btn-primary:hover {
  color: var(--btn-primary-hover-color);
  border-color: var(--btn-primary-color);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}
.btn-secondary::before { background: var(--btn-secondary-hover-bg); }
.btn-secondary:hover {
  color: var(--btn-secondary-hover-color);
  border-color: var(--btn-secondary-color);
}

.btn-tertiary {
  background: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-color);
  border-color: var(--btn-tertiary-border);
}
.btn-tertiary::before { background: var(--btn-tertiary-hover-bg); }
.btn-tertiary:hover {
  color: var(--btn-tertiary-hover-color);
  border-color: var(--btn-tertiary-color);
}

/* ── Tables ── */
table {
  width: 100%;
  border-collapse: collapse;
  line-height: var(--line-height-md);
}

th {
  background: var(--table-header-bg);
  color: var(--table-header-color);
  text-align: left;
  font-weight: var(--font-weight-semibold);
}

td {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

tr:nth-child(even) td {
  background: var(--table-stripe-bg);
}

/* Table cell padding scoped to .print-page to avoid overriding
   component-specific table padding (e.g. site check). */
.print-page th { padding: var(--space-y-1) var(--space-x-2); }
.print-page td { padding: var(--space-y-1) var(--space-x-2); }

/* ── Form elements ── */
label {
  font-size: var(--label-font-size);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted-color);
  display: block;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  font-family: var(--font-family-secondary);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  color: var(--text-color);
  background: var(--surface-subtle-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-y-2) var(--space-x-2);
  outline: none;
  width: 100%;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted-color);
  font-weight: var(--body-font-weight);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-secondary-6);
  background: var(--surface-muted-color);
}

select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A9BA8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── Margin utilities ── */
.m0  { margin: 0 }
.mt0 { margin-top: 0 }
.mr0 { margin-right: 0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left: 0 }
.mx0 { margin-left: 0; margin-right: 0 }
.my0 { margin-top: 0; margin-bottom: 0 }

.m1  { margin: var(--space-y-1) }
.mt1 { margin-top: var(--space-y-1) }
.mr1 { margin-right: var(--space-y-1) }
.mb1 { margin-bottom: var(--space-y-1) }
.ml1 { margin-left: var(--space-y-1) }
.mx1 { margin-left: var(--space-y-1); margin-right: var(--space-y-1) }
.my1 { margin-top: var(--space-y-1); margin-bottom: var(--space-y-1) }

.m2  { margin: var(--space-y-2) }
.mt2 { margin-top: var(--space-y-2) }
.mr2 { margin-right: var(--space-y-2) }
.mb2 { margin-bottom: var(--space-y-2) }
.ml2 { margin-left: var(--space-y-2) }
.mx2 { margin-left: var(--space-y-2); margin-right: var(--space-y-2) }
.my2 { margin-top: var(--space-y-2); margin-bottom: var(--space-y-2) }

.m3  { margin: var(--space-y-3) }
.mt3 { margin-top: var(--space-y-3) }
.mr3 { margin-right: var(--space-y-3) }
.mb3 { margin-bottom: var(--space-y-3) }
.ml3 { margin-left: var(--space-y-3) }
.mx3 { margin-left: var(--space-y-3); margin-right: var(--space-y-3) }
.my3 { margin-top: var(--space-y-3); margin-bottom: var(--space-y-3) }

.m4  { margin: var(--space-y-4) }
.mt4 { margin-top: var(--space-y-4) }
.mr4 { margin-right: var(--space-y-4) }
.mb4 { margin-bottom: var(--space-y-4) }
.ml4 { margin-left: var(--space-y-4) }
.mx4 { margin-left: var(--space-y-4); margin-right: var(--space-y-4) }
.my4 { margin-top: var(--space-y-4); margin-bottom: var(--space-y-4) }

.m5  { margin: var(--space-y-5) }
.mt5 { margin-top: var(--space-y-5) }
.mr5 { margin-right: var(--space-y-5) }
.mb5 { margin-bottom: var(--space-y-5) }
.ml5 { margin-left: var(--space-y-5) }
.mx5 { margin-left: var(--space-y-5); margin-right: var(--space-y-5) }
.my5 { margin-top: var(--space-y-5); margin-bottom: var(--space-y-5) }

.m6  { margin: var(--space-y-6) }
.mt6 { margin-top: var(--space-y-6) }
.mr6 { margin-right: var(--space-y-6) }
.mb6 { margin-bottom: var(--space-y-6) }
.ml6 { margin-left: var(--space-y-6) }
.mx6 { margin-left: var(--space-y-6); margin-right: var(--space-y-6) }
.my6 { margin-top: var(--space-y-6); margin-bottom: var(--space-y-6) }

.m7  { margin: var(--space-y-7) }
.mt7 { margin-top: var(--space-y-7) }
.mr7 { margin-right: var(--space-y-7) }
.mb7 { margin-bottom: var(--space-y-7) }
.ml7 { margin-left: var(--space-y-7) }
.mx7 { margin-left: var(--space-y-7); margin-right: var(--space-y-7) }
.my7 { margin-top: var(--space-y-7); margin-bottom: var(--space-y-7) }

.m8  { margin: var(--space-y-8) }
.mt8 { margin-top: var(--space-y-8) }
.mr8 { margin-right: var(--space-y-8) }
.mb8 { margin-bottom: var(--space-y-8) }
.ml8 { margin-left: var(--space-y-8) }
.mx8 { margin-left: var(--space-y-8); margin-right: var(--space-y-8) }
.my8 { margin-top: var(--space-y-8); margin-bottom: var(--space-y-8) }

.m9  { margin: var(--space-y-9) }
.mt9 { margin-top: var(--space-y-9) }
.mr9 { margin-right: var(--space-y-9) }
.mb9 { margin-bottom: var(--space-y-9) }
.ml9 { margin-left: var(--space-y-9) }
.mx9 { margin-left: var(--space-y-9); margin-right: var(--space-y-9) }
.my9 { margin-top: var(--space-y-9); margin-bottom: var(--space-y-9) }

.m10  { margin: var(--space-y-10) }
.mt10 { margin-top: var(--space-y-10) }
.mr10 { margin-right: var(--space-y-10) }
.mb10 { margin-bottom: var(--space-y-10) }
.ml10 { margin-left: var(--space-y-10) }
.mx10 { margin-left: var(--space-y-10); margin-right: var(--space-y-10) }
.my10 { margin-top: var(--space-y-10); margin-bottom: var(--space-y-10) }

/* Negative margins */
.mxn1 { margin-left: calc(var(--space-y-1) * -1); margin-right: calc(var(--space-y-1) * -1) }
.mxn2 { margin-left: calc(var(--space-y-2) * -1); margin-right: calc(var(--space-y-2) * -1) }
.mxn3 { margin-left: calc(var(--space-y-3) * -1); margin-right: calc(var(--space-y-3) * -1) }
.mxn4 { margin-left: calc(var(--space-y-4) * -1); margin-right: calc(var(--space-y-4) * -1) }
.mxn5 { margin-left: calc(var(--space-y-5) * -1); margin-right: calc(var(--space-y-5) * -1) }
.mxn6 { margin-left: calc(var(--space-y-6) * -1); margin-right: calc(var(--space-y-6) * -1) }
.mxn7 { margin-left: calc(var(--space-y-7) * -1); margin-right: calc(var(--space-y-7) * -1) }
.mxn8 { margin-left: calc(var(--space-y-8) * -1); margin-right: calc(var(--space-y-8) * -1) }
.mxn9 { margin-left: calc(var(--space-y-9) * -1); margin-right: calc(var(--space-y-9) * -1) }
.mxn10 { margin-left: calc(var(--space-y-10) * -1); margin-right: calc(var(--space-y-10) * -1) }

/* Auto margins */
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mx-auto { margin-left: auto; margin-right: auto }

/* ── Padding utilities ── */
.p0  { padding: 0 }
.pt0 { padding-top: 0 }
.pr0 { padding-right: 0 }
.pb0 { padding-bottom: 0 }
.pl0 { padding-left: 0 }
.px0 { padding-left: 0; padding-right: 0 }
.py0 { padding-top: 0; padding-bottom: 0 }

.p1  { padding: var(--space-y-1) }
.pt1 { padding-top: var(--space-y-1) }
.pr1 { padding-right: var(--space-y-1) }
.pb1 { padding-bottom: var(--space-y-1) }
.pl1 { padding-left: var(--space-y-1) }
.px1 { padding-left: var(--space-y-1); padding-right: var(--space-y-1) }
.py1 { padding-top: var(--space-y-1); padding-bottom: var(--space-y-1) }

.p2  { padding: var(--space-y-2) }
.pt2 { padding-top: var(--space-y-2) }
.pr2 { padding-right: var(--space-y-2) }
.pb2 { padding-bottom: var(--space-y-2) }
.pl2 { padding-left: var(--space-y-2) }
.px2 { padding-left: var(--space-y-2); padding-right: var(--space-y-2) }
.py2 { padding-top: var(--space-y-2); padding-bottom: var(--space-y-2) }

.p3  { padding: var(--space-y-3) }
.pt3 { padding-top: var(--space-y-3) }
.pr3 { padding-right: var(--space-y-3) }
.pb3 { padding-bottom: var(--space-y-3) }
.pl3 { padding-left: var(--space-y-3) }
.px3 { padding-left: var(--space-y-3); padding-right: var(--space-y-3) }
.py3 { padding-top: var(--space-y-3); padding-bottom: var(--space-y-3) }

.p4  { padding: var(--space-y-4) }
.pt4 { padding-top: var(--space-y-4) }
.pr4 { padding-right: var(--space-y-4) }
.pb4 { padding-bottom: var(--space-y-4) }
.pl4 { padding-left: var(--space-y-4) }
.px4 { padding-left: var(--space-y-4); padding-right: var(--space-y-4) }
.py4 { padding-top: var(--space-y-4); padding-bottom: var(--space-y-4) }

.p5  { padding: var(--space-y-5) }
.pt5 { padding-top: var(--space-y-5) }
.pr5 { padding-right: var(--space-y-5) }
.pb5 { padding-bottom: var(--space-y-5) }
.pl5 { padding-left: var(--space-y-5) }
.px5 { padding-left: var(--space-y-5); padding-right: var(--space-y-5) }
.py5 { padding-top: var(--space-y-5); padding-bottom: var(--space-y-5) }

.p6  { padding: var(--space-y-6) }
.pt6 { padding-top: var(--space-y-6) }
.pr6 { padding-right: var(--space-y-6) }
.pb6 { padding-bottom: var(--space-y-6) }
.pl6 { padding-left: var(--space-y-6) }
.px6 { padding-left: var(--space-y-6); padding-right: var(--space-y-6) }
.py6 { padding-top: var(--space-y-6); padding-bottom: var(--space-y-6) }

.p7  { padding: var(--space-y-7) }
.pt7 { padding-top: var(--space-y-7) }
.pr7 { padding-right: var(--space-y-7) }
.pb7 { padding-bottom: var(--space-y-7) }
.pl7 { padding-left: var(--space-y-7) }
.px7 { padding-left: var(--space-y-7); padding-right: var(--space-y-7) }
.py7 { padding-top: var(--space-y-7); padding-bottom: var(--space-y-7) }

.p8  { padding: var(--space-y-8) }
.pt8 { padding-top: var(--space-y-8) }
.pr8 { padding-right: var(--space-y-8) }
.pb8 { padding-bottom: var(--space-y-8) }
.pl8 { padding-left: var(--space-y-8) }
.px8 { padding-left: var(--space-y-8); padding-right: var(--space-y-8) }
.py8 { padding-top: var(--space-y-8); padding-bottom: var(--space-y-8) }

.p9  { padding: var(--space-y-9) }
.pt9 { padding-top: var(--space-y-9) }
.pr9 { padding-right: var(--space-y-9) }
.pb9 { padding-bottom: var(--space-y-9) }
.pl9 { padding-left: var(--space-y-9) }
.px9 { padding-left: var(--space-y-9); padding-right: var(--space-y-9) }
.py9 { padding-top: var(--space-y-9); padding-bottom: var(--space-y-9) }

.p10  { padding: var(--space-y-10) }
.pt10 { padding-top: var(--space-y-10) }
.pr10 { padding-right: var(--space-y-10) }
.pb10 { padding-bottom: var(--space-y-10) }
.pl10 { padding-left: var(--space-y-10) }
.px10 { padding-left: var(--space-y-10); padding-right: var(--space-y-10) }
.py10 { padding-top: var(--space-y-10); padding-bottom: var(--space-y-10) }

/* ── PDF document cover ── */
.print-cover {
  width: 210mm;
  height: 297mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  padding: 40mm 25mm;
}
.print-cover-logo { width: 180px; margin-bottom: var(--space-y-6); }
.print-cover-title {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h2-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
  margin-bottom: var(--space-y-3);
}
.print-cover-client {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h1-font-size);
  font-weight: var(--heading-font-weight);
  color: var(--text-color);
  line-height: var(--heading-line-height);
}
.print-cover-project {
  font-family: var(--heading-font-family);
  font-size: var(--heading-h1-font-size);
  font-weight: var(--heading-font-weight);
  color: var(--text-color);
  line-height: var(--heading-line-height);
  margin-bottom: var(--space-y-3);
}
.print-cover-version {
  font-family: var(--body-font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  color: var(--text-muted-color);
}
.print-cover-prepared {
  position: absolute;
  bottom: 40mm;
  left: 25mm;
  text-align: left;
  font-family: var(--body-font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--body-font-weight);
  line-height: var(--line-height-lg);
  color: var(--text-color);
}
.print-cover-prepared strong { font-weight: var(--font-weight-semibold); }

/* ── PDF document preview (browser editing) ── */
.print-page {
  max-width: 210mm;
  margin: 0 auto;
  background: #FFFFFF;
  padding: var(--space-y-4) var(--space-x-5);
}
.print-pdf-header, .print-pdf-footer { display: none; }

/* ── PDF document body text ── */
.print-page p { margin-bottom: var(--space-y-1); font-weight: var(--font-weight-light); }
.print-page ol, .print-page ul { margin: var(--space-y-1) 0 var(--space-y-2) var(--space-x-3); font-weight: var(--font-weight-light); }
.print-page li { margin-bottom: 0.25rem; }

/* ── PDF document tables ── */
.print-page table { margin: var(--space-y-2) 0; }
.print-page th { font-size: var(--font-size-xs); }
.print-page td { font-size: var(--font-size-sm); font-weight: var(--font-weight-light); }
.print-page td code { word-break: break-all; }
.num { text-align: right; }
.phase-total { text-align: right; font-weight: var(--font-weight-semibold); font-family: var(--heading-font-family); }
.totals td { font-weight: var(--font-weight-semibold); font-family: var(--heading-font-family); border-top: 2px solid var(--text-color); border-bottom: none; background: var(--table-header-bg); }
.total-highlight { color: var(--color-tertiary-5); font-weight: var(--font-weight-bold); }

/* ── Severity / status badges ── */
.badge-critical, .badge-high, .badge-medium, .badge-low, .badge-certain, .badge-none {
  display: inline-block;
  padding: 2px var(--space-x-1);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--heading-font-family);
  letter-spacing: 0.05em;
}
.badge-critical { background: var(--color-fail-7); color: #FFFFFF; }
.badge-high { background: var(--color-tertiary-5); color: #FFFFFF; }
.badge-medium { background: var(--color-warn-7); color: #FFFFFF; }
.badge-low { background: var(--color-info-7); color: #FFFFFF; }
.badge-certain { background: var(--color-fail-8); color: #FFFFFF; }
.badge-none { background: var(--color-neutral-4); color: var(--color-neutral-9); }

/* ── Footnote ── */
.footnote { font-size: var(--font-size-xs); color: var(--text-muted-color); font-style: italic; margin-top: var(--space-y-1); }

/* ── Sign-off ── */
.signoff { margin-top: var(--space-y-5); }
.signoff .name { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); }
.signoff .role { font-family: var(--heading-font-family); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.signoff .legal { margin-top: var(--space-y-2); font-size: var(--font-size-xs); color: var(--text-muted-color); line-height: var(--line-height-lg); }

/* ── PDF print styles ── */
@media print {
  body { background: #FFFFFF; }
  .print-page { max-width: none; padding: 0; margin: 0; background: transparent; }
  .print-page h1 { page-break-before: always; }
  .print-page h1:first-of-type { page-break-before: avoid; }
  .print-page h1, .print-page h2 { page-break-after: avoid; }
  thead { display: table-header-group; }
  .print-page tr { page-break-inside: avoid; }
  .print-page .signoff { page-break-inside: avoid; }
  .print-page .progress-bar { page-break-inside: avoid; }
}