/* Gedeelde bouwstenen (UI-043). Hoort bij templates/macros/hrw.html. */

/* Knoptekst breekt nooit af (F83 punt 2): past een knop niet, dan zakt de hele knop.
   Onder 576 px blijft afbreken mogelijk: daar mag een hoofdknop over de volle breedte
   lopen en mag een lange bestaande knoptekst de pagina niet breder maken dan het scherm. */
@media(min-width:576px){.btn{white-space:nowrap}}
.hrw-block-footer .btn,.app-confirm-actions .btn{white-space:nowrap}

/* Voet van een los op te slaan blok (F83): status links, knop rechts, vaste plaats. */
.hrw-block-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--tb-border-color);background:var(--tb-light);border-radius:0 0 var(--tb-card-border-radius,.5rem) var(--tb-card-border-radius,.5rem)}
.hrw-block-status{font-size:13px;color:var(--tb-secondary-color);white-space:nowrap}
.hrw-block-status.is-dirty{color:#805914}
.hrw-block-status.is-saved{color:#17643c}
.hrw-block-status.is-error{color:#a52828}

/* Alleen-lezen waarde in de vorm van een invoerveld, compact voor dossiers (F84). */
.hrw-ro-field{display:flex;width:100%;height:22px;font-size:12px;line-height:20px;border:1px solid var(--tb-border-color);border-radius:4px;overflow:hidden;background:#f3f4f8;font-variant-numeric:tabular-nums;white-space:nowrap}
.hrw-ro-value{flex:1 1 auto;min-width:0;padding:0 .4rem;text-align:right;color:var(--tb-body-color)}
.hrw-ro-addon{flex:0 0 auto;padding:0 .4rem;background:#e6e8f0;color:#5b6070;text-align:center}
.hrw-ro-addon:first-child{border-right:1px solid var(--tb-border-color)}
.hrw-ro-addon:last-child{border-left:1px solid var(--tb-border-color)}

/* Bewerkbaar getalveld: cijfers onder elkaar, berekende waarde herkenbaar inactief. */
.hrw-number-field .form-control{font-variant-numeric:tabular-nums}
.hrw-number-field .form-control[readonly]{background:#f3f4f8;color:var(--tb-body-color)}

/* Stappen op één pagina (F85): meelopende stappenbalk, per stap een kaart die inklapt
   tot één regel. Zelfde beeld als de stappen van de offerte-invoer. */
.hrw-steps{position:sticky;top:0;z-index:20;display:flex;gap:8px;margin:0 0 14px;padding:8px 0;background:var(--tb-body-bg);overflow-x:auto}
.hrw-steps-item{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:150px;padding:8px 10px;border:1px solid var(--tb-border-color);border-radius:8px;background:#fff;color:inherit;text-align:left}
button.hrw-steps-item:not(:disabled):hover{border-color:var(--hrw-primary);color:var(--hrw-primary)}
.hrw-steps-item:disabled,span.hrw-steps-item{opacity:.7}
.hrw-steps-item.is-active{border-color:var(--hrw-primary);opacity:1}
.hrw-steps-number{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--tb-light);font-size:12px;font-weight:700}
.hrw-steps-item.is-active .hrw-steps-number{background:var(--hrw-primary);color:#fff}
.hrw-steps-item.is-complete .hrw-steps-number{background:#d8f0e2;color:#17643c}
.hrw-steps-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hrw-steps-text strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrw-steps-text small{font-size:11px;color:var(--tb-secondary-color)}
.hrw-steps-text small:empty{display:none}

.hrw-step{margin-bottom:12px}
.hrw-step-header{display:flex;align-items:center;gap:12px;min-width:0}
.hrw-step-header .card-title{display:flex;align-items:center;gap:10px;white-space:nowrap}
.hrw-step-number{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tb-light);font-size:12px;font-weight:700}
.hrw-step.is-open .hrw-step-number{background:var(--hrw-primary);color:#fff}
.hrw-step-summary{flex:1 1 auto;min-width:0;color:var(--tb-secondary-color);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrw-step-edit{flex:0 0 auto}
.hrw-step.is-collapsed .hrw-step-header{padding-top:10px;padding-bottom:10px;min-height:52px}
.hrw-step.is-collapsed .hrw-step-body,.hrw-step.is-collapsed .hrw-step-footer{display:none}
.hrw-step.is-collapsed .hrw-step-header{border-bottom:0}
.hrw-step.is-pending{opacity:.75}
.hrw-step.is-pending .hrw-step-summary{white-space:normal}
.hrw-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--tb-border-color);background:var(--tb-light);font-size:13px}

/* "Nog 3 dingen nodig" (F89): elke regel is een link naar het veld. */
.hrw-needed{margin-bottom:12px;padding:12px 16px;border:1px solid #f1dcae;border-radius:8px;background:#fffaf0}
.hrw-needed ul{margin-top:6px;padding-left:18px}
.hrw-needed:focus{outline:2px solid #e3b556;outline-offset:2px}

/* Uitleg achter het i-knopje (F93): wegklikbare popover van het thema, zie hrw-info.js. */
.hrw-info{padding:0;border:0;background:none;color:var(--tb-secondary-color);line-height:1;vertical-align:-2px}
.hrw-info:hover,.hrw-info[aria-expanded=true]{color:var(--hrw-primary)}
/* Kleurloze statusregel onder een veld of blok: een toestand die de pagina zelf vult ("Neemt de prijs over"), geen vaste
   toelichting; die staat achter het i-knopje (F102). */
.hrw-field-note{margin-top:.25rem;font-size:.875em;color:var(--tb-secondary-color)}
.hrw-info-popover{max-width:320px;font-size:13px}
.hrw-info-popover .popover-body{padding:10px 12px;color:var(--tb-body-color)}

/* Gedeelde dialoog (UI-044): Bootstrap-modal met de markup van het prijsvenster. De vensters
   houden hun bestaande .card-inhoud; alleen de omhulling is gedeeld. Onder 576 px schermvullend
   (modal-fullscreen-sm-down), daarboven één scrollend venster met vaste kop. */
.hrw-dialog .modal-content{max-height:calc(100vh - 3.5rem);overflow-y:auto}
.hrw-dialog .modal-content>.card{margin:0;border:0;box-shadow:none;background:transparent}
.hrw-dialog .modal-content>.card>.card-header{position:sticky;top:0;z-index:2;background:var(--tb-card-cap-bg,var(--tb-card-bg,#fff))}
.hrw-dialog .modal-content>.card>.card-footer{border-radius:0 0 var(--tb-modal-border-radius,.5rem) var(--tb-modal-border-radius,.5rem)}
@media(max-width:575.98px){.hrw-dialog .modal-content{max-height:none}}

/* Gmail-pagina, binnenkomende mail (FW-008 T1): lange adressen, onderwerpen en bestandsnamen worden afgekapt (F104). */
.hrw-intake-table{table-layout:fixed;min-width:46rem}
.hrw-intake-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mailRecentCard .hrw-intake-table th:nth-child(1){width:10.5rem}
#mailRecentCard .hrw-intake-table th:nth-child(3){width:19rem}
#mailRecentCard .hrw-intake-table th:nth-child(4){width:15rem}
#mailExclusionsCard .hrw-intake-table th:nth-child(1){width:6rem}
#mailExclusionsCard .hrw-intake-table th:nth-child(2){width:22rem}
#mailExclusionsCard .hrw-intake-table th:nth-child(4){width:5rem}
#mailExclusionsCard .hrw-intake-table th:nth-child(5){width:4.5rem}

/* Gebruiker: foto of initialen (bovenbalk, Gebruikers en rollen, Mijn profiel; FW-093). */
.hrw-user-avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;flex:0 0 auto;display:inline-grid;place-items:center}
.hrw-user-avatar-initials{background:var(--hrw-soft,#eaf3ee);color:var(--hrw-green,#1f6547);font-weight:600;font-size:.8rem}
.hrw-topbar-user{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none}
.hrw-topbar-user .hrw-user-avatar{width:1.75rem;height:1.75rem;font-size:.7rem}