.measurements-page,.measurement-editor { min-width: 0; padding-top: 14px; color: #17232e; }
.measurement-customer-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; font-size: 13px; }
.measurement-filters { display: grid; grid-template-columns: minmax(240px,2fr) repeat(4,minmax(105px,1fr)) auto; align-items: end; gap: 16px; padding: 14px; border: 1px solid #e4e7eb; border-radius: 5px; background: #fff; }
.measurement-filters label { display: grid; gap: 7px; font-size: 12px; color: #485b72; }
.measurement-filters select,.measurement-list select { min-width: 0; border: 1px solid #dee1e6; border-radius: 4px; height: 38px; padding: 8px; background: white; color: #17232e; font-size: 12px; }
.measurement-filter-button,.measurement-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 16px; border: 1px solid #a57a03; border-radius: 4px; background: #b38a2b; color: #101617; font-size: 12px; font-weight: 600; }
.measurement-filter-button { background: #400128; border-color: #400128; color: white; }
.measurement-primary svg,.measurement-filter-button svg { width: 17px; height: 17px; }
.measurement-toolbar { display: flex; gap: 16px; align-items: center; border-bottom: 1px solid #e4e7eb; margin: 12px 0 16px; }
.measurement-tabs { display: flex; min-width: 0; overflow-x: auto; }
.measurement-tabs button,.measurement-editor-tabs button { flex-shrink: 0; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-size: 12px; padding: 16px 14px; white-space: nowrap; color: #4b5c70; }
.measurement-tabs button[aria-selected=true],.measurement-editor-tabs button[aria-selected=true] { color: #262626; border-bottom-color: #a57a03; font-weight: 700; }
.measurement-commands { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.measurement-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 0 0 16px; }
.measurement-metric { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid #e4e7eb; border-radius: 6px; background: #fff; }
.measurement-metric > svg { width: 44px; height: 44px; padding: 9px; background: #f6efde; color: #a57a03; border-radius: 6px; flex-shrink: 0; }
.measurement-metric:nth-child(2) > svg { color: #087943; background: #e7f5eb; }
.measurement-metric strong { display: block; font-size: 22px; margin-top: 3px; }.measurement-metric span,.measurement-metric small { font-size: 12px; }.measurement-metric small { display: block; color: #697582; margin-top: 5px; }
.measurement-list-layout { display: grid; grid-template-columns: minmax(0,2.4fr) minmax(260px,1fr); gap: 16px; align-items: start; }
.measurement-panel { min-width: 0; border: 1px solid #e4e7eb; border-radius: 6px; background: #fff; padding: 16px; }
.measurement-panel h2 { font: 600 17px Georgia,serif; margin: 0; display: flex; align-items: center; gap: 9px; }.measurement-panel h2 svg { width: 18px; height: 18px; color: #a57a03; flex-shrink: 0; }.measurement-panel h2 small { font: 400 11px Arial,sans-serif; color: #536b84; }
.measurement-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }.measurement-list header label { display: flex; align-items: center; gap: 7px; font-size: 11px; }.measurement-list select { height: 30px; padding: 4px 7px; }
.measurement-table-scroll { overflow-x: auto; min-width: 0; padding-bottom: 16px; }.measurement-table { border-collapse: collapse; width: 100%; min-width: 840px; }.measurement-table td,.measurement-table th { text-align: left; font-size: 11px; padding: 11px 8px; border-bottom: 1px solid #edf0f2; vertical-align: middle; }.measurement-table th { background: #f4f5f7; font-size: 10px; }.measurement-table th button { display: flex; align-items: center; gap: 5px; border: 0; padding: 0; background: none; font: inherit; color: inherit; }.measurement-table th svg { width: 11px; height: 11px; flex-shrink: 0; }.measurement-table td::before { display: none; }
.measurement-link { background: none; border: 0; padding: 0; font-size: inherit; color: #775316; text-align: left; }.measurement-link:hover { text-decoration: underline; }.measurement-table td:nth-child(2) { max-width: 180px; overflow-wrap: anywhere; }.measurement-table td:nth-child(3) { max-width: 150px; overflow-wrap: anywhere; }
.measurement-badge { display: inline-block; padding: 4px 9px; border-radius: 4px; font-size: 10px; white-space: nowrap; }.measurement-badge.active { background: #e3f5e9; color: #087943; }.measurement-badge.draft { background: #fff0d6; color: #976415; }.measurement-badge.standard { background: #e7edf4; color: #3f566e; }.measurement-badge.archived { background: #f7e2ea; color: #400128; }
.record-menu { position: relative; }.record-menu summary { list-style: none; cursor: pointer; }.record-menu summary::-webkit-details-marker { display: none; }.record-menu summary svg { width: 18px; height: 18px; }.record-menu > div { position: absolute; top: calc(100% + 4px); right: 0; min-width: 175px; z-index: 30; padding: 4px; background: #fff; border: 1px solid #dee1e6; border-radius: 4px; box-shadow: 0 6px 20px #10161722; }.record-menu > div button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 8px; font-size: 12px; border: 0; background: none; color: #17232e; white-space: nowrap; }.record-menu > div button:hover { background: #f4f5f7; }.record-menu button svg { width: 16px; height: 16px; flex-shrink: 0; }.measurement-row-menu summary { padding: 4px; }.measurement-export summary { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 9px 11px; border: 1px solid #dee1e6; border-radius: 4px; }
.measurement-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 8px 0; font-size: 11px; }.measurement-pagination > div { display: flex; align-items: center; gap: 12px; }.measurement-pagination button { display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 1px solid #dee1e6; border-radius: 4px; background: white; }.measurement-pagination svg { width: 16px; height: 16px; }
.measurement-sidebar { display: grid; gap: 14px; }.measurement-chart { height: 190px; max-width: 220px; margin: 18px auto 12px; }.measurement-legend { list-style: none; padding: 0; margin: 0; }.measurement-legend li { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 7px 0; }.measurement-legend i { width: 9px; height: 9px; border-radius: 50%; }.measurement-legend strong { margin-left: auto; }
.measurement-recent { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; width: 100%; border: 0; border-bottom: 1px solid #edf0f2; border-radius: 0; background: none; padding: 10px 0; text-align: left; font-size: 11px; }.measurement-recent strong { overflow-wrap: anywhere; }.measurement-recent > span:not(.measurement-badge) { color: #687582; grid-column: 1; }.measurement-recent .measurement-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.measurement-muted,.measurement-empty { font-size: 12px; color: #697582; }.measurement-empty { padding: 40px 10px !important; text-align: center !important; }
.measurement-editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; }.measurement-editor-heading h1 { font: 600 24px Arial,sans-serif; margin: 0; overflow-wrap: anywhere; }.measurement-editor-heading > div { display: flex; gap: 10px; flex-shrink: 0; }.measurement-editor-heading .ghost { min-height: 38px; font-size: 12px; }
.measurement-editor-layout { display: grid; grid-template-columns: minmax(0,2.5fr) minmax(255px,1fr); gap: 16px; align-items: start; }.measurement-editor-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid #edf0f2; margin: -8px 0 18px; }.measurement-editor-tabs button { padding: 13px 14px; }.measurement-fields { border: 0; padding: 0; margin: 0; min-width: 0; }.measurement-editor [hidden] { display: none !important; }
.measurement-basic-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.measurement-fields label { font-size: 12px; color: #485b72; }.measurement-basic-fields label { display: grid; gap: 7px; }.measurement-fields input:not([type=search]):not([type=file]),.measurement-fields select,.measurement-fields textarea { border: 1px solid #dce2e9; border-radius: 4px; padding: 8px; background: #fff; width: 100%; min-width: 0; color: #17232e; font-size: 12px; }.measurement-fields input:focus-visible,.measurement-fields select:focus-visible,.measurement-fields textarea:focus-visible { outline: 2px solid #a57a03; outline-offset: 2px; }.measurement-fields .search-control input:focus-visible { outline: none; }.measurement-fields textarea { display: block; margin-top: 8px; resize: vertical; }
.measurement-values-layout { display: grid; grid-template-columns: 165px minmax(0,1fr); gap: 16px; }.measurement-garments { display: flex; flex-direction: column; gap: 6px; padding-right: 10px; border-right: 1px solid #edf0f2; }.measurement-garments button { display: flex; gap: 9px; align-items: center; text-align: left; border: 1px solid transparent; border-radius: 4px; background: #f3f5f7; padding: 12px 8px; font-size: 11px; color: #33455a; }.measurement-garments button[aria-pressed=true] { background: #f5e7c8; border-color: #ddbc71; color: #262626; }.measurement-garments svg { width: 20px; height: 20px; flex-shrink: 0; }.measurement-values > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; }.measurement-values h2 { font: 600 14px Arial,sans-serif; }
.measurement-unit { display: flex; gap: 0; align-items: center; font-size: 11px; }.measurement-unit span { padding-right: 7px; }.measurement-unit button { min-width: 47px; border: 1px solid #dee1e6; border-radius: 3px; background: white; padding: 5px 7px; font-size: 11px; }.measurement-unit button[aria-pressed=true] { background: #b38a2b; border-color: #b38a2b; color: #fff; }
.measurement-point-group { margin-bottom: 18px; }.measurement-point-group h3,.measurement-additional h3 { margin: 0 0 10px; padding: 7px 9px; background: #f0f4f7; border-radius: 3px; font-size: 12px; }.measurement-point-group > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; }.measurement-point { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(55px,1fr); gap: 7px; align-items: center; }.measurement-point span { font-size: 11px; overflow-wrap: anywhere; }.measurement-fields .measurement-point input { height: 30px; padding: 5px 7px; }.measurement-point:has(button) { grid-template-columns: minmax(0,1fr) minmax(55px,1fr) 22px; }.measurement-point button { width: 22px; height: 24px; padding: 3px; border: 0; background: none; }.measurement-point svg { width: 15px; height: 15px; }
.measurement-additional > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.measurement-additional label { display: grid; gap: 6px; font-size: 10px; }.measurement-custom-add { display: flex; gap: 10px; margin-top: 20px; }.measurement-custom-add button { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11px; }.measurement-custom-add svg { width: 16px; height: 16px; }
.measurement-guide h3 { font-size: 14px; margin: 18px 0 12px; }.measurement-guide > img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: #fff; }.measurement-guide ol { padding-left: 20px; font-size: 11px; }.measurement-guide li { margin: 9px 0; }.measurement-guide li::marker { color: #a57a03; font-weight: 700; }.measurement-guide li span { display: block; color: #657381; margin-top: 3px; line-height: 1.45; }
.measurement-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.measurement-photos figure { margin: 0; }.measurement-photos img { width: 100%; max-height: 300px; object-fit: contain; background: #f4f5f7; }.measurement-photo-input { display: grid; gap: 10px; margin-top: 20px; }.measurement-history details { border-bottom: 1px solid #e4e7eb; padding: 12px 0; }.measurement-history summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 12px; }.measurement-history summary span { color: #687582; font-size: 11px; }.measurement-history dl { display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; gap: 8px; }.measurement-history dd { margin: 0; }.measurement-history p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
@media(max-width:1200px) { .measurement-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }.measurement-list-layout { grid-template-columns: minmax(0,1fr); }.measurement-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }.measurement-point-group > div { grid-template-columns: minmax(0,1fr); }.measurement-editor-layout { grid-template-columns: minmax(0,1fr) 270px; } }
@media(max-width:800px) { .measurement-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }.measurement-toolbar { flex-wrap: wrap; padding-bottom: 10px; }.measurement-tabs { width: 100%; }.measurement-editor-layout { grid-template-columns: minmax(0,1fr); }.measurement-guide > img { max-height: 400px; }.measurement-guide ol { columns: 2; }.measurement-point-group > div { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .measurement-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 10px; }.measurement-filters > label:first-child { grid-column: 1 / -1; }.measurement-filter-button { min-height: 38px; }.measurement-metric { padding: 12px; gap: 8px; }.measurement-metric > svg { width: 34px; height: 34px; padding: 7px; }.measurement-metric span { font-size: 11px; }.measurement-metric strong { font-size: 20px; }.measurement-sidebar { grid-template-columns: minmax(0,1fr); }.measurement-panel { padding: 12px; }.measurement-commands { flex-wrap: wrap; }.measurement-editor-heading { flex-wrap: wrap; }.measurement-editor-heading h1 { font-size: 21px; }.measurement-editor-heading > div { width: 100%; justify-content: flex-end; }.measurement-basic-fields { grid-template-columns: minmax(0,1fr); }.measurement-values-layout { grid-template-columns: minmax(0,1fr); }.measurement-garments { flex-direction: row; overflow-x: auto; border-right: 0; padding: 0 0 10px; }.measurement-garments button { min-width: 130px; }.measurement-point-group > div { grid-template-columns: minmax(0,1fr); }.measurement-additional > div { grid-template-columns: repeat(2,minmax(0,1fr)); }.measurement-custom-add { flex-wrap: wrap; }.measurement-custom-add button { margin-left: auto; }.measurement-guide ol { columns: 1; }.measurement-fields input:not([type=file]),.measurement-fields select,.measurement-fields textarea { font-size: 16px; }.measurement-pagination { flex-wrap: wrap; }.measurement-photos { grid-template-columns: minmax(0,1fr); } }
.measurement-live-diagram { display:block; width:100%; height:auto; aspect-ratio:4 / 5; background:#fff; }
.guide-mark { cursor:pointer; }
.measurement-guide-legend { display:flex; flex-wrap:wrap; gap:8px 12px; margin:10px 0; font-size:11px; }
.measurement-guide-legend span::before { content:""; display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; background:var(--guide-color); }
[data-state="expected"] { --guide-color:#899399; }
[data-state="editing"] { --guide-color:#1769aa; }
[data-state="complete"] { --guide-color:#15803d; }
[data-state="invalid"] { --guide-color:#b42335; }
#measurement-guide-status { font-size:12px; min-height:36px; margin:8px 0; color:#34454d; }
.measurement-guide ol.measurement-guide-points { list-style:none; padding:0; counter-reset:none; }
.measurement-guide-points li::before { display:none; }
.measurement-guide-points li { display:block; padding:0; margin:8px 0; }
.measurement-guide-points button { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:7px; width:100%; background:transparent; border:0; padding:5px 0; text-align:left; color:#263238; font-size:12px; cursor:pointer; }
.measurement-guide-points button > span { display:inline-block; margin:0; background:var(--guide-color); color:white; border-radius:50%; text-align:center; width:20px; height:20px; line-height:20px; font-size:11px; }
.measurement-guide-points button small { font-size:11px; font-weight:400; }
.measurement-guide-points li p { margin:0 0 0 29px; font-size:11px; color:#67757b; }
.measurement-point-error { grid-column:1 / -1; color:#b42335; font-size:11px; line-height:1.4; }
.measurement-point input[aria-invalid="true"] { border-color:#b42335; background:#fff6f6; }
.measurement-point input:focus { outline:2px solid #1769aa; outline-offset:1px; }
.measurement-point input[aria-invalid="true"]:focus { outline-color:#b42335; }
.measurement-custom-add { flex-wrap:wrap; }
.measurement-custom-add select { min-width:0; max-width:100%; }
.measurement-policy-table input { width:100%; min-width:72px; max-width:110px; padding:7px; border:1px solid #dce1e5; border-radius:4px; }
@media(max-width:800px) { .measurement-guide { max-width:440px; width:100%; justify-self:center; } }
.measurement-mobile-guide { display:none; }
@media(min-width:801px) { .measurement-editor .measurement-guide { position:sticky; top:76px; max-height:calc(100dvh - 92px); overflow-y:auto; } }
@media(max-width:800px) { .measurement-mobile-guide { display:block; margin-bottom:12px; border-bottom:1px solid #e4e7eb; padding:8px 0; }.measurement-mobile-guide summary { display:flex; align-items:center; gap:8px; color:#775612; cursor:pointer; font-size:13px; }.measurement-mobile-guide summary svg { width:17px; height:17px; }.measurement-mobile-guide .measurement-live-diagram { max-height:240px; width:192px; margin:8px auto; }.measurement-guide-points li { break-inside:avoid; } }
.measurement-table td > small.measurement-muted { display:block; margin-top:3px; }