/* Shared HumanBiz policy stylesheet — used by all HB-HR-POL-* documents */
/* Brand source: src/lib/brand.ts (HUMANBIZ Group, 4-entity Alliance) */
/* Brand colors:                                                       */
/*   --hb-deep:  #0A2A6B  (deep navy — primary dark)                   */
/*   --hb-royal: #0D47A1  (royal blue — main brand)                    */
/*   --hb-bright:#1E88E5  (bright blue — secondary)                    */
/*   --hb-sky:   #A8D8FB  (sky blue — light accent)                    */

:root {
  --hb-deep:   #0A2A6B;
  --hb-royal:  #0D47A1;
  --hb-bright: #1E88E5;
  --hb-sky:    #A8D8FB;
  --hb-sky-soft: #EAF3FE;
}

@page { size: A4; margin: 18mm 18mm 22mm 18mm; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: "Calibri", "Helvetica Neue", Arial, sans-serif;
  color: #1a1f2e;
  background: #e9ecf1;
  line-height: 1.5;
  font-size: 11pt;
}
.page {
  width: 210mm;
  min-height: 297mm;
  background: white;
  margin: 14px auto;
  padding: 18mm 22mm 24mm 22mm;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  position: relative;
  page-break-after: always;
}
.page:last-child { page-break-after: auto; }

@media print {
  body { background: white; }
  .page { box-shadow: none; margin: 0; padding: 18mm 22mm 24mm 22mm; }
  .no-print { display: none !important; }
}

/* Print hint banner */
.print-hint {
  position: sticky; top: 0; z-index: 100;
  background: var(--hb-royal); color: white; padding: 10px 16px;
  font-size: 11pt; text-align: center;
}
.print-hint button {
  background: white; color: var(--hb-royal); border: none; padding: 6px 14px;
  border-radius: 3px; font-weight: 700; cursor: pointer; margin-left: 8px;
}

/* Brand bar (top of page 1) */
.brand-bar {
  background: var(--hb-deep); color: white;
  padding: 14px 22px; margin: -18mm -22mm 18px -22mm;
  width: calc(100% + 44mm);
  display: flex; align-items: center; gap: 16px;
}
.brand-bar .logo { width: 88px; height: auto; flex-shrink: 0; }
.brand-bar .text { flex: 1; }
.brand-bar .name {
  font-size: 14pt; font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.brand-bar .tag {
  font-size: 9.5pt; opacity: 0.85;
  font-style: italic;
}
.brand-bar .alliance {
  font-size: 8.5pt; opacity: 0.7;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 3px;
}

/* Page running header (page 2+) */
.run-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px; margin-bottom: 16px;
  border-bottom: 2px solid var(--hb-royal);
  font-size: 9.5pt; color: #5a6675;
}
.run-head .left { display: flex; align-items: center; gap: 10px; }
.run-head .logo-mini { width: 38px; height: auto; }
.run-head .right { text-align: right; }

/* Document title */
h1.doc-title { font-size: 22pt; font-weight: 800; color: var(--hb-deep); margin: 10px 0 4px; }
.doc-sub { font-size: 11pt; color: var(--hb-royal); font-style: italic; margin-bottom: 16px; }

/* Meta table */
table.meta {
  width: 100%; border-collapse: collapse; margin-bottom: 18px;
  font-size: 10.5pt;
}
table.meta td {
  border: 1px solid #cbd5e0; padding: 6px 10px; vertical-align: top;
}
table.meta td.lbl { background: var(--hb-sky-soft); font-weight: 700; color: var(--hb-deep); width: 22%; }

/* Section headings */
h2.sect {
  font-size: 14pt; font-weight: 700; color: var(--hb-deep);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--hb-royal);
}
h3.sub { font-size: 11.5pt; font-weight: 700; color: #1a1f2e; margin: 12px 0 4px; }

p { margin: 0 0 8px; }
ul, ol { margin: 4px 0 10px 22px; }
ul li, ol li { margin-bottom: 3px; }

.ko { font-size: 9.5pt; color: #5a6675; font-style: italic; }

/* Callout boxes */
.callout {
  margin: 10px 0; padding: 10px 14px; border-radius: 3px;
  font-size: 10.5pt; line-height: 1.5;
}
.callout.info { background: var(--hb-sky-soft); border-left: 4px solid var(--hb-royal); color: var(--hb-deep); }
.callout.warn { background: #fffbeb; border-left: 4px solid #d4a017; color: #78350f; }
.callout.danger { background: #fef2f2; border-left: 4px solid #dc2626; color: #7f1d1d; }
.callout.good { background: #eaf5ee; border-left: 4px solid #16a34a; color: #14532d; }
.callout strong { color: inherit; }

/* Standard table */
table.std {
  width: 100%; border-collapse: collapse;
  margin: 8px 0 12px; font-size: 10pt;
}
table.std th, table.std td {
  border: 1px solid #cbd5e0; padding: 6px 8px;
  text-align: left; vertical-align: top;
}
table.std th { background: var(--hb-sky-soft); font-weight: 700; color: var(--hb-deep); }
table.std tr.danger td { background: #fef2f2; }
table.std tr.good td { background: #eaf5ee; }
table.std tr.warn td { background: #fffbeb; }

/* Diff highlight (for v1.1 changes) */
.diff-add { background: #dcfce7; padding: 0 2px; border-radius: 2px; }
.diff-del { background: #fee2e2; text-decoration: line-through; padding: 0 2px; border-radius: 2px; }

/* Page footer */
.pg-foot {
  position: absolute; bottom: 12mm; left: 22mm; right: 22mm;
  display: flex; justify-content: space-between;
  font-size: 9pt; color: #8a96a8;
  padding-top: 6px; border-top: 1px solid #e6e9ee;
}

/* Approval block */
.approval {
  margin-top: 24px;
  border: 2px solid var(--hb-deep);
  border-radius: 4px;
  padding: 14px 18px;
}
.approval h3 { color: var(--hb-deep); margin-bottom: 10px; }
.approval-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 10px;
}
.sig-line {
  border-bottom: 1.5px solid #1a1f2e; min-height: 32px;
  padding: 4px 6px;
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", "Apple Chancery", cursive;
  font-size: 14pt; font-style: italic;
}
.sig-cap { font-size: 9.5pt; color: #5a6675; margin-top: 4px; }

.footer-note {
  margin-top: 18px; padding-top: 10px;
  border-top: 1px solid #e6e9ee;
  font-size: 9pt; color: #8a96a8; font-style: italic;
}

/* ==========================================================
   Reusable inline SVG logos — copy into HTML where needed.
   Logo (full):
     <svg class="logo" viewBox="0 0 700 480" xmlns="http://www.w3.org/2000/svg">
       <g style="mix-blend-mode: multiply">
         <rect x="60"  y="60" width="200" height="360" rx="52" ry="52" fill="#A8D8FB"/>
         <rect x="180" y="60" width="200" height="360" rx="52" ry="52" fill="#1E88E5"/>
         <rect x="300" y="60" width="200" height="360" rx="52" ry="52" fill="#0D47A1"/>
         <rect x="420" y="60" width="200" height="360" rx="52" ry="52" fill="#0A2A6B"/>
       </g>
     </svg>
   ========================================================== */