elements (Add/Edit Artist, Add Venue, Add Promoter — plain `.row`s directly in ``, no wrapper) and every single-section popup completely unclamped: nothing capped their height to the viewport, so a modal taller than the screen just grew past the bottom edge with no scrollbar, leaving controls (Save/Cancel, trailing fields) unreachable — #948's "edit artist modal too long". Dropping the `:has(section + section)` condition makes every popup form get one bounded, viewport-relative scrollbar, matching "the previous modals had [overflow: scroll]" from the issue. The `.popup form section` rule above already disables per-section scrolling universally, so there is exactly one scrollbar per modal regardless of section count. (Add/Edit Contract's `#addContract` form carries its own `.dropdownList.scroll` sizing — `height: calc(100vh - 203px)` — which is tighter than this rule's `calc(100vh - 180px)`, so this rule is a no-op there; verified no regression.) */ .popup form { /* The modal is `position: absolute; top: 68px` with ~73px of header chrome above the , so the form needs ~141px of headroom inside the viewport to avoid pushing the modal card past the viewport bottom (which would trigger a document-body scroll on top of the form's own scroll). 180px gives ~40px of safety for variance in modal chrome at different viewports. */ max-height: calc(100vh - 180px); overflow-y: auto; } form .row { /* min-width: 430px; */ padding: 20px 20px 0px 20px; display: flex; position: relative; /* flex: 0 1 430px; */ } form .row:last-child input[type=button], form .row:last-child input[type=submit] { left: calc(100% - 130px); } /* #597 — Right-align modal submit buttons via flexbox and neutralize the global `left: calc(100% - 130px)` push above for popup submit rows. `form .row` is `display: flex`, which makes the global `input[type=submit] { float: right }` rule inert on the button (floats don't apply to flex items), so the button's horizontal position is governed entirely by the `left:` offset. That offset was tuned for a ~120px button (Add Venue / Add Promoter, where `input.half` caps the width) — on Add Contract / Add Artist the submit inherits `flex: 0 1 260px` from the base `input` rule and renders ~260px wide, so `left: calc(100% - 130px)` pushed it ~124px past the modal's right edge (the overflow Adam reported on !414). Add Contract / Add Artist previously masked this with an inline `style="left:0"`, which #597 removed to make all four modals float right consistently — re-exposing the broken push. Fix: push the submit row's children to the flex end and zero the `left` offset, so the button sits cleanly at the row's right content edge (inside the 20px `.row` padding) regardless of its width, on all four modals and at every viewport (the `.row` stays `display: flex` at phone tier). */ .popup form .row:last-child { justify-content: flex-end; } .popup form .row:last-child input[type=button], .popup form .row:last-child input[type=submit] { left: 0; } .popup form label { /* float: left; */ max-width: 170px; min-width: 39.5%; min-height: 40px; font-size: 13px; line-height: 20px; display: inline-flex; flex: 0 0 170px; } .popup form label.popupCheck { display: block; font-size: initial; min-width: 95%; padding: 0 2.5%; border-radius: 5px; } .popup form label.popupCheck:hover { background: var(--surface); } #taskAttach.dropdown { min-width: 561px; position: absolute; left: 332px; top: 131px; z-index: 10; } #eventAttach.dropdown { width: 100%; /* position: absolute; */ left: 0; top: 131px; z-index: 10; } #emailBlastPanel.dropdown { left: 332px; width: 900px; } .dropdownList input:not([type="checkbox"]), .dropdownList select { height: 28px; margin: 5px 15px 15px 15px; } .dropdownList input:not([type="checkbox"]):not([type="file"]), .dropdownList select { width: 198px; max-width: 100%; } /* #534 — Promote border/radius/box-sizing off `.dropdownList` so popup-form inputs in addVenue / addPromoter (which don't carry the `.dropdownList` class on their and have no JS to flip its `display: none` base state) get the same crisp 1px border treatment as addContract / addArtist. Width/margin remain scoped to `.dropdownList` so Contract/Artist sizing is unchanged. */ .popup form input:not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="button"]), .popup form select, .popup form textarea { border: 1px solid; border-radius: 3px; box-sizing: border-box; } /* #613 — Restore borders to edit forms rendered in `.dropdownList.scroll` (the "Modify Artist Contract" dropdown and defunct event-attach edit forms). These lost their borders when #534 moved the rule to `.popup form input` only. Note: the IS the .dropdownList element (not a descendant), so `.dropdownList form input` never matches. The `.scroll` modifier is the correct discriminator: empty autocomplete placeholder forms (#taskArtistList) never carry `.scroll`; only real data-entry forms do. Exact property values match the `.popup form input` rule above so both surfaces look identical. */ .dropdownList.scroll input:not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="button"]), .dropdownList.scroll select, .dropdownList.scroll textarea { border: 1px solid; border-radius: 3px; box-sizing: border-box; } /* #597 — Country selects inside popup modals carry class .half (to size them narrower than full-width). The global `select { min-width: 50% !important }` rule (line ~158) overrides the .half width constraint, making these selects render wider than intended. Previously worked around with an inline `style="min-width:unset!important;"` on the Add Artist country select. This scoped rule replaces that inline hack and covers all four modals consistently, including Add Venue and Add Promoter which were silently affected by the global rule but not visibly hacked. */ #addArtist select.half, #addContract select.half, #addVenue select.half, #addPromoter select.half { min-width: 0 !important; } .dropdownList input.half { width: 98px; max-width: 100%; box-sizing: border-box; } .dropdownList textarea { border: 1px solid; border-radius: 3px; height: 98px; width: 418px; max-width: 100%; box-sizing: border-box; margin: 5px 15px 15px 15px; vertical-align: top; } .dropdownList input.blastTitle { border: solid; border-width: 0 0 1px 0; border-radius: 0; width: 100%; margin: 0; height: 39px; display: inline-block; line-height: 39px; } .dropdownList .blastContent { overflow: auto; border-width: 0 0 1px 0; border-radius: 0; padding: 10px; width: calc(100% - 22px); margin: 0; max-height: 440px; height: 380px; } .blastTitle:focus, .blastContent:focus { outline-width: 0; } #blastMessageMenu { line-height: 30px; height: 20px; font-size: 0.8em; text-align: end; } span.blastHeader { margin: 0 110px 0 20px; } .dropdownList .listItem:nth-child(odd) { background: var(--neutral); } .dropdownList .listItem { height: 40px; line-height: 40px; padding: 0px 20px; } .dropdownList #blastList .listItem { line-height: 20px; } /* #534 — extend the per-modal label sizing rule to Add Venue + Add Promoter so their labels render at the same font-size / width / spacing as Add Contract + Add Artist (the dominant pattern across 5 modal IDs prior to this addition). Without these selector additions, Venue/Promoter labels fall through to `.popup form label` at line 1713 (font-size 13px, max-width 170px). */ #addArtist label, #addContract label, #addVenue label, #addPromoter label, .dropdownList.scroll label, #artistContractForm label, #vendorContractForm label { width: 200px; display: inline-flex; margin: 10px 15px 0 15px; flex: 0 1 260px; display: inline-block; min-width: initial; max-width: initial; font-size: initial; min-height: initial; } #addArtist label.half, #addContract label.half, #addVenue label.half, #addPromoter label.half, .dropdownList.scroll label.half, #artistContractForm label.half { width: 102px; } #addArtist label.large, #addContract label.large, #addVenue label.large, #addPromoter label.large, .dropdownList.scroll label.large, #artistContractForm label.large { width: 410px; } /* #534 Inline-checkbox modifier — for single-checkbox-with-label cases (Alcohol Licensed and Deposit Received in Add Contract, calendarNotifications in Add Artist) where the layout intent is "checkbox sits immediately to the right of its label". Overrides the ID-anchored `#addContract .field label { width: 200px }` rule above. margin-top: 10px matches the base `#addContract .field label` rule's top margin so the inline-checkbox label sits at the same vertical baseline as its sibling `.field`'s label (which is the alignment goal — when an inline-checkbox cell sits adjacent to a label-above-input cell on the same .row, their labels share a baseline). display: inline-block (not inline) is required for margin-top to take effect — inline elements ignore vertical margin. vertical-align: top keeps the label anchored to the cell's top edge rather than its baseline so the row reads predictably across mixed-content cells. */ #addContract .field.inline-checkbox label, #addArtist .field.inline-checkbox label, #addVenue .field.inline-checkbox label, #artistContract .field.inline-checkbox label { width: auto; flex: 0 0 auto; display: inline-block; margin: 10px 0 0 6px; vertical-align: top; } /* #534 The real "checkbox" graphic is a pseudo-element on the label (see line ~2147 `input[type="checkbox"]+label:after`), and the base rule floats it right with 20px left margin — which is what pushes the visible checkbox far from the label text. Override for inline-checkbox: no float, sit inline right after the text with a small 6px gap. */ #addContract .field.inline-checkbox label:after, #addArtist .field.inline-checkbox label:after, #addVenue .field.inline-checkbox label:after, #artistContract .field.inline-checkbox label:after { float: none; margin-top: 0; margin-left: 6px; vertical-align: middle; } { margin-left: 10px; cursor: pointer; } .copyFileRiderUrl { margin-right: 10px; } .removeDate, .removeTime, .removeRider, .removeContractRider, .copyFileRiderUrl { margin: 5px; cursor: pointer; } .removeDate:hover, .removeTime:hover, .removeRider:hover, .removeContractRider:hover, .copyFileRiderUrl:hover { color: var(--arena-orange) } .datesField { margin: 5px 15px; } #date, #dateNew { height: 0; border: 0; margin: 0; } #dateLabel, #dateLabelNew { cursor: pointer; } #dateLabel:after, #dateLabelNew:after { content: ''; background: url("/assets/css/../images/icon-sprites.png") no-repeat -649px -10px; display: inline-block; width: 29px; height: 22px; margin-top: -4px; vertical-align: middle; } #dateLabel span, #dateLabelNew span { position: absolute; left: 120px; color: var(--arena-orange); } #attachedList .listItem { height: 60px; line-height: 60px; padding: 0px 20px; border-bottom: solid 1px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; } #attachedList .listItem:hover, #attachedList .listItem.active { background: var(--secondary); color: var(--neutral) !important; } .dropdownTitleSmall { height: 39px; border-bottom: solid 1px; line-height: 40px; margin: 0px 20px 0px 20px; overflow: hidden; } .dropdownTitleBig { height: var(--h-dropdown-title); border-bottom: solid 1px; line-height: 40px; margin: 0px 20px 0px 20px; overflow: hidden; font-size: 2em; line-height: 90px; } .dropdownFilters { height: 40px; border-bottom: solid 1px; line-height: 40px; margin: 0px 20px 0px 20px; } .subFilters { margin: 0; } .filterItem { cursor: pointer; margin: 0px 20px; border-bottom: 0; } .filterItem:hover { color: var(--arena-orange); } #attachedList, #blastList { float: left; height: calc(100% + var(--h-dropdown-title)); border-right: solid 1px; margin-right: 20px; } #attachedList { width: 20%; min-height: 580px; } #blastList { width: 30%; min-height: 430px; } div.blastDate { font-size: 0.6em; } .dropdownList { display: none; position: relative; height: calc(100vh - (var(--h-whead) + var(--h-foot) + var(--h-dropdown-title) + 4px ) ); overflow: hidden; vertical-align: top; margin: 0px 0px 0px 20px; /* overflow-y: auto; */ } .dropdown { background: var(--surface); border: solid; border-width: 0px 1px 1px 1px; display: none; overflow: hidden; position: fixed; z-index: 1; } #addArtist .row:not(:last-child), #addContract .row:not(:last-child), .dropdownList.scroll .row:not(:last-child), #artistContractForm .row, #vendorContractForm .row { border: 0 !important; min-height: initial; height: auto; padding: 0; display: block; position: initial; } .contractMenu { margin-top: 20px; border-top: solid 1px; height: 80px; width: 100%; float: left; overflow: hidden; } .dropdownList.scroll { overflow-y: auto; } /* #1105 (structural fix round): #contractAuditInfo previously carried class="row contract-audit", which put it in the path of THREE unrelated .row-scoped rules it structurally isn't (#content .row, form .row, #artistContractForm .row) — the same collision class as #1111's #calendarWarningBanner, in this identical form. The first round tried to out-specificity just one of the three competitors (#artistContractForm .row.contract-audit); that only incidentally also beat #content .row and left the underlying mismatch in place. Fix: dropped `row` from the element's class list (artistContract.php) so none of the three rules match it at all — this plain selector now applies uncontested. Top-only clearance (padding-top) closes the #1105 divider collision with the minimum footprint; no bottom-side space is added since the collision was only ever above the text. */ .contract-audit { padding: var(--sp-sm) var(--sp-lg) 0; font-size: 11px; color: var(--text-muted); } .contract-audit span + span { margin-left: 15px; } /* Wave 4 (#102): banner shown atop the edit dropdown when status=ISSUED. */ .contract-issued-banner { background: #fef3c7; border-left: 4px solid var(--warning); padding: 12px 16px; margin: 5px 15px 10px 15px; border-radius: 3px; box-sizing: border-box; width: calc(100% - 30px); min-height: unset; height: auto; } .contract-issued-banner p { margin: 0; color: #78350f; font-size: 13px; line-height: 1.4; } .contract-issued-banner strong { color: #78350f; } /* Visual readonly state for ISSUED/SIGNED contracts in the edit dropdown. Disabled inputs already get browser default styling; this layer adds the muted-action affordance for non-form-control elements (links, dropzone, add-buttons) since `disabled` only applies to form controls. #1017: the SIGNED variant of this rule set was missing entirely, so #add-price-tier and #add-venue-btn-nested (plain tags, unaffected by the JS `disabled` prop) stayed fully clickable and visually normal on a SIGNED contract even though applyIssuedReadOnlyGate's SIGNED counterpart already added the `contract-signed-readonly` class to the form (contracts.js). #1094: id renamed from "add-venue-btn" (a pre-existing duplicate DOM id shared with the header overflow-menu's Add Venue button) to "add-venue-btn-nested", scoped to this form so the rename doesn't change which element these rules target. */ #artistContractForm.contract-issued-readonly .contractField:disabled, #artistContractForm.contract-issued-readonly .contractField[disabled], #artistContractForm.contract-signed-readonly .contractField:disabled, #artistContractForm.contract-signed-readonly .contractField[disabled] { background: var(--neutral); color: var(--secondary); cursor: not-allowed; } #artistContractForm.contract-issued-readonly .contractMenu .icon-delete, #artistContractForm.contract-issued-readonly .contractMenu .emailLink, #artistContractForm.contract-issued-readonly .add-from-artist-riders-btn, #artistContractForm.contract-issued-readonly .removeTime, #artistContractForm.contract-issued-readonly .removeDate, #artistContractForm.contract-issued-readonly .rider-remove, #artistContractForm.contract-issued-readonly #riderDropzone, #artistContractForm.contract-issued-readonly #add-price-tier, #artistContractForm.contract-issued-readonly #add-venue-btn-nested, #artistContractForm.contract-issued-readonly .clause-remove, #artistContractForm.contract-signed-readonly .contractMenu .icon-delete, #artistContractForm.contract-signed-readonly .contractMenu .emailLink, #artistContractForm.contract-signed-readonly .add-from-artist-riders-btn, #artistContractForm.contract-signed-readonly .removeTime, #artistContractForm.contract-signed-readonly .removeDate, #artistContractForm.contract-signed-readonly .rider-remove, #artistContractForm.contract-signed-readonly #riderDropzone, #artistContractForm.contract-signed-readonly #add-price-tier, #artistContractForm.contract-signed-readonly #add-venue-btn-nested, #artistContractForm.contract-signed-readonly .clause-remove { /* #1150: .clause-remove (the per-clause × in the Edit dropdown's clause list) added alongside .rider-remove — same "plain , not a form control" reason applyIssuedReadOnlyGate's blanket prop('disabled') doesn't reach it. #clausePickerSelect/.add-clause-btn ARE real select/button elements, so that blanket disable already covers them. */ pointer-events: none; opacity: 0.4; } /* #1099: .sendViaArenaLink is muted on SIGNED only, deliberately NOT mirrored to .contract-issued-readonly above — resending via Arena on an ISSUED contract is a legitimate, server-permitted action (see contracts.js applySignedReadOnlyGate for the full explanation), so this control must stay visually active there. On SIGNED it is actively harmful: clicking it silently regresses the contract's status back to ISSUED (see contracts.js). */ #artistContractForm.contract-signed-readonly .contractMenu .sendViaArenaLink { pointer-events: none; opacity: 0.4; } .saveBtn, .sendBtn { color: var(--arena-orange); cursor: pointer; margin: 0px 5px; } /* #846 — WCAG 2.1.1: `display: none` removes the checkbox from the accessibility tree entirely (not keyboard-focusable, not announced by a screen reader), even though the visible control is the `label:after` sprite below. Replace with the standard "visually hidden but focusable" technique: the real input stays in the layout and in the tab order, sized to 1px and clipped, so it is invisible on screen but reachable by Tab and operable with Space, while the sprite continues to be the only thing a sighted user sees (unchanged from before this rule). Two existing overrides intentionally show the RAW checkbox instead of the sprite (`#riderPickerList`, `.inline-rider-picker-list`) — they reset `position`/`clip`/`overflow` back to normal alongside their own `display: inline-block`, so they are unaffected. */ input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } input[type="checkbox"]+label { cursor: pointer; } input[type="checkbox"]+label:after { content: ''; width: 20px; height: 20px; background: url(../images/check-radio-sprites.png); display: inline-block; vertical-align: middle; float: right; margin-top: 9px; margin-left: 20px; } #artistContractForm input[type="checkbox"]+label:after { margin-top: 0px; } input[type="checkbox"]:checked+label:after { background-position: -22px 0px; } /* #846 — the raw checkbox is visually hidden (see above), so its focus ring must render on the sprite instead; :focus-visible only shows the ring for keyboard focus (Tab), not a mouse click, matching the #657 modal-redesign focus recipe used elsewhere in this file. */ input[type="checkbox"]:focus-visible+label:after { outline: 2px solid var(--info); outline-offset: 1px; box-shadow: 0 0 0 2px var(--focus-ring); } @media (forced-colors: active) { input[type="checkbox"]:focus-visible+label:after { outline: 2px solid Highlight; } } /* #656 — "Extra" checkbox group: lay the checkbox+label pairs out in a clean responsive grid instead of the broken diagonal "staircase". The staircase came from `.field label { display:block }` stacking every pair-label while the sprite checkbox (`input[type="checkbox"]+label:after`) floats right with a 20px margin. Each option is now one grid cell; the label is inline and its sprite checkbox sits right after the text (mirrors the #534 .inline-checkbox pattern). The input id/name/data-filter/.contractField are unchanged, so the contracts.js bindings are unaffected. Scoped to the Add popup (#addContract) — the narrow modal where the staircase occurred. The Edit dropdown is wide enough that its original layout is fine, so it is left untouched. */ #addContract .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 16px; row-gap: 2px; margin-top: 6px; } #addContract .checkbox-grid .extra-option { display: flex; align-items: center; min-width: 0; } /* The label fills its grid cell and right-aligns the sprite box to the cell's right edge (text left, box right), so the boxes form clean aligned columns in the narrow modal. */ #addContract .checkbox-grid .extra-option label { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; width: auto; margin: 0; cursor: pointer; } /* Sprite checkbox sits inline immediately after its label text, not floated away. */ #addContract .checkbox-grid input[type="checkbox"]+label:after { float: none; margin: 0 0 0 6px; vertical-align: middle; } .floater textarea { width: 265px; font-size: 12px; padding: 5px 0px; } .floater.full textarea { background: var(--neutral); min-height: 170px; } .logo-upload { background: var(--surface); width: 300px; height: 60px; border-radius: 5px; line-height: 60px; text-align: center; font-size: 0.9em; cursor: pointer; } .logoPreview { height: 70px; } .logoWrapper { text-align: center; } /* #add-user p { float: left; line-height: 25px; } #add-user a { float: left; width: 280px; font-size: 17px; line-height: 31px;text-align: center; color: #333; font-style: italic; font-weight: 600; text-shadow: 1px -1px 1px rgba(255,255,255,1); } */ footer { /* #740 — footer is now a flex item at the bottom of .work, not absolute. */ position: static; flex: 0 0 auto; width: 100%; height: auto; left: 0px; } footer .paging { position: relative; width: 100%; height: 50px; border-bottom: 1px solid var(--border-dark); background: var(--neutral-dark); } footer .paging ul { position: relative; width: 160px; margin: 0 auto; } footer .paging ul li { float: left; width: 20px; } footer .paging ul li a { float: left; width: 20px; font-size: 15px; /* line-height: 60px; */ color: var(--tertiary); text-align: center; margin: 27px 0px; } footer .footer { position: relative; width: 100%; height: var(--h-foot); background: var(--neutral); border-top: 1px solid var(--surface); } footer .footer .arena { position: absolute; width: 322px; height: var(--h-foot); bottom: 0; left: 20px; background: url(../images/logo-arena.png) no-repeat center; } footer .footer .throw { position: absolute; width: 400px; height: var(--h-foot); bottom: 0; right: 20px; } footer .footer .throw a { float: left; width: 400px; font-size: 13px; color: var(--secondary-dark); height: var(--h-foot); text-align: right; } /* background: #ff0; */ /* The input. */ input.mp_input {} /* Ordered list for display results. */ ol.mp_list { background-color: var(--surface); border-left: 1px solid; border-right: 1px solid; overflow: hidden; position: absolute; width: 200px; margin: -15px 15px 0 14px; z-index: 99999; } /* Each list item, regardless of success, error, etc. */ ol.mp_list li { border-bottom: 1px solid; padding: 4px 4px 5px; } /* Each list item from a successful request. */ ol.mp_list li.mp_item {} /* Each list item that's selectable. */ ol.mp_list li.mp_selectable { cursor: pointer; } /* Currently highlighted list item. */ ol.mp_list li.mp_highlighted { background-color: var(--neutral-dark); } /* When a request is made that returns zero results. */ ol.mp_list li.mp_no_results {} /* When a request is made that doesn't meet the 'minChars' length option. */ ol.mp_list li.mp_min_chars {} /* When a request is made that fails during the ajax request. */ ol.mp_list li.mp_error {} /* Google Calendar section in artist popup */ #create-calendar-btn, #retry-rename-btn { background: var(--arena-orange); color: var(--neutral); height: 40px; cursor: pointer; border: none; border-radius: 4px; display: inline-block; margin: 5px 15px 15px 15px; padding: 0 12px; font-size: 13px; } #calendar-warning { color: var(--arena-orange); font-size: 13px; line-height: 20px; margin: 0 15px 0 15px; display: block; } /* #719 — status-as-text: flat white alert region, hairline amber border, amber text (no pastel fill), per arena-ams-design (flat, hairline borders for hierarchy; status colors as text). */ .calendar-warning-banner { background: var(--surface); border: 1px solid var(--warning-border); border-radius: 3px; padding: 10px 15px; margin: 5px 15px 10px 15px; display: flex; align-items: center; justify-content: space-between; } .calendar-warning-banner .calendar-warning-text { color: var(--warning-text); font-size: 13px; line-height: 18px; flex: 1; } .calendar-warning-banner .calendar-warning-dismiss { color: var(--warning-text); font-size: 18px; font-weight: bold; cursor: pointer; margin-left: 10px; line-height: 1; } .calendar-warning-banner .calendar-warning-dismiss:hover { color: var(--warning-text-dark); } /* #719 — status-as-text: amber warning text on white, no fill (per arena-ams-design: "Warnings are inline, compact, amber"; badges are colored text on white, not pills). --warning-text (#856404) on white = 5.0:1 (WCAG AA). */ .pdf-missing-badge { display: inline-block; background: transparent; color: var(--warning-text); padding: 2px 0; font-size: 11px; font-weight: 600; margin-top: 4px; } /* Token-only outlined pills (design review D4 / B-series): surface background, semantic-color text + border per state. */ .signing-status { display: inline-block; background: var(--surface); border-radius: var(--r-sm); padding: 2px var(--sp-sm); font-size: 11px; font-weight: 600; margin-top: var(--sp-xs); } .signing-status-pending { color: var(--secondary); border: 1px solid var(--border-dark); } .signing-status-sent, .signing-status-viewed { color: var(--warning); border: 1px solid var(--warning); } .signing-status-signed { color: var(--success); border: 1px solid var(--success); } .signing-status-declined { color: var(--error); border: 1px solid var(--error); } /* G7: expired — brand-dark accent distinguishes it from active states (D5: no opacity, WCAG) */ .signing-status-expired { color: var(--arena-orange-dark); border: 1px solid var(--arena-orange-dark); } .signed-pdf-link { display: inline-block; background: var(--surface); color: var(--success); border: 1px solid var(--success); border-radius: var(--r-sm); padding: 2px var(--sp-sm); font-size: 11px; font-weight: 600; margin-top: var(--sp-xs); text-decoration: none; } .signed-pdf-link:hover { background: var(--neutral); } .signature-status-panel { background: var(--neutral); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg); /* spacing gap: push panel away from any locked-status banner above it */ margin-top: var(--sp-sm); margin-bottom: var(--sp-sm); } /* D6+B3: caption-tier title */ .signature-status-title { font-weight: 600; font-size: var(--fs-caption); color: var(--tertiary); margin-bottom: var(--sp-xs); text-transform: uppercase; letter-spacing: 0.5px; } /* D3+B9: calm panel hierarchy — muted body text, tertiary emphasis. Explicit color so timestamps/metadata never inherit an accent color. */ .signature-status-details { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; } .signature-status-details strong { color: var(--tertiary); } /* D2: self-contained resend button — Foundation CSS is not loaded, so no .button/.secondary inheritance exists. */ .signature-resend-btn { display: inline-block; margin-top: var(--sp-sm); padding: var(--sp-xs) var(--sp-md); font-family: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--tertiary); background: var(--surface); border: 1px solid var(--border-dark); border-radius: var(--r-md); cursor: pointer; } .signature-resend-btn:hover { background: var(--neutral-dark); } .signature-resend-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Mirrors .contract-issued-banner's left-stripe pattern (keep the pair parallel) */ .contract-signed-banner { background: var(--neutral); border-left: 3px solid var(--success); border-radius: var(--r-sm); padding: var(--sp-md) var(--sp-lg); margin-top: var(--sp-sm); margin-bottom: var(--sp-sm); color: var(--tertiary); } .contract-signed-banner p { margin: 0; } #calendar-success { color: var(--secondary); font-size: 13px; line-height: 20px; margin: 0 15px 0 15px; display: block; } /* ── Admin Config Page (shared: driveConfig, ticketCounts) ────────────────────────────────── */ #content .adminConfigPage { padding: 20px 25px; min-height: auto; height: auto; border-bottom: none; float: none; } .adminConfigPage h2 { color: var(--secondary); font-size: 18px; font-weight: 600; margin: 0 0 6px 0; } .adminConfigPage h4 { color: var(--secondary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px 0; } .adminConfigPage .config-header { margin-bottom: 25px; } .adminConfigPage .config-header p { color: var(--secondary); font-size: 13px; margin: 0; } .adminConfigPage .config-status { background: var(--surface-inset); /* #679 — inset panel; --surface blended with white page */ border-radius: 5px; padding: 15px 20px; margin-bottom: 25px; } .adminConfigPage .status-badge { display: inline-block; margin-left: 0; /* #719 - standalone block label; don't inherit the inline base's caption offset */ padding: 3px 10px; border-radius: var(--r-sm); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } /* #719 — status-as-text: colored text on white, no fill (per arena-ams-design). --success-text (#155724)/--warning-text (#856404) on white = 8.3:1/5.0:1 (AA). */ .adminConfigPage .status-active { background: transparent; color: var(--success-text); } .adminConfigPage .status-inactive { background: transparent; color: var(--warning-text); } .adminConfigPage .status-detail { display: block; font-size: 12px; color: var(--secondary); } .adminConfigPage .status-detail strong { color: var(--secondary-dark); font-family: monospace; font-size: 11px; } .adminConfigPage .config-form-section { margin-bottom: 20px; } .adminConfigPage .config-form-section label { color: var(--secondary); font-size: 13px; margin-bottom: 4px; display: block; } /* #326/!369 .field convention: each label+control pair gets a uniform on-scale (16px) gap so the admin form has consistent vertical rhythm, matching the public ticket-count card and the modal forms. */ .adminConfigPage .config-form-section .field { margin-bottom: 16px; } .adminConfigPage .config-form-section .field:last-child { margin-bottom: 0; } .adminConfigPage .config-form-section input[type="text"], .adminConfigPage .config-form-section input[type="email"], .adminConfigPage .config-form-section input[type="number"], .adminConfigPage .config-form-section select, .adminConfigPage .config-form-section textarea { width: 100%; max-width: 500px; border: 1px solid var(--border); border-radius: var(--r-sm); /* 13px (body) per the type scale — overrides the global input{font-size:15px} which is off-scale and larger than the 13px labels. */ font-size: 13px; /* The global input{}/select{} rules set no font-family, so these controls fall through to the UA default (Arial). inherit pulls Open Sans from body. */ font-family: inherit; /* slate per DESIGN.md (input/select textColor). Text inputs get this from the global input{} rule, but global select{} sets no color, so the preview-template — including /[type=submit] — to a fixed 260px, and .tiny's own rule only ever touched padding/font-size. That left "tiny" buttons (Enable All / Disable All) rendering full legacy width with cramped small text — visually disconnected from the filter/table rows around them. Size to content instead. */ width: auto; flex: 0 0 auto; } /* #1022 follow-up (sfh review): reset height for actual