:root {font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#233247; background:#f4f6f9; font-synthesis:none}
* {box-sizing:border-box}
body {margin:0;min-height:100vh;display:flex;flex-direction:column}
a {color:#2166a8}
button,input {font:inherit}
button {cursor:pointer}
.shell {width:min(100% - 40px,1120px);margin:0 auto}
.site-header {background:#fff;border-bottom:1px solid #e1e7ed}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand {display:flex;align-items:center;gap:12px;text-decoration:none;color:#203349;min-width:0}
.brand-logo {display:block;height:55.2px;width:auto;max-width:min(483px,67vw)}
.header-actions {display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.account-name {font-size:14px;color:#5a6a7e}
.nav-link {font-size:14px;color:#45627d;text-decoration:none}
.nav-link:hover,.text-link:hover {text-decoration:underline}
.logout-link {background:none;border:0;padding:0}
.inline-form {margin:0}
main.shell {flex:1;padding-top:48px;padding-bottom:52px}
.site-footer {width:100%;padding:18px 0 30px;color:#7b8998;font-size:12px}
.page-heading {margin-bottom:28px}
h1 {font-size:clamp(25px,3vw,34px);line-height:1.2;margin:8px 0 12px}
h2 {font-size:20px;margin:0 0 10px}
p {line-height:1.6;margin:8px 0 0}
.subtle {color:#67788a}
.eyebrow {font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9a6b05}
.panel,.tile {background:#fff;border:1px solid #e2e7ec;border-radius:16px;box-shadow:0 4px 18px #22314908}
.panel {padding:32px}
.auth-panel {max-width:500px;margin:12px auto}
.tiles {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:25px}
.tile {color:#233247;text-decoration:none;padding:28px;transition:border-color .2s,transform .2s}
.tile:hover {border-color:#e1c37c;transform:translateY(-2px)}
.tile p {color:#67788a;min-height:52px}
.tile-icon {font-size:29px;display:block;color:#9a6b05;margin-bottom:18px}
.tile-more {display:block;margin-top:23px;font-weight:700;color:#9a6b05;font-size:14px}
.notice {border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6;margin:18px 0}
.notice.info {background:#edf4fc;color:#365979}
.notice.error {background:#fff0ef;color:#9b3934}
.form-stack {display:grid;gap:18px;margin-top:24px}
.form-stack label {display:block;font-weight:650;font-size:14px;margin-bottom:8px}
.form-stack input {width:100%;padding:12px;border:1px solid #b9c8d6;border-radius:8px;background:#fff;color:#233247}
.form-stack input:focus {outline:2px solid #af8737;outline-offset:1px}
.button {display:inline-block;text-align:center;padding:12px 22px;border:0;border-radius:9px;text-decoration:none;font-weight:700}
.button.primary {background:#e9c86e;color:#28313d;border:1px solid #d0a94d}
.button.primary:hover {background:#dfbc5e;border-color:#c59a40}
.field-error {color:#a53636;font-size:13px}
.field-error ul {padding-left:20px}
.form-stack small {display:block;margin-top:7px;font-size:12px;line-height:1.4}
.breadcrumbs {font-size:14px;margin-bottom:19px;color:#8290a0}
.text-link {display:inline-block;margin-top:15px;text-decoration:none;font-weight:650}
@media(max-width:620px){.shell {width:min(100% - 28px,1120px)}.header-inner {align-items:flex-start;flex-direction:column;padding:15px 0;gap:12px}.header-actions {width:100%;gap:15px}.account-name {margin-right:auto}.panel {padding:22px}main.shell {padding-top:30px}.auth-panel {margin:0}.brand{flex-wrap:wrap}.brand-logo{height:48.3px;max-width:min(100%,368px)}}
/* Stage 2: staff CRM */
.crm-menu {display:flex;flex-wrap:wrap;gap:10px;margin:-16px 0 32px}
.crm-menu a {background:#fff;border:1px solid #d5e2e3;border-radius:10px;color:#775900;text-decoration:none;font-size:14px;font-weight:650;padding:11px 14px}
.crm-menu a:hover {background:#fff8e5}
.narrower {max-width:740px}
.section-spaced {margin-top:22px}
.section-title {margin-top:26px}
.section-bar {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px;flex-wrap:wrap}
.section-bar h1,.section-bar h2 {margin:0}
.toolbar {display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.toolbar label {display:grid;gap:6px;font-weight:650;font-size:13px}
.field-control,.toolbar input,.toolbar select,.form-stack select,.form-stack textarea,.form-stack input[type=file] {width:100%;padding:11px;border:1px solid #b9c8d6;border-radius:8px;background:#fff;color:#233247;font:inherit}
.field-control:focus {outline:2px solid #af8737;outline-offset:1px}
.form-stack textarea {resize:vertical}
.form-stack.compact {gap:12px;margin-top:14px}
.form-stack.compact label {font-size:13px}
.form-stack.compact input,.form-stack.compact select {padding:9px}
.crm-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.table-scroll {max-width:100%;overflow-x:auto}
.data-table {width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.data-table th {font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#758496;background:#f5f7f9}
.data-table th,.data-table td {padding:13px 12px;border-bottom:1px solid #e3ebef;vertical-align:top}
.data-table td small {display:block;margin-top:5px;color:#8091a0;font-size:12px}
.data-table tr:last-child td {border-bottom:0}
.photo-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin:15px 0}
.photo-grid a {background:#f5f7f9;display:block;padding:8px;border-radius:10px;text-decoration:none}
.photo-grid img {width:100%;height:130px;object-fit:cover;border-radius:6px}
.photo-grid small {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}
.upload-row {margin-top:14px}
.activity-feed {display:grid;gap:10px;margin-top:18px}
.activity-line {padding-left:14px;border-left:3px solid #d5e2e3}
.activity-line strong {font-size:14px}
.activity-line small {display:block;font-size:12px;margin-top:5px;color:#8c98a5}
@media(max-width:740px){.crm-grid {grid-template-columns:1fr}.data-table {min-width:560px}.panel {padding:20px}.crm-menu {margin-top:-25px}}

/* Stage 2.1: instant segmented choices, conditional contact and photo uploader */
.choice-fieldset {border:0;margin:0;padding:0;min-width:0}
.choice-fieldset legend {font-size:14px;font-weight:700;margin-bottom:8px}
.pill-options > div {display:flex;flex-wrap:wrap;gap:9px}
.pill-options label {display:inline-flex!important;align-items:center;gap:7px;border:1px solid #d1dde3;background:#f5f8fa;border-radius:11px;padding:10px 15px;cursor:pointer;margin:0!important;font-weight:650}
.pill-options label:has(input:checked) {border-color:#d6b771;background:#fff7e4;color:#725311;box-shadow:inset 0 0 0 1px #d6b771}
.pill-options input[type=radio] {width:16px!important;height:16px;padding:0!important;accent-color:#af8737;flex:0 0 auto}
.pill-options label:focus-within {outline:2px solid #af8737;outline-offset:2px}
.form-stack h2 {margin-top:10px;margin-bottom:-5px}
.client-suggestions {border:1px solid #e4cc90;border-radius:12px;padding:15px;background:#fff9ed;font-size:14px}
.client-suggestions p {font-size:13px;margin-top:5px}
.candidate-list {margin-top:10px;display:grid;gap:8px}
.candidate {display:flex!important;align-items:center;gap:9px;padding:9px 10px;background:#fff;border:1px solid #ede1c4;border-radius:9px;margin:0!important}
.candidate input {width:16px!important;margin:0!important;accent-color:#af8737}
.candidate span {flex:1}
.candidate a {font-weight:500;white-space:nowrap;font-size:12px}
.photo-uploader {border:1px solid #ebe2cc;border-radius:14px;background:#fafdfc;padding:14px}
.photo-dropzone {display:flex!important;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;padding:22px 12px;border:2px dashed #e5cb84;border-radius:12px;background:#fff9ed;color:#795b22;margin:0!important;transition:background .12s,border .12s}
.photo-dropzone.drag-over,.photo-dropzone:hover {background:#fff1cc;border-color:#b58b31}
.photo-dropzone span {font-size:13px}
.photo-upload-icon {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e9c86e;color:#28313d;font-size:30px!important;line-height:1}
.visually-hidden-file {position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);opacity:0;padding:0!important}
.visually-hidden-file:focus-visible + .photo-status {outline:2px solid #af8737}
.photo-status {font-size:13px;padding:8px 0;margin:5px 0 0}
.upload-preview {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:10px}
.upload-thumb {position:relative;min-width:0;background:#fff;border:1px solid #dde9e3;border-radius:9px;padding:6px}
.upload-thumb img {width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:5px;display:block}
.upload-thumb span {display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:7px 0 2px;color:#506473}
.upload-thumb .remove-photo {position:absolute;top:7px;right:7px;border:0;border-radius:50%;background:#263949dc;color:#fff;font-size:19px;width:27px;height:27px;line-height:1}
@media(max-width:500px){.pill-options label {padding:9px 10px}.upload-preview {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Explicit form validation feedback (native invalid controls do not submit HTTP). */
.form-error-summary[hidden] {display:none}
.form-error-summary {margin:0 0 18px}
.form-error-summary ul {padding-left:20px;margin:8px 0}
.form-error-summary a {color:inherit;text-decoration:underline}
.form-error-summary p {margin-top:8px}
.form-stack [aria-invalid="true"] {border-color:#b73f39;box-shadow:0 0 0 1px #b73f39}

/* CRM: photo-exception control and explanatory text */
.photo-exception {padding:14px 16px;border:1px solid #e8dfc8;border-radius:12px;background:#fffaf0}
.form-stack label.check-option {display:flex;align-items:center;gap:11px;margin:0;cursor:pointer}
.form-stack .check-option input[type=checkbox] {width:18px;height:18px;flex:none;accent-color:#af8737;padding:0}
.photo-exception small {padding-left:29px}
#photo-upload-section[hidden] {display:none!important}

/* Stage 3: manager workspace, AI draft forms and optional questionnaire */
.crm-option-group {border:1px solid #e9e0c9;border-radius:12px;padding:14px 16px;background:#fffaf0;display:grid;gap:12px}
.crm-option-group label.check-option {display:flex;align-items:center;gap:10px;margin:0;font-weight:600;cursor:pointer}
.crm-option-group input[type=checkbox] {width:18px;height:18px;flex:0 0 auto;padding:0;accent-color:#af8737}
.crm-details {border:1px solid #d7e2e6;border-radius:12px;padding:14px 18px;display:grid;gap:12px}
.crm-details summary {cursor:pointer;font-weight:700;color:#21695e}
.crm-details[open] {display:grid}
.crm-grid-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.crm-flags {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.crm-flag {display:inline-block;background:#f0f3f6;color:#728091;border-radius:25px;font-size:13px;font-weight:700;padding:8px 13px}
.crm-flag.is-active {background:#e3f4e9;color:#246a4c}
.crm-tools-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.crm-tool-card {display:grid;gap:10px;padding:18px;border-radius:12px;background:#f7faf9;border:1px solid #ebdcba;text-decoration:none;color:#674e21}
.crm-tool-card:hover {background:#fff3d5;border-color:#b58b31}
.crm-tool-card strong {font-size:16px}
.crm-tool-card span {font-size:13px;color:#718295;line-height:1.5}
.crm-task {padding:13px 0;border-bottom:1px solid #e7edf0}
.crm-task small,.crm-draft small {display:block;font-size:12px;color:#84919e;margin:6px 0}
.crm-task.is-overdue {border-left:3px solid #b14c3b;padding-left:12px}
.crm-task .button {font-size:12px;padding:7px 12px;border:1px solid #ead8ad;background:#fff6de;color:#b58b31}
.crm-draft {padding:15px 0;border-bottom:1px solid #e1e9ed}
.crm-draft dl {display:grid;grid-template-columns:120px 1fr;gap:6px;margin:10px 0;overflow-wrap:anywhere;font-size:13px}
.crm-draft dt {color:#728295}.crm-draft dd {margin:0}
@media(max-width:740px){.crm-grid-form,.crm-tools-grid {grid-template-columns:1fr}}

.crm-mini-badge{display:inline-block;margin:2px 3px 2px 0;background:#fff3d6;border-radius:6px;color:#886006;padding:4px 7px;font-size:11px;font-weight:700}

/* Stage 4: fabric catalog */

.fabric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px;margin:25px 0}
.fabric-card{display:block;border:1px solid #dce6e8;border-radius:14px;background:#fff;color:inherit;text-decoration:none;overflow:hidden}
.fabric-card:hover{box-shadow:0 6px 22px #65501120;border-color:#d3b674}
.fabric-card>img,.fabric-placeholder{width:100%;height:200px;object-fit:cover;background:#f0f3f1}
.fabric-placeholder{display:grid;place-items:center;color:#82928d;font-size:13px}
.fabric-card-body{display:grid;gap:6px;padding:13px}.fabric-card-body small,.fabric-photo small{color:#778793}
.fabric-color{display:inline-block;width:22px;height:22px;vertical-align:middle;border:1px solid #bbb;border-radius:5px}
.color-chip{display:flex;align-items:center;gap:7px;font-size:12px}.color-chip span{width:15px;height:15px;border-radius:50%;border:1px solid #ddd}
.fabric-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px;margin-top:16px}
.fabric-photo{border:1px solid #dce6e8;border-radius:12px;padding:12px;display:grid;gap:9px;align-content:start;word-break:break-word}
.fabric-photo>img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.fabric-photo a{font-size:13px}
.fabric-palette{display:flex;gap:6px}.fabric-palette span{width:32px;height:32px;border:1px solid #ddd;border-radius:6px}
.fabric-actions{display:flex;gap:7px;flex-wrap:wrap}.fabric-actions .button{font-size:12px;padding:9px}
.fabric-crop-frame{position:relative;touch-action:none;width:min(100%,640px);margin:18px 0;line-height:0}
.fabric-crop-frame img{display:block;width:100%;height:auto}
.fabric-crop-handle{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:3px solid white;background:#d4aa49;box-shadow:0 0 0 1px #d4aa49;cursor:grab;touch-action:none}

/* Fabric catalog: reviewed color panels and accessible confirmation. */
.fabric-confirmed-color{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid #e5ebee}
.fabric-confirmed-color>div{display:grid;gap:3px}.fabric-confirmed-color span:not(.fabric-color-large){color:#526377;font-size:13px}
.fabric-confirmed-color small{color:#667789;font-size:12px}
.fabric-color-large{width:46px;height:46px;flex:none;border-radius:9px;border:1px solid #afb9c2;display:inline-block;background:#e9eef0}
.fabric-properties{display:grid;grid-template-columns:minmax(100px,45%) 1fr;gap:9px 14px;font-size:14px}
.fabric-properties dt{color:#607287}.fabric-properties dd{margin:0;font-weight:600}
.fabric-color-editor{margin:20px 0 0;padding:16px;border:1px solid #e9e0c9;border-radius:12px;background:#fafcfb}
.fabric-color-editor .form-stack{margin-top:10px}.fabric-color-editor h3{margin:0}
.fabric-color-preview{display:flex;gap:12px;align-items:center}.fabric-color-preview small{color:#647687}
.fabric-status-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.fabric-danger-zone{border-color:#e7bab5;background:#fffafa}
.fabric-danger-button,.fabric-danger-link{background:#a73734!important;color:#fff!important}
.fabric-danger-button:hover,.fabric-danger-link:hover{background:#802723!important}
.fabric-dialog{border:1px solid #b6c7cf;border-radius:15px;padding:25px;width:min(92vw,480px);box-shadow:0 14px 55px #132b4159;color:#233247}
.fabric-dialog::backdrop{background:#0c1b29a1}.fabric-dialog-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px}
.fabric-dialog-buttons .button{cursor:pointer}.fabric-status-actions .button:disabled,[data-color-save]:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:500px){.fabric-dialog{padding:18px}.fabric-color-editor{padding:12px}.fabric-dialog-buttons .button{flex:1}}

/* v0.5.0.4: progressive-disclosure color editing, low-noise live feedback. */
.fabric-additional-color {margin-top:18px}
.fabric-additional-color>summary {display:list-item;cursor:pointer;color:#795a1c;font-weight:750;border:1px solid #e6d5a6;background:#fff7e2;padding:12px 16px;border-radius:10px}
.fabric-additional-color>summary:hover {background:#fff0c3}
.fabric-additional-color[open]>summary {border-radius:10px 10px 0 0}
.fabric-additional-color .fabric-color-editor {margin-top:0;border-radius:0 0 12px 12px}
.fabric-refresh-status {font-size:12px;margin-top:14px;min-height:1.5em}
.fabric-photo:focus-within {outline:2px solid #af8737;outline-offset:2px}
.lead-source-field {background:#fffaf0;border:1px solid #ebdcbb;border-radius:12px;padding:13px 16px}
:is(button, a, input, select, textarea, summary):focus-visible {outline:3px solid #af8737;outline-offset:2px}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {scroll-behavior:auto!important;transition-duration:0.01ms!important}}

/* v0.5.0.5: in-place manager and workshop action dialog */
.crm-action-dialog{border:1px solid #c5d8d5;border-radius:16px;padding:26px;width:min(94vw,620px);max-height:min(88vh,850px);overflow:auto;color:#233247;box-shadow:0 20px 70px #172e3d52}
.crm-action-dialog::backdrop{background:#102a3bae}
.crm-action-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.crm-action-head h2{margin:0}.crm-action-head p{margin:5px 0 0}
.crm-action-close{border:0;background:#edf2f3;border-radius:50%;font-size:25px;width:38px;height:38px;flex:none;color:#233247}
.crm-action-switch{display:grid;grid-template-columns:1fr 1fr;background:#edf4f3;border-radius:12px;padding:4px;gap:4px;margin:19px 0}
.crm-action-switch button{font-size:14px;padding:11px;border:0;background:transparent;color:#536171;border-radius:9px;font-weight:650}
.crm-action-switch button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 7px #182f3a18;color:#775300}
.crm-action-dialog [data-action-panel][hidden]{display:none}
.crm-action-dialog .form-stack{margin-top:13px;gap:12px}
.crm-action-dialog .form-stack label{margin-bottom:5px}
.crm-action-dialog .form-stack input,.crm-action-dialog .form-stack select,.crm-action-dialog .form-stack textarea{max-width:100%}
.crm-action-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
@media(max-width:530px){.crm-action-dialog{padding:16px}.crm-action-switch button{font-size:12px;padding:9px 5px}.crm-action-buttons{flex-direction:column-reverse}.crm-action-buttons button{width:100%}}

/* Lead source marks are decorative; text always names the actual brand. */
.lead-source-icon{display:inline-block;width:23px;height:23px;object-fit:contain;vertical-align:middle;margin-right:3px}.lead-source-icon-emoji{display:inline-block;width:23px;text-align:center;vertical-align:middle;margin-right:3px}.lead-source-button [data-lead-chosen]{display:inline-flex;align-items:center;gap:8px}

/* Editable stock-location dictionary; compact layout for the variant form. */
.fabric-stock-fieldset{display:grid;gap:12px;min-width:0;border:1px solid #e9e0c9;border-radius:12px;padding:12px 16px 16px}
.fabric-stock-fieldset legend{padding:0 7px;font-weight:700}
.fabric-stock-fieldset>div{display:grid;gap:6px;min-width:0}
.fabric-stock-fieldset select{width:100%;max-width:100%}

/* Scroll containment for ALL native dialog windows in the project. */
html{scrollbar-gutter:stable}
html.app-modal-open,html.app-modal-open body{overflow:hidden!important;overscroll-behavior:none}
dialog[open]{overscroll-behavior:contain;max-height:calc(100dvh - 16px)}
dialog[open]::backdrop{overscroll-behavior:none}

/* v0.5.2.1 — shared spacing and overflow safeguards across mini-CRM */
/* The brand image already contains CRM; no separate text badge is rendered. */
.brand{gap:0}.brand-logo{max-width:min(483px,79vw)}
/* Keep long catalog names, notes and table content inside their own cards. */
main.shell,.panel,.tile,.crm-grid>* ,.tiles>*,.section-bar>*{min-width:0}
.fabric-empty-state{grid-column:1/-1;min-height:170px;display:flex;align-items:center;justify-content:center;text-align:left;padding:28px 34px}.fabric-empty-state>div{max-width:420px}.fabric-empty-state h3{margin:0 0 10px;font-size:24px;line-height:1.25}.fabric-empty-state p{margin:0;color:#5f7387;line-height:1.6;font-size:15px}
.panel,.tile{overflow-wrap:anywhere}
.panel :is(input,select,textarea),.crm-action-dialog :is(input,select,textarea),.fabric-dialog :is(input,select,textarea){max-width:100%;min-width:0}
button,.button{overflow-wrap:break-word;line-height:1.3}
.button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.button:focus-visible{outline:3px solid #af8737;outline-offset:2px}
.panel h2,.panel h3{line-height:1.35}
.page-heading h1{overflow-wrap:anywhere}
.page-heading p{max-width:850px;line-height:1.6}
.section-bar{align-items:center;row-gap:12px}
.section-bar h1,.section-bar h2{line-height:1.25}
.form-stack>div,.form-stack>fieldset{min-width:0}
.form-stack>div>label,.form-stack>fieldset>legend{line-height:1.4}
.form-stack textarea{line-height:1.5;resize:vertical}
.form-stack .field-error{margin-top:6px}
/* Predictable rhythm for compact forms in CRM, fabric catalog and settings. */
.panel .form-stack.compact{gap:15px}
.panel .form-stack.compact>div>label{margin-bottom:7px}
.toolbar.panel{align-items:flex-end;gap:14px;padding:18px 20px}
.toolbar.panel label{min-width:min(100%,155px);flex:1 1 175px;line-height:1.35}
.toolbar.panel :is(input,select){width:100%;min-width:0}
.toolbar.panel>.button{min-height:43px}
.crm-menu{row-gap:10px}
.data-table th,.data-table td{overflow-wrap:anywhere;line-height:1.5}
.data-table th{white-space:normal}
.fabric-properties{min-width:0}
.fabric-properties dt,.fabric-properties dd{min-width:0;overflow-wrap:anywhere;line-height:1.45}
.fabric-card,.fabric-photo{min-width:0;overflow-wrap:anywhere}
.fabric-photo>img,.fabric-card>img{max-width:100%}
.fabric-dialog[open],.crm-action-dialog[open],.fabric-palette-dialog[open]{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.fabric-dialog h3{font-size:18px;line-height:1.35;margin:0 0 12px}
.fabric-dialog p{margin-top:12px;line-height:1.55}
.fabric-dialog-buttons{align-items:center;gap:12px}
.fabric-palette-dialog .fabric-palette-heading{margin-bottom:20px}
.crm-action-dialog .crm-action-head{align-items:flex-start}
.crm-action-dialog [data-action-panel]>p{margin:0 0 14px;line-height:1.55}
.crm-action-dialog .form-stack>div{min-width:0}
.crm-action-buttons{flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.crm-action-dialog .field-error{line-height:1.45}
@media(max-width:620px){
 .toolbar.panel{padding:16px}
 .toolbar.panel label{flex-basis:100%}
 .toolbar.panel>.button{width:100%}
 .section-bar>.button{max-width:100%}
 .crm-menu{margin-top:-12px}
 .fabric-dialog-buttons .button{flex:1 1 120px}
}


/* v0.5.2.7 — shared approachable forms and information hierarchy. */
:root{--crm-focus:#af8737;--crm-border:#dce6e9;--crm-muted:#61788c}
main.shell{padding-top:34px}
.panel{border-color:var(--crm-border)}
.page-heading{margin-bottom:22px}
.page-heading h1{font-weight:790;letter-spacing:-.025em}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px}
.button:not(.primary):hover{filter:brightness(.97)}
.form-stack :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:10px}
.form-stack :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{box-shadow:0 0 0 3px #e9c86e36}
.form-stack :is(input:not([type=checkbox]):not([type=radio]),select,textarea):disabled{background:#f2f5f6;color:#7990a0}
.fabric-form-shell{max-width:950px;margin:0 auto;padding:28px 35px}
.crm-local-form-heading{border-bottom:1px solid #e3ebee;margin-bottom:22px;padding-bottom:22px}
.crm-local-form-heading h1{margin:7px 0}.crm-local-form-heading p{margin-top:7px}
.fabric-form-shell .form-stack{gap:19px;margin:0}
.fabric-form-shell .form-stack>div:not(.fabric-form-actions){min-width:0}
.fabric-form-shell .form-stack>div>label{display:block;margin-bottom:7px}
.fabric-form-shell .form-stack small{color:#687f90}
.fabric-form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid #e3ebee}
@media(max-width:620px){main.shell{padding-top:26px}.fabric-form-shell{padding:19px}.fabric-form-actions>.button{flex:1 1 125px}}

/* Shared actionable error dialogs (v0.6.0.3) */
.app-feedback-messages{margin:0 0 18px}
.app-feedback-messages .notice[hidden]{display:none!important}
.app-error-dialog{width:min(92vw,490px);max-height:min(90dvh,650px);padding:30px 32px;border:1px solid #e4d8d1;border-radius:18px;background:#fff;color:#25364a;box-shadow:0 24px 70px #17273d45;overflow-y:auto}
.app-error-dialog::backdrop{background:#1a2e4199}
.app-error-dialog .app-error-icon{display:grid;place-items:center;width:43px;height:43px;background:#fff0e7;color:#b34532;border:1px solid #f3d3c7;border-radius:13px;font-weight:900;font-size:24px;margin-bottom:16px}
.app-error-dialog h2{font-size:22px;line-height:1.32;margin:0 0 12px}
.app-error-dialog p{font-size:15px;line-height:1.65;color:#566a7a;margin:0 0 18px;white-space:pre-line;overflow-wrap:anywhere}
.app-error-dialog ul{padding-left:21px;margin:0 0 20px;color:#53677a;line-height:1.6}
.app-error-dialog li+li{margin-top:7px}
.app-error-dialog [hidden]{display:none!important}
.app-error-buttons{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:550px){.app-error-dialog{padding:23px 21px}.app-error-buttons>.button{flex:1;text-align:center;justify-content:center}}

/* v0.6.0.3 — edit stock locations and stock per fabric without admin */
.fabric-stock-settings-grid{display:grid;grid-template-columns:minmax(270px,360px) minmax(0,1fr);gap:20px;align-items:start}
.fabric-stock-settings-panel{padding:25px 29px;min-width:0}
.fabric-stock-settings-panel h2{margin:0 0 8px;font-size:21px}
.fabric-stock-settings-panel .form-stack{margin-top:20px}
.fabric-stock-settings-panel .form-stack .button{justify-self:start}
.fabric-stock-place-form{padding:17px 0;border-top:1px solid #e6ebf0}
.fabric-stock-place-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:12px}
.fabric-stock-place-top strong{font-size:15px;overflow-wrap:anywhere}
.fabric-stock-place-controls{display:grid;grid-template-columns:minmax(150px,2fr) minmax(90px,110px) minmax(140px,1fr) auto;align-items:end;gap:12px}
.fabric-stock-place-controls>label{display:grid;gap:6px;font-size:12px;font-weight:650;color:#536679}
.fabric-stock-place-controls .field-control{width:100%;min-width:0}
.fabric-stock-place-controls .fabric-stock-place-active{display:flex;align-items:center;gap:8px;min-height:42px;font-size:13px;color:#354b5f}
.fabric-stock-state{display:inline-flex;border-radius:999px;background:#f0f2f5;color:#6b7480;padding:5px 10px;font-size:11px;font-weight:750}
.fabric-stock-state.is-active{background:#f8edcf;color:#76550c}
.fabric-stock-count{background:#f7f1e3;color:#6d561f;font-weight:800;padding:7px 10px;border-radius:10px}
.fabric-stock-history-note{margin-top:16px;font-size:12px}
.fabric-stock-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;scroll-margin-top:18px}
.fabric-stock-heading h3{margin:12px 0}
.fabric-stock-inline-form{display:grid;grid-template-columns:minmax(100px,1fr) minmax(125px,1.2fr) auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #ecf0f4}
.fabric-stock-inline-form label{font-size:13px;font-weight:650;color:#35465b;overflow-wrap:anywhere}
.fabric-stock-inline-form :is(select,.button){min-height:40px}
.fabric-stock-readonly{grid-column:2/-1;font-size:13px}
.fabric-stock-empty{grid-column:1/-1;display:grid;gap:13px;justify-items:start;padding:20px 23px;border:1px dashed #d7dfe6;background:#fafbfc;border-radius:12px;margin:12px 0}
.fabric-stock-empty p{margin:0;color:#596c7d}
@media(max-width:1040px){.fabric-stock-settings-grid{grid-template-columns:1fr}.fabric-stock-settings-panel{padding:22px 24px}}
@media(max-width:700px){.fabric-stock-place-controls{grid-template-columns:minmax(0,1fr) minmax(85px,110px)}.fabric-stock-place-controls .fabric-stock-place-active{grid-column:1}.fabric-stock-inline-form{grid-template-columns:1fr auto}.fabric-stock-inline-form label{grid-column:1/-1}.fabric-stock-settings-panel{padding:19px}.fabric-stock-inline-form .button{min-width:102px}}

/* v0.6.0.4 — clear heading hierarchy for all blocking error dialogs. */
.app-error-dialog .app-error-heading{display:flex;align-items:center;gap:13px;margin:0 0 17px}
.app-error-dialog .app-error-heading .app-error-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;margin:0;border-radius:12px;background:#fff0e9;border:1px solid #f0d0c4;color:#a54d3a}
.app-error-dialog .app-error-heading .app-error-icon svg{display:block;width:23px;height:23px}
.app-error-dialog .app-error-heading h2{font-size:21px;line-height:1.35;margin:0;font-weight:760;min-width:0;overflow-wrap:anywhere}
.app-error-dialog>.app-error-buttons{align-items:center}
@media(max-width:540px){.app-error-dialog .app-error-heading{align-items:flex-start;gap:11px}.app-error-dialog .app-error-heading h2{font-size:19px}}

/* v0.6.0.6: consistent fabric filters and image picker across the CRM */
.pm-fabric-filters{display:grid;grid-template-columns:minmax(210px,2fr) repeat(2,minmax(160px,1fr));gap:12px;margin:14px 0 18px;align-items:end}
.pm-fabric-filters>div{min-width:0}.pm-fabric-filters label{display:block;font-size:12px;font-weight:720;margin:0 0 7px;color:#33465c}
.pm-fabric-filters :is(input,select){width:100%;max-width:100%;min-width:0;border:1px solid #cbd6e1;border-radius:10px;min-height:44px;padding:9px 12px;background:#fff;color:#25364c;font:inherit;font-size:14px}
.pm-fabric-filters :is(input,select):focus-visible{outline:2px solid #c7a64e;outline-offset:1px}
[data-catalog-fabric][hidden]{display:none!important}
.pm-fabric-empty{padding:20px;text-align:center;color:#65758a}
.pm-fabric-picker-dialog{width:min(960px,94vw);max-height:90dvh;border:1px solid #dbe3ec;border-radius:18px;box-shadow:0 28px 80px #112b4361;color:#21344b;padding:24px;overflow:auto}
.pm-fabric-picker-dialog::backdrop{background:#17294196}
.pm-fabric-picker-head,.pm-fabric-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pm-fabric-picker-head h2{margin:0;font-size:22px}.pm-fabric-picker-head p{margin:6px 0 0;color:#718197}
.pm-fabric-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:56dvh;overflow-y:auto;padding:4px}
.pm-fabric-picker-card{display:flex;flex-direction:column;text-align:left;gap:5px;border:1px solid #d9e2eb;border-radius:12px;padding:10px;background:#fff;cursor:pointer;color:#273748;min-width:0;font:inherit}
.pm-fabric-picker-card:hover,.pm-fabric-picker-card:focus-visible{border-color:#bc9650;background:#fffcf2;outline:none}
.pm-fabric-picker-card[aria-pressed=true]{outline:2px solid #b58c31;background:#fff9e8}
.pm-fabric-picker-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px}
.pm-fabric-picker-card strong{font-size:13px;overflow-wrap:anywhere}.pm-fabric-picker-card small{color:#728195;font-size:12px;overflow-wrap:anywhere}
.pm-fabric-picker-foot{margin-top:16px;padding-top:14px;border-top:1px solid #edf1f5}
.crm-fabric-picker-control{display:grid;gap:10px;min-width:0}
.crm-fabric-picker-control .crm-fabric-native-select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.crm-fabric-choice{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #d4dfe9;border-radius:11px;min-height:58px;background:#fff}
.crm-fabric-choice img{width:45px;height:45px;object-fit:cover;border-radius:7px;flex:none}.crm-fabric-choice strong{font-size:13px}.crm-fabric-choice span{font-size:13px;color:#66778a;overflow-wrap:anywhere}
.crm-fabric-choice-actions{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:800px){.pm-fabric-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-fabric-filter-search{grid-column:1/-1}.pm-fabric-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.pm-fabric-filters{grid-template-columns:1fr}.pm-fabric-filter-search{grid-column:auto}.pm-fabric-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-fabric-picker-dialog{padding:14px}}