/* ===========================================================================
   Ntuthuko Biz Connect — client-facing document design system
   Covers quotations, invoices and service agreements.

   Two deliberately different looks:
     .doc            invoices + quotations — brand design, GREEN bar = invoice,
                     GOLD bar = quotation, so the two can never be confused.
     .legal-doc      service agreements + power of attorney — plain formal
                     legal layout, graphic setup preserved from the signed
                     CIPC Power of Attorney template.
   =========================================================================== */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/montserrat-400.woff) format('woff')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/montserrat-600.woff) format('woff')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-700.woff) format('woff')}

:root{
  --doc-brand:#064b3d; --doc-brand-dark:#04352b; --doc-brand-soft:#eaf3ef;
  --doc-gold:#e8b33d; --doc-gold-bright:#f5c651; --doc-gold-deep:#9a6f14;
  --doc-gold-soft:#fdf4e0;
  --doc-line:#b8c8c0; --doc-ink:#064b3d; --doc-muted:#5a5a5a;
}

/* --------------------------------------------------------------- shell --- */
.doc{
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  color:var(--doc-ink); background:#fff; width:210mm; max-width:100%;
  margin:0 auto; box-shadow:0 10px 34px rgba(4,53,43,.16); overflow:hidden;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.doc *{box-sizing:border-box}
.doc p,.doc h1,.doc h2,.doc h3,.doc ol,.doc ul,.doc table{margin:0;padding:0}

.doc-head{background:var(--doc-brand); color:#fff; padding:17px 30px 15px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap}
.doc-head .doc-logo{width:160px; height:auto; display:block}
.doc-co{font-size:9.5px; line-height:1.65; text-align:right; opacity:.93; max-width:270px}

.doc-bar{padding:9px 30px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px}
.doc-bar h1{font-size:19px; letter-spacing:.2em; font-weight:700; text-transform:uppercase}
.doc-bar .right{display:flex; align-items:center; gap:11px}
.doc-bar .no{font-size:12px; font-weight:600; letter-spacing:.05em}
.doc-bar .badge{font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:2px}

.doc.invoice .doc-bar{background:var(--doc-brand-dark); color:#fff}
.doc.invoice .doc-bar .no{color:var(--doc-gold-bright)}
.doc.invoice .doc-bar .badge{background:var(--doc-gold); color:#2a1d00}

.doc.quote .doc-bar{background:var(--doc-gold); color:#2a1d00}
.doc.quote .doc-bar .no{color:#4a3300}
.doc.quote .doc-bar .badge{background:var(--doc-brand-dark); color:var(--doc-gold-bright)}

.doc-note{font-size:9.5px; line-height:1.5; padding:7px 30px; border-bottom:1px solid var(--doc-line)}
.doc.invoice .doc-note{background:var(--doc-brand-soft); color:var(--doc-brand)}
.doc.quote .doc-note{background:var(--doc-gold-soft); color:#5a4310}
.doc-note strong{font-weight:700}

/* ---------------------------------------------------------- parties bar --- */
.doc-parties{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--doc-line)}
.doc-parties > div{padding:12px 30px}
.doc-parties > div:first-child{border-right:1px solid var(--doc-line)}
.doc h2.doc-label{font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--doc-muted); font-weight:700; margin-bottom:8px}
.doc-party{font-size:11px; line-height:1.7}
.doc-party strong{font-size:13.5px; display:block; margin-bottom:3px; font-weight:700}
table.doc-meta{width:100%; font-size:10.5px; border-collapse:collapse}
table.doc-meta td{padding:2.5px 0; vertical-align:top; border:0}
table.doc-meta td:first-child{color:var(--doc-muted); width:48%}
table.doc-meta td:last-child{font-weight:600; text-align:right}
table.doc-meta tr.hi td{color:var(--doc-brand); font-weight:700}

/* ------------------------------------------------------------- line items -- */
table.doc-items{width:100%; border-collapse:collapse; font-size:10.5px}
table.doc-items thead th{background:var(--doc-brand-soft); color:var(--doc-brand);
  text-align:left; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 9px; border-top:1px solid var(--doc-line); border-bottom:1px solid var(--doc-line)}
table.doc-items thead th:first-child{padding-left:30px}
table.doc-items thead th:last-child{padding-right:30px; text-align:right}
table.doc-items td{padding:10px 9px; border-bottom:1px solid #e6ede9; vertical-align:top}
table.doc-items td:first-child{padding-left:30px; color:var(--doc-muted); font-size:9px;
  white-space:nowrap; padding-top:11px; letter-spacing:.04em}
table.doc-items td:last-child{padding-right:30px; text-align:right; font-weight:700; white-space:nowrap}
table.doc-items .num{text-align:right; white-space:nowrap}
.doc-desc strong{display:block; font-weight:600; margin-bottom:2px; font-size:11.5px}
.doc-desc small{color:var(--doc-muted); font-size:9.5px; line-height:1.55; display:block}
.doc-desc .turn{display:inline-block; margin-top:3px; font-size:8.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--doc-gold-deep); font-weight:700}

/* ---------------------------------------------------------------- totals -- */
.doc-totals{display:flex; justify-content:flex-end; padding:0 30px}
.doc-totals table{width:310px; font-size:11px; border-collapse:collapse; margin-top:7px}
.doc-totals td{padding:2.5px 0; border:0}
.doc-totals td:last-child{text-align:right; font-weight:600; white-space:nowrap}
.doc-totals tr.sep td{border-top:1px solid var(--doc-line); padding-top:7px}
.doc-totals tr.zero td{color:var(--doc-muted); font-weight:400}
.doc-totals tr.due td{border-top:2px solid var(--doc-brand); font-size:15.5px;
  font-weight:700; color:var(--doc-brand); padding-top:9px}
.doc-totals tr.due.gold td{border-top-color:var(--doc-gold-deep); color:var(--doc-gold-deep)}

/* ----------------------------------------------------------------- boxes -- */
.doc-boxes{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:11px 30px 0}
.doc-boxes.one{grid-template-columns:1fr}
.doc-box{display:block; border:1px solid var(--doc-line); border-radius:4px; padding:11px 13px;
  font-size:10px; line-height:1.55}
.doc-box.tone-brand{background:var(--doc-brand-soft)}
.doc-box.tone-gold{background:var(--doc-gold-soft); border-color:#e6d3a4}
.doc-box .row{display:flex; justify-content:space-between; gap:10px}
.doc-box .row span:first-child{color:var(--doc-muted)}
.doc-box .row span:last-child{font-weight:600; text-align:right}
.doc-box p{color:var(--doc-muted); margin-top:5px; line-height:1.6}

/* ------------------------------------------------------------ acceptance -- */
.doc-accept{margin:14px 30px 0; border:2px solid var(--doc-gold); border-radius:4px;
  background:#fff; padding:13px 15px}
.doc-accept h2.doc-label{color:var(--doc-gold-deep)}
.doc-accept .how{font-size:10px; line-height:1.65; color:var(--doc-muted); margin-bottom:11px}
.doc-accept .how strong{color:var(--doc-ink)}
.doc-sign{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; margin-top:4px}
.doc-sign div{border-bottom:1px solid var(--doc-ink); padding-bottom:22px}
.doc-sign span{display:block; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--doc-muted); font-weight:700; position:relative; top:5px}

/* ----------------------------------------------------------------- terms -- */
.doc-terms{display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:11px 30px 0}
.doc-terms section{font-size:8px; line-height:1.5; color:var(--doc-muted); text-align:justify}
.doc-terms h2.doc-label{margin-bottom:5px}
.doc-terms li{margin-bottom:3px; margin-left:12px}

.doc-foot{margin-top:11px; background:var(--doc-brand); color:#fff; padding:11px 30px;
  font-size:9.5px; line-height:1.65; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap}
.doc-foot .thanks{font-weight:700; color:var(--doc-gold-bright); font-size:10.5px}
.doc-foot .legal{text-align:right; opacity:.92}

/* ===========================================================================
   Service agreements / Power of Attorney — graphic setup preserved from the
   signed CIPC POA template: centred masthead, underscore fill rules, justified
   body, inline numbered authority list, signature + two witness blocks.
   =========================================================================== */
.legal-doc{
  font-family:Arial,Helvetica,'Liberation Sans',sans-serif;
  color:#000; background:#fff; width:210mm; max-width:100%; margin:0 auto;
  padding:22mm 20mm; box-shadow:0 10px 34px rgba(0,0,0,.14);
  font-size:11pt; line-height:1.6;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.legal-doc *{box-sizing:border-box}
/* Masthead: centred green underlined company name over the logo, exactly as
   the signed Power of Attorney template sets it out. */
.legal-masthead{text-align:center; margin-bottom:10px}
.legal-masthead .co-name{color:#1f7a4d; font-weight:700; font-size:13pt;
  text-decoration:underline; letter-spacing:.02em}
.legal-masthead img{width:150px; height:auto; margin:8px auto 4px; display:block}
.legal-contact{font-size:10.5pt; line-height:2; margin-bottom:16px}
.legal-doc h1{text-align:center; font-size:15pt; font-weight:700; margin:14px 0 18px}
.legal-doc p{margin:0 0 11px; text-align:justify}
/* Underscore fill rules. Where the CRM knows the answer it is typed onto the
   rule; where it does not, the rule is left blank to be completed by hand. */
.legal-doc .fill{display:inline-block; min-width:230px; border-bottom:1px solid #000;
  margin-left:4px; text-align:center; font-weight:700}
.legal-doc .fill.short{min-width:150px}
.legal-doc .fill.tiny{min-width:55px}
.legal-doc .fill.long{min-width:330px}
.legal-signblock{margin-top:20px; page-break-inside:avoid}
.legal-signblock .party-label{margin:18px 0 8px}
.legal-signblock .line{margin-bottom:11px}

/* ------------------------------------------------------------ CRM chrome -- */
.doc-toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.doc-scroll{overflow-x:auto; padding-bottom:8px}
.doc-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.doc-tabs button{border:1px solid var(--doc-line); background:#fff; color:var(--doc-brand);
  padding:7px 14px; border-radius:999px; font-size:13px; cursor:pointer; font-weight:600}
.doc-tabs button.active{background:var(--doc-brand); color:#fff; border-color:var(--doc-brand)}

@media print{
  body *{visibility:hidden}
  .doc,.doc *,.legal-doc,.legal-doc *{visibility:visible}
  .doc,.legal-doc{position:absolute; left:0; top:0; box-shadow:none; margin:0; width:210mm}
  .no-print{display:none !important}
  @page{size:A4; margin:0}
  .legal-doc{padding:20mm 18mm}
  table.doc-items tr,.doc-box,.doc-totals table,.doc-terms section,.doc-accept,
  .doc-foot,.legal-signblock{break-inside:avoid}
}
@media (max-width:820px){
  .doc,.legal-doc{width:100%}
  .doc-parties,.doc-terms,.doc-boxes,.doc-sign{grid-template-columns:1fr}
  .doc-parties > div:first-child{border-right:0; border-bottom:1px solid var(--doc-line)}
  .doc-head{flex-direction:column} .doc-co{text-align:left}
  .doc-head,.doc-bar,.doc-note,.doc-parties > div,.doc-totals,.doc-terms,
  .doc-boxes,.doc-foot{padding-left:16px; padding-right:16px}
  .doc-accept{margin-left:16px; margin-right:16px}
  table.doc-items td:first-child,table.doc-items thead th:first-child{padding-left:16px}
  table.doc-items td:last-child,table.doc-items thead th:last-child{padding-right:16px}
  .legal-doc{padding:16px}
}

/* ---------------------------------------------------- dialing list detail -- */
tr.dial-detail td{background:var(--doc-brand-soft); padding:12px 14px}
.dial-detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 20px; font-size:12px; line-height:1.5}
.dial-detail-grid > div{overflow-wrap:anywhere}
.dial-detail-grid .muted{font-size:10px; letter-spacing:.08em; text-transform:uppercase}