*{box-sizing:border-box}body{margin:0;font-family:Nunito,Arial,sans-serif;color:#20314b;background:#f5f7fb}.portal-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:#f5f7fb}.login-shell{width:min(440px,100%)}.login-card,.portal-card,.request-card,.empty{background:#fff;border:1px solid #e0e5ec;border-radius:20px;box-shadow:0 8px 28px rgba(20,38,74,.07)}.login-card{padding:28px}.login-logo{display:block;width:150px;height:auto;margin:0 auto 14px}.portal-kicker,.request-id{font-size:.74rem;font-weight:900;letter-spacing:.08em;color:#d6537c}.login-card h1{margin:4px 0;font-size:2rem}.muted{color:#667085}.login-card label,.inline-form label{display:block;font-weight:800;margin:16px 0}.login-card input,.inline-form input,.portal-card textarea{display:block;width:100%;margin-top:7px;padding:13px;border:1px solid #cfd7e2;border-radius:10px;font:inherit}.primary-button,.secondary-button,.notify-button,.card-button,.portal-action,.logout,.back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 15px;border-radius:11px;text-decoration:none;font-weight:900;border:1px solid transparent;cursor:pointer}.primary-button{background:#3d9571;color:#fff}.secondary-button,.notify-button{background:#fff;color:#20314b;border-color:#cfd7e2}.primary-button{width:100%;margin-top:8px}.login-note{font-size:.82rem;color:#667085;margin-bottom:0}.alert{padding:14px 16px;border-radius:13px;margin-bottom:18px}.alert.error{background:#fff1f1;border:1px solid #e5b9b9}.alert.success{background:#edf9f2;border:1px solid #b8dcc7}.portal-app{min-height:100vh}.portal-header{background:#14264a;color:#fff}.portal-header-inner{width:min(1180px,100%);margin:auto;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}.portal-brand{display:flex;align-items:center;gap:10px}.portal-brand img{width:42px;height:42px;object-fit:contain}.portal-brand small{display:block;opacity:.72}.logout,.back{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}.portal-main{width:min(1180px,100%);margin:auto;padding:24px 16px 50px}.welcome{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.welcome h1{font-size:clamp(1.8rem,4vw,2.5rem);margin:2px 0}.welcome p{margin:0;color:#667085}.request-list{display:grid;gap:16px}.request-card{padding:18px}.request-head{display:flex;justify-content:space-between;gap:12px}.request-head h2{margin:3px 0 14px}.status{padding:7px 10px;border-radius:999px;font-size:.75rem;font-weight:900;white-space:nowrap;height:max-content;background:#eef2f7}.status-requested{background:#fff0d9;color:#895600}.status-time_confirmed_awaiting_deposit{background:#fff0f5;color:#9c2e57}.status-confirmed{background:#e8f7ef;color:#28704f}.status-in_progress{background:#e9f6f7;color:#1f6f76}.request-details,.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.request-details>div,.detail-grid>div{padding:11px 12px;border:1px solid #e0e5ec;border-radius:11px}.request-details b,.detail-grid b{display:block;font-size:.72rem;text-transform:uppercase;color:#667085;margin-bottom:4px}.request-details span,.request-details a,.detail-grid span{font-weight:800;color:#20314b}.card-button{margin-top:14px;background:#14264a;color:#fff;width:100%}.request-hero{margin-bottom:18px}.request-hero h1{font-size:2rem;margin:4px 0}.portal-card{padding:18px;margin-bottom:16px}.portal-card h2{margin-top:0}.action-grid{display:flex;flex-wrap:wrap;gap:10px}.portal-action{background:#fff;border-color:#cfd7e2;color:#20314b;flex:1}.inline-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inline-form .primary-button{grid-column:1/-1}.highlight{border-color:#e7b5c6;background:#fff7fa}.people-list{display:grid;gap:9px}.person,.note{padding:11px 12px;border:1px solid #e0e5ec;border-radius:11px}.person span{display:block;color:#667085;margin-top:4px}.note{margin-bottom:9px}.note p{margin-bottom:0}.empty{text-align:center;padding:45px 20px}.empty strong,.empty span{display:block}.empty span{color:#667085;margin-top:5px}@media(max-width:700px){.welcome{align-items:stretch;flex-direction:column}.request-head{flex-direction:column}.request-details,.detail-grid,.inline-form{grid-template-columns:1fr}.action-grid .portal-action{flex-basis:100%}.portal-main{padding-top:18px}.login-card{padding:22px}}

/* ===== Portal spacing/layout repair ===== */
.section-card{
    background:#fff;
    border:1px solid #e0e5ec;
    border-radius:20px;
    box-shadow:0 8px 28px rgba(20,38,74,.07);
    padding:24px;
    margin-bottom:16px;
}
.section-card h2,
.portal-card h2{
    margin:0 0 18px;
    line-height:1.25;
}
.financial-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:0 0 18px;
}
.financial-grid>div{
    min-width:0;
    padding:14px 16px;
    border:1px solid #e0e5ec;
    border-radius:11px;
    background:#fbfcfe;
}
.financial-grid span,
.financial-grid strong{
    display:block;
}
.financial-grid span{
    margin:0 0 6px;
    color:#667085;
    font-size:.72rem;
    line-height:1.25;
    font-weight:800;
    text-transform:uppercase;
}
.financial-grid strong{
    margin:0;
    color:#20314b;
    font-size:1rem;
    line-height:1.35;
    font-weight:900;
}
.detail-grid>div,
.request-details>div{
    min-width:0;
}
.detail-grid b,
.request-details b{
    display:block;
    margin:0 0 6px;
    line-height:1.25;
}
.detail-grid span,
.request-details span,
.detail-grid a,
.request-details a{
    display:block;
    line-height:1.35;
    overflow-wrap:anywhere;
}
.action-grid{
    align-items:stretch;
}
.portal-action{
    min-width:0;
    line-height:1.3;
}
.portal-card p,
.section-card p{
    line-height:1.55;
}
@media(max-width:900px){
    .financial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
    .financial-grid{grid-template-columns:1fr}
    .section-card,.portal-card{padding:18px}
}


.service-controls-card{border-color:#cfe4da;background:#fbfffd}.service-controls-card h2{margin-bottom:14px}.service-timer-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.service-timer{min-width:300px;padding:18px 24px;border:1px solid #cfe4da;border-radius:14px;background:#f1faf5;text-align:center}.service-timer-label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;font-weight:900;color:#667085;margin-bottom:5px}.service-timer strong{display:block;font-size:3.25rem;line-height:1.05;letter-spacing:.05em;color:#1d3157;font-variant-numeric:tabular-nums}.service-control-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.service-control-buttons form{margin:0}.service-control-buttons .primary-button,.service-control-buttons .secondary-button{width:auto;min-width:145px;margin-top:0}.service-control-buttons .primary-button{width:auto}@media(max-width:700px){.service-timer-row{align-items:stretch}.service-timer{width:100%}.service-control-buttons{width:100%}.service-control-buttons form{flex:1}.service-control-buttons .primary-button,.service-control-buttons .secondary-button{width:100%}}


/* Final invoice / Square collection */
.final-invoice-card{margin:20px 0;border:1px solid #b9dfcf;background:#fff}
.final-invoice-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.final-invoice-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;color:#3f9f79}
.final-invoice-header h2{margin:6px 0 8px}
.final-invoice-total{min-width:180px;padding:18px 22px;border-radius:14px;background:#eef9f4;border:1px solid #c8e7da;text-align:center}
.final-invoice-total span{display:block;font-size:12px;text-transform:uppercase;font-weight:800;color:#547267}
.final-invoice-total strong{display:block;margin-top:5px;font-size:30px;color:#1d3157}
.invoice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:20px 0}
.invoice-grid>div{padding:14px 16px;border:1px solid #e4e9f1;border-radius:12px;background:#fbfcfe}
.invoice-grid span{display:block;color:#71809a;font-size:12px;font-weight:700;margin-bottom:5px;text-transform:uppercase}
.invoice-grid strong{display:block;color:#1d3157;font-size:17px}
.final-tip-box{padding:18px;border:1px solid #e4e9f1;border-radius:14px;background:#fbfcfe;margin-top:18px}
.final-tip-box h3{margin:0 0 5px}
.tip-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.tip-form label{display:inline-flex;align-items:center;gap:6px}
.tip-form input[type="number"]{width:100px;padding:9px;border:1px solid #ccd5e3;border-radius:8px}
.square-final-payment{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding:20px;border-radius:14px;background:#eef9f4;border:1px solid #c8e7da}
.square-final-payment p{margin:5px 0 0;color:#657792}
.square-final-payment form{margin:0}
.final-paid-banner{margin-top:18px;padding:16px 18px;border-radius:12px;background:#eef9f4;border:1px solid #c8e7da;color:#23664c;font-weight:800}
.removal-completed-check{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;font-size:14px;font-weight:700;color:#1d3157}
.finish-service-form{display:flex;flex-direction:column;align-items:stretch}
@media(max-width:700px){
  .final-invoice-header,.square-final-payment{flex-direction:column}
  .final-invoice-total{width:100%;box-sizing:border-box}
  .square-final-payment .primary-button{width:100%}
}


/* Customer-facing final checkout: Faith hands the phone to the customer. */
.plr-customer-checkout {
    font-size: 18px;
    line-height: 1.55;
}
.plr-customer-checkout h2,
.plr-customer-checkout h3 { margin-bottom: 12px; }
.plr-customer-checkout .plr-invoice-total,
.plr-customer-checkout .plr-total-due {
    font-size: 34px;
    font-weight: 800;
    text-align: center;
    padding: 18px;
    margin: 18px 0;
    border-radius: 16px;
}
.plr-customer-checkout .plr-tip-options,
.plr-customer-checkout .tip-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.plr-customer-checkout label {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    background: #fff;
}
.plr-customer-checkout input[type="radio"] { transform: scale(1.25); }
.plr-customer-checkout input[type="number"],
.plr-customer-checkout input[type="text"] {
    min-height: 48px;
    font-size: 18px;
    border-radius: 10px;
}
.plr-customer-checkout button {
    min-height: 52px;
    font-size: 17px;
    font-weight: 800;
    border-radius: 12px;
}
.plr-customer-checkout .plr-customer-complete,
.plr-customer-checkout .plr-pay-button {
    width: 100%;
    min-height: 62px;
    margin-top: 18px;
    font-size: 20px;
    font-weight: 800;
}
@media (max-width: 700px) {
    .plr-customer-checkout {
        padding: 18px !important;
        font-size: 17px;
    }
    .plr-customer-checkout .plr-tip-options,
    .plr-customer-checkout .tip-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .plr-customer-checkout .plr-invoice-total,
    .plr-customer-checkout .plr-total-due { font-size: 30px; }
}

/* v9: customer handoff + Square POS collection */
.customer-checkout-ready,.customer-returned-banner{margin:0 0 18px;padding:18px;border:1px solid #c8e7da;border-radius:14px;background:#eef9f4;display:flex;flex-direction:column;gap:8px}.customer-checkout-ready strong,.customer-returned-banner strong{color:#236d50}.customer-checkout-ready .primary-button{align-self:flex-start;margin-top:6px}.customer-returned-banner{background:#f0faf5}.square-final-payment{align-items:center}.square-final-payment .square-open-button{white-space:nowrap}.tip-live-total{margin-top:14px;padding:12px 14px;border-radius:10px;background:#eef9f4;border:1px solid #c8e7da;color:#23664c;font-weight:800}.tip-live-total strong{font-size:1.1rem}@media(max-width:700px){.square-final-payment .square-open-button{width:100%;text-align:center}.customer-checkout-ready .primary-button{width:100%;text-align:center}}

.portal-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.header-link{display:inline-flex;align-items:center;min-height:40px;padding:9px 12px;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#fff;text-decoration:none;font-weight:800;background:rgba(255,255,255,.08)}
.header-link:hover{background:rgba(255,255,255,.14)}
@media(max-width:700px){.portal-header-actions{width:100%;justify-content:flex-end}.header-link{font-size:.85rem}}

/* Flexible final payment collection */
.payment-collection-card{margin-top:18px;padding:20px;border:1px solid #b9dfcf;border-radius:16px;background:#fbfffd}
.payment-collection-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.payment-collection-header strong{font-size:1.12rem;color:#1d3157}
.payment-collection-header p{margin:5px 0 0;color:#657792;line-height:1.5}
.payment-balance{min-width:145px;padding:12px 16px;border:1px solid #c8e7da;border-radius:12px;background:#eef9f4;text-align:center}
.payment-balance span{display:block;font-size:.7rem;font-weight:900;letter-spacing:.06em;color:#547267}
.payment-balance strong{display:block;margin-top:3px;font-size:1.45rem;color:#1d3157}
.payment-history{margin-top:18px}
.payment-history h4{margin:0 0 9px;color:#20314b}
.payment-history-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e2e8ef;border-radius:10px;background:#fff;margin-top:7px}
.payment-history-row span{color:#526681;font-weight:700;overflow-wrap:anywhere}
.payment-history-row strong{color:#28704f}
.payment-collection-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.manual-payment-form,.card-payment-box{padding:16px;border:1px solid #e2e8ef;border-radius:13px;background:#fff}
.manual-payment-form label{display:block;margin:0 0 11px;font-size:.78rem;font-weight:900;color:#667085;text-transform:uppercase}
.manual-payment-form input,.manual-payment-form select{display:block;width:100%;box-sizing:border-box;margin-top:6px;min-height:46px;padding:9px 11px;border:1px solid #cfd7e2;border-radius:9px;background:#fff;color:#20314b;font:inherit;font-weight:600}
.manual-payment-form .primary-button,.card-payment-box .primary-button{width:100%;margin-top:2px;box-sizing:border-box}
.card-payment-box strong{display:block;color:#1d3157;font-size:1rem}
.card-payment-box p{color:#657792;line-height:1.5;margin:7px 0 14px}
.square-open-button{text-align:center}
@media(max-width:700px){.payment-collection-header{flex-direction:column}.payment-balance{width:100%;box-sizing:border-box}.payment-collection-actions{grid-template-columns:1fr}.payment-history-row{align-items:flex-start}}

/* Customer payment choice */
.payment-choice-box{border:1px solid #dfe6ef;border-radius:18px;padding:20px;margin-top:22px;background:#fff}
.payment-choice-box h3{margin:0 0 5px;font-size:22px;color:#1d3157}
.payment-choice-box p{margin:0;color:#657792}
.payment-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.payment-choice-option{display:flex;align-items:center;gap:12px;min-height:84px;padding:14px;border:2px solid #d6deea;border-radius:14px;background:#fff;cursor:pointer;box-sizing:border-box}
.payment-choice-option:has(input:checked){border-color:#3f9f79;background:#eef9f4}
.payment-choice-option input{width:20px;height:20px;accent-color:#3f9f79;flex:0 0 auto}
.payment-choice-icon{font-size:27px;line-height:1}
.payment-choice-option strong{display:block;color:#1d3157;font-size:1rem}
.payment-choice-option small{display:block;margin-top:3px;color:#657792;line-height:1.3}
@media(max-width:560px){.payment-choice-grid{grid-template-columns:1fr}.payment-choice-option{min-height:72px}}

/* Modern final payment collection UI v3 */
.payment-collection-card{
  margin-top:20px;
  padding:0;
  overflow:hidden;
  border:1px solid #dfe5ec;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 28px rgba(20,38,74,.07);
}
.payment-collection-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 24px;
  background:#fbfcfe;
  border-bottom:1px solid #e5e9ef;
}
.payment-section-kicker{
  display:block;
  margin:0 0 5px;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.09em;
  color:#3d9571;
}
.payment-collection-title h3{
  margin:0;
  color:#20314b;
  font-size:1.3rem;
  line-height:1.25;
}
.payment-collection-title p{
  margin:7px 0 0;
  color:#667085;
  line-height:1.5;
}
.payment-balance{
  flex:0 0 auto;
  min-width:145px;
  padding:11px 16px;
  border:1px solid #cfe4da;
  border-radius:12px;
  background:#f1faf5;
  text-align:right;
}
.payment-balance span{
  display:block;
  color:#667085;
  font-size:.68rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
}
.payment-balance strong{
  display:block;
  margin-top:3px;
  color:#20314b;
  font-size:1.45rem;
  line-height:1.1;
}
.payment-history{
  padding:18px 24px 0;
}
.payment-subheading{
  margin-bottom:9px;
  color:#667085;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.payment-history-list{display:grid;gap:8px}
.payment-history-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 13px;
  border:1px solid #e0e5ec;
  border-radius:11px;
  background:#fff;
}
.payment-history-method{display:flex;align-items:center;gap:9px;min-width:0}
.payment-method-dot{
  width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#3d9571;
}
.payment-history-method strong{display:block;color:#20314b;font-size:.9rem}
.payment-history-method small{display:block;margin-top:2px;color:#667085;font-size:.75rem;overflow-wrap:anywhere}
.payment-history-amount{color:#28704f;font-size:.92rem;white-space:nowrap}
.payment-collection-actions{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:14px;
  padding:18px 24px 24px;
}
.manual-payment-form,.card-payment-box{
  min-width:0;
  padding:17px;
  border:1px solid #e0e5ec;
  border-radius:14px;
  background:#fff;
}
.payment-action-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.payment-action-heading>div{min-width:0}
.payment-action-heading strong{
  display:block;
  color:#20314b;
  font-size:1rem;
  line-height:1.25;
}
.payment-action-heading small{
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:.78rem;
  line-height:1.35;
}
.payment-action-icon{
  display:grid;
  place-items:center;
  width:32px;height:32px;flex:0 0 auto;
  border-radius:9px;
  background:#edf7f2;
  color:#3d9571;
  font-size:.95rem;
  font-weight:900;
}
.payment-action-icon.card-icon{background:#eef2f8;color:#35557f}
.payment-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.manual-payment-form label{
  display:block;
  margin:0 0 11px;
  color:#667085;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.manual-payment-form label>span{
  color:#98a2b3;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.manual-payment-form input,.manual-payment-form select{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  min-height:44px;
  padding:9px 11px;
  border:1px solid #cfd7e2;
  border-radius:9px;
  background:#fff;
  color:#20314b;
  font:inherit;
  font-weight:700;
  outline:none;
}
.manual-payment-form input:focus,.manual-payment-form select:focus{
  border-color:#3d9571;
  box-shadow:0 0 0 3px rgba(61,149,113,.12);
}
.money-input{position:relative;margin-top:6px}
.money-input>span{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:#667085;font-weight:800;pointer-events:none;
}
.money-input input{margin-top:0;padding-left:25px}
.payment-action-button{width:100%;min-height:44px;margin-top:1px!important}
.card-payment-box p{
  margin:0 0 17px;
  color:#667085;
  font-size:.88rem;
  line-height:1.5;
}
.square-open-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
}
@media(max-width:760px){
  .payment-collection-header{align-items:stretch;flex-direction:column;gap:14px;padding:19px}
  .payment-balance{width:100%;box-sizing:border-box;text-align:left}
  .payment-history{padding:16px 19px 0}
  .payment-collection-actions{grid-template-columns:1fr;padding:16px 19px 19px}
  .payment-form-grid{grid-template-columns:1fr}
}

/* ===== Mobile readiness foundation ===== */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font-size: 16px;
}

.portal-header-inner,
.portal-main,
.portal-card,
.section-card,
.request-card,
.empty {
    min-width: 0;
}

.portal-brand,
.portal-header-actions,
.welcome,
.request-head,
.request-details > div,
.detail-grid > div,
.financial-grid > div,
.invoice-grid > div {
    min-width: 0;
}

.portal-brand strong,
.portal-brand small,
.welcome h1,
.welcome p,
.request-head h2,
.request-details span,
.request-details a,
.detail-grid span,
.portal-card,
.section-card {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .portal-header-inner {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .portal-brand img {
        width: 38px;
        height: 38px;
    }

    .portal-header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }

    .header-link,
    .logout,
    .back {
        width: 100%;
        min-height: 42px;
        padding: 9px 10px;
        text-align: center;
        font-size: 0.88rem;
        line-height: 1.2;
    }

    .portal-main {
        width: 100%;
        padding: 18px 12px 42px;
    }

    .welcome {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 16px;
    }

    .welcome h1 {
        font-size: clamp(2rem, 11vw, 2.6rem);
        line-height: 0.98;
    }

    .notify-button {
        width: 100%;
    }

    .portal-card,
    .section-card,
    .request-card,
    .empty {
        border-radius: 16px;
        padding: 16px;
    }

    .action-grid,
    .service-control-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .primary-button,
    .secondary-button,
    .card-button,
    .portal-action {
        width: 100%;
        min-height: 48px;
    }

    .detail-grid,
    .request-details,
    .financial-grid,
    .invoice-grid,
    .payment-choice-grid,
    .payment-collection-actions,
    .payment-form-grid {
        grid-template-columns: 1fr;
    }

    .service-timer {
        min-width: 0;
        padding: 16px;
    }

    .service-timer strong {
        font-size: clamp(2.25rem, 13vw, 3rem);
    }

    .final-invoice-header,
    .payment-collection-header,
    .square-final-payment {
        align-items: stretch;
        flex-direction: column;
    }

    .final-invoice-total,
    .payment-balance {
        width: 100%;
    }

    .plr-customer-checkout {
        font-size: 17px;
    }
}

@media (max-width: 520px) {
    .portal-header-actions {
        grid-template-columns: 1fr;
    }

    .header-link,
    .logout,
    .back {
        justify-content: center;
    }
}

/* Mobile card tables for admin-heavy portal pages. */
@media (max-width: 760px) {
    .dispatch-board,
    .history-shell {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .dispatch-board-scroll,
    .history-scroll {
        overflow: visible;
    }

    .dispatch-table,
    .history-table,
    .dispatch-table tbody,
    .history-table tbody,
    .dispatch-table tr,
    .history-table tr,
    .dispatch-table td,
    .history-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .dispatch-table thead,
    .history-table thead,
    .history-table tfoot {
        display: none;
    }

    .dispatch-table tr,
    .history-table tr {
        margin-bottom: 14px;
        padding: 16px;
        background: #fff;
        border: 1px solid #dfe6ee;
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(16, 35, 61, 0.055);
    }

    .dispatch-table td,
    .history-table td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid #eef2f6;
        text-align: left;
    }

    .dispatch-table td:last-child,
    .history-table td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .dispatch-table td::before,
    .history-table td::before {
        content: attr(data-label);
        color: #667085;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .dispatch-open {
        width: 100%;
        min-height: 44px;
    }

    .history-table .money {
        text-align: left;
    }

    .dispatch-note,
    .table-note {
        display: block;
        margin-top: 8px;
        padding: 0 2px;
        border-top: 0;
    }

    .dispatch-note span,
    .table-note span {
        display: block;
        margin-top: 4px;
    }
}