/*
 * JWA Premium UI Foundation
 *
 * Final presentation layer loaded after app.css. It deliberately leaves the
 * existing workflow, permissions and data behaviour untouched while providing
 * one consistent set of visual rules for the staff CRM and secure portals.
 */

:root {
    --premium-page: #f4f3ef;
    --premium-page-deep: #efede7;
    --premium-surface: #ffffff;
    --premium-surface-soft: #faf9f6;
    --premium-surface-warm: #fffaf0;
    --premium-line: #e5e2da;
    --premium-line-strong: #d7d2c7;
    --premium-text-soft: #55564f;
    --premium-text-faint: #7b7c75;
    --premium-radius-control: 10px;
    --premium-radius-card: 14px;
    --premium-radius-large: 18px;
    --premium-control-height: 46px;
    --premium-shadow-card: 0 10px 30px rgba(17, 17, 17, 0.055);
    --premium-shadow-raised: 0 22px 55px rgba(17, 17, 17, 0.14);
    --premium-focus: 0 0 0 4px rgba(220, 174, 87, 0.18);
}

/* --------------------------------------------------------------------------
   Shell, rhythm and typography
   -------------------------------------------------------------------------- */

body.crm-body,
body.portal-body {
    background:
        radial-gradient(circle at 88% 0%, rgba(220, 174, 87, 0.09), transparent 360px),
        linear-gradient(180deg, var(--premium-page) 0%, var(--premium-page-deep) 100%);
}

.crm-body .main-content {
    padding: 34px 40px 64px;
}

.crm-body .content-frame {
    max-width: 1540px;
}

.crm-body .page-header {
    margin-bottom: 24px;
}

.crm-body .page-header > div:first-child {
    min-width: 0;
}

.crm-body .page-header h1,
.portal-body .portal-page-header h1 {
    color: var(--black);
    font-weight: 760;
    letter-spacing: -0.045em;
}

.crm-body .page-subtitle,
.crm-body .page-intro,
.portal-body .portal-page-header p:not(.eyebrow) {
    color: var(--premium-text-soft);
    font-size: 13px;
    line-height: 1.65;
}

.crm-body .eyebrow,
.crm-body .panel-kicker,
.portal-body .eyebrow,
.portal-body .panel-kicker {
    color: #9a711f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.135em;
}

.crm-body .panel,
.portal-body .portal-panel,
.portal-body .portal-auth-card {
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius-card);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--premium-shadow-card);
}

.crm-body .panel {
    padding: 22px;
}

.crm-body .panel-header,
.portal-body .portal-panel-header {
    align-items: flex-start;
    border-bottom-color: #ece9e2;
    margin-bottom: 18px;
    padding-bottom: 15px;
}

.crm-body .panel-header h2,
.portal-body .portal-panel-header h2 {
    color: var(--black);
    font-size: 19px;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.crm-body .panel-description,
.crm-body .form-help,
.crm-body .form-section-help,
.crm-body .muted,
.portal-body .muted {
    color: var(--premium-text-faint);
    font-size: 11px;
    line-height: 1.6;
}

/* Nested utility areas should not look like a stack of floating cards. */
.crm-body .panel .panel,
.crm-body .panel .automatic-status-notice,
.crm-body .panel .terms-stage-notice,
.crm-body .panel .form-section,
.portal-body .portal-panel .portal-panel {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Buttons and actions
   -------------------------------------------------------------------------- */

.crm-body .button,
.portal-body .button,
.crm-body button.text-action,
.portal-body button.text-action {
    font-family: inherit;
}

.crm-body .button,
.portal-body .button {
    min-height: 44px;
    border-radius: 9px;
    padding: 0 17px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.005em;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease;
}

.crm-body .button:hover,
.portal-body .button:hover {
    transform: translateY(-1px);
}

.crm-body .button-primary,
.portal-body .button-primary {
    border-color: #cfa54d;
    background: linear-gradient(180deg, #e4b961 0%, var(--gold) 100%);
    box-shadow: 0 7px 16px rgba(143, 100, 21, 0.18);
    color: #171511;
}

.crm-body .button-primary:hover,
.portal-body .button-primary:hover {
    background: linear-gradient(180deg, #eac36f 0%, #dfb058 100%);
    box-shadow: 0 10px 22px rgba(143, 100, 21, 0.22);
}

.crm-body .button-secondary,
.portal-body .button-secondary {
    border-color: var(--premium-line-strong);
    background: linear-gradient(180deg, #ffffff 0%, #f8f7f3 100%);
    box-shadow: 0 3px 9px rgba(17, 17, 17, 0.035);
    color: #34352f;
}

.crm-body .button-secondary:hover,
.portal-body .button-secondary:hover {
    border-color: #c9aa65;
    background: #fffdf8;
    box-shadow: 0 7px 16px rgba(17, 17, 17, 0.06);
}

.crm-body .button-small,
.portal-body .button-small {
    min-height: 36px;
    border-radius: 8px;
    padding-inline: 13px;
    font-size: 10.5px;
}

.crm-body .button:focus-visible,
.portal-body .button:focus-visible,
.crm-body .text-action:focus-visible,
.portal-body .text-action:focus-visible {
    outline: none;
    box-shadow: var(--premium-focus);
}

.crm-body .button:disabled,
.portal-body .button:disabled,
.crm-body .button[aria-disabled="true"],
.portal-body .button[aria-disabled="true"] {
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.52;
}

.crm-body .quick-actions,
.crm-body .page-header-actions,
.crm-body .form-actions,
.portal-body .portal-success-actions {
    gap: 9px;
}

/* --------------------------------------------------------------------------
   Premium form controls
   -------------------------------------------------------------------------- */

.crm-body .form-field,
.portal-body .form-field,
.crm-body .pipeline-filter-field,
.crm-body .search-field,
.crm-body .select-field {
    gap: 8px;
}

.crm-body .form-field > span:first-child,
.crm-body .form-field > label:first-child,
.crm-body .pipeline-filter-field > span,
.crm-body .search-field > span,
.crm-body .select-field > span,
.portal-body .form-field > span:first-child,
.portal-body .field > label,
.portal-body .portal-form-field > span:first-child {
    color: #474841;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0.012em;
    line-height: 1.35;
    text-transform: none;
}

.crm-body .form-field small,
.crm-body .pipeline-filter-field small,
.portal-body .form-field small,
.portal-body .field small {
    color: var(--premium-text-faint);
    font-size: 9.5px;
    line-height: 1.5;
}

.crm-body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not([type="file"]),
.crm-body select,
.crm-body textarea,
.portal-body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not([type="file"]),
.portal-body select,
.portal-body textarea {
    width: 100%;
    min-height: var(--premium-control-height);
    border: 1px solid var(--premium-line-strong);
    border-radius: var(--premium-radius-control);
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    box-shadow:
        inset 0 1px 1px rgba(17, 17, 17, 0.018),
        0 1px 0 rgba(255, 255, 255, 0.8);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    padding: 11px 13px;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.crm-body select,
.portal-body select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, #6d6e68 50%),
        linear-gradient(135deg, #6d6e68 50%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%,
        0 0;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px, 100% 100%;
}

.crm-body textarea,
.portal-body textarea {
    min-height: 112px;
    resize: vertical;
}

.crm-body textarea[rows="2"],
.portal-body textarea[rows="2"] {
    min-height: 78px;
}

.crm-body input::placeholder,
.crm-body textarea::placeholder,
.portal-body input::placeholder,
.portal-body textarea::placeholder {
    color: #9a9b95;
    opacity: 1;
}

.crm-body input:not([type="checkbox"]):not([type="radio"]):focus,
.crm-body select:focus,
.crm-body textarea:focus,
.portal-body input:not([type="checkbox"]):not([type="radio"]):focus,
.portal-body select:focus,
.portal-body textarea:focus {
    border-color: #c99e42;
    background: #ffffff;
    box-shadow: var(--premium-focus);
    outline: none;
}

.crm-body input:disabled,
.crm-body select:disabled,
.crm-body textarea:disabled,
.portal-body input:disabled,
.portal-body select:disabled,
.portal-body textarea:disabled {
    border-color: #e3e1da;
    background: #f0efeb;
    box-shadow: none;
    color: #777871;
    cursor: not-allowed;
}

.crm-body input:-webkit-autofill,
.crm-body input:-webkit-autofill:hover,
.crm-body input:-webkit-autofill:focus,
.portal-body input:-webkit-autofill,
.portal-body input:-webkit-autofill:hover,
.portal-body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    box-shadow: 0 0 0 1000px #fffdf8 inset, var(--premium-focus);
    transition: background-color 9999s ease-out;
}

.crm-body input[type="date"],
.crm-body input[type="datetime-local"],
.crm-body input[type="time"],
.portal-body input[type="date"],
.portal-body input[type="datetime-local"],
.portal-body input[type="time"] {
    color-scheme: light;
}

.crm-body input[type="file"],
.portal-body input[type="file"] {
    width: 100%;
    min-height: 54px;
    border: 1px dashed #c9b47c;
    border-radius: 11px;
    background: #fffdf8;
    color: var(--premium-text-soft);
    font: inherit;
    font-size: 11px;
    padding: 8px;
}

.crm-body input[type="file"]::file-selector-button,
.portal-body input[type="file"]::file-selector-button {
    min-height: 36px;
    margin-right: 11px;
    border: 1px solid var(--premium-line-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #34352f;
    padding: 0 12px;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.crm-body input[type="checkbox"],
.crm-body input[type="radio"],
.portal-body input[type="checkbox"],
.portal-body input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: var(--gold-dark, #b88934);
    cursor: pointer;
}

.crm-body .checkbox-card,
.portal-body .checkbox-card,
.portal-body .check {
    min-height: 58px;
    border: 1px solid var(--premium-line);
    border-radius: 11px;
    background: var(--premium-surface-soft);
    padding: 12px 14px;
    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease;
}

.crm-body .checkbox-card:hover,
.portal-body .checkbox-card:hover,
.portal-body .check:hover {
    border-color: #ccb16e;
    background: #fffdf8;
}

.crm-body .checkbox-card:has(input:checked),
.portal-body .checkbox-card:has(input:checked),
.portal-body .check:has(input:checked) {
    border-color: #c99e42;
    background: var(--premium-surface-warm);
    box-shadow: 0 0 0 3px rgba(220, 174, 87, 0.11);
}

.crm-body .checkbox-card > span,
.portal-body .checkbox-card > span {
    display: grid;
    gap: 3px;
    color: #34352f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.crm-body .checkbox-card > span small,
.portal-body .checkbox-card > span small {
    font-weight: 500;
}

.crm-body .errorlist,
.portal-body .errorlist,
.crm-body .form-errors,
.portal-body .form-errors {
    color: #a72a20;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
}

.crm-body .form-field:has(.errorlist:not(:empty)) input,
.crm-body .form-field:has(.errorlist:not(:empty)) select,
.crm-body .form-field:has(.errorlist:not(:empty)) textarea,
.portal-body .form-field:has(.errorlist:not(:empty)) input,
.portal-body .form-field:has(.errorlist:not(:empty)) select,
.portal-body .form-field:has(.errorlist:not(:empty)) textarea {
    border-color: #cb6d65;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.09);
}

.crm-body .form-grid {
    gap: 18px 16px;
}

/* --------------------------------------------------------------------------
   Selection cards, steps and long-form flow
   -------------------------------------------------------------------------- */

.crm-body .mode-choice-grid {
    gap: 10px;
}

.crm-body .mode-choice-card {
    position: relative;
    min-height: 78px;
    align-items: flex-start;
    border: 1px solid var(--premium-line);
    border-radius: 12px;
    background: var(--premium-surface-soft);
    padding: 14px 15px;
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease;
}

.crm-body .mode-choice-card:hover {
    transform: translateY(-1px);
    border-color: #cbb16f;
    background: #fffdf8;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.055);
}

.crm-body .mode-choice-card.is-selected,
.crm-body .mode-choice-card:has(input:checked) {
    border-color: #c99e42;
    background: linear-gradient(135deg, #fffaf0 0%, #fffdf8 100%);
    box-shadow: 0 0 0 3px rgba(220, 174, 87, 0.12);
}

.crm-body .mode-choice-card input[type="radio"] {
    margin-top: 2px;
}

.crm-body .mode-choice-card strong {
    color: #2f302b;
    font-size: 12px;
}

.crm-body .mode-choice-card small {
    color: var(--premium-text-faint);
    font-size: 10px;
    line-height: 1.5;
}

.crm-body .workflow-section-nav.premium-workflow-stepper {
    position: sticky;
    top: 10px;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 18px;
    border: 1px solid var(--premium-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 9px 24px rgba(17, 17, 17, 0.08);
    padding: 6px;
    backdrop-filter: blur(12px);
}

.crm-body .premium-workflow-stepper a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 52px;
    border-radius: 9px;
    padding: 7px 10px;
    color: #6d6e68;
    transition: background-color 140ms ease, color 140ms ease;
}

.crm-body .premium-workflow-stepper a:hover {
    background: #f7f3e9;
}

.crm-body .premium-workflow-stepper a.is-active {
    background: #fff8e8;
    color: var(--black);
}

.crm-body .premium-workflow-stepper a.is-complete {
    color: #39704c;
}

.crm-body .premium-workflow-stepper .workflow-step-number {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #dcdbd5;
    border-radius: 999px;
    background: #f3f2ee;
    font-size: 9px;
    font-weight: 900;
}

.crm-body .premium-workflow-stepper a.is-active .workflow-step-number {
    border-color: var(--gold);
    background: var(--gold);
    color: #171511;
}

.crm-body .premium-workflow-stepper a.is-complete .workflow-step-number {
    border-color: #a8ceb4;
    background: #e7f4eb;
    color: #2e6842;
}

.crm-body .premium-workflow-stepper .workflow-step-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.crm-body .premium-workflow-stepper strong {
    font-size: 10.5px;
    line-height: 1.25;
}

.crm-body .premium-workflow-stepper small {
    overflow: hidden;
    color: var(--premium-text-faint);
    font-size: 8.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-body .workflow-compact-panel {
    scroll-margin-top: 88px;
    padding: 22px;
}

.crm-body .workflow-compact-panel + .workflow-compact-panel,
.crm-body .workflow-compact-panel + .intake-record-panel,
.crm-body .intake-record-panel + .workflow-compact-panel {
    margin-top: 2px;
}

.crm-body .intake-mode-section {
    margin-top: 14px;
    border-top: 1px solid #eeece6;
    padding-top: 18px;
}

.crm-body .sticky-form-actions,
.crm-body .appointment-form-actions {
    position: sticky;
    z-index: 34;
    bottom: 10px;
    align-items: center;
    border: 1px solid var(--premium-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.13);
    padding: 10px;
    backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   Conversion dialog
   -------------------------------------------------------------------------- */

.crm-body .allocation-dialog {
    width: min(940px, calc(100vw - 34px));
    max-height: min(92vh, 940px);
    overflow: hidden;
    border: 0;
    border-radius: var(--premium-radius-large);
    background: #ffffff;
    box-shadow: var(--premium-shadow-raised);
    padding: 0;
}

.crm-body .allocation-dialog::backdrop {
    background: rgba(18, 18, 16, 0.58);
    backdrop-filter: blur(4px);
}

.crm-body .allocation-dialog-form {
    display: flex;
    max-height: min(92vh, 940px);
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.crm-body .allocation-dialog-header {
    position: sticky;
    z-index: 3;
    top: 0;
    flex: 0 0 auto;
    margin: 0;
    border-bottom: 1px solid var(--premium-line);
    background: rgba(255, 255, 255, 0.97);
    padding: 20px 22px 17px;
    backdrop-filter: blur(12px);
}

.crm-body .allocation-dialog-header h2 {
    margin: 0;
    font-size: 23px;
    letter-spacing: -0.025em;
}

.crm-body .dialog-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--premium-line);
    border-radius: 999px;
    background: #f8f7f3;
    color: #54554f;
    font-size: 22px;
    cursor: pointer;
}

.crm-body .dialog-close:hover {
    border-color: #c7aa68;
    background: #fffaf0;
    color: var(--black);
}

.crm-body .conversion-dialog-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 22px 4px;
}

.crm-body .conversion-dialog-section {
    margin-bottom: 16px;
    border: 1px solid var(--premium-line);
    border-radius: 13px;
    background: #ffffff;
    padding: 16px;
}

.crm-body .conversion-section-heading {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin-bottom: 14px;
}

.crm-body .conversion-section-number {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: var(--black);
    color: var(--gold);
    font-size: 10px;
    font-weight: 900;
}

.crm-body .conversion-section-heading > div {
    display: grid;
    gap: 3px;
}

.crm-body .conversion-section-heading strong {
    color: var(--black);
    font-size: 13px;
}

.crm-body .conversion-section-heading small {
    color: var(--premium-text-faint);
    font-size: 10px;
    line-height: 1.45;
}

.crm-body .allocation-dialog-summary {
    gap: 9px;
    margin: 0;
}

.crm-body .allocation-dialog-summary > div {
    min-height: 74px;
    border: 1px solid #ece9e2;
    border-radius: 10px;
    background: var(--premium-surface-soft);
    padding: 12px;
}

.crm-body .allocation-dialog-summary span {
    color: var(--premium-text-faint);
    font-size: 8.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.crm-body .allocation-dialog-summary strong {
    color: #30312c;
    font-size: 11px;
    line-height: 1.45;
}

.crm-body .conversion-ready-summary {
    margin-top: 11px;
    border: 0;
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    background: #fffaf0;
    padding: 11px 13px;
}

.crm-body .referrer-visibility-card-dialog {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.crm-body .referrer-visibility-options ul,
.crm-body .referrer-visibility-options > div {
    gap: 8px;
}

.crm-body .referrer-visibility-options label {
    min-height: 54px;
    align-items: center;
    border-radius: 10px;
    background: var(--premium-surface-soft);
    padding: 10px 12px;
    font-size: 10.5px;
}

.crm-body .referrer-visibility-options label:has(input[type="radio"]:checked) {
    border-color: #c99e42;
    background: #fff8e8;
    box-shadow: 0 0 0 3px rgba(220, 174, 87, 0.11);
}

.crm-body .conversion-optional-details {
    margin: 15px 0 0;
    overflow: hidden;
    border: 1px solid var(--premium-line);
    border-radius: 11px;
    background: var(--premium-surface-soft);
    padding: 0;
}

.crm-body .conversion-optional-details > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 11px 13px;
    font-size: 10.5px;
    list-style: none;
}

.crm-body .conversion-optional-details > summary::after {
    margin-left: auto;
    color: #777871;
    content: "+";
    font-size: 16px;
}

.crm-body .conversion-optional-details[open] > summary::after {
    content: "−";
}

.crm-body .conversion-optional-details > .conversion-note-grid,
.crm-body .conversion-optional-details > .form-grid {
    border-top: 1px solid var(--premium-line);
    padding: 15px;
}

.crm-body .allocation-dialog-footer {
    position: sticky;
    z-index: 3;
    bottom: 0;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 9px;
    margin: 0;
    border-top: 1px solid var(--premium-line);
    background: rgba(255, 255, 255, 0.97);
    padding: 12px 22px;
    backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   Job workspace, workflow cards and navigation
   -------------------------------------------------------------------------- */

.crm-body .job-summary-grid .stat-card,
.crm-body .stats-grid .stat-card {
    border-color: var(--premium-line);
    border-radius: 13px;
    box-shadow: var(--premium-shadow-card);
}

.crm-body .stat-card::before {
    width: 3px;
}

.crm-body .stat-label {
    color: #666761;
    font-size: 9px;
    letter-spacing: 0.075em;
}

.crm-body .stat-value {
    color: #252621;
    font-weight: 760;
    letter-spacing: -0.035em;
}

.crm-body .job-focus-bar {
    border: 1px solid #d8c18b;
    border-left: 4px solid var(--gold);
    border-radius: 13px;
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 75%);
    box-shadow: var(--premium-shadow-card);
    padding: 15px 17px;
}

.crm-body .job-section-nav {
    top: 10px;
    border: 1px solid var(--premium-line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.07);
    padding: 5px;
    backdrop-filter: blur(12px);
}

.crm-body .job-section-nav a {
    min-height: 37px;
    border-radius: 7px;
    padding: 7px 11px;
    font-size: 10px;
}

.crm-body .job-section-nav a.is-active,
.crm-body .job-section-nav a:hover {
    background: #f7f2e7;
    color: var(--black);
}

.crm-body .job-allocation-card,
.crm-body .progress-action-card,
.crm-body .readiness-detail-card,
.crm-body .commission-summary-card,
.crm-body .appointment-row,
.crm-body .job-task-item {
    border-color: var(--premium-line);
    border-radius: 11px;
    background: var(--premium-surface-soft);
}

.crm-body .progress-action-card {
    min-height: 154px;
    box-shadow: none;
    padding: 15px;
}

.crm-body .progress-action-card.progress-current {
    border-color: #d4b466;
    background: #fffaf0;
}

.crm-body .progress-action-card.progress-complete {
    border-color: #b9d7c1;
    background: #f4faf6;
}

.crm-body .job-control-disclosure,
.crm-body .job-controls-disclosure,
.crm-body .document-upload-disclosure,
.crm-body .workflow-additional-details {
    overflow: hidden;
    border-color: var(--premium-line);
    border-radius: 11px;
    background: var(--premium-surface-soft);
}

/* --------------------------------------------------------------------------
   Appointment, documents and communication workspaces
   -------------------------------------------------------------------------- */

.crm-body .appointment-form-layout-streamlined {
    gap: 22px;
}

.crm-body .appointment-editor .form-section {
    margin: 0;
    border: 0;
    border-top: 1px solid #ece9e2;
    border-radius: 0;
    background: transparent;
    padding: 24px 0;
}

.crm-body .appointment-editor .form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.crm-body .appointment-editor .form-section-heading h2 {
    font-size: 18px;
    letter-spacing: -0.018em;
}

.crm-body .appointment-streamlined-time-grid {
    gap: 15px;
    border: 1px solid var(--premium-line);
    border-radius: 12px;
    background: var(--premium-surface-soft);
    padding: 15px;
}

.crm-body .appointment-finish-preview,
.crm-body .appointment-availability-box,
.crm-body .appointment-key-panel,
.crm-body .appointment-availability-result {
    border-radius: 11px;
}

.crm-body .appointment-route-guidance {
    position: sticky;
    top: 10px;
}

.crm-body .document-workspace-row {
    gap: 15px;
    border: 1px solid transparent;
    border-bottom-color: #ece9e2;
    border-radius: 11px;
    background: transparent;
    padding: 15px;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.crm-body .document-workspace-row:hover {
    transform: translateY(-1px);
    border-color: #d8c18b;
    background: #fffdf8;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.05);
}

.crm-body .document-workspace-type,
.crm-body .document-icon {
    border-radius: 10px;
    background: #f1ece0;
    color: #7b5c1d;
}

.crm-body .document-workspace-title-row a,
.crm-body .document-title-row > a {
    color: #292a25;
    font-size: 12px;
    font-weight: 780;
}

.crm-body .document-workspace-meta,
.crm-body .document-workspace-links,
.crm-body .document-main > p {
    color: var(--premium-text-faint);
    font-size: 9.5px;
}

.crm-body .communication-layout {
    gap: 22px;
}

.crm-body .communication-main > .panel {
    border-top: 3px solid var(--gold);
}

.crm-body .communication-form-page textarea#id_body,
.crm-body .rich-email-editor,
.crm-body .rich-email-source-panel textarea {
    border-radius: 11px;
    background: #ffffff;
}

.crm-body .rich-email-toolbar {
    border-color: var(--premium-line);
    border-radius: 10px 10px 0 0;
    background: #f6f4ee;
    padding: 7px;
}

.crm-body .rich-email-toolbar button {
    min-height: 34px;
    border-radius: 7px;
}

.crm-body .communication-sidebar .panel {
    position: sticky;
    top: 10px;
}

/* --------------------------------------------------------------------------
   Tables, lists, badges and messages
   -------------------------------------------------------------------------- */

.crm-body .table-wrap,
.crm-body .jobs-responsive-table,
.crm-body .data-table-wrap {
    overflow: hidden;
    border: 1px solid var(--premium-line);
    border-radius: 12px;
    background: #ffffff;
}

.crm-body table {
    border-collapse: separate;
    border-spacing: 0;
}

.crm-body .data-table th,
.crm-body .jobs-table th,
.crm-body .operations-table th {
    border-bottom: 1px solid var(--premium-line);
    background: #f6f4ee;
    color: #666761;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.crm-body .data-table td,
.crm-body .jobs-table td,
.crm-body .operations-table td {
    border-bottom-color: #efede7;
    font-size: 10.5px;
    line-height: 1.45;
}

.crm-body .data-table tbody tr,
.crm-body .jobs-table tbody tr,
.crm-body .operations-table tbody tr {
    transition: background-color 120ms ease;
}

.crm-body .data-table tbody tr:hover,
.crm-body .jobs-table tbody tr:hover,
.crm-body .operations-table tbody tr:hover {
    background: #fffdf8;
}

.crm-body .badge,
.portal-body .badge,
.crm-body .readiness-chip,
.crm-body .job-status {
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 830;
    letter-spacing: 0.025em;
    line-height: 1.2;
    padding: 5px 8px;
}

.crm-body .message,
.portal-body .message,
.crm-body .automatic-status-notice,
.crm-body .terms-stage-notice,
.crm-body .form-inline-notice {
    border-radius: 10px;
}

.crm-body .empty-state,
.portal-body .empty-state,
.crm-body .compact-clear-state {
    border: 1px dashed #d9d4c8;
    border-radius: 12px;
    background: #faf9f6;
    padding: 22px;
}

/* --------------------------------------------------------------------------
   Portal refinements
   -------------------------------------------------------------------------- */

.portal-body .portal-header-shell {
    border-bottom-color: rgba(218, 214, 204, 0.9);
    box-shadow: 0 7px 22px rgba(17, 17, 17, 0.045);
}

.portal-body .portal-header,
.portal-body .portal-main,
.portal-body .portal-footer {
    width: min(1240px, calc(100% - 40px));
}

.portal-body .portal-nav-links a,
.portal-body .portal-mobile-account-links a,
.portal-body .portal-mobile-account-links button {
    border-radius: 8px;
    font-size: 10.5px;
}

.portal-body .portal-account-menu > summary {
    border-radius: 11px;
}

.portal-body .portal-referral-card,
.portal-body .client-case-card,
.portal-body .client-portal-document-row,
.portal-body .portal-payment-row {
    border-radius: 12px;
}

.portal-body .portal-form-steps {
    border-radius: 12px;
}

.portal-body .portal-auth-card {
    width: min(540px, 100%);
    padding: 30px;
}

.portal-body .portal-auth-card h1,
.portal-body .portal-auth-card h2 {
    letter-spacing: -0.03em;
}

.portal-body .portal-sticky-actions {
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Responsive behaviour
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .crm-body .premium-workflow-stepper small {
        display: none;
    }

    .crm-body .premium-workflow-stepper a {
        grid-template-columns: 28px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .crm-body .main-content {
        padding: 28px 20px 52px;
    }

    .crm-body .workflow-section-nav.premium-workflow-stepper {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-body .appointment-route-guidance,
    .crm-body .communication-sidebar .panel {
        position: static;
    }
}

@media (max-width: 680px) {
    :root {
        --premium-control-height: 48px;
    }

    .crm-body .main-content {
        padding-inline: 13px;
    }

    .crm-body .panel,
    .portal-body .portal-panel,
    .portal-body .portal-auth-card {
        border-radius: 12px;
        padding: 16px;
    }

    .crm-body .page-header {
        gap: 16px;
    }

    .crm-body .quick-actions,
    .crm-body .page-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .crm-body .quick-actions .button,
    .crm-body .page-header-actions .button {
        flex: 1 1 auto;
    }

    .crm-body .workflow-section-nav.premium-workflow-stepper {
        grid-template-columns: 1fr 1fr;
    }

    .crm-body .premium-workflow-stepper a {
        min-height: 48px;
        padding: 6px 8px;
    }

    .crm-body .premium-workflow-stepper .workflow-step-number {
        width: 27px;
        height: 27px;
    }

    .crm-body .workflow-compact-panel {
        scroll-margin-top: 16px;
    }

    .crm-body .sticky-form-actions,
    .crm-body .appointment-form-actions {
        bottom: 5px;
        flex-direction: column-reverse;
    }

    .crm-body .sticky-form-actions .button,
    .crm-body .appointment-form-actions .button {
        width: 100%;
    }

    .crm-body .allocation-dialog {
        width: calc(100vw - 14px);
        max-height: calc(100dvh - 14px);
        border-radius: 14px;
    }

    .crm-body .allocation-dialog-form {
        max-height: calc(100dvh - 14px);
    }

    .crm-body .allocation-dialog-header,
    .crm-body .conversion-dialog-body,
    .crm-body .allocation-dialog-footer {
        padding-inline: 15px;
    }

    .crm-body .allocation-dialog-summary {
        grid-template-columns: 1fr 1fr;
    }

    .crm-body .conversion-dialog-section {
        padding: 13px;
    }

    .crm-body .conversion-section-heading {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .crm-body .conversion-section-number {
        width: 30px;
        height: 30px;
    }

    .crm-body .allocation-dialog-footer {
        flex-direction: column-reverse;
    }

    .crm-body .allocation-dialog-footer .button {
        width: 100%;
    }

    .portal-body .portal-header,
    .portal-body .portal-main,
    .portal-body .portal-footer {
        width: min(100% - 22px, 1240px);
    }

    .portal-body .portal-auth-card {
        width: 100%;
        margin: 20px auto;
    }
}

/* --------------------------------------------------------------------------
   Standalone Terms of Engagement pages
   -------------------------------------------------------------------------- */

body.terms-public-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 88% 0%, rgba(220, 174, 87, 0.12), transparent 390px),
        linear-gradient(180deg, #f3f2ee 0%, #ebe9e2 100%);
    color: #20211d;
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}

.terms-public-body .page {
    width: min(1040px, calc(100% - 32px));
    margin: 30px auto 64px;
}

.terms-public-body .topbar {
    border-radius: 17px 17px 0 0;
    box-shadow: 0 12px 34px rgba(17, 17, 17, 0.14);
    padding: 24px 28px;
}

.terms-public-body .content {
    border-radius: 0 0 17px 17px;
    box-shadow: 0 24px 58px rgba(17, 17, 17, 0.11);
    padding-top: 38px;
}

.terms-public-body h1 {
    font-weight: 760;
    letter-spacing: -0.045em;
}

.terms-public-body .subtitle {
    max-width: 760px;
    color: #60615b;
    line-height: 1.6;
}

.terms-public-body .summary {
    overflow: hidden;
    border-color: #d8c187;
    border-radius: 12px;
    background: #fffdf8;
}

.terms-public-body .summary div {
    border-color: #ece7dc;
    padding: 14px 16px;
}

.terms-public-body .summary dt {
    color: #70551e;
    font-size: 12px;
}

.terms-public-body .summary dd {
    color: #32332e;
    font-size: 13px;
}

.terms-public-body .terms-index,
.terms-public-body .optional-declaration,
.terms-public-body .client-account-offer,
.terms-public-body .what-next {
    border-radius: 11px;
}

.terms-public-body .acceptance {
    border: 1px solid #d9c28d;
    border-left: 4px solid var(--gold);
    border-radius: 13px;
    background: linear-gradient(135deg, #fffaf0 0%, #fffdf8 100%);
    box-shadow: 0 10px 26px rgba(17, 17, 17, 0.055);
    padding: 26px;
}

.terms-public-body .field label {
    margin-bottom: 8px;
    color: #44453f;
    font-size: 12px;
    font-weight: 780;
}

.terms-public-body .field input[type="text"] {
    width: 100%;
    max-width: 520px;
    min-height: 48px;
    border: 1px solid var(--premium-line-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    box-shadow: inset 0 1px 1px rgba(17, 17, 17, 0.02);
    color: #20211d;
    font: inherit;
    font-size: 14px;
    padding: 11px 13px;
}

.terms-public-body .field input[type="text"]:focus {
    border-color: #c99e42;
    background: #fff;
    box-shadow: var(--premium-focus);
    outline: none;
}

.terms-public-body .check {
    min-height: 0;
    align-items: flex-start;
    margin: 10px 0;
    border: 1px solid var(--premium-line);
    border-radius: 10px;
    background: #fff;
    padding: 12px 13px;
}

.terms-public-body .check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--gold-dark, #b88934);
}

.terms-public-body .check:has(input:checked) {
    border-color: #c99e42;
    background: #fff8e8;
    box-shadow: 0 0 0 3px rgba(220, 174, 87, 0.11);
}

.terms-public-body .button {
    min-height: 44px;
    border-radius: 9px;
    padding: 11px 17px;
    font-size: 12px;
    font-weight: 800;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.terms-public-body .button:hover {
    transform: translateY(-1px);
}

.terms-public-body .button-gold {
    border: 1px solid #cfa54d;
    background: linear-gradient(180deg, #e4b961 0%, var(--gold) 100%);
    box-shadow: 0 7px 16px rgba(143, 100, 21, 0.18);
}

.terms-public-body .button-outline {
    border-color: var(--premium-line-strong);
    background: #fff;
}

.terms-unavailable-body main {
    width: min(700px, calc(100% - 30px));
    margin: 72px auto;
    border: 1px solid var(--premium-line);
    border-top: 4px solid var(--gold);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 24px 58px rgba(17, 17, 17, 0.11);
    padding: 42px;
}

.terms-unavailable-body main h1 {
    letter-spacing: -0.035em;
}

@media (max-width: 700px) {
    .terms-public-body .page {
        width: min(100% - 14px, 1040px);
        margin: 7px auto 30px;
    }

    .terms-public-body .topbar {
        border-radius: 13px 13px 0 0;
        padding: 18px;
    }

    .terms-public-body .content {
        border-radius: 0 0 13px 13px;
    }

    .terms-public-body .acceptance {
        padding: 18px 15px;
    }

    .terms-unavailable-body main {
        margin: 22px auto;
        padding: 28px 22px;
    }
}

/* --------------------------------------------------------------------------
   Standalone staff, referral and system pages
   -------------------------------------------------------------------------- */

body.staff-auth-body,
body.external-referral-page,
body.system-error-body {
    background:
        radial-gradient(circle at 88% 0%, rgba(220, 174, 87, 0.11), transparent 390px),
        linear-gradient(180deg, #f3f2ee 0%, #ebe9e2 100%);
}

.staff-auth-body .staff-auth-card,
.external-referral-page .external-referral-form,
.external-referral-page .external-form-section,
.system-error-body .system-error-card {
    border-color: var(--premium-line);
    border-radius: var(--premium-radius-card);
    box-shadow: var(--premium-shadow-card);
}

.staff-auth-body .staff-auth-card {
    border-top: 3px solid var(--gold);
}

.staff-auth-body .staff-auth-field {
    gap: 8px;
}

.staff-auth-body .staff-auth-field > span,
.external-referral-page .form-field > span:first-child {
    color: #474841;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0.012em;
    text-transform: none;
}

.staff-auth-body .staff-auth-field input,
.external-referral-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.external-referral-page select,
.external-referral-page textarea {
    width: 100%;
    min-height: var(--premium-control-height);
    border: 1px solid var(--premium-line-strong);
    border-radius: var(--premium-radius-control);
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    box-shadow: inset 0 1px 1px rgba(17, 17, 17, 0.018);
    color: #20211d;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    padding: 11px 13px;
}

.external-referral-page select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, #6d6e68 50%),
        linear-gradient(135deg, #6d6e68 50%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%,
        0 0;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px, 100% 100%;
}

.external-referral-page textarea {
    min-height: 112px;
    resize: vertical;
}

.staff-auth-body .staff-auth-field input:focus,
.external-referral-page input:focus,
.external-referral-page select:focus,
.external-referral-page textarea:focus {
    border-color: #c99e42;
    background: #fff;
    box-shadow: var(--premium-focus);
    outline: none;
}

.staff-auth-body .staff-auth-submit,
.external-referral-page .button,
.system-error-body .button {
    min-height: 44px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.staff-auth-body .staff-auth-submit:hover,
.external-referral-page .button:hover,
.system-error-body .button:hover {
    transform: translateY(-1px);
}

.external-referral-page .button-primary,
.system-error-body .button-primary {
    border-color: #cfa54d;
    background: linear-gradient(180deg, #e4b961 0%, var(--gold) 100%);
    box-shadow: 0 7px 16px rgba(143, 100, 21, 0.18);
    color: #171511;
}

.external-referral-page .button-secondary,
.system-error-body .button-secondary {
    border-color: var(--premium-line-strong);
    background: linear-gradient(180deg, #ffffff 0%, #f8f7f3 100%);
    color: #34352f;
}

.external-referral-page .external-referral-header {
    border-radius: 14px;
    box-shadow: var(--premium-shadow-card);
}

.external-referral-page .external-referral-hero h1 {
    letter-spacing: -0.045em;
}

.external-referral-page .external-form-section {
    background: rgba(255, 255, 255, 0.98);
    padding: 22px;
}

.external-referral-page .external-section-heading > span {
    background: var(--black);
    color: var(--gold);
}

.external-referral-page .checkbox-card {
    min-height: 58px;
    border: 1px solid var(--premium-line);
    border-radius: 11px;
    background: var(--premium-surface-soft);
    padding: 12px 14px;
}

.external-referral-page .checkbox-card:has(input:checked) {
    border-color: #c99e42;
    background: #fff8e8;
    box-shadow: 0 0 0 3px rgba(220, 174, 87, 0.11);
}

.system-error-body .system-error-card {
    border-top: 4px solid var(--gold);
}