.renewals-page .page-head{margin-bottom:16px}.renewals-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}.renewals-controls .tabs{margin-bottom:0;flex:1}.renewal-horizon{display:flex;align-items:center;gap:10px;color:var(--muted)}.renewals-page .table-wrap .row-button .small{display:block}.renewals-page .inspector .inline-actions{margin-top:12px}.renewals-page .inspector h2{font-size:18px}.renewals-page .inspector .kv dd{overflow-wrap:anywhere}
@media(max-width:700px){.renewals-controls{align-items:start;flex-wrap:wrap}.renewals-controls .small{flex-basis:100%}.renewals-page .data-table{min-width:600px}}

/* Shared operations screens: Billing, Service desk, Contracts, Projects, Maintenance. Kept here because this file loads on every page. */
/* Quiet secondary actions sit in one aligned row and share a visible hover fill. */
.ops-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 0}
:is(.ops-split,.maintenance-page,.renewals-page,.onboarding-page) .btn.quiet:not(:disabled):hover{background:var(--selected)}
/* Delete is muted until hovered or focused, then turns red. */
.btn.ops-delete{color:var(--muted)}
.btn.ops-delete:not(:disabled):hover,.btn.ops-delete:focus-visible{color:var(--danger);background:var(--hover);background:color-mix(in srgb,var(--danger) 9%,transparent)}
.inspector .kv .inline-link{font:inherit;text-align:left}
.contracts-table .row-button strong{font-weight:550}
/* Create forms: optional fields wait in a collapsible section. */
.more-details{border-top:1px solid var(--line);padding-top:6px}
.more-details>summary{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 8px;margin-left:-8px;border-radius:6px;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;list-style:none}
.more-details>summary::-webkit-details-marker{display:none}
.more-details>summary::before{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.more-details[open]>summary::before{transform:rotate(45deg)}
.more-details>summary:hover{background:var(--hover)}
.more-details-body{padding-top:12px}
/* Phones: details stack under the list; a selection scrolls to them and Back to list returns. */
.ops-back{display:none}
.ops-back .icon{transform:scaleX(-1)}
[data-detail]:focus{outline:none}
@media(max-width:767px){
.ops-split{grid-template-columns:1fr}
.ops-split>.inspector{border-left:0;border-top:1px solid var(--line);padding:25px 0 0;margin-top:30px;min-height:calc(100dvh - 60px)}
/* The min-height lets a tapped record scroll its details to the top of the screen. */
[data-detail]{scroll-margin-top:60px}
.ops-back{display:inline-flex;margin:0 0 12px -8px;padding:7px 8px}
/* Billing and contract tables become cards so Amount and Status are never cut off. */
.data-table.ops-cards{display:block;min-width:0;white-space:normal}
.data-table.ops-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.data-table.ops-cards tbody,.data-table.ops-cards tr,.data-table.ops-cards td{display:block;width:100%}
.data-table.ops-cards tr{padding:12px 8px;border-bottom:1px solid var(--line)}
.data-table.ops-cards tr.selected{border-radius:6px}
.data-table.ops-cards td,.data-table.ops-cards td:last-child{position:relative;border:0;padding:3px 0 3px 36%;text-align:left;overflow-wrap:anywhere}
.data-table.ops-cards td:first-child{padding:0 0 8px}
.data-table.ops-cards td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:3px;width:33%;color:var(--muted);font-size:12px}
.data-table.ops-cards tr.selected td:first-child,.data-table.ops-cards tr.selected td:last-child{border-radius:0}
}