/* ZaTek portal finishing layer. Keep existing information and layout intact. */
:root {
  --primary: #4166e8;
  --focus: #a9c0ff;
  --ui-danger: #ffc0c0;
  --ui-danger-bg: #35202b;
  --ui-success: #91e0bf;
  --ui-success-bg: #16382d;
  --ui-control-radius: 10px;
  --ui-card-radius: 15px;
}
:root[data-theme=light] {
  --primary: #315de0;
  --focus: #315de0;
  --ui-danger: #a52730;
  --ui-danger-bg: #fff0f1;
  --ui-success: #176547;
  --ui-success-bg: #e6f5ee;
}

/* Make the next action and numeric facts easy to scan, without more decoration. */
.page-heading h1, .view > h1, .access-page h1 {
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.panel h2, .panel h3, .manager-project strong, .project-tile h2 {
  overflow-wrap: anywhere;
}
.request-summary-copy strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.panel h2, .section-title h2 { line-height: 1.35; }
.amount, .client-amount, .invoice-amounts strong, .account-metric strong,
.admin-summary strong, .manager-summary strong {
  font-variant-numeric: tabular-nums;
}
.panel, .project-tile, .manager-project, .request-item, .invoice-card {
  min-width: 0;
}
.client-home .next { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.client-stage-grid > div.current { border-top-width: 3px; }
.client-stage-grid > div.current strong { color: var(--accent-text); }
.workspace > div:last-child, .breadcrumb, .member > div,
.doc-info, .invoice-head > div, .request-head > div { min-width: 0; }
.workspace strong, .breadcrumb strong, .member h3, .member p,
.doc h3, .doc p, .invoice-head p, .request-event p, .manager-detail p,
.instructions, .answers, .invite-result, .status, .inline-status, #toast {
  overflow-wrap: anywhere;
}
.badge { max-width: 100%; }

/* Controls retain one geometry across client, admin and responsible views. */
.primary, .secondary, .top-actions button,
.manager-shell aside nav a, .manager-shell aside nav button,
.shell aside nav button, .access-languages button,
.account-footer .secondary, .doc .secondary,
.manager-client .secondary, .preview-banner-actions .secondary,
.request-file-picker {
  min-height: 44px;
}
.primary, .secondary { white-space: normal; line-height: 1.35; text-align: center; }
.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.primary:hover { background: #2d52cc; border-color: #2d52cc; box-shadow: none; }
.secondary { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
.secondary:hover { background: var(--soft); border-color: var(--accent-text); }
.quiet-link, .button-link { min-height: 44px; display: inline-flex; align-items: center; }
.access-page .quiet-link { display: flex; justify-content: center; }
.icon-button { width: 44px; height: 44px; }
.top-actions .secondary { min-height: 44px; }
.top-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.intake-request .actions button, .team-view .task select { min-height: 44px; }
.access-languages button[aria-pressed=true] { background: var(--primary); color: #fff; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.primary:disabled { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.secondary:disabled { background: var(--surface-soft); border-color: var(--line); }
button[aria-busy=true], form[aria-busy=true] button { cursor: progress; }
.shell aside nav button[aria-current=page],
.manager-shell aside nav button.selected {
  box-shadow: inset 3px 0 0 var(--primary);
}
.top-actions button[aria-pressed=true] {
  background: var(--soft);
  border-color: var(--primary);
  color: var(--accent-text);
}

/* Name, value and feedback should stay in the same visual group. */
.field input, .field select, .field textarea,
:where(.request-review, .request-create, .manager-form, .signature-actions)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--ui-control-radius);
  padding: 12px 14px;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.5;
}
.request-review textarea, .request-create textarea, .manager-form textarea {
  resize: vertical;
  min-height: 96px;
}
.manager-edit select { min-height: 44px; }
.field label, .request-message > label, .request-review label,
.request-create label, .manager-form label { line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder,
.request-message textarea::placeholder { color: var(--muted); opacity: 1; }
.field input[type=file] { padding: 8px; }
.field input::file-selector-button, .source-attachment input::file-selector-button {
  min-height: 36px;
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
.field [aria-invalid=true], input[aria-invalid=true], textarea[aria-invalid=true] {
  border-color: var(--ui-danger);
}
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.request-toggle:focus-visible { outline-offset: -4px; }
.request-message textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: none; }
.checkbox-label { align-items: flex-start; min-height: 44px; padding-block: 8px; }
.checkbox-label input { width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.status, .inline-status { font-size: 13px; line-height: 1.6; }
.ux-draft-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}
.ux-draft-status:empty { display: none; }
.ux-conflict-status { color: var(--ui-danger); line-height: 1.6; overflow-wrap: anywhere; }
.ux-recovery { margin-top: 10px; }
.ux-recovery button, button.ux-recovery { min-height: 44px; }
.error, .inline-status.error, .status.error,
.request-actions .inline-status.error, .field p[role=status].error {
  color: var(--ui-danger);
}
.success, .status.success, .inline-status.success { color: var(--ui-success); }
.danger, button[data-revoke] {
  color: var(--ui-danger);
  border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--line));
  background: var(--ui-danger-bg);
}
.danger:hover, button[data-revoke]:hover { border-color: var(--ui-danger); background: var(--ui-danger-bg); }
.empty-large, .requests-empty { border-style: dashed; }
.empty-large p, .requests-empty p { max-width: 56ch; }
.empty { color: var(--muted); padding-block: 10px; }
.delivery-history summary, .delivery-fingerprint summary,
.delivery-update summary, .account-extra summary,
.issuer-summary summary { min-height: 44px; padding-block: 10px; }

/* Dialogs and confirmations fit the viewport and keep actions reachable. */
dialog { border-radius: var(--ui-card-radius); width: min(640px, calc(100vw - 32px)); }
dialog::backdrop { background: #071122b3; }
dialog h2 { text-wrap: balance; overflow-wrap: anywhere; }
.dialog-header { align-items: flex-start; }
.dialog-header .icon-button { flex: none; }
.dialog-body { line-height: 1.65; }
.dialog-body .field input, .dialog-body .field select { min-height: 44px; }
.dialog-footer { flex-wrap: wrap; }
.ux-dialog { padding: 26px; max-width: 540px; overflow: auto; }
.ux-dialog p { color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
.ux-dialog h2 { font-size: 24px; line-height: 1.3; margin: 0 0 14px; }
.ux-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.ux-dialog-actions button { min-height: 44px; }
#toast { max-width: min(430px, calc(100vw - 36px)); line-height: 1.55; }

@media (max-width: 700px) {
  .shell aside nav { gap: 7px; }
  .shell aside nav button { min-height: 48px; padding: 9px 6px; }
  .shell aside nav button[aria-current=page] { box-shadow: inset 0 -3px 0 var(--primary); }
  .manager-shell aside nav a, .manager-shell aside nav button { min-height: 44px; }
  .topbar, .main-wrap:has(.intake-request) .topbar { flex-wrap: wrap; gap: 12px; }
  .top-actions, .main-wrap:has(.intake-request) .top-actions {
    width: 100%; min-width: 0; flex-wrap: wrap; gap: 7px; justify-content: flex-start;
  }
  .top-actions button { padding: 9px 12px; }
  .page-heading h1, .view > h1 { font-size: clamp(28px, 8vw, 34px); letter-spacing: -1px; }
  .page-heading .intro, .intro { line-height: 1.65; }
  .panel { padding: 21px 19px; }
  .panel h2, .section-title h2 { font-size: 18px; }
  .field input, .field select, .field textarea, .request-message textarea,
  .request-review textarea, .request-create textarea,
  .manager-form input, .manager-form select, .manager-form textarea,
  .manager-edit select, .signature-actions select { font-size: 16px; }
  .actions { gap: 10px; }
  .actions .primary, .actions .secondary { min-width: 0; }
  .member, .manager-client, .manager-edit { flex-wrap: wrap; }
  .member > div { flex: 1 1 100%; }
  .manager-client > div { flex-basis: calc(100% - 110px); }
  .manager-edit > div { flex: 1 1 160px; }
  .manager-edit select { max-width: 100%; }
  .doc .actions { padding-left: 0; gap: 8px; }
  .doc .actions .secondary { flex: 1 1 auto; }
  .request-summary-copy strong { overflow: visible; white-space: normal; }
  .request-summary-status .badge { white-space: normal; text-align: left; }
  .request-file-picker { min-height: 44px; }
  .request-file-name { overflow-wrap: anywhere; }
  .client-action-panel > div:last-child { align-items: stretch; }
  .client-action-panel .secondary { white-space: normal; }
  .preview-banner { position: static; }
  .preview-banner-actions { flex-wrap: wrap; gap: 8px; }
  .preview-banner-actions .secondary { flex: 1 1 120px; white-space: normal; }
  .admin-project .badge { overflow: visible; white-space: normal; text-overflow: clip; text-align: left; }
  .admin-summary .panel { padding: 13px 11px; }
  .account-footer { flex-wrap: wrap; }
  .account-footer .actions { justify-content: flex-start; }
  .dialog-header, .dialog-body { padding: 20px; }
  .dialog-footer { padding: 16px 20px; }
  .dialog-footer .primary, .dialog-footer .secondary { flex: 1 1 110px; }
  .ux-dialog { padding: 22px 20px; }
  .ux-dialog-actions button { flex: 1 1 110px; }
  #toast { bottom: max(18px, env(safe-area-inset-bottom)); }
  main, .manager-view { padding-bottom: max(55px, calc(32px + env(safe-area-inset-bottom))); }
}
@media (max-width: 380px) {
  .admin-summary { gap: 6px; }
  .admin-summary span { font-size: 11px; overflow-wrap: anywhere; }
  .admin-project { grid-template-columns: minmax(0, 1fr); }
  .admin-project > span:nth-child(2) { grid-row: auto; }
  .admin-project .badge { justify-self: start; max-width: none; }
  .access-page { padding-inline: 16px; }
  .access-brand { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .view, .request-chevron { animation: none; transition: none; }
  :is(button, a, input, textarea, select) { transition: none; }
}

.manager-shell aside > .brand { text-decoration: none; }

/* Keep the workspace, rather than its navigation, in the first mobile screen. */
.portal-tools { position: relative; }
.portal-tools > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 12px; background: var(--surface-soft); color: var(--ink); }
.portal-tools > summary::-webkit-details-marker { display: none; }
.portal-tools > summary::after { content: '⌄'; }
.portal-tools[open] > summary { border-color: var(--primary); }
.portal-tools-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(285px,calc(100vw - 40px)); display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 48px #0003; }
.portal-tools-menu .secondary { width: 100%; justify-content: flex-start; text-align: left; }
.portal-tools-menu .preview-actions { display: grid; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
@media (max-width: 700px) {
 .shell aside, .manager-shell aside { gap: 12px; padding-top: 16px; padding-bottom: 10px; }
 .shell aside nav, .manager-shell aside nav { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; max-width: 100%; padding: 3px 1px 7px; scrollbar-width: thin; }
 .shell aside nav button, .manager-shell aside nav a, .manager-shell aside nav button { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 10px 14px; }
 .portal-tools-menu { position: fixed; top: auto; left: 18px; right: 18px; width: auto; max-height: calc(100dvh - 210px); overflow-y: auto; }
 .requests-title { gap: 14px; }
}