/* Shared process UI. Presentation only: existing forms and guards own actions. */
.cs-photo-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
input.cs-photo-input {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
  padding: 8px; border: 1px solid var(--cs-line-cbd5e1, #cbd5e1); border-radius: 12px;
  background: var(--cs-surface-f8fafc, #f8fafc); color: var(--cs-ink-334155, #334155);
  font: 14px/1.5 var(--font-ui, Arial, sans-serif);
}
input.cs-photo-input::file-selector-button {
  margin-right: 12px; padding: 10px 14px; min-height: 44px; border: 0; border-radius: 8px;
  background: #0a3d91; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
input.cs-photo-input::file-selector-button:hover { background: #164fa9; }
input.cs-photo-input:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.cs-photo-hint { font-size: 13px; line-height: 1.6; color: var(--cs-ink-475569, #475569); margin: 10px 0 0; }
/* max-width also constrains the older mobile rule that makes all row actions full-width. */
dialog.cs-completion-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); overflow: auto; position: fixed; inset: 0; margin: auto; }
.cs-completion-summary { margin: 0 0 20px; font-size: 14px; overflow-wrap: anywhere; }
.cs-completion-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--cs-line-e2e8f0, #e2e8f0); }
.cs-completion-actions .cs-completion-cancel { background: var(--cs-surface-f8fafc, #f8fafc); color: var(--cs-ink-334155, #334155); border: 1px solid var(--cs-line-cbd5e1, #cbd5e1); }
.request-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) { .request-actions { justify-content: flex-start; } }
:root {
  --cs-process-blue: #0a3d91;
  --cs-process-header: linear-gradient(115deg, #103f8e, #2344aa);
  --cs-process-radius: 18px;
}
/* Follow actual open dialogs, including nested notices, rather than restoring
   stale JavaScript overflow values when two dialogs close in a different order. */
body:has(dialog[open]) { overflow: hidden !important; }
.cs-back-link,
.topbar .cs-back-link {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; min-width: 44px; width: auto; height: auto;
  max-width: 100%; padding: 9px 14px; margin-bottom: 0; border-radius: 12px;
  border: 1px solid var(--cs-line-cbd5e1, #cbd5e1);
  background: var(--cs-surface-ffffff, #fff); color: var(--cs-ink-0a3d91, #0a3d91);
  font: 600 14px/1.35 var(--font-ui, Arial, sans-serif); text-decoration: none;
  text-align: center; cursor: pointer; box-shadow: none; transform: none;
}
.cs-back-link::before {
  content: ''; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 5-7 7 7 7M5 12h15' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cs-back-link:hover { background: var(--cs-surface-eff6ff, #eff6ff); border-color: #7c9aca; transform: none; }
.topbar .cs-back-link { color: #fff; background: #ffffff12; border-color: #ffffff70; flex-shrink: 0; }
.topbar .cs-back-link:hover { background: #ffffff25; }
.cs-back-link.cs-back-icon { padding: 10px; width: 44px; }
.cs-support-back.cs-back-link, .review-back.cs-back-link { margin-bottom: 16px; }

/* Keep each workflow's existing width and visibility rules. */
:is(dialog.cs-action-dialog, dialog.review-dialog, dialog.cs-feedback-dialog,
    .tnc-modal, .worker-details-modal, .modal.cs-process-surface,
    .review-modal .modal-content, .compose-modal, .logout-card) {
  border-radius: var(--cs-process-radius);
  border: 1px solid var(--cs-line-dbe3f1, #dbe3f1);
  box-shadow: 0 20px 64px #091e4933;
  color: var(--cs-ink-334155, #334155);
  background: var(--cs-surface-ffffff, #fff);
  font-family: var(--font-ui, Arial, sans-serif);
}
:is(dialog.cs-action-dialog, dialog.review-dialog) {
  --cs-process-pad: 24px;
  padding: var(--cs-process-pad);
  max-height: calc(100dvh - 32px); overscroll-behavior: contain;
}
:is(dialog.cs-action-dialog, dialog.review-dialog, dialog.cs-feedback-dialog, dialog.logout-dialog)::backdrop {
  background: #0b1e3e99; backdrop-filter: blur(3px);
}
:is(.tnc-modal-bg, .worker-details-backdrop, .modal-overlay, .review-modal, .compose-modal-bg) {
  background-color: #0b1e3e99;
}
:is(.cs-process-header, .tnc-modal-head, .worker-details-head,
    .cs-process-surface > .modal-header, .review-modal .modal-header) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: var(--cs-process-header); color: #fff;
  border: 0; border-radius: 17px 17px 0 0;
}
:is(dialog.cs-action-dialog, dialog.review-dialog) > :is(.cs-detail-head, .cs-dialog-heading, .review-heading, .recommendation-heading) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: static; margin: calc(-1 * var(--cs-process-pad)) calc(-1 * var(--cs-process-pad)) 20px;
  padding: 20px var(--cs-process-pad); background: var(--cs-process-header); color: #fff;
  border: 0; border-radius: 17px 17px 0 0;
}
:is(.cs-process-header, .tnc-modal-head, .worker-details-head, .cs-process-surface > .modal-header,
    .review-modal .modal-header, dialog.cs-action-dialog > .cs-detail-head,
    dialog.cs-action-dialog > .cs-dialog-heading, dialog.cs-action-dialog > .recommendation-heading,
    dialog.review-dialog > .review-heading) :is(h1, h2, h3) {
  margin: 0; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.35;
  max-width: none; overflow-wrap: anywhere;
}
:is(.cs-process-header, .tnc-modal-head, .worker-details-head, .recommendation-heading) p {
  margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #dbeafe;
}
.cs-process-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: #dbeafe; font-size: 12px; font-weight: 600; }
.cs-process-brand img { width: 30px; height: 30px; padding: 4px; border-radius: 9px; background: #fff; }
dialog.cs-action-dialog > .recommendation-heading .cs-action-primary { background: #fff; color: #0a3d91; border-color: #fff; }
:is(.cs-process-close, .tnc-modal-close, .worker-details-close-icon,
    .cs-process-surface .modal-close, .review-modal .modal-header .close,
    .cs-action-dialog > .cs-detail-head .cs-detail-close,
    .cs-action-dialog > .cs-dialog-heading [data-cs-close],
    .cs-action-dialog > .recommendation-heading [data-cs-close],
    .review-dialog > .review-heading [data-review-close]) {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-sizing: border-box; min-width: 44px; min-height: 44px; width: auto; height: auto;
  padding: 8px 12px; border: 1px solid #ffffff55; border-radius: 10px;
  background: #ffffff15; color: #fff; font: 600 14px/1.2 var(--font-ui, Arial, sans-serif); cursor: pointer;
}
.cs-process-close[hidden] { display: none; }
:is(.cs-process-close, .tnc-modal-close, .worker-details-close-icon, .cs-process-surface .modal-close):hover { background: #ffffff30; }
.cs-process-body { padding: 22px 24px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.cs-process-body > p { margin: 0; }
:is(.logout-actions, .cs-feedback-actions, .tnc-modal-foot, .worker-details-foot) {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 16px 24px; margin: 0; border-top: 1px solid var(--cs-line-e2e8f0, #e2e8f0);
  background: var(--cs-surface-f8fafc, #f8fafc); border-radius: 0 0 17px 17px;
}
:is(.logout-actions, .cs-feedback-actions, .tnc-modal-foot, .worker-details-foot) :is(button, a),
:is(dialog.cs-action-dialog, dialog.review-dialog) :is(button[type=submit], .workspace-btn, .cs-support-button) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  font: 600 14px/1.35 var(--font-ui, Arial, sans-serif); text-decoration: none; cursor: pointer;
}
:is(.logout-actions a, .logout-actions .logout-cancel, .cs-feedback-actions button:not(.primary), .tnc-btn-close) {
  border: 1px solid var(--cs-line-cbd5e1, #cbd5e1); background: var(--cs-surface-ffffff, #fff); color: var(--cs-ink-334155, #334155);
}
:is(.logout-actions button[type=submit], .cs-feedback-actions .primary, .tnc-btn-agree) {
  border: 1px solid var(--cs-process-blue); background: var(--cs-process-blue); color: #fff;
}
.logout-card, dialog.cs-feedback-dialog { padding: 0; overflow: auto; }
.logout-card { width: 100%; box-sizing: border-box; }
.logout-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; }
.logout-dialog .logout-card { border: 0; }
dialog.cs-feedback-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
dialog.cs-feedback-dialog .cs-process-header h2 { margin: 0; color: #fff; font-size: 20px; }
dialog.cs-feedback-dialog .cs-process-body { white-space: pre-wrap; margin: 0; }
#requestDetailModal.cs-action-dialog { padding: var(--cs-process-pad); }
#requestDetailModal > .cs-detail-head { position: static; padding-top: 20px; }
.cs-process-close, .tnc-modal-close, .worker-details-close-icon, .cs-process-surface .modal-close, .review-modal .modal-header .close { font-size: 20px; }
.compose-modal.cs-process-compose { --cs-process-pad: 24px; box-sizing: border-box; padding: var(--cs-process-pad); max-height: calc(100dvh - 32px); overflow: auto; }
.cs-process-compose > .cs-process-header { margin: calc(-1 * var(--cs-process-pad)) calc(-1 * var(--cs-process-pad)) 20px; }
.compose-modal.cs-process-compose .cs-process-header h3 { color: #fff; margin: 0; font-size: 20px; }
.cs-process-compose .compose-modal-actions button { min-height: 44px; border-radius: 10px; }
.cs-back-link:focus-visible,
:is(.logout-card, .cs-feedback-dialog, .cs-action-dialog, .review-dialog, .tnc-modal, .worker-details-modal, .cs-process-surface) :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #60a5fa; outline-offset: 3px;
}
@media (max-width: 600px) {
  :is(dialog.cs-action-dialog, dialog.review-dialog) { --cs-process-pad: 16px; }
  .compose-modal.cs-process-compose { --cs-process-pad: 16px; }
  :is(.cs-process-header, .tnc-modal-head, .worker-details-head, .cs-process-surface > .modal-header, .review-modal .modal-header) { padding: 16px; gap: 12px; }
  :is(.cs-process-body, .logout-actions, .cs-feedback-actions, .tnc-modal-foot, .worker-details-foot) { padding: 16px; }
  .recommendation-heading { flex-wrap: wrap; }
  .cs-back-link { font-size: 13px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-back-link, .cs-process-close { transition: none; }
}
/* Consistent feedback states, including dark mode; never rely on colour alone. */
#matchIntentStatus[data-kind="error"] { color: var(--cs-ink-991b1b,#991b1b); }
#bookingFormStatus[data-kind="error"], .cs-feedback-dialog[data-kind="error"] .cs-process-body {
  background: var(--cs-surface-fee2e2,#fee2e2); color: var(--cs-ink-991b1b,#991b1b);
  border: 1px solid var(--cs-line-fecaca,#fecaca); border-left: 4px solid #dc2626;
}
.cs-feedback-dialog[data-kind="error"] .cs-process-header { background: #991b1b; }
[aria-invalid="true"] { border-color: #dc2626 !important; outline: 2px solid #dc2626; outline-offset: 1px; }
.cs-weekdays { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; }
.cs-weekdays legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.cs-weekdays label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.cs-weekdays input { width: 18px; height: 18px; accent-color: #0a3d91; }

/* Shared selection controls never affect already-uploaded documents. */
.cs-attachment-selection { width: 100%; min-width: 0; margin-top: 8px; }
.cs-file-count { margin: 6px 0; font-size: 12px; color: var(--cs-ink-64748b, #64748b); }
.cs-attachment-selection[hidden], .cs-attachment-error[hidden] { display: none !important; }
.cs-selected-file { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; min-width: 0; }
.cs-selected-file details { flex: 1; min-width: 0; font-size: 13px; }
.cs-selected-file summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 0; }
.cs-selected-file details p { overflow-wrap: anywhere; font-size: 13px; margin: 4px 0; }
/* Small visible icon; retain a forgiving touch/keyboard target. */
button.cs-file-remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px !important; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; color: var(--cs-ink-334155,#334155); background: transparent; font: 400 20px/1 var(--font-ui,Arial,sans-serif); cursor: pointer; }
.cs-file-remove > span { display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; border: 1px solid var(--cs-line-cbd5e1,#cbd5e1); border-radius: 50%; background: var(--cs-surface-f8fafc,#f8fafc); }
.cs-file-remove:not(:disabled):hover > span { background: var(--cs-surface-e2e8f0,#e2e8f0); }
.cs-file-remove:disabled { opacity: .5; cursor: not-allowed; }
.cs-file-remove:focus-visible, .cs-selected-file summary:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.cs-attachment-error { color: var(--cs-ink-991b1b,#991b1b); background: var(--cs-surface-fee2e2,#fee2e2); border-left: 4px solid #dc2626; padding: 10px; font-size: 13px; overflow-wrap: anywhere; }
.cs-file-enhanced :is(.doc-file-name,.doc-filename) { display: none !important; }
.input-area:has(.cs-attachment-selection) { flex-wrap: wrap; }
.input-area > .cs-attachment-selection { order: 3; flex: 1 0 100%; }
.cs-photo-preview [data-photo-name] { min-width: 0; overflow-wrap: anywhere; max-height: 4.5em; overflow: auto; }
html:has(dialog[open]) { overflow: hidden; }
.cs-dialog-actions { position: sticky; bottom: -1px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding: 14px 0 4px; margin-top: 16px; background: var(--cs-surface-ffffff,#fff); border-top: 1px solid var(--cs-line-e2e8f0,#e2e8f0); z-index: 2; }
.cs-dialog-actions button { min-height: 44px; }
dialog.review-dialog > .review-heading h2 { max-width: 100%; }
dialog.review-dialog, dialog.cs-support-dialog { scroll-padding-block: 20px 96px; }
button.calendar-day { font: inherit; width: 100%; color: inherit; }
button.calendar-day:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; z-index: 1; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; margin-top: 12px; color: var(--cs-ink-475569,#475569); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 12px; height: 12px; border: 1px solid #64748b; border-radius: 3px; background: var(--cs-surface-f3f4f6,#f3f4f6); }
.calendar-legend .available { background: #dcfce7; border-color: #16a34a; }
.calendar-legend .selected { background: #0a3d91; border-color: #0a3d91; }
@media(max-width:650px) {
  .table-container:has(.cs-worker-table) { overflow: visible; }
  table.cs-worker-table { display: block; width: 100%; min-width: 0; }
  .cs-worker-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cs-worker-table tbody { display: grid; gap: 12px; }
  .cs-worker-table tbody tr { display: grid; padding: 14px; border: 1px solid var(--cs-line-cbd5e1,#cbd5e1); border-radius: 12px; background: var(--cs-surface-ffffff,#fff); }
  .cs-worker-table tbody td { display: block; border: 0; padding: 6px 0; white-space: normal; overflow-wrap: anywhere; }
  .cs-worker-table td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--cs-ink-64748b,#64748b); }
  .cs-worker-table td[data-label=Actions] { display: flex; flex-wrap: wrap; gap: 8px; }
  .cs-worker-table td[data-label=Actions]::before { width: 100%; }
  .cs-worker-table .table-action-btn { min-height: 44px; }
  .cs-dialog-actions > button { flex: 1 1 130px; width: auto; }
}