/* Shared components: all visual values use the design-system tokens. */
.family-workspace-heading,.family-workspace-actions,.family-tile-heading,.family-tile-footer,.family-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.family-workspace-heading{align-items:flex-start;margin-bottom:var(--space-3)}
.family-workspace-heading h2{margin:0;font-size:var(--font-h3)}
.family-workspace-heading p,.family-dialog-heading p{margin:6px 0 0;color:var(--color-text-secondary);font-size:var(--font-sm)}
.family-workspace-actions{justify-content:flex-end;flex-wrap:wrap;flex-shrink:0}
.family-crm-status{color:var(--color-text-secondary);font-size:var(--font-xs);line-height:1.6;margin:0 0 var(--space-4)}
.family-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.family-tile{min-width:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-4);cursor:pointer;transition:border-color var(--duration-hover);box-shadow:var(--shadow-card)}
.family-tile:hover{border-color:var(--color-green)}
.family-tile:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.family-tile h2{font-size:var(--font-lg);line-height:1.5;margin:var(--space-3) 0 var(--space-2);overflow-wrap:anywhere}
.family-tile-meta{font-size:var(--font-xs);color:var(--color-text-secondary);line-height:1.5;margin:0 0 var(--space-3);overflow-wrap:anywhere}
.family-tile-kind,.family-tile-source{font-size:var(--font-xs);color:var(--color-text-secondary)}
.family-tile-source{color:var(--color-green-hover);background:var(--color-light-green);border-radius:var(--radius-sm);padding:3px 7px}
.family-stock-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0;padding:var(--space-3) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.family-stock-numbers dt{font-size:var(--font-xs);color:var(--color-text-secondary);line-height:1.5}
.family-stock-numbers dd{margin:5px 0 0;font-size:var(--font-h3);font-weight:650;color:var(--color-text);overflow-wrap:anywhere}
.family-tile-children{display:grid;gap:var(--space-2);font-size:var(--font-xs);color:var(--color-text-secondary);line-height:1.6}
.family-tile-children>div{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline}
.family-tile-children>div>span{min-width:0;overflow-wrap:anywhere}
.family-tile-children strong{white-space:nowrap;color:var(--color-text)}
.family-tile-footer{margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-3)}
.family-tile-footer small{font-size:var(--font-xs);color:var(--color-text-secondary)}
.family-tile-footer button{font-size:var(--font-xs);color:var(--color-green);background:var(--color-surface);border:1px solid var(--color-border)}
dialog.family-dialog{width:min(960px,calc(100vw - 40px));max-width:960px;max-height:90dvh;padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:auto;color:var(--color-text);background:var(--color-surface)}
dialog.family-create-dialog{width:min(800px,calc(100vw - 40px))}
.family-dialog::backdrop{background:var(--color-backdrop)}
.family-dialog-heading{align-items:flex-start;margin-bottom:var(--space-4)}
.family-dialog-heading h2{font-size:var(--font-h3);margin:0;line-height:1.5}
.family-dialog-heading>button{flex-shrink:0}
.family-dialog .family-detail-section{margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-4)}
.family-dialog .family-detail-section>summary{font-weight:550;cursor:pointer}
.family-dialog .filters{margin-top:var(--space-3)}
.family-dialog p{font-size:var(--font-sm);line-height:1.6}
.family-dialog td{vertical-align:top}
.stock-family-workspace .stock-negative{color:var(--color-danger-text)}
@media(min-width:1400px){.family-tile-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
@media(max-width:760px){.family-workspace-heading{flex-direction:column}.family-workspace-actions{width:100%;justify-content:flex-end}.family-tile-grid{grid-template-columns:1fr}dialog.family-dialog{width:calc(100vw - 24px);max-height:94dvh;padding:var(--space-4)}.family-dialog-heading{flex-wrap:wrap}.family-stock-numbers dd{font-size:var(--font-lg)}}
/* Product choice uses a full form row to keep widths, density and SKU legible. */
.filters .product-picker{flex:1 1 100%;grid-column:1 / -1;min-width:0;width:100%;display:grid;gap:var(--space-2);align-self:start}
.product-picker>label{font-size:var(--font-sm);font-weight:550;color:var(--color-text)}
.product-picker-control{display:flex;gap:var(--space-2);min-width:0;align-items:center}
.product-picker-control>input{flex:1;min-width:0;width:100%;min-height:44px}
.product-picker-control>button{flex-shrink:0;background:var(--color-surface);color:var(--color-text-secondary)}
.product-picker>small{font-size:var(--font-xs);color:var(--color-text-secondary);line-height:1.5}
.product-picker-selected{border-left:3px solid var(--color-green);padding:var(--space-3);background:var(--color-light-green);font-size:var(--font-sm);overflow-wrap:anywhere}
.product-picker-selected>strong,.product-picker-selected>span{display:block;line-height:1.6}
.product-picker-selected>span{color:var(--color-text-secondary);font-size:var(--font-xs)}
.product-picker-menu{border:1px solid var(--color-border-strong);border-radius:var(--radius-input);background:var(--color-surface);overflow:hidden}
.product-picker-count{padding:var(--space-3);font-size:var(--font-xs);color:var(--color-text-secondary);background:var(--color-surface-secondary)}
.product-picker-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.product-picker-option{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);cursor:pointer;color:var(--color-text);font-size:var(--font-sm);overflow-wrap:anywhere}
.product-picker-option>strong,.product-picker-option>span,.product-picker-option>small{display:block;line-height:1.6}
.product-picker-option>span{font-size:var(--font-xs);color:var(--color-text-secondary)}
.product-picker-option>small{color:var(--color-warning-text)}
.product-picker-option>.product-picker-related{color:var(--color-green-hover);font-weight:550}
.product-picker-option:hover,.product-picker-option[aria-selected=true]{background:var(--color-light-green);box-shadow:inset 3px 0 var(--color-green)}
.product-picker-menu>button{margin:var(--space-3);background:var(--color-surface);color:var(--color-green)}
.product-picker [hidden]{display:none!important}
@media(max-width:600px){.product-picker-control{flex-wrap:wrap}.product-picker-control>input{font-size:16px}.product-picker-list{max-height:260px}.product-picker-option{padding:var(--space-3)}}
.ui-icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle;stroke-width:1.75}.ui-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-5);box-shadow:var(--shadow-card);min-width:0}.ui-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.ui-card-heading h2{font-size:var(--font-h3);line-height:1.4;margin:0;font-weight:650;letter-spacing:-.35px}.ui-card-heading p{font-size:var(--font-xs);margin:6px 0 0;max-width:72ch}.ui-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-5)}.ui-kpi{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-card);min-width:0}.ui-kpi-icon{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;background:var(--color-light-green);color:var(--color-green);border-radius:var(--radius-card)}.ui-kpi-icon .ui-icon{height:26px;width:26px}.ui-kpi-content{min-width:0}.ui-kpi h3{font-size:var(--font-sm);font-weight:500;margin:0 0 var(--space-2);line-height:1.4;color:var(--color-text)}.ui-kpi strong{font-size:clamp(22px,2vw,34px);font-weight:700;letter-spacing:-.7px;line-height:1.2;font-variant-numeric:tabular-nums;display:block;overflow-wrap:anywhere}.ui-kpi p{font-size:var(--font-xs);line-height:1.5;margin:var(--space-2) 0 0;color:var(--color-text-secondary)}.ui-kpi.ui-tone-warning .ui-kpi-icon{background:var(--color-warning-bg);color:var(--color-warning-text)}.ui-kpi.ui-tone-danger .ui-kpi-icon{background:var(--color-danger-bg);color:var(--color-danger-text)}.ui-kpi.ui-tone-info .ui-kpi-icon{background:var(--color-info-bg);color:var(--color-info-text)}
.ui-status{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 8px;font-size:var(--font-xs);line-height:1.4;border-radius:var(--radius-sm);color:var(--color-text-secondary);background:var(--color-neutral-bg);font-weight:500;white-space:normal}.ui-status .ui-icon{width:13px;height:13px}.ui-status.ui-tone-green,.ui-status.ui-tone-success{color:var(--color-green-hover);background:var(--color-light-green)}.ui-status.ui-tone-danger{color:var(--color-danger-text);background:var(--color-danger-bg)}.ui-status.ui-tone-warning{color:var(--color-warning-text);background:var(--color-warning-bg)}.ui-status.ui-tone-orange{color:var(--color-orange-text);background:var(--color-orange-bg)}.ui-status.ui-tone-info{color:var(--color-info-text);background:var(--color-info-bg)}
.ui-product-cell{display:flex;gap:10px;align-items:center;min-width:170px}.ui-product-cell>img,.ui-product-placeholder{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);object-fit:contain;padding:2px}.ui-product-placeholder{color:var(--color-muted);background:var(--color-surface-secondary)}.ui-product-cell>span:last-child{min-width:0}.ui-product-cell strong,.ui-product-cell a{display:block;color:var(--color-text);font-weight:550;font-size:var(--font-sm);line-height:1.4;text-decoration:none}.ui-product-cell a:hover{color:var(--color-green);text-decoration:underline}.ui-product-cell small,.ui-supplier-cell small{display:block;color:var(--color-text-secondary);font-size:var(--font-xs);line-height:1.5;margin-top:4px;overflow-wrap:anywhere}.ui-supplier-cell strong{font-size:var(--font-sm);font-weight:550}.ui-table-wrap table{font-size:var(--font-sm)}.ui-table-wrap th{font-size:var(--font-xs)}.ui-table-wrap td{padding:12px;vertical-align:middle}.ui-table-wrap td:has(.ui-product-cell){min-width:230px}.ui-empty{padding:32px 18px;text-align:center;color:var(--color-text-secondary)}.ui-empty>.ui-icon{width:32px;height:32px;color:var(--color-muted);margin-bottom:12px}.ui-empty h3{font-size:var(--font-h3);margin:0}.ui-empty p{max-width:60ch;margin:8px auto 16px}.ui-error{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--color-border);border-left:3px solid var(--color-critical);padding:20px;background:var(--color-surface);border-radius:var(--radius-card)}.ui-error>.ui-icon{color:var(--color-critical);margin-top:3px}.ui-error h3{font-size:var(--font-h3)}.ui-error p{max-width:70ch}.ui-filter{display:grid;gap:6px;font-size:var(--font-xs);color:var(--color-text-secondary)}.ui-date-range{display:flex;gap:var(--space-3)}.ui-date-range>label{display:grid;gap:6px;font-size:var(--font-xs)}.ui-facts{display:flex;gap:24px;flex-wrap:wrap}.ui-facts dt{font-size:var(--font-xs);color:var(--color-text-secondary)}.ui-facts dd{margin:5px 0 0;font-variant-numeric:tabular-nums}.ui-alert-row{display:flex;align-items:center;gap:var(--space-4);padding:16px 0;border-bottom:1px solid var(--color-border)}.ui-alert-row p{flex:1;margin:0}.ui-alert-row>a{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:var(--font-sm)}.ui-recommendation>strong{font-size:var(--font-kpi)}.ui-recommendation ul{font-size:var(--font-sm);line-height:1.8;padding-left:18px;color:var(--color-text-secondary)}
.ui-dropdown,.ui-column-settings{position:relative;margin:0}.ui-dropdown>summary,.ui-column-settings>summary{display:flex;align-items:center;gap:var(--space-2);padding:8px 10px;list-style:none;border-radius:var(--radius-input);font-size:var(--font-sm)}.ui-dropdown>summary::-webkit-details-marker,.ui-column-settings>summary::-webkit-details-marker{display:none}.ui-dropdown nav,.ui-column-settings>div{position:absolute;right:0;top:100%;min-width:230px;z-index:var(--z-dropdown);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:8px}.ui-dropdown nav>a{display:block;color:var(--color-text);padding:10px 12px;font-size:var(--font-sm);text-decoration:none;border-radius:var(--radius-sm)}.ui-dropdown nav>a:hover{background:var(--color-light-green)}.ui-column-settings label{display:flex;gap:8px;align-items:center;min-height:34px;font-size:var(--font-sm);padding:4px}.ui-column-settings input{width:16px;min-height:16px}.ui-drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(500px,100vw);border-radius:0}.ui-tooltip-wrap{position:relative;display:inline-flex}.ui-tooltip-wrap>[role=tooltip]{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:12px;max-width:300px;width:max-content;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-input);box-shadow:var(--shadow-menu);font-size:var(--font-xs);z-index:var(--z-dropdown);display:none}.ui-tooltip-wrap:hover>[role=tooltip],.ui-tooltip-wrap:focus-within>[role=tooltip]{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ui-skeleton{display:block;background:var(--color-skeleton);border-radius:var(--radius-sm)}.skeleton-label{height:16px;width:55%;margin-bottom:16px}.skeleton-value{height:32px;width:74%;margin-bottom:14px}.skeleton-note{height:12px;width:85%}.skeleton-chart{height:240px;margin-top:18px}.skeleton-row{height:42px;margin-top:12px}.ui-loading{min-height:360px}.ui-loading>.ui-card{margin-top:20px}
@media(max-width:1400px){.ui-kpi{gap:10px;padding:14px}.ui-kpi-icon{width:36px;height:36px;flex-basis:36px}.ui-kpi-icon .ui-icon{width:24px;height:24px}.ui-kpi strong{font-size:26px}}
@media(max-width:980px){.ui-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-kpi{padding:18px}.ui-card-heading{flex-wrap:wrap}}
@media(max-width:600px){.ui-kpi-grid{gap:10px}.ui-kpi{display:block;padding:15px 12px}.ui-kpi-icon{width:32px;height:32px;margin-bottom:10px;border-radius:8px}.ui-kpi-icon .ui-icon{width:20px;height:20px}.ui-kpi h3{font-size:12px;min-height:32px}.ui-kpi strong{font-size:23px}.ui-kpi p{font-size:12px}.ui-card{padding:16px}.ui-alert-row{flex-wrap:wrap}.ui-alert-row p{flex-basis:100%}.ui-alert-row>a{margin-left:auto}.ui-card-heading h2{font-size:18px}.ui-date-range{max-width:100%}.ui-date-range>label{min-width:0;flex:1}.ui-product-cell{min-width:190px}}

.delete-action{color:var(--color-danger,#a32e27)}
.family-tile-footer{flex-wrap:wrap;gap:8px}
.family-tile-footer .delete-action{color:var(--color-danger,#a32e27)}