/*
 * SaatPro shared look (v2.6.0): one set of buttons and form fields for every tool.
 * Loaded after each tool's own stylesheet so the same classes look the same everywhere.
 */
body :is(.spw-container,.spw-module,.spw-risk-register,.spw-sop-wrapper,.spw-mm-container,.spw-pp2-wrap){
  --ui-accent:#4f46e5; --ui-accent-dark:#4338ca; --ui-accent-soft:#eef0ff; --ui-line:#d6dcf0; --ui-ink:#1e1b4b; --ui-danger:#d64541;
}

/* ---------- fields ---------- */
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label){position:relative}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group) > label,
body :is(.spw-pp2-grid,.spw-pp2-commercial-grid) > label{font-weight:600;font-size:14px;color:#2b2f55;letter-spacing:.005em;transition:color .15s}

body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button]),select,textarea),
body :is(.spw-input){
  width:100%;box-sizing:border-box;min-height:44px;padding:11px 14px;font:inherit;font-size:15px;line-height:1.4;color:#1f2433;
  background:#fff;border:1.5px solid var(--ui-line);border-radius:12px;
  box-shadow:0 1px 0 rgba(30,27,75,.04);
  transition:border-color .15s,box-shadow .2s,background-color .2s;
}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label) textarea{min-height:96px;resize:vertical}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label) select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label) ::placeholder,body .spw-input::placeholder{color:#8b93a7;opacity:1}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label) :is(input,select,textarea):hover:not(:focus){border-color:#a5b4fc}

/* the field being typed in lights up: glow, tinted background, accent bar and coloured label */
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group,.spw-pp2-grid label,.spw-pp2-commercial-grid label) :is(input,select,textarea):focus,
body .spw-input:focus{
  outline:0;border-color:var(--ui-accent);background-color:#fbfbff;
  box-shadow:0 0 0 4px rgba(79,70,229,.16),0 6px 16px rgba(79,70,229,.12);
}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group):focus-within > label{color:var(--ui-accent-dark)}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group)::before{
  content:"";position:absolute;left:-9px;top:2px;bottom:2px;width:3px;border-radius:3px;background:linear-gradient(180deg,#818cf8,#4338ca);
  opacity:0;transform:scaleY(.4);transition:opacity .18s,transform .18s;pointer-events:none;
}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group):focus-within::before{opacity:1;transform:scaleY(1)}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group) :is(input,select,textarea):user-invalid{border-color:var(--ui-danger);box-shadow:0 0 0 4px rgba(214,69,65,.12)}
body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group) :is(input,select,textarea):disabled{background:#f3f4f8;color:#8b93a7;cursor:not-allowed}
body .spw-required,body .spw-field label .required{color:var(--ui-danger)}

/* ---------- buttons ---------- */
body :is(.spw-button,.spw-button-primary,.spw-btn,.spw-sop-primary-button,.spw-sop-secondary-button,.spw-mm-button,.spw-risk-primary-button,.spw-risk-secondary-button,.spw-risk-reset-button,.spw-risk-export-button,.spw-pp2-primary,.spw-pp2-secondary){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:44px;padding:10px 20px;
  font:inherit;font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,#6366f1,#4338ca);border:1.5px solid transparent;border-radius:12px;
  box-shadow:0 8px 18px rgba(67,56,202,.28),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s,box-shadow .2s,filter .15s,background-color .15s;
}
body :is(.spw-button,.spw-button-primary,.spw-btn,.spw-sop-primary-button,.spw-sop-secondary-button,.spw-mm-button,.spw-risk-primary-button,.spw-risk-secondary-button,.spw-risk-reset-button,.spw-risk-export-button,.spw-pp2-primary,.spw-pp2-secondary):hover{
  filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 24px rgba(67,56,202,.32),inset 0 1px 0 rgba(255,255,255,.35);
}
body :is(.spw-button,.spw-button-primary,.spw-btn,.spw-sop-primary-button,.spw-sop-secondary-button,.spw-mm-button,.spw-risk-primary-button,.spw-risk-secondary-button,.spw-risk-reset-button,.spw-risk-export-button,.spw-pp2-primary,.spw-pp2-secondary):active{transform:translateY(0);filter:brightness(.97);box-shadow:0 3px 8px rgba(67,56,202,.28)}
body :is(.spw-button,.spw-button-primary,.spw-btn,.spw-sop-primary-button,.spw-sop-secondary-button,.spw-mm-button,.spw-risk-primary-button,.spw-risk-secondary-button,.spw-risk-reset-button,.spw-risk-export-button,.spw-pp2-primary,.spw-pp2-secondary):focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
body :is(.spw-button,.spw-btn,.spw-mm-button,.spw-sop-primary-button,.spw-risk-primary-button,.spw-pp2-primary)[disabled]{opacity:.55;cursor:not-allowed;transform:none;filter:none;box-shadow:none}

/* secondary = outlined; also used for reset / back / clear */
body :is(.spw-secondary,.spw-button-secondary,.spw-btn-secondary,.spw-sop-secondary-button,.spw-risk-secondary-button,.spw-risk-reset-button,.spw-mm-secondary,.spw-pp2-secondary){
  color:var(--ui-accent-dark);background:#fff;border-color:#c7cdf5;box-shadow:0 1px 2px rgba(30,27,75,.06);
}
body :is(.spw-secondary,.spw-button-secondary,.spw-btn-secondary,.spw-sop-secondary-button,.spw-risk-secondary-button,.spw-risk-reset-button,.spw-mm-secondary,.spw-pp2-secondary):hover{background:var(--ui-accent-soft);border-color:var(--ui-accent);box-shadow:0 6px 14px rgba(67,56,202,.14)}

/* the "need this customised?" button keeps its own colour but the same shape */
body .spw-customization-trigger{background:linear-gradient(180deg,#1b6aa8,#0f4c81)}

/* export buttons: a coloured edge tells the formats apart at a glance */
body :is(#downloadWord,#downloadRaidWord,#downloadWBSWord,#downloadStakeholderWord,#downloadSOPWord,#downloadMeetingMinutes,#spwDownloadRiskWord,#rcaDownloadWord,#exportProjectHealthWord,#spw-raci-export-word){box-shadow:0 8px 18px rgba(67,56,202,.28),inset 4px 0 0 #2b6cb0}
body :is(#downloadRaidExcel,#downloadWBSExcel,#downloadStakeholderExcel,#spwDownloadRiskExcel,#rcaDownloadExcel,#exportProjectHealthExcel,#spw-raci-export-excel){box-shadow:0 8px 18px rgba(67,56,202,.28),inset 4px 0 0 #1f9d55}
body :is(#downloadPdf,#printRaid,#printWBS,#printStakeholder,#printSOP,#spwPrintRiskRegister,#rcaPrintPdf,#exportProjectHealthPDF,#spw-raci-export-pdf,#downloadMeetingMinutesPdf){box-shadow:0 8px 18px rgba(67,56,202,.28),inset 4px 0 0 #d64541}
body :is(#downloadPpt,#spwDownloadRiskPpt,#rcaDownloadPpt,#exportProjectHealthPpt,#downloadStakeholderPpt){box-shadow:0 8px 18px rgba(67,56,202,.28),inset 4px 0 0 #f08a24}

/* button rows */
body :is(.spw-button-group,.spw-mm-button-group,.spw-risk-export-actions,.spw-pp2-actions){display:flex;flex-wrap:wrap;gap:10px;align-items:center}

@media (max-width:600px){
  body :is(.spw-button-group,.spw-mm-button-group,.spw-risk-export-actions,.spw-pp2-actions) > *{flex:1 1 100%}
  body :is(.spw-field,.spw-risk-field,.spw-sop-field,.spw-mm-field,.spw-form-group)::before{left:-6px}
}
@media (prefers-reduced-motion:reduce){
  body :is(.spw-button,.spw-btn,.spw-mm-button,.spw-risk-export-button,.spw-pp2-primary,.spw-pp2-secondary),body :is(input,select,textarea),body .spw-field::before{transition:none}
  body :is(.spw-button,.spw-btn,.spw-mm-button):hover{transform:none}
}
@media print{body .spw-field::before{display:none}}

/* ---------- page header (v2.9.0): the tool name leads, "SaatPro Workspace" is a small label above it ---------- */
html body .spw-header.spw-header{text-align:center;margin:0 0 28px;padding:0}
html body .spw-header.spw-header > h1,
html body .spw-mm-header.spw-mm-header > h1{display:inline-block;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#4f46e5;background:#eef0ff;border:1px solid #d9ddff;border-radius:999px;padding:6px 14px;margin:0 0 14px}
html body .spw-header.spw-header > h1 + p,
html body .spw-mm-header.spw-mm-header > h1 + p{display:block;font-size:clamp(26px,4.2vw,38px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#1e1b4b;margin:0 0 12px}
html body .spw-header.spw-header > h1 + p + p,
html body .spw-mm-header.spw-mm-header > h1 + p + span{display:block;font-size:16px;line-height:1.55;color:#526070;max-width:720px;margin:0 auto}
