/* Billix 408 — shared information hierarchy. Layouts and interaction controls retain their ownership. */
:root{--hb-ui-space:16px;--hb-ui-section:24px;--hb-ui-title:24px;--hb-ui-note:14px;--hb-ui-radius:14px;--hb-ui-muted:#686b75}
:is(#app,dialog) .heading{gap:16px;margin-bottom:20px}
:is(#app,dialog) .heading h1{font-size:clamp(28px,3vw,40px);line-height:1.15;font-weight:750;letter-spacing:-.035em;overflow-wrap:anywhere}
:is(#app,dialog) .heading p{font-size:14px;line-height:1.5;margin-top:6px}
:is(#app,dialog) .panel-head{gap:12px;margin-bottom:16px;align-items:center}
:is(#app,dialog) .panel-head h2{font-size:20px;line-height:1.25;font-weight:750;overflow-wrap:anywhere}
:is(#app,dialog) .form{gap:16px;min-width:0}
:is(#app,dialog) .form-grid{gap:16px;min-width:0}
:is(#app,dialog) .field{gap:6px;min-width:0;font-size:14px;line-height:1.4}
:is(#app,dialog) .field>span{font-weight:650}
:is(#app,dialog) .field small{font-size:13px;line-height:1.45}
:is(#app,dialog) .small-note{font-size:var(--hb-ui-note);line-height:1.5}
:is(#app,dialog) .form-actions{gap:12px;row-gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
:is(#app,dialog) .form-actions>.btn{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
/* Consistent readable notes; retain warning colours and the established navy accent. */
:is(#app,dialog) .notice:not(.error):not([role=alert]){padding:14px 18px;border-radius:var(--hb-ui-radius);font-size:15px;line-height:1.5;font-weight:400}
:is(#app,dialog) .notice strong{font-weight:700}
:is(#app,dialog) .eyebrow{font-size:11px;line-height:1.4;letter-spacing:.08em;margin-bottom:8px;font-weight:700}
/* Modal headings share typography, without changing close rails, chat or media layouts. */
dialog .modal-head h2{font-size:var(--hb-ui-title);line-height:1.2;font-weight:750;letter-spacing:-.025em;overflow-wrap:anywhere}
dialog .modal-head{gap:16px}
/* Plain content panels only: edge-to-edge cover images keep their original geometry. */
:is(#app,dialog) .empty{padding:28px 16px}
:is(#app,dialog) .empty h3{font-size:18px;line-height:1.3;margin-bottom:8px}
:is(#app,dialog) .empty p{font-size:14px;line-height:1.5;margin-bottom:16px}
:is(#app,dialog) .empty-symbol{margin-bottom:14px}
/* Identity, address and price retain their existing arrangement with a tighter rhythm. */
:is(#app,dialog) .hb-person-title h3{font-size:20px;line-height:1.25;font-weight:750}
:is(#app,dialog) .hb-person-location{margin:8px 0}
:is(#app,dialog) .hb-person-location p{margin:5px 0;line-height:1.45}
:is(#app,dialog) .hb-person-location small{font-size:12px;line-height:1.45}
:is(#app,dialog) .hb-person-actions{gap:8px 12px}
:is(#app,dialog) .hb-space-copy{line-height:1.5}
:is(#app,dialog) .hb-space-card h2,:is(#app,dialog) .hb-business-card h2{font-size:20px;line-height:1.25;font-weight:750}
:is(#app,dialog) .stat{padding:16px 20px}
:is(#app,dialog) .stat strong{margin-top:10px;font-variant-numeric:tabular-nums;line-height:1.2}
:is(#app,dialog) .stat small{margin-top:4px;line-height:1.4}
:is(#app,dialog) .hb-candidate-presentation{gap:12px}
:is(#app,dialog) .hb-work-note{font-size:14px;line-height:1.5}
@media(max-width:650px){
 :root{--hb-ui-space:12px;--hb-ui-section:20px;--hb-ui-title:22px}
 :is(#app,dialog) .heading{gap:12px;margin-bottom:16px}
 :is(#app,dialog) .heading h1{font-size:28px}
 :is(#app,dialog) .panel-head h2{font-size:18px}
 :is(#app,dialog) .form-grid{column-gap:12px;row-gap:16px}
 :is(#app,dialog) .notice:not(.error):not([role=alert]){padding:12px 14px;font-size:14px}
 :is(#app,dialog) .form-actions>.btn{min-height:46px}
 :is(#app,dialog) .field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
 :is(#app,dialog) .stat{padding:14px 16px}
}

/* 452: shared application typography follows Today board and its review forms.
   Document previews, marketing artwork and rich text retain their own typography. */
:root{--hb-type-section:28px;--hb-type-card:21px;--hb-type-body:14px;--hb-type-control:13px;--hb-type-note:12px;--hb-type-weight:700}
:is(#app,dialog){font-family:Inter,Arial,sans-serif}
:is(#app,dialog) .heading h1{font-size:var(--hb-type-section);line-height:1.2;font-weight:700;letter-spacing:-.035em}
:is(#app,dialog) :is(.panel-head h2,.hb-person-title h3,.hb-space-card h2,.hb-business-card h2){font-size:var(--hb-type-card);line-height:1.3;font-weight:800;letter-spacing:-.02em}
:is(#app,dialog) :is(.heading p,.small-note){font-size:var(--hb-type-body);line-height:1.6}
:is(#app,dialog) .btn{font-family:inherit;font-size:var(--hb-type-control);line-height:1.5;font-weight:var(--hb-type-weight);white-space:normal;overflow-wrap:anywhere}
:is(#app,dialog) .field{font-family:inherit;font-size:var(--hb-type-body);line-height:1.5}
:is(#app,dialog) .field>span{font-weight:700}
:is(#app,dialog) .field small{font-size:var(--hb-type-note);line-height:1.5}
dialog .form :is(.field,.btn,.small-note),dialog .hb-modal-guide{font-size:16px;line-height:1.6}
dialog .modal-head h2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.035em}
.hb-ei-header{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.hb-ei-header>.btn{min-height:44px;max-width:100%}
@media(max-width:650px){
 :is(#app,dialog) .form :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
 .hb-ei-header>.btn{flex:1 1 100%}
}
/* 454: common pocket geometry for Today, finance, projects and applicants. */
#app :is(.hb-board-grid,.hb-work-board,.hb-applicant-pockets){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
#app :is(.hb-board-grid,.hb-work-board,.hb-applicant-pockets):has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
#app :is(.hb-board-grid,.hb-work-board,.hb-applicant-pockets):has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
#app :is(.hb-board-grid,.hb-work-board,.hb-applicant-pockets):has(>:only-child){grid-template-columns:minmax(0,1fr)}
#app :is(.hb-board-column,.hb-applicant-pocket){padding:14px 12px 16px;min-width:0;box-sizing:border-box}
#app :is(.hb-board-column,.hb-applicant-pocket)>header :is(h2,h3){font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:#192d4b}
@media(max-width:1180px){
 #app :is(.hb-board-grid,.hb-work-board,.hb-applicant-pockets):not(:has(>:only-child)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 #app :is(.hb-board-grid,.hb-work-board,.hb-applicant-pockets):not(:has(>:only-child)){grid-template-columns:minmax(0,1fr);gap:12px}
 #app :is(.hb-board-column,.hb-applicant-pocket){padding:14px}
}

/* Invoice review entry point: Billix navy with white send icon. */
:is(#app,dialog) .hb-ei-header>.hb-ei-review-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#192d4b;color:#fff;border:1px solid #192d4b;font-weight:700;box-shadow:none}
:is(#app,dialog) .hb-ei-header>.hb-ei-review-action:hover{background:#263f62;border-color:#263f62;color:#fff}
:is(#app,dialog) .hb-ei-header>.hb-ei-review-action:focus-visible{outline:2px solid #192d4b;outline-offset:3px}
.hb-ei-review-action>svg{flex:0 0 20px;color:inherit}

/* Confirmed ANAF validation, distinct from upload acceptance. */
:is(#app,dialog) .hb-ei-badge[data-state=validated]{background:#f3effc;color:#6537b6;border-color:#d9ccec}
:is(#app,dialog) .hb-ei-success{display:flex;align-items:center;gap:10px;flex-basis:100%;padding:14px 16px;border:1px solid #d9ccec;border-radius:14px;background:#f3effc;color:#6537b6;font-size:16px;line-height:1.5;margin:10px 0}
.hb-ei-check{flex-shrink:0;color:inherit}

/* e-Factura: readable timestamp and breathing room before actions. */
:is(#app,dialog) .hb-ei-detail .hb-ei-updated{display:block;color:#151515;font-weight:700;margin-top:14px}
:is(#app,dialog) .hb-ei-detail>.form-actions{margin-top:28px}

/* Shared Today-sized pockets: fewer items never expand to fill the row. */
#app .hb-board-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px}
#app .hb-board-grid>.hb-board-column{flex:0 0 calc((100% - 48px)/4);width:calc((100% - 48px)/4);min-width:0;max-width:none;box-sizing:border-box}
#app .hb-invoice-register .hb-vault-months{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;max-width:none;width:100%}
#app .hb-invoice-register .hb-vault-months>.hb-vault-month-block{flex:0 0 calc((100% - 48px)/4);width:calc((100% - 48px)/4);min-width:0;max-width:none;box-sizing:border-box}
#app .hb-invoice-register .hb-vault-month-block .hb-vault-pair.hb-board{width:100%;max-width:none;margin-inline:0;grid-template-columns:minmax(0,1fr)}
#app .hb-invoice-register .hb-vault-pocket{padding:14px 12px 16px}
#app :is(.hb-invoice-register,.hb-finance-pockets) :is(.hb-vault-card-body,.hb-board-card-body){padding:0 14px 16px}
#app :is(.hb-invoice-register,.hb-finance-pockets) :is(.hb-booking-client-identity h3,.hb-board-client){font-size:20px;line-height:1.4;font-weight:800;color:#192d4b;letter-spacing:-.02em}
#app .hb-invoice-register .hb-booking-client-identity{gap:10px;margin:2px 0 10px}
#app .hb-invoice-register .hb-booking-client-identity .avatar{width:40px;height:40px;min-width:40px;font-size:14px}
#app :is(.hb-invoice-register,.hb-finance-pockets) :is(.hb-board-service,.hb-board-card-top){font-size:16px;line-height:1.5}
#app :is(.hb-invoice-register,.hb-finance-pockets) .hb-board-service{font-weight:700;color:#192d4b}
#app .hb-invoice-register .hb-board-person{font-size:13px;line-height:1.4;margin:8px 0 12px;gap:8px}
#app .hb-invoice-register .hb-booking-specialist-avatar{width:24px;height:24px;min-width:24px}
#app :is(.hb-invoice-register,.hb-finance-pockets) .hb-board-status{font-size:14px;line-height:1.5;padding:6px 9px}
#app .hb-invoice-register .hb-board-invoice-number{font-size:16px;line-height:1.5;font-weight:700}
#app :is(.hb-invoice-register,.hb-finance-pockets) .hb-board-card-foot{margin-top:18px;padding-top:14px;gap:16px}
#app :is(.hb-invoice-register,.hb-finance-pockets) .hb-board-card-foot>strong{font-size:22px;line-height:1.5;font-weight:800;color:#192d4b;text-align:left}
#app :is(.hb-invoice-register,.hb-finance-pockets) .hb-board-card-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#app :is(.hb-invoice-register,.hb-finance-pockets) .hb-board-card-actions>.btn{font-size:13px;line-height:1.5;font-weight:700;min-height:44px;padding:11px 14px;border-radius:10px}
#app .hb-invoice-register .hb-vault-card-head{min-height:44px;padding:11px 12px!important}
#app .hb-invoice-register .hb-vault-card-head strong{font-size:12px;font-weight:700}
#app .hb-invoice-register .hb-vault-card-head span{font-size:11px!important}
#app .hb-invoice-register .hb-collection-note-link{font-size:12px;line-height:1.5}
#app .hb-finance-pockets .hb-fp-detail{font-size:13px;line-height:1.5}
@media(max-width:1180px){
 #app .hb-board-grid>.hb-board-column,#app .hb-invoice-register .hb-vault-months>.hb-vault-month-block{flex-basis:calc((100% - 16px)/2);width:calc((100% - 16px)/2)}
}
@media(max-width:650px){
 #app .hb-board-grid>.hb-board-column,#app .hb-invoice-register .hb-vault-months>.hb-vault-month-block{flex-basis:100%;width:100%}
}

/* Beneficiary stays visible on every financial card header. */
#app .hb-finance-pockets .hb-board-card .hb-board-spine-name{display:block;min-width:0;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;color:#788393}

/* Clear, readable candidate decision choices. */
#modal .hb-decision-options .btn{font-size:18px;line-height:1.4;font-weight:700;min-height:52px;padding:12px 14px}
#modal .hb-decision-person>strong{font-size:24px;line-height:1.3;font-weight:800;text-align:center;overflow-wrap:anywhere}

/* Facturi remains visible as the central invoice entry, including collapsed navigation. */
#app .sidebar .nav button[data-view="invoices"],
#app .sidebar .nav button[data-view="invoices"]:is(:hover,.active),
#app .hb-mobile-business-menu button[data-view="invoices"]{color:#e51e59}
#app .sidebar .nav button[data-view="invoices"] svg,
#app .sidebar .nav button[data-view="invoices"] .hb-nav-label{color:inherit}

/* Project applications: keep all five decision pockets on one desktop row. */
@media(min-width:1001px){
 #app .hb-applicant-board .hb-applicant-pockets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:start}
 #app .hb-applicant-board .hb-applicant-pockets>.hb-applicant-pocket{width:100%;min-width:0;max-width:none;box-sizing:border-box}
}

/* Keep the booking history explanation clear of the email action. */
#app [data-billing-panel="bookings"]>button[data-billing-section="emails"]{margin-bottom:16px}
#app [data-billing-panel="bookings"]>button[data-billing-section="emails"]+p.small-note{margin-top:0;margin-bottom:24px}

#app .hb-finance-office .hb-finance-areas .hb-finance-all-invoices,
#app .hb-finance-office .hb-finance-areas .hb-finance-all-invoices:is(:hover,:focus-visible){color:#e51e59}
#app .hb-finance-all-invoices :is(svg,span){color:inherit}

#app .hb-finance-section>.hb-finance-scope-help{margin:12px 0 24px}

/* Financial menus: readable full-width rows on phones. */
@media(max-width:650px){
 #app .hb-finance-office :is(.hb-finance-areas,.hb-finance-dock>.hb-finance-nav,.hb-finance-options){display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;min-width:0}
 #app .hb-finance-office :is(.hb-finance-areas,.hb-finance-dock>.hb-finance-nav,.hb-finance-options)>.btn{display:flex;flex:0 0 auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;width:100%;max-width:100%;min-width:0;min-height:48px;height:auto;padding:12px 14px;text-align:left;font-size:15px;line-height:1.4;white-space:normal;word-break:normal;overflow-wrap:normal;box-sizing:border-box}
 #app .hb-finance-office .hb-finance-dock>.hb-finance-nav .hb-nav-label{display:block!important;position:static;width:auto;max-width:none;height:auto;flex:1;opacity:1;visibility:visible;transform:none;white-space:normal;word-break:normal;overflow-wrap:normal;overflow:visible;font-size:15px;line-height:1.4}
 #app .hb-finance-office :is(.hb-finance-areas,.hb-finance-nav,.hb-finance-options) .btn svg{width:20px;height:20px;flex:0 0 20px}
 #app .hb-finance-office .hb-finance-areas{margin-bottom:20px;padding-bottom:20px}
 #app .hb-finance-office .hb-finance-dock>.hb-finance-nav{margin-bottom:24px}
 #app .hb-finance-office .hb-finance-secondary{display:flex;flex-direction:column;align-items:stretch;gap:20px}
}

/* Two-line archive spines need room above the following card's border. */
#app .hb-invoice-register .hb-vault-stack{--hb-fold-height:56px}
#app .hb-invoice-register .hb-vault-stack>.hb-vault-card:not(.is-front) .hb-vault-card-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px 18px;column-gap:10px;row-gap:3px;align-content:start;height:52px;box-sizing:border-box;padding:3px 12px 8px!important}
#app .hb-invoice-register .hb-vault-card:not(.is-front) .hb-vault-card-head .hb-board-spine-name{display:block;grid-column:1/-1;width:100%;min-width:0;margin:0;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* Explicit grid positions prevent the date inheriting the full-row span. */
#app .hb-invoice-register .hb-vault-card:not(.is-front) .hb-vault-card-head>strong{grid-column:1;grid-row:1}
#app .hb-invoice-register .hb-vault-card:not(.is-front) .hb-vault-card-head>span:not(.hb-board-spine-name){grid-column:2;grid-row:1;text-align:right}
#app .hb-invoice-register .hb-vault-card:not(.is-front) .hb-vault-card-head>.hb-board-spine-name{grid-row:2}

/* Folded financial cards retain a compact beneficiary; the active card shows it in its body. */
#app .hb-finance-pockets .hb-board-card-reference{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:18px 18px;gap:3px!important;width:100%;min-width:0;padding:3px 12px 8px!important;box-sizing:border-box}
#app .hb-finance-pockets .hb-board-card.is-folded .hb-board-card-reference>.hb-board-spine-name{display:block!important;grid-column:1;grid-row:2;flex:none;width:100%;line-height:18px;text-align:left}
#app .hb-finance-pockets .hb-board-card-reference>strong{grid-column:1;grid-row:1;line-height:18px}

#app .hb-finance-pockets .hb-board-card.is-front .hb-board-card-reference{grid-template-rows:auto;min-height:52px;padding:10px 12px!important;align-items:center}
#app .hb-finance-pockets .hb-board-card.is-front .hb-board-card-reference>.hb-board-spine-name{display:none!important}
#app .hb-finance-pockets .hb-board-card.is-front .hb-board-card-reference>strong{font-size:20px;font-weight:750;line-height:1.3;white-space:normal;overflow-wrap:anywhere}

/* Match the existing 15px sidebar navigation labels. */
#app .hb-navigation-dock .hb-community-nav > button,
#app .hb-navigation-dock .hb-guest-top-nav > button{font-size:15px!important}