/* FOSSBilling bridge for V6.1. The pinned V6 snapshot stays immutable.
   This is the existing portal adaptation layer, not a second stylesheet/system. */
:root {
  --font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:var(--font-body);
  --font-mono:ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --lh-body:1.55; --lh-heading:1.3; --lh-tight:1.3;
  --text-muted:#a7b8cf;
}
:root[data-bs-theme='light'] { --text-muted:#526179; }

.ahp {
  --bg:var(--ahp-bg); --surface:var(--ahp-surface); --raised:var(--ahp-surface-2);
  --sunken:var(--ahp-bg); --line:var(--line-structural); --line-strong:var(--ahp-ctl-border);
  --accent:var(--ahp-primary); --accent-soft:var(--ahp-tint); --cyan:var(--cyan-400);
  --ok:var(--ahp-ok); --ok-soft:var(--ahp-ok-bg); --warn:var(--ahp-warn); --warn-soft:var(--ahp-warn-bg);
  --crit:var(--ahp-err); --crit-soft:var(--ahp-err-bg); --faint:var(--text-muted);
  --r-s:var(--ahp-r-sm); --r-m:var(--ahp-r); --r-l:var(--ahp-r);
  --display:var(--font-display); --body:var(--font-body); --shadow:var(--ahp-shadow-pop);
  --bs-body-bg:var(--ahp-bg); --bs-body-color:var(--ahp-text); --bs-secondary-color:var(--ahp-muted);
  --bs-emphasis-color:var(--ahp-text); --bs-border-color:var(--ahp-border);
  --bs-link-color:var(--ahp-link); --bs-link-hover-color:var(--text-link-hover);
  --bs-primary-rgb:26,106,255;
  --ahp-fs-title:1.5rem; --ahp-fs-h:1.0625rem; --ahp-fs-body:1rem;
  --ahp-fs-sm:.875rem; --ahp-fs-cap:.8125rem; --ahp-fs-metric:1.75rem;
  --ahp-primary-hover:#1558d6; --brand-primary-hover:var(--ahp-primary-hover);
  --bs-body-font-family:var(--font-body); --bs-body-font-size:var(--ahp-fs-body);
  font-family:var(--font-body); font-weight:400; line-height:var(--lh-body);
  --muted:var(--ahp-muted); --ink:var(--ahp-text);

}
.ahp .shell { grid-template-columns:var(--ahp-side-w) minmax(0,1fr); }
.ahp .main { padding:0; gap:0; min-width:0; }
.ahp .portal-content { width:100%; max-width:1720px; margin-inline:auto; padding:0 var(--ahp-gutter) 32px; gap:16px; }
.ahp .main.has-back-to-top .portal-content { padding-bottom:84px; }
.ahp .topline { height:var(--ahp-bar-h); min-height:var(--ahp-bar-h); padding:0 var(--ahp-gutter); margin:0; flex-wrap:nowrap; }
.ahp .ahp-pagehead { padding:4px 0; }
.ahp .ahp-pagehead h1 { font-size:var(--ahp-fs-title); font-weight:600; line-height:1.3; letter-spacing:-.015em; }
.ahp .ahp-pagehead p { font-size:var(--ahp-fs-sm); margin:4px 0 0; }
.ahp .rail { gap:18px; padding:18px 14px; background:var(--ahp-side-bg)!important; border-right:1px solid var(--ahp-divider); }
.ahp .wordmark { padding:2px 8px 6px; }
.ahp .wordmark .mark { width:30px; height:30px; }
.ahp .wordmark-text { font-size:1.125rem; }
.ahp .menu { gap:4px; }
.ahp .menu a { padding:0 12px; min-height:44px; color:var(--ahp-text); gap:12px; border-left:0; border-radius:var(--ahp-r-sm); font-size:var(--ahp-fs-sm); }
.ahp .menu a:hover { background:var(--ahp-tint); }
.ahp .menu a[aria-current] { background:var(--ahp-tint-2); color:var(--ahp-link); border-left-color:transparent; font-weight:600; }
.ahp .menu svg { width:20px; height:20px; }
.ahp .who { min-height:40px; border:1px solid var(--ahp-ctl-border)!important; gap:8px; background:var(--ahp-surface); padding:0 10px; }
.ahp .avatar { width:30px; height:30px; color:var(--text-on-brand); background:var(--ahp-primary); }
.ahp .who-name { font-size:var(--ahp-fs-sm); }
.ahp .btn2 { min-height:40px; padding:0 14px; font-size:var(--ahp-fs-sm); border-radius:var(--ahp-r-sm); border-color:var(--ahp-ctl-border); background:var(--ahp-surface); color:var(--ahp-text); box-shadow:none; }
.ahp .btn2:hover { border-color:var(--border-active); background:var(--ahp-tint); }
.ahp .btn2.primary,.ahp .btn-primary { background:var(--ahp-primary); border-color:var(--ahp-primary); color:var(--text-on-brand); }
.ahp .btn2.primary:hover,.ahp .btn-primary:hover { background:var(--ahp-primary-hover); }
.ahp .ahp-iconbtn { width:40px; min-width:40px; padding:0; display:inline-grid; }
.ahp .dropdown-menu { background:var(--elev-2-bg); color:var(--ahp-text); border:var(--elev-2-border); border-radius:var(--ahp-r-sm); box-shadow:var(--ahp-shadow-pop); padding:6px; max-width:calc(100vw - 24px); }
.ahp .dropdown-item { min-height:40px; padding:8px 10px; border-radius:6px; color:var(--ahp-text); white-space:normal; }
.ahp .dropdown-item:hover,.ahp .dropdown-item:focus { background:var(--ahp-tint); }
.ahp .form-control,.ahp .form-select,.ahp .ts-control { border-color:var(--ahp-ctl-border); background-color:var(--ahp-surface); color:var(--ahp-text); border-radius:var(--ahp-r-sm); }
.ahp .block,.ahp .service,.ahp .card,.ahp .next { border:1px solid var(--ahp-border); border-radius:var(--ahp-r); background:var(--ahp-surface); box-shadow:var(--ahp-card-shadow); }
.ahp .block-head { padding:20px 20px 12px; border-color:var(--ahp-divider); }
.ahp .block-head h3,.ahp .block-head h2 { font-size:var(--ahp-fs-h); letter-spacing:0; }
.ahp .block-form,.ahp .support { padding:20px; }
.ahp .block table { font-size:var(--ahp-fs-sm); }
.ahp .block table th { font-size:var(--ahp-fs-cap); font-weight:500; text-transform:none; letter-spacing:0; background:var(--ahp-surface-2); color:var(--ahp-muted); }
.ahp .block table td,.ahp .block table th { padding:10px 20px; border-color:var(--ahp-divider); }
.ahp .pill,.ahp .tag { padding:4px 10px; font-size:var(--ahp-fs-cap); font-weight:600; border:0; border-radius:var(--r-pill); }
.ahp .pill.is-ok,.ahp .tag.paid { background:var(--ahp-ok-bg); color:var(--ahp-ok); }
.ahp .pill.is-warn,.ahp .tag.due { background:var(--ahp-warn-bg); color:var(--ahp-warn); }
.ahp .pill.is-crit,.ahp .tag.late { background:var(--ahp-err-bg); color:var(--ahp-err); }
.ahp .onboarding { background:var(--ahp-info-bg); border-color:var(--ahp-divider); border-radius:var(--ahp-r-sm); font-size:var(--ahp-fs-sm); padding:14px 16px; }
.ahp .summary-cards { gap:12px; }
.ahp .summary-card { background:var(--ahp-surface); border:1px solid var(--ahp-border); border-radius:var(--ahp-r); padding:18px; box-shadow:var(--ahp-card-shadow); gap:4px; }
.ahp .summary-card-value { font-size:22px; line-height:1.25; font-family:var(--font-display); color:var(--ahp-text); }
.ahp .summary-card-label { font-size:var(--ahp-fs-sm); font-weight:500; color:var(--ahp-text); }
.ahp .summary-card-sub { font-size:var(--ahp-fs-cap); color:var(--ahp-muted); }
.ahp .service { padding:20px; gap:12px; }
.ahp .service-head { padding:0; gap:14px; flex-wrap:wrap; }
.ahp .service-head h2 { font-size:1.125rem; font-weight:600; letter-spacing:0; flex:1; min-width:150px; }
.ahp .service-head-domain { display:block; margin-top:4px; font-size:var(--ahp-fs-sm); color:var(--ahp-muted); overflow-wrap:anywhere; }
.ahp .service .factlist,.ahp .service .stats { padding:0; border:0; }
.ahp .service .stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; background:transparent; }
.ahp .service .stat { min-width:0; padding:12px; border:0; border-radius:var(--ahp-r-sm); background:var(--ahp-surface-2); }
.ahp .stat-k { font-size:var(--ahp-fs-sm); color:var(--ahp-muted); font-weight:400; letter-spacing:0; text-transform:none; }
.ahp .stat-v { font-size:1.375rem; line-height:1.3; font-weight:600; overflow-wrap:anywhere; }
.ahp .stat-v small { font-size:var(--ahp-fs-sm); font-weight:400; }
.ahp .cardlist { gap:12px; }
.ahp .cols { gap:20px; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
.ahp .newservice { border-color:var(--ahp-border); padding:16px 20px; background:var(--ahp-surface); border-radius:var(--ahp-r); }
.ahp .service-manage-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:14px; padding:20px; background:var(--ahp-surface); border:1px solid var(--ahp-border); border-radius:var(--ahp-r); }
.ahp .service-manage-head h1 { font-size:var(--ahp-fs-title); line-height:1.3; }
.ahp .service-manage-head-id { min-width:0; }
.ahp .service-manage-head-actions { margin:0; }
.ahp .portal-service-panel { padding:16px; gap:16px; }
.ahp .portal-service-panel > .block-head { padding:0; border:0; }
.ahp .service-tabs { gap:4px; }
.ahp .service-tabs .nav-link { min-height:46px; padding:0 14px; font-size:15px; border-radius:0; border-bottom:2px solid transparent; }
.ahp .service-tabs .nav-link.active { background:transparent; color:var(--ahp-link); border-bottom-color:var(--ahp-primary); }
.ahp .portal-service-info { margin:0; }
.ahp .portal-service-info .factlist { padding:0; }
.ahp .factlist > div { min-height:44px; border-color:var(--ahp-divider); font-size:var(--ahp-fs-sm); gap:12px; }
.ahp .factlist > div span { color:var(--ahp-text); }
.ahp .factlist > div b { font-size:var(--ahp-fs-sm); font-weight:500; overflow-wrap:anywhere; }
.ahp .portal-entitlements { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; border:0; padding:0; margin:16px 0 0; }
.ahp .portal-entitlements .stat { border:1px solid var(--ahp-border); border-radius:var(--ahp-r); background:var(--ahp-surface); padding:18px; min-width:0; }
.ahp .service-quick-actions { padding:0 0 16px; }
.ahp .site-cards,.ahp .subdomain-panel { background:var(--ahp-surface); }
.ahp .block-empty { padding:32px 20px; }
.ahp .ahp-bnav { grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
.ahp .ahp-bnav a { text-align:center; font-size:12px; overflow-wrap:anywhere; }
.ahp :focus-visible { outline:2px solid var(--focus-ring-color); outline-offset:3px; }
:root[data-bs-theme='dark'] .ahp .portal-service-panel { background:transparent; border:0; padding:0; box-shadow:none; }
@media (min-width:1024px) {
  .ahp .rail { position:sticky; top:0; height:100vh; align-self:start; overflow-y:auto; translate:none; visibility:visible; }
  .ahp .rail .offcanvas-header,.ahp .railtoggle { display:none; }
}
@media (max-width:1023.98px) {
  .ahp .shell { grid-template-columns:minmax(0,1fr); }
  .ahp .rail { position:fixed; z-index:1045; width:min(300px,86vw); height:100dvh; overflow-y:auto; translate:none; }
  .ahp .rail .offcanvas-header { display:flex; }
  .ahp .railtoggle { display:inline-grid; }
  .ahp .cols { grid-template-columns:minmax(0,1fr); }
}
/* Bootstrap lg uses 992px; the approved V6 drawer boundary is 1024px. */
@media (min-width:992px) and (max-width:1023.98px) {
  .ahp .offcanvas-lg { inset:0 auto 0 0; z-index:1045; transform:translateX(-100%); visibility:hidden; transition:transform .25s; }
  .ahp .offcanvas-lg.show,.ahp .offcanvas-lg.showing { transform:none; visibility:visible; }
}
@media (max-width:767.98px) {
  .ahp { --ahp-gutter:16px; --ahp-pad:16px; --ahp-fs-title:1.25rem; }
  .ahp .topline { gap:6px; margin-bottom:12px; }
  .ahp .topline > .portal-header-actions { flex-wrap:nowrap; gap:6px; min-width:0; }
  .ahp .who-name { display:none; }
  .ahp .who { padding:0 6px; }
  .ahp .summary-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ahp .summary-card { padding:14px; }
  .ahp .service .actions { width:100%; flex-wrap:wrap; }
  .ahp .service .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ahp .service .actions .btn2 { flex:1; }
  .ahp .service-manage-head { grid-template-columns:auto minmax(0,1fr); padding:16px; }
  .ahp .service-manage-head > .pill { grid-column:2; justify-self:start; }
  .ahp .service-manage-head-actions { grid-column:1/-1; justify-self:start; }
  .ahp .service-manage-head h1 { font-size:var(--ahp-fs-title); overflow-wrap:anywhere; }
  .ahp .portal-service-panel { padding:0; border:0; background:transparent; }
  .ahp .portal-entitlements { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .ahp .portal-entitlements .stat { padding:12px; }
  .ahp .portal-entitlements .stat-v { font-size:1.125rem; }
  .ahp .portal-entitlements .stat-k { font-size:var(--ahp-fs-cap); }
  .ahp .ahp-bnav { position:sticky; bottom:0; }
  .ahp .main.has-back-to-top .portal-content { padding-bottom:24px; }
  .toast-container { bottom:70px!important; }
}
@media (prefers-reduced-motion:reduce) { .ahp * { scroll-behavior:auto; transition-duration:1ms!important; } }

/* The service header, tabs and overview share the approved light-theme panel. */
.ahp .portal-service-layout { gap:16px; }
.ahp .portal-service-layout .portal-service-panel { padding:0; border:0; background:transparent; box-shadow:none; }
:root[data-bs-theme='light'] .ahp .portal-service-layout > .service-manage-head { padding:4px; border:0; background:transparent; }
.ahp .portal-service-layout .portal-entitlements { margin-top:0; }
@media (max-width:767.98px) { .ahp .portal-service-layout { padding:0; border:0; background:transparent; box-shadow:none; } }

/* Body-level Bootstrap dialogs retain V6 tokens without a containing block. */
.ahp.portal-modal { container:normal; min-height:0; background:transparent; }

/* Dedicated V6 invoice, support, account and service-management content. */
.ahp .ahp-card--flush { padding:0; gap:0; }
.ahp .portal-invoices > .ahp-card__head,.ahp .portal-account > .ahp-card__head { padding-bottom:0; }
.ahp .portal-invoices .ahp-tabs,.ahp .portal-account .ahp-tabs { width:100%; }
.ahp .portal-account { background:var(--ahp-panel-bg); }
.ahp .portal-account-panes { padding:16px; }
.ahp .portal-account-panes .tab-pane.active { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start; }
.ahp .portal-account-section { margin:0; padding:20px; gap:14px; border:1px solid var(--ahp-border); background:var(--ahp-surface); min-width:0; }
.ahp .portal-account-section h2 { font-size:var(--ahp-fs-h); font-weight:600; letter-spacing:0; margin:0; }
.ahp .portal-account-section form { width:100%; max-width:640px; }
.ahp #account-profile-pane > .portal-account-section,.ahp #account-api-pane > .portal-account-section { grid-column:1/-1; }
.ahp #account-profile-pane form { max-width:none; }
.ahp #account-profile-pane .row > .col-md-10 { grid-column:1/-1; }
.ahp #account-api-pane form { max-width:760px; }
.ahp .portal-account-section .row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.ahp .portal-account-section .row > * { width:100%; padding:0; min-width:0; }
.ahp .portal-account-actions { grid-column:1/-1; padding:14px 20px; }
.ahp .portal-ticket-create { display:block; max-width:none; }
.ahp .portal-ticket-reply { max-width:none; gap:12px; }
.ahp .portal-support-message { display:flex; gap:0; padding:16px; }
.ahp .portal-support-message .block-head { padding:0 0 10px; border:0; }
.ahp .portal-support-message .block-form { padding:0; }
.ahp .portal-support-message .markdown-body { font-size:var(--ahp-fs-body); line-height:1.65; color:var(--ahp-text); overflow-wrap:anywhere; }
.ahp .portal-support-message h5 { font-size:var(--ahp-fs-sm); font-weight:600; }
.ahp .portal-support-detail .ahp-table td { font-size:var(--ahp-fs-sm); }
.ahp .portal-invoice-grid { margin:0; }
.ahp .portal-invoice-party { padding:16px; }
.ahp .portal-invoice-facts { padding:0; }
.ahp .portal-invoice-facts h2 { font-size:var(--ahp-fs-h); margin:0 0 8px; }
.ahp .ahp-payment-choice { border:1px solid var(--ahp-ctl-border); border-radius:var(--ahp-r-sm); padding:0; background:var(--ahp-surface); }
.ahp .ahp-payment-choice .btn { display:flex; gap:12px; align-items:center; min-height:56px; padding:12px 16px; color:var(--ahp-text); font-size:var(--ahp-fs-sm); }
.ahp .ahp-payment-choice img { width:100px; max-height:32px; object-fit:contain; }
.ahp .ahp-payment-choice:has(input:checked) { border-color:var(--ahp-primary); background:var(--ahp-tint); }
.ahp .portal-service-section { margin:12px 0; gap:14px; padding:20px; }
.ahp .portal-websites-list { margin-top:16px; padding:0 20px; }
.ahp .portal-subdomains { padding:20px; margin:16px 0; }
.ahp .portal-service-section h2 { font-size:var(--ahp-fs-h); font-weight:600; }
.ahp .portal-service-section form { max-width:560px; }
.ahp .ahp-table { table-layout:auto; }
.ahp .ahp-table td { overflow-wrap:anywhere; }
.ahp .ahp-empty { gap:10px; }
:root[data-bs-theme='dark'] .ahp .portal-account { border:0; background:transparent; }
@media (max-width:1023.98px) {
  .ahp .portal-account-panes .tab-pane.active { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767.98px) {
  .ahp .portal-account-panes { padding:12px 0; }
  .ahp .portal-account { border:0; background:transparent; }
  .ahp .portal-account-section .row { grid-template-columns:minmax(0,1fr); }
  .ahp .portal-invoice-grid { grid-template-columns:minmax(0,1fr); }
  .ahp .portal-invoices .ahp-tablewrap,.ahp .portal-support-list .ahp-tablewrap { overflow:visible; }
  .ahp .portal-invoices .ahp-table th,.ahp .portal-support-list .ahp-table th { display:none; }
  .ahp .portal-invoices .ahp-table td,.ahp .portal-support-list .ahp-table td { padding:2px 0; width:auto; }
  .ahp .portal-invoice-detail .ahp-table { display:table; }
  .ahp .portal-invoice-detail .ahp-table thead { display:table-header-group; }
  .ahp .portal-invoice-detail .ahp-table tbody { display:table-row-group; }
  .ahp .portal-invoice-detail .ahp-table tr { display:table-row; }
  .ahp .portal-invoice-detail .ahp-table td { display:table-cell; padding:10px; width:auto; }
  .ahp .portal-invoice-detail .ahp-tablewrap { overflow-x:auto; }
  .ahp .portal-support-detail .ahp-table { display:table; }
  .ahp .portal-support-detail .ahp-table tbody { display:table-row-group; }
  .ahp .portal-support-detail .ahp-table tr { display:table-row; }
  .ahp .portal-support-detail .ahp-table td { display:table-cell; padding:8px 16px; width:auto; }
}

/* Final V6 polish: retain native Bootstrap behavior, use the approved tokens. */
.ahp .topline { align-items:center; height:auto; min-height:calc(var(--ahp-bar-h) + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); }
.ahp .topline .who { max-width:100%; }
.ahp .who-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ahp .block-head { min-width:0; flex-wrap:wrap; }
.ahp .block-head > nav { min-width:0; width:100%; }
.ahp .block-head h2,.ahp .block-head h3,.ahp .ahp-pagehead h1 { overflow-wrap:anywhere; }
/* Negative Bootstrap/legacy margins caused vertical overflow in the x-scroll
   region. Reset the geometry; natural height includes text, padding and focus. */
.ahp .block-head .ahp-tabs { margin:0; border-bottom:1px solid var(--ahp-divider)!important; }
.ahp .service-tabs::-webkit-scrollbar { display:revert; height:revert; }
.ahp .ahp-tabs { flex-wrap:nowrap; min-width:0; max-width:100%; overflow:auto; scrollbar-width:thin; padding:4px 4px 0; align-items:stretch; }
.ahp .ahp-tabs [role='tab'] { flex:0 0 auto; margin:0; padding:12px 14px; min-height:48px; height:auto; line-height:1.4; font-size:var(--ahp-fs-sm); }
.ahp .ahp-tabs [role='tab']:focus-visible { outline-offset:-4px; }
.ahp .tab-content,.ahp .tab-pane { min-width:0; }

.ahp .btn2 { justify-content:center; gap:8px; line-height:1.4; text-align:center; padding:8px 14px; min-width:0; white-space:normal; }
.ahp .btn2.primary:hover { filter:none; color:var(--text-on-brand); }
.ahp .btn2.danger { color:var(--ahp-err); border-color:var(--ahp-ctl-border); }
.ahp .btn2.danger:hover { background:var(--ahp-err-bg); border-color:var(--ahp-err); color:var(--ahp-err); }
.ahp button:disabled,.ahp input:disabled,.ahp select:disabled { opacity:.55; cursor:not-allowed; }
.ahp .btn2:disabled { pointer-events:none; }
.ahp .form-control:focus,.ahp .form-select:focus,.ahp .ts-control:focus-within { border-color:var(--focus-ring-color); box-shadow:0 0 0 2px var(--ahp-tint-2); }
.ahp .form-control[readonly] { background:var(--ahp-surface-2); }
.ahp .form-label { font-size:var(--ahp-fs-sm); font-weight:500; margin-bottom:6px; }
.ahp .hint,.ahp .form-text,.ahp .form-hint { font-size:var(--ahp-fs-sm); line-height:1.55; color:var(--ahp-muted); overflow-wrap:anywhere; }
.ahp .factlist > div { min-width:0; }
.ahp .factlist > div span { color:var(--ahp-muted); }
.ahp .factlist > div b { min-width:0; color:var(--ahp-text); }
.ahp .portal-support-message.ahp-msg--staff { background:var(--ahp-tint); }
.ahp .portal-support-message .block-head > div { min-width:0; overflow-wrap:anywhere; }
.ahp .btn-quote-reply { display:inline-grid; place-items:center; flex:0 0 auto; width:44px; height:44px; padding:6px; border:1px solid var(--ahp-ctl-border); border-radius:var(--ahp-r-sm); background:var(--ahp-surface); color:var(--ahp-text); }
.ahp .btn-quote-reply:hover { background:var(--ahp-tint); border-color:var(--border-active); }
.ahp .markdown-body img { max-width:100%; height:auto; }
.ahp .markdown-body pre { max-width:100%; overflow-x:auto; }
.ahp .portal-websites-list > div { flex-wrap:wrap; }
.ahp .portal-service-section form,.ahp .portal-account-section form { min-width:0; }
.ahp .portal-service-section .input-group { min-width:0; }
.ahp .portal-invoice-party h4 { color:var(--ahp-text); }
.ahp .ahp-payment-choice { max-width:100%; }
.ahp .ahp-payment-choice .btn { flex-wrap:wrap; white-space:normal; overflow-wrap:anywhere; }
.ahp .ahp-payment-choice .btn:focus-visible { outline:2px solid var(--focus-ring-color); outline-offset:3px; }
.ahp .alert { border-radius:var(--ahp-r-sm); overflow-wrap:anywhere; }
.ahp .alert-info { --bs-alert-color:var(--ahp-info); --bs-alert-bg:var(--ahp-info-bg); --bs-alert-border-color:var(--ahp-border); }
.ahp .alert-success { --bs-alert-color:var(--ahp-ok); --bs-alert-bg:var(--ahp-ok-bg); --bs-alert-border-color:var(--ahp-border); }
.ahp .alert-warning { --bs-alert-color:var(--ahp-warn); --bs-alert-bg:var(--ahp-warn-bg); --bs-alert-border-color:var(--ahp-border); }
.ahp .alert-danger { --bs-alert-color:var(--ahp-err); --bs-alert-bg:var(--ahp-err-bg); --bs-alert-border-color:var(--ahp-border); }
.ahp.portal-modal .modal-content { color:var(--ahp-text); background:var(--ahp-surface); border:1px solid var(--ahp-border); border-radius:var(--ahp-r); box-shadow:var(--ahp-shadow-pop); }
.ahp.portal-modal .modal-header,.ahp.portal-modal .modal-footer { padding:16px 20px; gap:12px; border-color:var(--ahp-divider); }
.ahp.portal-modal .modal-body { padding:20px; overflow-wrap:anywhere; }
.ahp.portal-modal .modal-title { min-width:0; font-size:var(--ahp-fs-h); font-family:var(--font-display); overflow-wrap:anywhere; }
.ahp.portal-modal .modal-header .btn-close { flex:0 0 auto; }
.ahp.portal-modal .modal-footer { flex-wrap:wrap; }
.ahp.portal-modal .modal-body > .btn { margin:4px 4px 4px 0; white-space:normal; }
.portal-notifications { --bs-primary-rgb:26,106,255; max-width:100vw; width:min(380px,100%); pointer-events:none; }
.portal-notifications .toast { pointer-events:auto; width:100%; max-width:100%; color:var(--text-body); background:var(--surface-card); border:1px solid var(--line-structural); border-radius:var(--r-sm); }
.portal-notifications .toast-header { color:var(--text-body); background:var(--surface-raised); border-color:var(--line-structural); gap:4px; }
.portal-notifications .toast-body { overflow-wrap:anywhere; }
.portal-notifications .btn-close:focus-visible { outline:2px solid var(--focus-ring-color); outline-offset:3px; }
.portal-loading-spinner { color:var(--text-link); }
@media (max-width:767.98px) {
  .ahp .block-head,.ahp .block-form,.ahp .portal-account-section,.ahp .portal-service-section,.ahp .portal-subdomains { padding:16px; }
  .ahp .block-head { gap:10px; }
  .ahp .block-actions,.ahp .portal-account-actions { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; }
  .ahp .ahp-table td.num { white-space:normal; overflow-wrap:anywhere; }
  .ahp .portal-websites-list { padding:0 16px; }
  .ahp .portal-entitlements { grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr)); }
  .ahp.portal-modal .modal-dialog { margin:12px; }
  .ahp.portal-modal .modal-body,.ahp.portal-modal .modal-header,.ahp.portal-modal .modal-footer { padding:16px; }
  .portal-notifications { bottom:calc(70px + env(safe-area-inset-bottom,0px))!important; }
}
@media (prefers-reduced-motion:reduce) {
  .ahp *, .portal-notifications *, .portal-loading-spinner { transition:none!important; animation:none!important; }
}
/* Fixed icon controls keep their canonical hit target after shared button polish. */
.ahp .btn2.ahp-iconbtn { padding:0; white-space:nowrap; }
.ahp .topline > .portal-header-actions { display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.ahp .topline > .portal-header-actions,.ahp .topline .dropdown { min-width:0; max-width:100%; }
.ahp .who-name { max-width:24ch; }
.portal-notifications .bg-danger { background-color:var(--status-error)!important; }
.portal-notifications .bg-warning { background-color:var(--status-warn)!important; }
.ahp .form-control.is-invalid,.ahp .form-select.is-invalid { border-color:var(--ahp-err); }
.ahp .form-control.is-valid,.ahp .form-select.is-valid { border-color:var(--ahp-ok); }
.ahp .invalid-feedback,.ahp .text-danger { color:var(--ahp-err)!important; }
.ahp .valid-feedback,.ahp .text-success { color:var(--ahp-ok)!important; }

/* Sprite <use> fragments that need the same glyph mirrored (no dedicated
   left-pointing/upward icon ships in the pinned V6 icon set). */
.icon--rotate-180 { transform:rotate(180deg); }

/*
   .next ("Next payment") repaints to a neutral card surface above (the
   canonical Design System has no blue-gradient billing hero on the
   dashboard; the closest reference, the service-detail summary card, is a
   plain bordered panel), but arer.css:765 still hardcodes white text and
   white-on-blue opacity tricks for the old gradient card. Left alone, that
   produces invisible white-on-white content in light mode. Re-point every
   foreground value at the same text tokens a normal .ahp-card uses.
*/
.ahp .next { color:var(--ahp-text); }
.ahp .next .k,.ahp .next .sub { opacity:1; color:var(--ahp-muted); }
.ahp .next hr { border-top-color:var(--ahp-divider); }
.ahp .next .lock { opacity:1; color:var(--ahp-text); }

/*
   The dashboard's account-summary row has four real metrics (Active
   Services, Upcoming Renewals, Open Tickets, Unpaid Invoices), one more
   than the Design System's reference dashboard shows (it only has three:
   no renewals-window metric exists there). Rather than drop a working,
   tested account-wide signal to force-fit three tiles, this adds a 4-col
   variant of the same real .ahp-grid/.ahp-metric components the DS ships,
   following its own column-collapse shape at the same container widths
   .ahp-grid--3 already uses.
*/
.ahp-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@container ahp (max-width:1023px) { .ahp-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container ahp (max-width:359px) { .ahp-grid--4 { grid-template-columns:minmax(0,1fr); } }

/*
   Service detail's resource-limit tiles (Websites/Databases/Email/PHP
   version) render between 1 and 4 tiles depending on which capabilities
   the order actually has -- no fixed DS grid variant fits every count, so
   this follows the same auto-fit shape .ahp-aside already uses elsewhere
   in the pinned layer for the same "unknown item count" problem.
*/
.ahp-grid--auto { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

/*
   Confirmed defect, found while screenshotting the invoice detail page:
   arer.css:528's `.block-head a { color:var(--accent); ... }` was written
   for a single trailing "view all"-style link and has higher specificity
   (0,1,1) than a lone .ah-btn-- variant class (0,1,0), so it silently wins
   and repaints any real .ah-btn anchor placed in a card header -- the
   invoice page's "PDF" button (.ah-btn--primary) rendered with blue text
   on its own blue background, invisible. Restate each variant's real
   color/sizing here at higher specificity so .ah-btn keeps managing its
   own appearance instead of arer.css's single-link rule leaking into it.
*/
.ahp .block-head a.ah-btn { margin-left:0; font-size:var(--ahp-fs-sm); font-weight:600; }
.ahp .block-head a.ah-btn--primary { color:var(--text-on-brand); }
.ahp .block-head a.ah-btn--ghost { color:var(--ahp-text); }
.ahp .block-head a.ah-btn--outline { color:var(--ahp-link); }
.ahp .block-head a.ah-btn--danger { color:var(--danger-text); }

/* Shared UI type and interaction states. No forced antialiasing or text strokes. */
.ahp h1,.ahp h2,.ahp h3,.ahp h4,.ahp h5 { line-height:var(--lh-heading); }
.ahp .ah-btn,.ahp .btn2 { font-size:var(--ahp-fs-sm); font-weight:600; line-height:1.4; min-height:44px; white-space:normal; text-align:center; }
.ahp .ah-btn--primary:hover,.ahp .ah-btn--primary:focus-visible { background:var(--ahp-primary-hover); border-color:var(--ahp-primary-hover); }
.ahp .ah-btn--danger:hover { background:var(--ahp-err-bg); border-color:var(--ahp-err); color:var(--ahp-err); }
.ahp .ah-btn:disabled,.ahp .ah-btn[aria-disabled='true'] { opacity:.55; cursor:not-allowed; }
.ahp .form-control,.ahp .form-select { font-size:1rem; line-height:1.5; min-height:44px; }
.ahp .form-control::placeholder { color:var(--ahp-muted); opacity:1; }
.ahp .text-muted { color:var(--ahp-muted)!important; }
.ahp .ahp-metric__v { font-size:var(--ahp-fs-metric); line-height:1.2; font-weight:600; letter-spacing:-.02em; }
.ahp .ahp-metric__cap { display:block; font-size:var(--ahp-fs-cap); }
.ahp .ahp-metric { color:var(--ahp-text); }
.ahp .ahp-metric__v,.ahp .stat-v,.ahp .num,.ahp .money,.ahp .amt,.ahp .factlist b,.ahp time,.ahp .badge { font-variant-numeric:tabular-nums lining-nums; }
.ahp .money { font-weight:600; }
.ahp .ahp-badge { height:auto; min-height:26px; padding:4px 10px; font-style:normal; line-height:1.3; max-width:100%; white-space:normal; }
.ahp .service .factlist > div { padding:0 0 12px; }
.ahp .service-head-domain { font-weight:400; }
.ahp .site-subdomains-summary,.ahp .site-remove > summary { font-size:var(--ahp-fs-sm); min-height:44px; align-content:center; }
.ahp .site-row { align-items:start; }
.ahp .site-row > span { overflow-wrap:anywhere; min-width:0; }
.ahp .site-row b { min-width:0; }
.ahp .site-subdomains { padding-inline-start:20px; }
.ahp .factlist.nested > div { font-size:var(--ahp-fs-sm); }
.ahp .portal-service-section { max-width:none; }
.ahp #service-settings-pane .block-form { max-width:720px; }
.ahp .portal-support-message .markdown-body :is(p,ul,ol,pre,blockquote) + :is(p,ul,ol,pre,blockquote) { margin-top:12px; }
.ahp .portal-ticket-reply :is(.ck-editor,.ck-editor__main,.ck-content) { min-width:0; max-width:100%; }
.ahp .portal-ticket-reply,.ahp .portal-ticket-create { --ck-color-base-background:var(--ahp-surface); --ck-color-base-foreground:var(--ahp-surface-2); --ck-color-text:var(--ahp-text); --ck-color-base-border:var(--ahp-ctl-border); --ck-color-toolbar-background:var(--ahp-surface-2); --ck-color-toolbar-border:var(--ahp-ctl-border); }
/* One locale selector / existing TomSelect hook, now in the header (V6.2).
   Styled to the design's pill so it sits level with the theme and account
   controls; the <select> and its TomSelect enhancer are unchanged. */
/* Bootstrap's .visually-hidden is not in this theme's vendor build, so the
   header's own label-hiding utility lives here. */
.ahp .portal-visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ahp .portal-language--bar { display:flex; align-items:center; flex:0 0 auto; min-width:0; }
.ahp .portal-language--bar .form-select { height:var(--ahp-ctl-h); padding:0 32px 0 12px; font-size:var(--ahp-fs-sm); font-weight:500; background-color:var(--ahp-surface); border:1px solid var(--ahp-ctl-border); border-radius:var(--ahp-r-sm); }
.ahp .portal-language--bar .ts-wrapper { min-width:0; }
.ahp .portal-language--bar .ts-control { min-height:var(--ahp-ctl-h); height:var(--ahp-ctl-h); padding:0 28px 0 12px; align-items:center; gap:8px; font-size:var(--ahp-fs-sm); font-weight:500; background:var(--ahp-surface); border:1px solid var(--ahp-ctl-border); border-radius:var(--ahp-r-sm); white-space:nowrap; }
.ahp .portal-language--bar .ts-control:hover { border-color:var(--border-active); }
.ahp .portal-language--bar .ts-dropdown { min-width:180px; }
.ahp .portal-header-brand { display:flex; align-items:center; gap:6px; min-width:0; }
.ahp .portal-mobile-brand { display:none; }
@media (max-width:1023.98px) {
  .ahp .portal-mobile-brand { display:flex; padding:0; gap:6px; min-width:0; }
  .ahp .portal-mobile-brand .mark { width:26px; height:26px; }
  .ahp .portal-mobile-brand .wordmark-text { font-size:1rem; white-space:nowrap; letter-spacing:0; }
  .ahp .topline { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); gap:8px; }
  .ahp .who-name { display:none; }
  .ahp .who { width:44px; min-width:44px; padding:0; justify-content:center; }
  .ahp .topline .ahp-iconbtn { width:44px; height:44px; min-width:44px; }
  .ahp .topline > .portal-header-actions { gap:4px; flex-shrink:0; }
}
@media (max-width:767.98px) {
  .ahp .ahp-bnav { position:sticky; bottom:0; padding-inline:max(4px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-right)); }
  .ahp .ahp-bnav a { min-height:56px; padding:4px 2px; line-height:1.3; }
  .ahp .ahp-bnav a:focus-visible { outline-offset:-3px; }
  .ahp .ahp-bnav a[aria-current='page'] { background:var(--ahp-tint); }
  .ahp .portal-content { padding-bottom:24px; }
  .ahp .ahp-metric { padding:16px; gap:10px; }
  .ahp .ahp-metric__v { font-size:1.5rem; }
  .ahp .portal-entitlements .stat { padding:12px; }
  .ahp .service .factlist > div { align-items:start; }
  .ahp .service .actions { gap:8px; }
  .ahp .service .actions .ah-btn { flex:1 1 120px; }
  .ahp .portal-invoices .ahp-table tr,.ahp .portal-support-list .ahp-table tr { grid-template-columns:minmax(0,1fr); gap:8px; }
  .ahp .portal-invoices .ahp-table td,.ahp .portal-support-list .ahp-table td { grid-column:1; text-align:left!important; }
}
@media (max-width:359.98px) {
  .ahp .portal-mobile-brand .wordmark-text { font-size:.875rem; }
  .ahp .portal-header-brand { gap:4px; }
}

.ahp .sites-head h2,.ahp .sites-head h3 { font-size:var(--ahp-fs-h); font-weight:600; line-height:1.3; margin:0; }


/* ═══════════════════════════════════════════════════════════════════════
   V6.2 — global header, panel search and account menu.

   The .ahp-* components these use (.ahp-bar, .ahp-search, .ahp-iconbtn,
   .ahp-pill, .ahp-menu) all already ship in the pinned V6 design system;
   what follows is only the FOSSBilling-side glue that was missing, not a
   second set of components.
   ═══════════════════════════════════════════════════════════════════════ */

/* Search sits between the brand and the action cluster and takes the slack,
   exactly as in the original V6 header. */
.ahp .topline .portal-search { flex:0 1 420px; min-width:0; margin-right:auto; }
.ahp .portal-search input { height:var(--ahp-ctl-h); border-radius:var(--r-pill); padding-left:40px; padding-right:74px; }
.ahp .portal-search input:focus { outline:none; border-color:var(--ahp-primary); box-shadow:0 0 0 2px var(--ahp-tint-2); }
.ahp .portal-search input::-webkit-search-cancel-button { display:none; }
.ahp .portal-search > .ahp-ico { width:18px; height:18px; }

/* Results list. Rendered only when there is at least one real destination
   to show, so the panel never appears empty or with a fabricated row. */
.ahp .portal-search-results { padding:6px; max-height:min(60vh,420px); overflow-y:auto; }
.ahp .portal-search-results[hidden] { display:none; }
.ahp .portal-search-opt { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:0 10px; border-radius:6px; color:var(--ahp-text); font-size:var(--ahp-fs-sm); text-decoration:none; }
.ahp .portal-search-opt .ahp-ico { width:16px; height:16px; color:var(--ahp-muted); flex:0 0 auto; }
.ahp .portal-search-opt small { margin-left:auto; color:var(--ahp-muted); font-size:var(--ahp-fs-cap); }
.ahp .portal-search-opt:is(:hover,:focus-visible,[aria-selected='true']) { background:var(--ahp-tint); color:var(--ahp-link); }
.ahp .portal-search-opt:is(:hover,:focus-visible,[aria-selected='true']) .ahp-ico { color:var(--ahp-link); }
.ahp .portal-search-empty { padding:12px 10px; color:var(--ahp-muted); font-size:var(--ahp-fs-sm); }

/* Account menu: identity line, then destinations, then sign-out. */
.ahp .portal-account-menu { min-width:240px; }
.ahp .portal-account-menu__id { padding:8px 12px 6px; color:var(--ahp-muted); font-size:var(--ahp-fs-cap); overflow-wrap:anywhere; }
.ahp .portal-account-menu .dropdown-item { display:flex; align-items:center; gap:10px; border-radius:6px; }
.ahp .portal-account-menu .dropdown-item .ahp-ico { color:var(--ahp-muted); }
.ahp .portal-account-menu .dropdown-item:hover .ahp-ico { color:inherit; }
.ahp .portal-account-menu__out { color:var(--ahp-err); }
.ahp .portal-account-menu__out:hover { color:var(--ahp-err); background:var(--ahp-err-bg); }
.ahp .who .ahp-chev { color:var(--ahp-muted); flex:0 0 auto; }

@media (max-width:1023.98px) {
  /* The search needs a full row to be usable; the header keeps brand +
     controls only, and the panel is reachable from the bottom nav. */
  .ahp .topline .portal-search { display:none; }
  .ahp .who .ahp-chev { display:none; }
}

/* ── V6.2 component repairs (pinned portal-v6.css stays immutable) ──────── */

/* .ahp-card__title carries flex:1 1 auto so it can take the slack inside an
   .ahp-card__head row. As a DIRECT child of the card's own column flex it
   grew vertically instead, which is why a short card in an equal-height
   grid pushed its heading into the middle. */
.ahp .ahp-card > .ahp-card__title { flex:0 0 auto; }

/* The meter fill is a <span>; inline boxes ignore width, so the bar read
   0px wide at every percentage. */
.ahp .ahp-meter__f { display:block; }

/* The service header's meta line is a flex row (domain · billing period) in
   V6.2, so it must not be forced back to display:block. */
.ahp .service-head-domain.ahp-svc__meta { display:flex; }

/* Design emphasis for info rows: label regular, value medium. */
.ahp .ahp-rows dt { font-weight:400; color:var(--ahp-text); }
.ahp .ahp-rows dd { font-weight:500; color:var(--ahp-text); }
.ahp .ahp-rows--split > div { min-height:44px; }

/* Two-column Service / Technical information cards align to the top. */
.ahp .portal-service-facts > .ahp-card { align-self:stretch; }
.ahp .portal-service-facts .ahp-note { margin-top:auto; }


/* ── V6.2 services table ────────────────────────────────────────────────── */
.ahp .portal-services-table .ahp-table a { color:var(--ahp-link); }
.ahp .portal-row-sub { display:block; margin-top:2px; color:var(--ahp-muted); font-size:var(--ahp-fs-cap); overflow-wrap:anywhere; }
.ahp .portal-services-table .ahp-table td { vertical-align:middle; }
.ahp .portal-services-table .ahp-table td.end { text-align:right; white-space:nowrap; }
@container ahp (max-width:767px) {
  /* The stacked form of the table keeps the action on its own line rather
     than squeezed beside the status badge. */
  .ahp .portal-services-table .ahp-table td.end { grid-column:1/-1; text-align:left; padding-top:8px; }
  .ahp .portal-services-table .ahp-table td.end .ah-btn { width:100%; justify-content:center; }
}

/* ── V6.2 account layout ────────────────────────────────────────────────── */
/* The original V6 account page is a balanced grid, not one form stretched
   across the whole desktop width. Panes that hold several independent cards
   pair them up; the profile form, which is a single card, is capped to a
   readable measure instead of being padded out with invented content. */
.ahp .portal-account-panes .tab-pane.show { display:flex; flex-direction:column; gap:16px; }
.ahp #account-profile-pane .portal-account-section { max-width:900px; }
.ahp #account-api-pane .portal-account-section { max-width:760px; }
@media (min-width:1200px) {
  .ahp #account-security-pane.show,
  .ahp #account-preferences-pane.show { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .ahp #account-security-pane.show > .portal-account-section,
  .ahp #account-preferences-pane.show > .portal-account-section { max-width:none; }
}


/* ── V6.2 sidebar help panel ────────────────────────────────────────────── */
/* The original V6 design draws the support card as a plain rounded panel.
   The pinned stylesheet gives it the brand corner notch (--ahp-tile-clip),
   which is what produced the clipped top-left corner reported against V6.1.
   Restoring the design's own treatment also removes the clip that cut the
   card's border against the sidebar edge. */
.ahp .ahp-help { clip-path:none; margin-top:auto; }
.ahp .rail .ahp-help { margin-inline:2px; }
/* The utility row sits below the help panel, not pinned past it. */
.ahp .railutility { margin-top:14px; padding:0 10px; font-size:var(--ahp-fs-cap); }
.ahp .railutility a { color:var(--ahp-muted); }
.ahp .railutility a:hover { color:var(--ahp-link); }

/* ── V6.2 header at narrow widths ───────────────────────────────────────── */
@media (max-width:767.98px) {
  /* Language stays reachable on mobile — it used to live in the drawer, and
     hiding it here would remove a working control — but it is compacted so
     the brand and account controls still fit a 375px bar. */
  .ahp .portal-language--bar .ts-control,
  .ahp .portal-language--bar .form-select { max-width:104px; padding-inline:8px 24px; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:430px) {
  .ahp .portal-mobile-brand .wordmark-text { display:none; }
  .ahp .portal-language--bar .ts-control,
  .ahp .portal-language--bar .form-select { max-width:88px; }
}

/* Listing row actions keep the primary button last and wrap on narrow rows. */
.ahp .portal-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
@container ahp (max-width:767px) {
  .ahp .portal-row-actions { justify-content:stretch; }
  .ahp .portal-row-actions .ah-btn { flex:1 1 140px; justify-content:center; }
}

/* ── V6.2 service header action cluster ─────────────────────────────────── */
/* V6.1's narrow-width rules made .service-manage-head-actions a full-width
   direct child of the header grid (grid-column:1/-1, width:100%). In V6.2
   the dropdown sits inside .ahp-svc__act beside the Renew button, so those
   rules now span it across that wrapper's own two columns and push Renew
   onto its own row. Inside the wrapper it is just one of two equal cells. */
.ahp .ahp-svc__act > .service-manage-head-actions { grid-column:auto; width:auto; margin-left:0; }
.ahp .ahp-svc__act > .service-manage-head-actions .dropdown-toggle { width:100%; justify-content:center; }
.ahp .ahp-svc__act > .ah-btn { justify-content:center; }
@container ahp (max-width:767px) {
  .ahp .ahp-svc__act { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .ahp .ahp-svc__act > .ah-btn,
  .ahp .ahp-svc__act > .service-manage-head-actions { width:100%; }
}

/* The legacy header used the popup shadow token. Keep the V6 service header
   flat and separate the overview sections by the design's normal card gap. */
.ahp .service-manage-head { box-shadow:none; clip-path:none; }
.ahp #service-overview-pane.active { display:flex; flex-direction:column; gap:16px; }
@media (max-width:767.98px) {
  .ahp .portal-entitlements .ahp-metric { align-content:start; align-items:start; }
  .ahp .ahp-bnav a { overflow-wrap:normal; }
}