/*
 * Magenta Furniture — Canonical UI Rebuild
 * One presentation layer. Business logic and workflow are untouched.
 */
:root{
  --mf-bg:#f5f0e8; --mf-surface:#fffdf9; --mf-surface-2:#faf6ef;
  --mf-navy:#102943; --mf-navy-2:#183554; --mf-navy-3:#234461;
  --mf-pink:#c51f78; --mf-pink-dark:#9e155f; --mf-pink-soft:#f9e6f0;
  --mf-text:#25364a; --mf-muted:#657287; --mf-subtle:#6b7787;
  --mf-border:#e6ddd2; --mf-border-strong:#d8cbbb;
  --mf-success:#347657; --mf-success-soft:#e8f4ed;
  --mf-warning:#9a6a18; --mf-warning-soft:#fbf1dc;
  --mf-danger:#ad4149; --mf-danger-soft:#f9e8e9;
  --mf-info:#376b9d; --mf-info-soft:#eaf2f9;
  --mf-radius-sm:8px; --mf-radius-md:12px; --mf-radius-lg:16px;
  --mf-shadow-sm:0 2px 10px rgba(34,42,52,.06);
  --mf-shadow:0 18px 50px rgba(34,42,52,.10);
  --mf-sidebar:276px; --mf-content-max:1680px;
  --mf-page-gap:18px; --mf-surface-gap:12px;
  --mf-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--mf-bg)}
body{margin:0;min-height:100%;font-family:var(--mf-font);font-size:14px;line-height:1.5;color:var(--mf-text);background:var(--mf-bg)}
body.mf-modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}
img{max-width:100%}

*:focus-visible{outline:3px solid rgba(197,31,120,.22);outline-offset:2px}
.btn:focus-visible,.icon-btn:focus-visible,.topbar-logout:focus-visible,.menu:focus-visible,.menu-group-toggle:focus-visible{outline-color:rgba(197,31,120,.28)}

/* Shell — canonical base */
.app{min-height:100vh;display:block;background:var(--mf-bg)}
.content{min-width:0;min-height:100vh;display:flex;flex-direction:column}
.sidebar{display:flex;flex-direction:column;background:var(--mf-navy);color:#fff}
.brand{display:flex;align-items:center;justify-content:center;height:102px;margin-bottom:12px}.brand-link{display:block}.brand-logo{width:142px;height:auto;display:block}
.sidebar-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;margin:4px 4px 20px;background:#fff;border:1px solid rgba(255,255,255,.35);border-radius:10px;color:#7c8794}.sidebar-search input{width:100%;border:0;outline:0;background:transparent;color:var(--mf-text);font-size:13px}.section-label{padding:12px 12px 8px;color:#9fb2c8;font-size:10px;font-weight:800;letter-spacing:.16em}.menu-group{margin:2px 0}.menu-group-toggle,.menu{width:100%;min-height:44px;display:flex;align-items:center;gap:11px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#dce6f1;font-weight:700;font-size:13px;text-align:left}.menu-group-toggle:hover,.menu:hover{background:rgba(255,255,255,.07)}.menu-group.is-open>.menu-group-toggle,.menu.active{background:#203b59;color:#fff}.menu-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.08);color:#cdd9e7;flex:0 0 28px}.menu-group-items{display:none;padding:3px 0 5px 20px}.menu-group.is-open .menu-group-items{display:block}.menu-group-items .menu{min-height:40px;font-size:12px;padding-left:12px;border-left:1px solid rgba(197,31,120,.45);border-radius:0 8px 8px 0}.menu-group-items .menu.active{background:rgba(197,31,120,.90)}.sidebar-spacer{flex:1;min-height:18px}.user-mini{display:flex;gap:10px;align-items:center;padding:12px;border-top:1px solid rgba(255,255,255,.10);color:#fff}.user-mini small{display:block;color:#aebdcd;margin-top:2px}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--mf-pink);font-weight:800}
.sidebar-overlay{display:none;position:fixed;z-index:1090;inset:0;background:rgba(10,25,42,.46)}
.topbar{position:sticky;top:0;z-index:900;height:76px;background:rgba(255,253,249,.96);border-bottom:1px solid var(--mf-border);backdrop-filter:blur(10px)}.topbar-inner{height:100%;max-width:var(--mf-content-max);margin:auto;padding:0 22px;display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,520px) minmax(260px,1fr);gap:20px;align-items:center}.topbar-left,.topbar-right{display:flex;align-items:center;min-width:0}.topbar-right{justify-content:flex-end;gap:12px}.sidebar-toggle{width:42px!important;height:42px!important;padding:0!important;margin-right:12px}.topbar-brand{display:flex;align-items:center;gap:9px;min-width:0}.topbar-brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--mf-border);border-radius:10px;background:#fff}.topbar-brand-mark img{width:25px;height:25px;object-fit:contain}.topbar-brand-copy strong{display:block;font-size:15px;letter-spacing:.04em}.topbar-brand-copy small{display:block;color:var(--mf-muted);font-size:9px}.topbar-divider{width:1px;height:28px;background:var(--mf-border);margin:0 14px}.topbar-section{font-size:10px;font-weight:800;color:var(--mf-subtle);letter-spacing:.12em}.topbar-chevron{margin:0 7px;color:var(--mf-subtle)}.topbar-breadcrumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-center{min-width:0}.global-command{width:100%;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--mf-border);border-radius:12px;background:#fff;color:var(--mf-muted);text-align:left;box-shadow:var(--mf-shadow-sm)}.global-command-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink)}.global-command-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.global-command kbd{border:1px solid var(--mf-border);border-radius:6px;padding:2px 7px;font-size:10px;background:var(--mf-surface-2)}.topbar-status{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #dbe8df;border-radius:999px;background:#f4faf6;color:#44705b;font-size:11px;font-weight:700}.status-dot{width:7px;height:7px;border-radius:50%;background:#39a56b}.topbar-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--mf-pink);color:#fff;font-weight:800}.topbar-user-copy strong,.topbar-user-copy small{display:block}.topbar-user-copy strong{font-size:12px}.topbar-user-copy small{font-size:10px;color:var(--mf-muted)}.topbar-logout{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--mf-border);border-radius:10px;background:#fff}
.main{width:min(100%,var(--mf-content-max));margin:0 auto;padding:24px 24px 42px;flex:1}.footer-note{padding:18px 24px 28px;color:#9a9288;font-size:12px;border-top:1px solid var(--mf-border);background:var(--mf-bg)}
/* Page hierarchy */
.page-head,.ui-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:4px 0 20px;margin-bottom:20px;border-bottom:1px solid var(--mf-border)}.page-head-copy{min-width:0}.page-title,.page-head h1{margin:0;font-size:28px;line-height:1.15;color:var(--mf-text);letter-spacing:-.025em}.page-subtitle,.page-head p{margin:7px 0 0;color:var(--mf-muted);font-size:13px}.page-head-actions,.ui-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.card,.ui-card,.workspace-section,.workspace-card,.ui-section{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);box-shadow:var(--mf-shadow-sm);overflow:hidden}.card-head,.ui-card-head,.ui-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px 22px;border-bottom:1px solid var(--mf-border)}.card-head h2,.ui-card-head h2,.ui-section-head h2{margin:0;font-size:18px;color:var(--mf-text)}.card-head .muted,.ui-card-head .muted,.ui-section-head p{margin:5px 0 0;color:var(--mf-muted);font-size:12px}.card-body,.ui-section-body{padding:20px 22px}.grid,.form-grid,.grid-form,.ui-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.mf-grid-full{grid-column:1/-1}.field,label{display:flex;flex-direction:column;gap:6px;color:var(--mf-text);font-size:12px;font-weight:650}.field small,label small,.ui-field-help{font-weight:500;color:var(--mf-subtle);font-size:11px}.field label{font-weight:650}
input,select,textarea,.input,.select{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;color:var(--mf-text);outline:none;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s}textarea{min-height:96px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--mf-pink);box-shadow:0 0 0 3px rgba(197,31,120,.10)}input:disabled,select:disabled,textarea:disabled{background:#f2eee8;color:#a09a92}.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;color:var(--mf-text);font-size:12px;font-weight:750;white-space:nowrap}.btn:hover{border-color:#c7b9aa;background:var(--mf-surface-2)}.btn-primary{border-color:var(--mf-pink);background:var(--mf-pink);color:#fff;box-shadow:0 8px 18px rgba(197,31,120,.16)}.btn-primary:hover{background:var(--mf-pink-dark);border-color:var(--mf-pink-dark)}.btn-sm,.btn-small{min-height:34px;padding:0 10px;font-size:11px}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--mf-border);border-radius:9px;background:#fff}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#f0ece7;color:#5f5a54;font-size:10px;font-weight:800}.badge.green{background:var(--mf-success-soft);color:var(--mf-success)}.badge.amber{background:var(--mf-warning-soft);color:var(--mf-warning)}.notice{padding:12px 14px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:12px}.muted{color:var(--mf-muted)}.eyebrow,.section-kicker,.ml-kicker{color:var(--mf-pink);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.ui-actions-end-gap-8,.mf-flex-end-gap,.ui-form-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:16px}.ui-form-actions{padding-top:16px;border-top:1px solid var(--mf-border)}

/* Tables */
.table-wrap,.mf-overflow-auto,.ui-table-wrap{width:100%;overflow:auto}.table,.data-table,.ui-table,.ml-table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}.table th,.data-table th,.ui-table th,.ml-table th{padding:11px 13px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:#6c6a66;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;text-align:left;white-space:nowrap}.table td,.data-table td,.ui-table td,.ml-table td{padding:12px 13px;border-bottom:1px solid #eee7df;background:#fff;font-size:12px;vertical-align:middle}.table tbody tr:hover td,.data-table tbody tr:hover td,.ui-table tbody tr:hover td,.ml-table tbody tr:hover td{background:#fffaf5}.table tbody tr:last-child td,.data-table tbody tr:last-child td,.ui-table tbody tr:last-child td,.ml-table tbody tr:last-child td{border-bottom:0}

/* Stats / lists */
.stat-grid,.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat-card{display:block;padding:17px;border:1px solid var(--mf-border);border-radius:14px;background:#fff;box-shadow:var(--mf-shadow-sm)}.stat-top{display:flex;justify-content:space-between;color:var(--mf-muted);font-size:11px;font-weight:750}.stat-icon{color:var(--mf-pink)}.stat{margin-top:9px;font-size:25px;font-weight:850;letter-spacing:-.02em}.stat-note{margin-top:3px;color:var(--mf-subtle);font-size:10px}.empty,.ui-empty,.ui-state{padding:34px 20px;text-align:center;color:var(--mf-muted);border:1px dashed var(--mf-border-strong);border-radius:12px;background:var(--mf-surface-2)}

/* Context/project-product hierarchy */
.mf-context-board{display:grid;gap:var(--mf-surface-gap)}.mf-context-project,.mf-context-product{border:1px solid var(--mf-border);border-radius:12px;background:#fff;overflow:hidden}.mf-context-project-head,.mf-context-product-head{min-height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}.mf-context-project-name,.mf-context-product-name{flex:1;min-width:0}.mf-context-project-name small,.mf-context-product-name small{display:block;color:var(--mf-muted);font-weight:500}.mf-context-project-summary,.mf-context-product-summary{font-size:11px;color:var(--mf-muted)}.mf-context-chevron{color:var(--mf-pink);font-weight:900}.mf-context-detail{padding:14px}.mf-context-product-body{padding:12px}

/* Canonical modal system — every modal shares this geometry */
.modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:24px!important;display:none;align-items:center;justify-content:center;z-index:3000;background:rgba(25,34,43,.48);overflow:hidden}.modal.show,.ml-modal.show,.ml-modal.is-open,.metal-modal.show,.metal-modal.is-open,.add-product-modal.show,.add-product-modal.is-open,.report-print-modal.show,.report-print-modal.is-open,.ui-context-modal.is-open,.mf-command-modal.is-open{display:flex!important}.modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{position:relative!important;width:min(920px,calc(100vw - 48px))!important;max-width:920px!important;max-height:calc(100dvh - 48px)!important;margin:0!important;display:flex;flex-direction:column;background:var(--mf-surface)!important;color:var(--mf-text)!important;border:1px solid var(--mf-border)!important;border-radius:18px!important;box-shadow:0 28px 80px rgba(20,29,38,.24)!important;overflow:hidden!important}.ui-max-520{max-width:520px!important}.ui-max-860{max-width:860px!important}.ui-max-900{max-width:900px!important}.ui-max-1050,.ui-modal-wide{max-width:1050px!important}.modal-head,.modal-header,.add-product-head,.metal-modal-head,.modal-box>.card-head,.metal-modal-dialog>.metal-modal-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:20px!important;padding:22px 26px!important;border-bottom:1px solid var(--mf-border)!important;background:var(--mf-surface)!important;flex:0 0 auto}.modal-head h2,.modal-header h2,.add-product-head h2,.metal-modal-head h2,.modal-box>.card-head h2{margin:0!important;font-size:21px!important;line-height:1.2!important;color:var(--mf-text)!important}.modal-head p,.add-product-head p,.modal-head .muted,.modal-box>.card-head .muted,.metal-modal-head .ml-muted{margin:6px 0 0!important;color:var(--mf-muted)!important;font-size:12px!important;font-weight:500!important}.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,.modal-box>form,.modal-box>div:not(.card-head):not(.modal-head):not(.modal-foot),.metal-modal-dialog>form{padding:22px 26px!important;overflow:auto!important;min-height:0!important;flex:1 1 auto!important}.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:16px 26px!important;border-top:1px solid var(--mf-border)!important;background:var(--mf-surface-2)!important;flex:0 0 auto!important}.modal-section{padding:0 0 18px!important;margin:0 0 18px!important;border-bottom:1px solid var(--mf-border)!important}.modal-section:last-child{border-bottom:0!important;margin-bottom:0!important}.modal-section-title{margin-bottom:7px!important;color:var(--mf-text)!important;font-size:12px!important;font-weight:800!important}.modal-section-help{margin:0 0 9px!important;color:var(--mf-subtle)!important;font-size:10px!important}.add-product-grid,.metal-form-grid,.form-grid,.revision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.add-product-grid>div,.revision-box{min-width:0}.revision-box{padding:14px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface-2)}.revision-box .check{display:flex;flex-direction:row;align-items:center;gap:8px}.revision-box .check input{width:auto;min-height:auto}.revision-box input,.revision-box textarea{margin-top:8px}.color-upload-box{padding:14px;border:1px dashed var(--mf-border-strong);border-radius:10px;background:var(--mf-surface-2)}.color-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.reuse-box{padding:12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-pink-soft);margin-bottom:16px}.reuse-options{display:grid;gap:8px;margin-top:8px}.metal-two,.metal-dim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.metal-dim-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mf-grid-full{grid-column:1/-1}.metal-modal-backdrop,.ml-modal-backdrop,.ui-context-modal-backdrop{position:absolute;inset:0;background:transparent}.metal-modal-dialog,.ml-modal-dialog{z-index:1}.metal-modal-close,.modal-x{width:36px!important;height:36px!important;display:grid!important;place-items:center!important;flex:0 0 36px!important;border:1px solid var(--mf-border)!important;border-radius:9px!important;background:#fff!important;color:var(--mf-text)!important}.modal-box>.card-head>.btn,.modal-head>.btn,.add-product-head>.btn{width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;flex:0 0 36px!important}.report-print-modal .report-print-dialog{max-width:1100px!important}.receipt-modal-box{max-width:1000px!important}.receipt-image-stage{padding:22px 26px;overflow:auto;display:grid;place-items:center;background:#f1ede7;min-height:240px}.receipt-image-stage img{max-width:100%;max-height:65vh;object-fit:contain;background:#fff;border:1px solid var(--mf-border);border-radius:10px}.mf-command-modal{background:rgba(15,30,45,.58)}
/* Canonical data-picker modal — always above an already-open modal */
.ui-picker-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:24px!important;display:none!important;align-items:center!important;justify-content:center!important;z-index:20000!important;background:rgba(25,34,43,.54)!important;backdrop-filter:blur(2px)!important;overflow:hidden!important;isolation:isolate!important}.ui-picker-modal.mf-modal-portal{z-index:20000!important}
.ui-picker-modal.is-open{display:flex!important}
.ui-picker-dialog{position:relative!important;width:min(860px,calc(100vw - 48px))!important;max-width:860px!important;max-height:calc(100dvh - 48px)!important;margin:0!important;display:flex!important;flex-direction:column!important;background:var(--mf-surface)!important;color:var(--mf-text)!important;border:1px solid var(--mf-border)!important;border-radius:18px!important;box-shadow:0 30px 90px rgba(20,29,38,.30)!important;overflow:hidden!important}
.ui-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface);flex:0 0 auto}
.ui-picker-title{margin:0;font-size:21px;line-height:1.2;color:var(--mf-text);font-weight:850}
.ui-picker-subtitle{margin:6px 0 0;color:var(--mf-muted);font-size:12px;font-weight:500}
.ui-picker-close{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border:1px solid var(--mf-border);border-radius:9px;background:#fff;color:var(--mf-text);font-size:16px;cursor:pointer}
.ui-picker-close:hover{border-color:var(--mf-pink);color:var(--mf-pink)}
.ui-picker-toolbar{display:flex;align-items:center;gap:12px;padding:14px 26px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2);flex:0 0 auto}
.ui-picker-search{flex:1;min-width:0;min-height:42px!important;margin:0!important;border:1px solid var(--mf-border)!important;border-radius:10px!important;background:#fff!important;padding:0 13px!important;color:var(--mf-text)!important;font-size:12px!important}
.ui-picker-count{flex:0 0 auto;color:var(--mf-muted);font-size:11px;font-weight:750;white-space:nowrap}
.ui-picker-body{min-height:0;flex:1 1 auto;overflow:auto;padding:0 26px;background:var(--mf-surface)}
.ui-picker-table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:12px}
.ui-picker-table th{position:sticky;top:0;z-index:1;padding:12px 10px;text-align:left;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:var(--mf-muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.ui-picker-table td{padding:12px 10px;border-bottom:1px solid var(--mf-border);vertical-align:middle;background:var(--mf-surface)}
.ui-picker-table tbody tr:hover td,.ui-picker-table tbody tr.is-selected td{background:var(--mf-pink-soft)}
.ui-picker-value{font-weight:750;color:var(--mf-text)}
.ui-picker-key{color:var(--mf-muted);font-size:11px}
.ui-picker-action{width:100px;text-align:right!important}
.ui-picker-action button{min-height:34px!important;padding:0 13px!important;border:1px solid var(--mf-border)!important;border-radius:8px!important;background:#fff!important;color:var(--mf-text)!important;font-size:11px!important;font-weight:800!important;cursor:pointer}
.ui-picker-action button:hover{border-color:var(--mf-pink)!important;color:var(--mf-pink)!important}
.ui-picker-table tbody tr.is-selected .ui-picker-action button{background:var(--mf-pink)!important;border-color:var(--mf-pink)!important;color:#fff!important}
.ui-picker-empty{padding:42px 16px;text-align:center;color:var(--mf-muted);font-size:12px}
.ui-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 26px;border-top:1px solid var(--mf-border);background:var(--mf-surface-2);flex:0 0 auto}
.ui-picker-clear{border:0;background:transparent;color:var(--mf-muted);font-size:11px;font-weight:750;cursor:pointer;padding:6px 0}
.ui-picker-clear:hover{color:var(--mf-pink)}
.ui-picker-hint{color:var(--mf-subtle);font-size:10px}
.ui-picker{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid var(--mf-border)!important;border-radius:10px!important;background:#fff!important;color:var(--mf-text)!important;font:inherit;font-size:12px!important;font-weight:650!important;text-align:left;cursor:pointer}
.ui-picker:hover{border-color:var(--mf-pink)!important;box-shadow:0 0 0 3px rgba(197,31,120,.07)!important}
.ui-picker[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.ui-picker-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-picker-placeholder{color:var(--mf-muted)}
.ui-picker-chevron{flex:0 0 auto;color:var(--mf-muted);font-size:15px;line-height:1}
select.mf-picker-source{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
@media(max-width:760px){.ui-picker-modal{padding:10px!important}.ui-picker-dialog{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important}.ui-picker-head{padding:16px!important}.ui-picker-toolbar{padding:12px 16px!important}.ui-picker-body{padding:0 16px!important}.ui-picker-foot{padding:12px 16px!important}.ui-picker-table{min-width:560px}}
.mf-command-dialog{max-width:720px!important}.mf-command-head{padding:16px 18px;border-bottom:1px solid var(--mf-border)}.mf-command-search-wrap{display:flex;align-items:center;gap:10px}.mf-command-search{min-height:44px;border-radius:10px}.mf-command-shortcut{font-size:10px;color:var(--mf-muted)}.mf-command-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--mf-muted);font-size:11px}.mf-command-filters{display:flex;gap:4px}.mf-command-filter{border:0;background:transparent;border-radius:7px;padding:6px 9px;font-size:11px}.mf-command-filter.is-active{background:var(--mf-pink-soft);color:var(--mf-pink);font-weight:800}.mf-command-body{padding:10px;overflow:auto;max-height:58vh}.mf-command-group-title{padding:7px 9px;color:var(--mf-subtle);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.mf-command-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:9px;background:transparent;text-align:left}.mf-command-item:hover,.mf-command-item.is-active{background:var(--mf-surface-2)}.mf-command-item-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink)}.mf-command-item-copy{flex:1;min-width:0}.mf-command-item-copy strong,.mf-command-item-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-command-item-copy small{color:var(--mf-muted);font-size:10px}.mf-command-item-tag{font-size:9px;color:var(--mf-subtle)}.mf-command-foot{padding:10px 16px;border-top:1px solid var(--mf-border);display:flex;gap:16px;color:var(--mf-subtle);font-size:10px}

/* Common module cards */
.ml-card,.workspace-card,.sales-card,.production-card,.purchase-card,.warehouse-card,.delivery-card,.assembly-card{margin-bottom:18px}.ml-pane{margin-bottom:18px}.ml-section{padding:18px 22px;border-top:1px solid var(--mf-border)}.ml-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ml-big-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px 22px}.ml-choice{padding:15px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface-2)}.ml-choice span{display:block;margin-top:5px}.ml-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px 22px;border-top:1px solid var(--mf-border)}.ml-help,.ml-note,.ml-review{margin:14px 22px;padding:12px 14px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:11px}.ml-total{font-weight:850;color:var(--mf-pink)}


/* Canonical step navigation for Master List / SPK Structure workspaces. */
.ml-guide{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%;min-width:0;margin:0}
.ml-tab{appearance:none;-webkit-appearance:none;width:100%;min-width:0;min-height:64px;padding:11px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;border:1px solid var(--mf-border)!important;border-radius:12px!important;background:var(--mf-surface)!important;color:var(--mf-text)!important;font:inherit;text-align:left;cursor:pointer;box-shadow:var(--mf-shadow-sm);transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}
.ml-tab:hover{border-color:#e7bfd4!important;background:#fffafc!important}
.ml-tab.active{border-color:#e8bfd4!important;background:var(--mf-pink-soft)!important;color:var(--mf-pink)!important;box-shadow:none}
.ml-tab b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.25;font-weight:850}
.ml-tab span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-muted);font-size:10px;line-height:1.25;font-weight:550}
.ml-tab.active span{color:#9c4c76}
.ml-pane{display:none!important}
.ml-pane.active{display:block!important}
.ml-document-card{margin:0;min-width:0}
.ml-document-card .table-wrap{margin:0;border-top:1px solid var(--mf-border)}
.ml-document-card .table-wrap table{min-width:820px}
.ml-document-card .ui-upload-panel{border-top:0}

/* ========================================================================
   CANONICAL DETAIL WORKSPACES
   Master List / Proforma detail pages use the same page-head, KPI and card
   geometry as every other workspace. These are shared primitives only.
   ======================================================================== */
.ml-wrap{width:100%;max-width:none;min-width:0;display:grid;gap:18px}
.ml-wrap>*{min-width:0;max-width:100%}
.ml-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 18px;margin:0;border-bottom:1px solid var(--mf-border)}
.ml-hero>div:first-child{min-width:0;flex:1 1 auto}
.ml-hero .page-title{margin:0}
.ml-hero .page-subtitle{margin:7px 0 0}
.ml-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.ml-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0}
.ml-summary .stat-card{min-width:0;min-height:92px;padding:15px 16px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm)}
.ml-summary .stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--mf-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.ml-summary .stat-icon{display:grid;place-items:center;min-width:25px;height:25px;padding:0 6px;border:1px solid var(--mf-border);border-radius:7px;background:var(--mf-surface-2);color:var(--mf-pink);font-size:10px;font-weight:850}
.ml-summary .stat{margin-top:8px;font-size:22px;line-height:1.15;font-weight:850;letter-spacing:-.02em;color:var(--mf-text)}
.ml-summary .stat-note{margin-top:3px;color:var(--mf-subtle);font-size:10px}
.ml-pane{min-width:0;margin:0}
.ml-card{min-width:0;margin:0}
.ml-section{min-width:0}
.ml-muted{color:var(--mf-muted);font-size:11px;line-height:1.5}
.ml-empty{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 18px;text-align:center;color:var(--mf-muted);background:var(--mf-surface-2);border:1px dashed var(--mf-border-strong);border-radius:10px}
.main .ml-wrap .mf-overflow-auto,.main .ml-wrap .table-wrap{min-width:0;max-width:100%;overflow-x:auto}
.main .ml-wrap .card,.main .ml-wrap .ml-section,.main .ml-wrap .ml-pane{min-width:0;max-width:100%}
.main .ml-wrap .card-head>div,.main .ml-wrap .ui-card-head>div,.main .ml-wrap .card-body,.main .ml-wrap .ml-section{min-width:0}

@media(max-width:1100px){
  .ml-guide{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ml-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .ml-guide{display:flex;overflow-x:auto;gap:8px;padding-bottom:2px;scrollbar-width:thin}
  .ml-tab{flex:0 0 190px}
  .ml-hero{display:block;padding-bottom:15px}
  .ml-hero-actions{justify-content:flex-start;margin-top:12px}
  .ml-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ml-summary .stat-card{min-height:84px;padding:13px 14px}
  .ml-summary .stat{font-size:20px}
}
@media(max-width:460px){
  .ml-summary{grid-template-columns:1fr}
}

/* Every direct workspace child must be shrinkable inside the fixed shell.
   This prevents wide tables/forms from pushing a card underneath the sidebar
   or clipping the first content column. */
.app>.content>.main>*{min-width:0;max-width:100%}
.app>.content>.main>.card,
.app>.content>.main>.ui-card,
.app>.content>.main>.workspace-card,
.app>.content>.main>.workspace-section,
.app>.content>.main>.ui-section,
.app>.content>.main>.ml-wrap{width:100%;min-width:0}

/* Mobile / tablet */
@media(max-width:1100px){.topbar-inner{grid-template-columns:minmax(220px,1fr) minmax(260px,440px)}.topbar-right{display:none}.stat-grid,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main{padding:20px}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.app{display:block}.content{width:100%}.sidebar-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .2s}.sidebar.open~.sidebar-overlay{opacity:1;pointer-events:auto}}
@media(max-width:760px){.main{padding:16px 12px 28px}.topbar{height:64px}.topbar-inner{padding:0 12px;display:flex;gap:8px}.topbar-brand-copy,.topbar-divider,.topbar-breadcrumb{display:none}.topbar-center{flex:1}.global-command{height:40px}.page-head{display:block;padding-bottom:16px}.page-head-actions{justify-content:flex-start;margin-top:12px}.page-title{font-size:23px}.grid,.form-grid,.grid-form,.ui-detail-grid,.grid-3,.add-product-grid,.metal-form-grid,.revision-grid,.ml-grid2,.ml-big-choice{grid-template-columns:1fr}.metal-dim-grid,.metal-two{grid-template-columns:1fr}.mf-grid-full{grid-column:auto}.card-head,.ui-card-head,.ui-section-head{padding:16px;display:block}.card-head .ui-card-actions,.ui-card-actions{justify-content:flex-start;margin-top:12px}.card-body,.ui-section-body{padding:16px}.stat-grid,.kpi-grid{grid-template-columns:1fr 1fr}.modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{padding:10px!important}.modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important}.modal-head,.modal-header,.add-product-head,.metal-modal-head,.modal-box>.card-head{padding:16px!important}.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,.modal-box>form{padding:16px!important}.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{padding:12px 16px!important}.modal-foot .btn,.add-product-foot .btn,.metal-modal-foot .btn{flex:1}.table,.data-table,.ui-table,.ml-table{min-width:680px}.footer-note{padding:14px 12px}.sidebar-search{margin-bottom:12px}.topbar-menu-btn{margin-right:0!important}}
@media(max-width:460px){.stat-grid,.kpi-grid{grid-template-columns:1fr}.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{display:grid!important;grid-template-columns:1fr 1fr}.mf-command-foot{display:none}}

/* Defensive reset against legacy page UI */
body,body *{scrollbar-color:#c8c0b7 transparent}.main .dark,.main .dark-card,.main .legacy-dark{background:var(--mf-surface)!important;color:var(--mf-text)!important}.main .dark input,.main .dark select,.main .dark textarea{background:#fff!important;color:var(--mf-text)!important}.main .btn-primary{background:var(--mf-pink)!important;color:#fff!important}.main .card,.main .workspace-section{color:var(--mf-text)}


/* ================================================================
   CANONICAL TABLE SYSTEM
   Type A: .ui-table-card-normal     = always visible
   Type B: .ui-table-card-collapsible = hide / open
   ================================================================ */
.ui-table-card{width:100%;margin:0 0 18px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);box-shadow:var(--mf-shadow-sm);overflow:hidden}
.ui-table-card:last-child{margin-bottom:0}
.ui-table-card-head{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--mf-surface);border-bottom:1px solid var(--mf-border)}
.ui-table-card-title{min-width:0;display:flex;align-items:center;gap:12px}
.ui-table-card-title-copy{min-width:0}
.ui-table-card-title strong{display:block;margin:0;color:var(--mf-text);font-size:14px;font-weight:800;line-height:1.25}
.ui-table-card-title small{display:block;margin-top:3px;color:var(--mf-muted);font-size:11px;line-height:1.4}
.ui-table-card-meta{display:flex;align-items:center;gap:7px;flex:0 0 auto;color:var(--mf-muted);font-size:11px;font-weight:700}
.ui-table-card-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;color:var(--mf-text);font-size:11px;font-weight:800;cursor:pointer}
.ui-table-card-toggle:hover{background:var(--mf-surface-2);border-color:#c8bbad}
.ui-table-card-toggle-icon{width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:12px;font-weight:900}
.ui-table-card-collapsible>.ui-table-card-head{cursor:pointer;user-select:none}
.ui-table-card-collapsible>.ui-table-card-head::-webkit-details-marker{display:none}
.ui-table-card-body{width:100%;padding:0;background:#fff}
.ui-table-card-normal>.ui-table-card-body{padding:0}
.ui-table-card .ui-table-wrap,.ui-table-card .table-wrap{margin:0;border:0;border-radius:0;box-shadow:none}
.ui-table-card .ui-table-wrap>table,.ui-table-card .table-wrap>table{min-width:760px}
.ui-table-card .ui-table{width:100%;border:0}
.ui-table-card .ui-table th{height:42px;padding:10px 14px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:#66645f;font-size:10px;font-weight:850;letter-spacing:.055em;text-transform:uppercase;vertical-align:middle}
.ui-table-card .ui-table td{height:46px;padding:10px 14px;background:#fff;border-bottom:1px solid #eee7df;color:var(--mf-text);font-size:12px;vertical-align:middle}
.ui-table-card .ui-table tbody tr:hover td{background:#fffaf5}
.ui-table-card .ui-table tbody tr:last-child td{border-bottom:0}
.ui-table-card .ui-table-action-cell{text-align:right;white-space:nowrap}
.ui-table-card .empty,.ui-table-card .ui-empty{padding:28px 18px}
.ui-table-card-collapsible[open] .ui-table-card-toggle-icon::before{content:'−'}
.ui-table-card-collapsible:not([open]) .ui-table-card-toggle-icon::before{content:'+'}
.ui-table-card-collapsible:not([open])>.ui-table-card-head{border-bottom:0}
.ui-table-card-collapsible>.ui-table-card-head .ui-table-card-toggle-label::before{content:'Sembunyikan'}
.ui-table-card-collapsible:not([open])>.ui-table-card-head .ui-table-card-toggle-label::before{content:'Buka'}
.ui-table-card-collapsible>.ui-table-card-head .ui-table-card-toggle-label{font-size:0}
.ui-table-card-collapsible>.ui-table-card-head .ui-table-card-toggle-label::before{font-size:11px}
.ui-table-card-collapsible:not([open]) .ui-table-card-meta .ui-table-card-count{display:inline-flex}
.ui-table-card-count{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:var(--mf-surface-2);border:1px solid var(--mf-border);font-size:10px;font-weight:800;color:var(--mf-muted)}
.ui-table-card-collapsible .ui-table-card-chevron{transition:transform .18s ease;color:var(--mf-muted)}
.ui-table-card-collapsible[open] .ui-table-card-chevron{transform:rotate(180deg)}

/* Grouped project/product table variant */
.ui-table-group-row td{padding:9px 14px!important;background:#f8f3ec!important;color:var(--mf-text);font-weight:800;border-bottom:1px solid var(--mf-border)!important}
.ui-table-product-row td:first-child{padding-left:28px}

@media(max-width:1024px){
  .ui-table-card-head{padding:13px 14px}
  .ui-table-card .ui-table-wrap>table,.ui-table-card .table-wrap>table{min-width:700px}
}
@media(max-width:640px){
  .ui-table-card{border-radius:12px;margin-bottom:14px}
  .ui-table-card-head{min-height:58px;gap:10px;padding:11px 12px}
  .ui-table-card-title strong{font-size:13px}
  .ui-table-card-title small{font-size:10px}
  .ui-table-card-toggle{min-height:32px;padding:0 8px}
  .ui-table-card-toggle-label{display:none}
  .ui-table-card .ui-table-wrap>table,.ui-table-card .table-wrap>table{min-width:650px}
  .ui-table-card .ui-table th{height:38px;padding:8px 10px;font-size:9px}
  .ui-table-card .ui-table td{height:42px;padding:8px 10px;font-size:11px}
}

/* ========================================================================
   MAGENTA FURNITURE — UNIVERSAL PROFESSIONAL UI LAYER
   One visual language for every page, desktop, tablet and mobile.
   Presentation only. No workflow/data rules live here.
   ======================================================================== */
:root{
  --mf-bg:#f5f1ea;
  --mf-surface:#fffdf9;
  --mf-surface-2:#f8f4ee;
  --mf-surface-3:#f1ece4;
  --mf-navy:#102943;
  --mf-navy-soft:#183554;
  --mf-pink:#c51f78;
  --mf-pink-soft:#fae8f1;
  --mf-text:#24364b;
  --mf-muted:#738093;
  --mf-border:#e3d9ce;
  --mf-border-strong:#d3c5b7;
  --mf-success:#347557;
  --mf-warning:#9a6a18;
  --mf-danger:#b04750;
  --mf-info:#3f6f9d;
  --mf-radius:12px;
  --mf-radius-lg:16px;
  --mf-control-h:42px;
  --mf-content-max:1680px;
}

/* Global typography and primitive normalization */
body{font-size:14px;line-height:1.5;color:var(--mf-text);background:var(--mf-bg)}
.main{width:min(100%,var(--mf-content-max));margin:0 auto;padding:24px 28px 44px}
.main>*{max-width:100%}
.main .page-head > *, .main .ui-page-head > *, .main .card-head > *, .main .ui-card-head > *, .main .ui-section-head > *{min-width:0}
.main .page-head p, .main .ui-page-head p, .main .card-head p, .main .ui-card-head p, .main .ui-section-head p, .main .notice{overflow-wrap:anywhere}
.eyebrow,.section-label,.exec-label,.pc-section-label,.ui-section-label{color:var(--mf-pink);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.page-head,.ui-page-head{min-height:76px;align-items:center;padding:0 0 18px;margin-bottom:18px}
.page-title,.page-head h1{font-size:28px;font-weight:800;letter-spacing:-.025em}
.page-subtitle,.page-head p{max-width:900px;color:var(--mf-muted);font-size:13px}

/* Header / context controls */
.ui-context-navigator{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 28px;background:var(--mf-surface);border-bottom:1px solid var(--mf-border);min-height:58px}
.ui-context-nav-main{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ui-context-nav-kicker{color:var(--mf-muted);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.ui-context-picker{min-width:190px;height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--mf-border);border-radius:9px;background:#fff;color:var(--mf-text);text-align:left}
.ui-context-picker:hover{border-color:var(--mf-pink)}
.ui-context-picker-label{font-size:9px;color:var(--mf-muted);font-weight:800;letter-spacing:.06em}
.ui-context-picker strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;flex:1}
.ui-context-picker-caret{color:var(--mf-muted)}
.ui-context-picker:disabled{opacity:.5;cursor:not-allowed}
.ui-context-nav-arrow{color:var(--mf-muted);font-weight:800}
.ui-context-nav-doc{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:10px}
.ui-context-nav-doc b{color:var(--mf-text)}
.ui-context-nav-actions{display:flex;align-items:center;gap:8px}
.ui-entity-context{display:flex;align-items:center;gap:10px;padding:12px 28px;background:var(--mf-bg);border-bottom:1px solid var(--mf-border)}
.ui-entity-context-node{display:flex;align-items:baseline;gap:8px;min-width:0}
.ui-entity-context-node span{font-size:9px;font-weight:850;letter-spacing:.1em;color:var(--mf-muted)}
.ui-entity-context-node b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-entity-context-product b{color:var(--mf-pink)}
.ui-entity-context-node small{font-size:10px;color:var(--mf-muted)}
.ui-entity-context-sep{color:var(--mf-border-strong);font-weight:900}

/* Universal cards/sections */
.main .card,.main .ui-card,.main .workspace-section,.main .workspace-card,.main .ui-section,
.main .exec-card,.main .pc-card,.main .pc-panel,.main .sales-card,.main .production-card,
.main .purchase-card,.main .warehouse-card,.main .delivery-card,.main .assembly-card,
.main [class$="-card"]:not(.stat-card){background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);box-shadow:0 2px 12px rgba(40,47,55,.055);color:var(--mf-text)}
.main .card-head,.main .ui-card-head,.main .ui-section-head,.main .exec-card-head,.main .pc-card-head{min-height:64px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface)}
.main .card-head h2,.main .ui-card-head h2,.main .ui-section-head h2,.main .exec-card-head h2,.main .pc-card-head h2{margin:0;font-size:17px;line-height:1.25;font-weight:800;color:var(--mf-text)}
.main .card-body,.main .ui-section-body{padding:20px}
.main .muted,.main small.muted{color:var(--mf-muted)}
.main .notice{border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2);color:var(--mf-muted)}
.main .empty,.main .ui-empty{padding:30px 20px;text-align:center;color:var(--mf-muted);background:var(--mf-surface-2);border-radius:0}

/* Universal controls */
.main input:not([type="checkbox"]):not([type="radio"]),
.main select,.main textarea,
.modal input:not([type="checkbox"]):not([type="radio"]),.modal select,.modal textarea,
.ml-modal input:not([type="checkbox"]):not([type="radio"]),.ml-modal select,.ml-modal textarea,
.metal-modal input:not([type="checkbox"]):not([type="radio"]),.metal-modal select,.metal-modal textarea,
.ui-context-modal input:not([type="checkbox"]):not([type="radio"]),.ui-context-modal select,.ui-context-modal textarea{
  width:100%;min-height:var(--mf-control-h);padding:10px 12px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;color:var(--mf-text);font-size:13px;line-height:1.3;box-shadow:none
}
.main textarea,.modal textarea,.ml-modal textarea,.metal-modal textarea{min-height:96px;resize:vertical}
.main input:focus,.main select:focus,.main textarea:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--mf-pink);box-shadow:0 0 0 3px rgba(197,31,120,.09);outline:none}
.main label,.modal label,.ml-modal label,.metal-modal label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:750;color:var(--mf-text)}
.main label small,.modal label small,.ml-modal label small,.metal-modal label small{font-size:10px;font-weight:500;color:var(--mf-muted)}
.main input[type="checkbox"],.main input[type="radio"],.modal input[type="checkbox"],.modal input[type="radio"]{width:auto;min-height:auto;accent-color:var(--mf-pink)}

.main .btn,.modal .btn,.ml-modal .btn,.metal-modal .btn{min-height:40px;height:auto;padding:0 14px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;color:var(--mf-text);font-size:12px;font-weight:750;box-shadow:none}
.main .btn:hover,.modal .btn:hover{background:var(--mf-surface-2);border-color:#c8b9aa}
.main .btn-primary,.modal .btn-primary,.ml-modal .btn-primary,.metal-modal .btn-primary{background:var(--mf-pink)!important;border-color:var(--mf-pink)!important;color:#fff!important;box-shadow:0 7px 16px rgba(197,31,120,.15)}
.main .btn-sm,.main .btn-small{min-height:34px;padding:0 10px;font-size:11px}
.main .badge{border:1px solid transparent}

/* Universal form geometry */
.main form{max-width:100%}
.main .form-grid,.main .grid-form,.main .ui-detail-grid,.main .add-product-grid,.main .revision-grid{align-items:start}
.main .form-grid>label,.main .grid-form>label{min-width:0}
.main .mf-flex-end-gap,.main .ui-form-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}

/* Universal table container + table — all module-specific table classes inherit this */
.main .table-wrap,.main .exec-table-wrap,.main .pc-table-wrap,
.main [class*="table-wrap"],.main [class*="table-container"],.main [class*="table-scroll"]{width:100%;overflow-x:auto;overflow-y:visible;border:0;border-radius:0}
.main table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:#fff;color:var(--mf-text);font-size:12px}
.main table thead th{height:42px;padding:10px 14px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:#68655f;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;text-align:left;white-space:nowrap;vertical-align:middle}
.main table tbody td{height:46px;padding:10px 14px;background:#fff;border-bottom:1px solid #eee7df;color:var(--mf-text);font-size:12px;vertical-align:middle}
.main table tbody tr:hover td{background:#fffaf6}
.main table tbody tr:last-child td{border-bottom:0}
.main table td:first-child,.main table th:first-child{padding-left:18px}
.main table td:last-child,.main table th:last-child{padding-right:18px}
.main table .empty,.main table td.empty{text-align:center;color:var(--mf-muted);background:var(--mf-surface-2);padding:28px 16px}
.main table .btn{min-height:32px}

/* Two canonical table shells */
.main .ui-table-card{margin:0 0 18px;border:1px solid var(--mf-border);border-radius:var(--mf-radius-lg);background:var(--mf-surface);box-shadow:0 2px 12px rgba(40,47,55,.055);overflow:hidden}
.main .ui-table-card-head{min-height:62px;padding:13px 18px;background:var(--mf-surface);border-bottom:1px solid var(--mf-border)}
.main .ui-table-card-collapsible:not([open]) .ui-table-card-head{border-bottom:0}
.main .ui-table-card .ui-table-wrap{border:0}
.main .ui-table-card .ui-table{min-width:760px}
.main .ui-table-card .ui-table th{height:42px;padding:10px 14px}
.main .ui-table-card .ui-table td{height:46px;padding:10px 14px}

/* Lists that were previously rendered as unstyled text */
.main>ol,.main>ul,.main .workflow-list{margin:0 0 18px;padding:14px 18px 14px 36px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);color:var(--mf-text)}
.main>ol li,.main>ul li{padding:5px 0;font-size:12px;font-weight:650}

/* Modal: one professional geometry for every modal implementation */
.modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{background:rgba(15,29,43,.48)!important;backdrop-filter:blur(2px)}
.modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog,.ui-context-dialog{border-radius:16px!important;background:var(--mf-surface)!important}
.modal-box .card-head,.modal-box>.card-head,.modal-head,.modal-header,.add-product-head,.metal-modal-head,.ui-context-dialog-head{min-height:72px;padding:20px 24px!important;align-items:flex-start!important}
.modal-box .card-head h2,.modal-head h2,.modal-header h2,.add-product-head h2,.metal-modal-head h2,.ui-context-dialog-head h2{font-size:20px!important;font-weight:800!important}
.modal-box form,.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body{padding:22px 24px!important}
.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{min-height:64px;padding:12px 24px!important;background:var(--mf-surface-2)!important}
.modal-box .form-grid,.modal-box .revision-grid,.modal-box .add-product-grid{gap:16px}

/* Context picker dialog */
.ui-context-dialog{position:relative!important;width:min(760px,calc(100vw - 48px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;box-shadow:0 28px 80px rgba(20,29,38,.24);overflow:hidden;z-index:1}
.ui-context-dialog-head{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface)}
.ui-context-dialog-head h2{margin:4px 0 0;color:var(--mf-text)}
.ui-context-dialog-head p{margin:5px 0 0;color:var(--mf-muted);font-size:11px}
.ui-context-dialog-toolbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2)}
.ui-context-dialog-toolbar input{flex:1}
.ui-context-table-wrap{overflow:auto;padding:0}
.ui-context-table-wrap table{min-width:620px}

/* Responsive — same design, fluid geometry */
@media(max-width:1100px){
  :root{--mf-sidebar:272px}
  .main{padding:20px 20px 36px}
  .ui-context-navigator,.ui-entity-context{padding-left:20px;padding-right:20px}
  .topbar-inner{padding:0 18px}
}
@media(max-width:760px){
  .main{padding:16px 12px 28px}
  .page-head,.ui-page-head{display:block;padding-bottom:15px;margin-bottom:14px}
  .page-title,.page-head h1{font-size:23px}
  .page-head-actions{justify-content:flex-start;margin-top:12px}
  .main .card-head,.main .ui-card-head,.main .ui-section-head,.main .exec-card-head,.main .pc-card-head{display:flex;align-items:flex-start;padding:15px 16px;min-height:58px}
  .main .card-body,.main .ui-section-body{padding:16px}
  .main table{min-width:680px}
  .ui-context-navigator{padding:8px 12px;display:block}
  .ui-context-nav-main{gap:6px}
  .ui-context-picker{min-width:150px;max-width:calc(50vw - 22px)}
  .ui-context-nav-actions{margin-top:7px}
  .ui-entity-context{padding:9px 12px;overflow:auto;white-space:nowrap}
  .ui-context-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:14px}
  .ui-context-dialog-head{padding:16px!important}
  .ui-context-dialog-toolbar{padding:10px 12px}
  .modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{padding:10px!important}
  .modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important}
  .modal-box .card-head,.modal-head,.modal-header,.add-product-head,.metal-modal-head{padding:16px!important}
  .modal-box form,.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body{padding:16px!important}
  .modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{padding:11px 16px!important}
  .modal-foot .btn,.add-product-foot .btn,.metal-modal-foot .btn{flex:1}
}
@media(max-width:480px){
  .main .card-head,.main .ui-card-head,.main .ui-section-head,.main .exec-card-head,.main .pc-card-head{display:block}
  .main .ui-card-actions,.main .page-head-actions{margin-top:10px;justify-content:flex-start}
  .ui-context-picker{min-width:0;flex:1}
  .ui-context-nav-arrow{display:none}
  .ui-context-nav-main{display:grid;grid-template-columns:auto 1fr;align-items:center}
  .ui-context-nav-kicker{grid-column:1/-1}
  .ui-context-picker{max-width:none;width:100%}
  .ui-context-nav-actions{display:none}
  .modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{display:grid!important;grid-template-columns:1fr 1fr}
}

/* Standalone authentication page uses the same brand system. */
.login-page{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);background:var(--mf-bg);color:var(--mf-text)}
.login-hero{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,7vw,96px);background:var(--mf-navy);color:#fff;position:relative;overflow:hidden}
.login-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-160px;bottom:-170px;background:rgba(197,31,120,.16)}
.hero-brand{position:relative;z-index:1;margin-bottom:28px}.hero-brand img{width:min(190px,55vw);display:block}
.hero-title{position:relative;z-index:1;max-width:680px;margin:0;font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.04em;color:#fff}
.hero-copy{position:relative;z-index:1;max-width:620px;margin:18px 0 0;color:#c9d5e2;font-size:15px;line-height:1.7}
.flow{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.flow span{padding:8px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:#dce6f1;font-size:11px;font-weight:700}
.login-panel{display:grid;place-items:center;padding:36px;background:var(--mf-bg)}
.login-box{width:min(100%,470px);padding:34px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:18px;box-shadow:0 20px 60px rgba(40,47,55,.10)}
.login-box h1{margin:0;font-size:28px;letter-spacing:-.025em}.login-box .sub{margin:8px 0 24px;color:var(--mf-muted);font-size:13px}.login-box .field{margin-bottom:16px}.login-box .field label{display:block;margin-bottom:6px;font-size:10px;letter-spacing:.08em}.login-box input{width:100%;min-height:44px}.login-btn{width:100%;min-height:44px;margin-top:4px;border:1px solid var(--mf-pink);border-radius:9px;background:var(--mf-pink);color:#fff;font-weight:800;cursor:pointer}.login-btn:hover{background:#9e155f}.login-box .error{padding:10px 12px;margin-bottom:16px;border:1px solid #edc8cb;border-radius:9px;background:#f9e8e9;color:var(--mf-danger);font-size:12px}.login-box .demo{margin-top:16px;padding-top:14px;border-top:1px solid var(--mf-border);color:var(--mf-muted);font-size:10px;line-height:1.5}
@media(max-width:900px){.login-page{grid-template-columns:1fr}.login-hero{min-height:360px;padding:40px}.login-panel{padding:28px 18px}.hero-title{font-size:34px}}
@media(max-width:560px){.login-hero{min-height:300px;padding:28px 20px}.hero-brand img{width:150px}.hero-title{font-size:28px}.hero-copy{font-size:13px}.flow{margin-top:18px}.login-panel{padding:16px 12px}.login-box{padding:24px 18px;border-radius:14px}}

/* ========================================================================
   DASHBOARD — CANONICAL PAGE
   Presentation only. Uses the same primitives as the rest of the system.
   ======================================================================== */
.dashboard-page{display:flex;flex-direction:column;gap:18px;max-width:1680px;margin:0 auto}
.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:26px 28px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;box-shadow:0 2px 12px rgba(40,47,55,.055)}
.dashboard-eyebrow,.dashboard-label{display:block;color:var(--mf-pink);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.dashboard-hero h1{margin:6px 0 7px;font-size:30px;line-height:1.15;letter-spacing:-.035em;color:var(--mf-text)}
.dashboard-hero p{margin:0;color:var(--mf-muted);font-size:13px;max-width:720px}
.dashboard-live{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 10px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:10px;font-weight:700}
.dashboard-live span{width:7px;height:7px;border-radius:50%;background:#4e9b6d;box-shadow:0 0 0 3px rgba(78,155,109,.12)}
.dashboard-live b{color:var(--mf-text);font-weight:800}
.dashboard-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dashboard-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;color:var(--mf-text);font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}
.dashboard-btn:hover{border-color:var(--mf-pink);color:var(--mf-pink);background:#fff}
.dashboard-btn-primary{border-color:var(--mf-pink);background:var(--mf-pink);color:#fff}.dashboard-btn-primary:hover{background:var(--mf-pink-dark);color:#fff}
.dashboard-btn-small{min-height:32px;padding:0 10px;font-size:10px}
.dashboard-statusbar{display:grid;grid-template-columns:minmax(300px,1fr) repeat(3,minmax(120px,170px));gap:10px}
.dashboard-health,.dashboard-quick{min-height:62px;padding:11px 14px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mf-text)}
.dashboard-health{justify-content:flex-start}.dashboard-health strong{margin-left:auto;font-size:10px;color:var(--mf-pink)}
.dashboard-health>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.dashboard-health b{font-size:11px}.dashboard-health small{margin-top:2px;color:var(--mf-muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-health-dot{width:8px;height:8px;border-radius:50%;background:#4e9b6d;box-shadow:0 0 0 4px rgba(78,155,109,.12)}.dashboard-health.is-warn .dashboard-health-dot{background:#c28a2e;box-shadow:0 0 0 4px rgba(194,138,46,.12)}
.dashboard-quick{justify-content:space-between;flex-direction:column;align-items:flex-start;gap:1px}.dashboard-quick span{font-size:9px;color:var(--mf-muted);font-weight:750;text-transform:uppercase;letter-spacing:.06em}.dashboard-quick b{font-size:21px;line-height:1.15;color:var(--mf-text)}
.dashboard-kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.dashboard-kpi{min-height:105px;padding:14px 14px 13px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 10px rgba(40,47,55,.035)}.dashboard-kpi span{font-size:9px;color:var(--mf-muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.dashboard-kpi b{font-size:27px;line-height:1;color:var(--mf-text);font-weight:850}.dashboard-kpi strong{font-size:10px;color:var(--mf-text);font-weight:750}.dashboard-kpi b.tone-pink{color:var(--mf-pink)}.dashboard-kpi b.tone-red{color:var(--mf-danger)}.dashboard-kpi b.tone-green{color:var(--mf-success)}.dashboard-kpi b.tone-blue{color:var(--mf-info)}.dashboard-kpi b.tone-amber{color:#9a6a18}.dashboard-kpi b.tone-teal{color:#397f80}.dashboard-kpi b.tone-navy{color:var(--mf-navy)}
.dashboard-grid{display:grid;gap:18px}.dashboard-grid-primary{grid-template-columns:minmax(0,1.9fr) minmax(300px,.75fr)}.dashboard-grid-secondary{grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr)}.dashboard-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.dashboard-card{min-width:0;border:1px solid var(--mf-border);border-radius:16px;background:var(--mf-surface);box-shadow:0 2px 12px rgba(40,47,55,.055);overflow:hidden}.dashboard-card-head{min-height:70px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--mf-border)}.dashboard-card-head>div{min-width:0}.dashboard-card-head h2{margin:3px 0 3px;font-size:16px;line-height:1.25;color:var(--mf-text);font-weight:850}.dashboard-card-head p{margin:0;color:var(--mf-muted);font-size:10px;line-height:1.45}.dashboard-table-wrap{width:100%;overflow-x:auto}.dashboard-table{width:100%;min-width:830px;border-collapse:separate;border-spacing:0;font-size:11px}.dashboard-table th{height:40px;padding:9px 12px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:#68655f;font-size:9px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;text-align:left;white-space:nowrap}.dashboard-table td{height:52px;padding:9px 12px;border-bottom:1px solid #eee7df;color:var(--mf-text);vertical-align:middle;white-space:nowrap}.dashboard-table tbody tr:hover td{background:#fffaf6}.dashboard-table th:first-child,.dashboard-table td:first-child{padding-left:18px}.dashboard-table th:last-child,.dashboard-table td:last-child{padding-right:18px}.dashboard-product-link{display:flex;flex-direction:column;gap:2px;min-width:190px;text-decoration:none}.dashboard-product-link b{color:var(--mf-text);font-size:11px}.dashboard-product-link span{color:var(--mf-muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:260px}.dashboard-product-link em{align-self:flex-start;margin-top:2px;padding:2px 5px;border-radius:999px;background:#f9e7e7;color:var(--mf-danger);font-size:8px;font-style:normal;font-weight:850}.dashboard-cell-progress{display:flex;align-items:center;gap:7px}.dashboard-cell-progress b{font-size:11px}.dashboard-cell-progress span{font-size:9px;color:var(--mf-success);font-weight:800}.dashboard-open{color:var(--mf-danger)}.dashboard-empty{text-align:center!important;color:var(--mf-muted)!important;padding:28px!important;background:var(--mf-surface-2)}
.dashboard-completion{padding:24px 20px 20px}.dashboard-completion-number{display:flex;align-items:baseline;gap:8px}.dashboard-completion-number b{font-size:42px;line-height:1;color:var(--mf-text);letter-spacing:-.04em}.dashboard-completion-number span{font-size:10px;color:var(--mf-muted);font-weight:800;text-transform:uppercase}.dashboard-progress{height:9px;margin:18px 0 8px;background:#eee8e0;border-radius:999px;overflow:hidden}.dashboard-progress i{display:block;height:100%;background:var(--mf-pink);border-radius:inherit}.dashboard-completion small{color:var(--mf-muted);font-size:10px}.dashboard-stage-list{border-top:1px solid var(--mf-border);padding:6px 18px 12px}.dashboard-stage-list>div{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0ebe5}.dashboard-stage-list>div:last-child{border-bottom:0}.dashboard-stage-list span{display:flex;align-items:center;gap:7px;color:var(--mf-muted);font-size:10px;font-weight:700}.dashboard-stage-list b{font-size:11px;color:var(--mf-text)}.stage-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.stage-dot.blue{background:#4e78a6}.stage-dot.purple{background:#7c5a9b}.stage-dot.amber{background:#bd8a32}.stage-dot.teal{background:#4c8d8c}.stage-dot.orange{background:#c36d36}.stage-dot.red{background:#b04750}
.dashboard-project-list{padding:4px 18px 10px}.dashboard-project-row{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(220px,1.5fr) 64px;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid #eee7df;text-decoration:none}.dashboard-project-row:last-child{border-bottom:0}.dashboard-project-name{display:flex;flex-direction:column;gap:2px;min-width:0}.dashboard-project-name b{font-size:11px;color:var(--mf-text)}.dashboard-project-name span{font-size:10px;color:var(--mf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-project-progress>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.dashboard-project-progress strong{font-size:10px;color:var(--mf-text)}.dashboard-project-progress small{font-size:9px;color:var(--mf-muted)}.dashboard-project-progress>i,.dashboard-list-progress>i{display:block;height:6px;background:#eee8e0;border-radius:999px;overflow:hidden}.dashboard-project-progress>i em,.dashboard-list-progress>i em{display:block;height:100%;background:var(--mf-pink);border-radius:inherit}.dashboard-project-count{text-align:right}.dashboard-project-count b{display:block;font-size:15px;color:var(--mf-text)}.dashboard-project-count small{font-size:9px;color:var(--mf-muted)}.dashboard-empty-block{padding:28px 18px;text-align:center;color:var(--mf-muted);font-size:11px;background:var(--mf-surface-2)}
.dashboard-side-column{display:flex;flex-direction:column;gap:18px}.dashboard-attention-list{padding:4px 18px 8px}.dashboard-attention-list>a{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #eee7df;text-decoration:none}.dashboard-attention-list>a:last-child{border-bottom:0}.attention-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-weight:900;font-size:13px}.tone-red{background:#f9e7e7;color:var(--mf-danger)}.tone-amber{background:#faf0dc;color:#9a6a18}.tone-purple{background:#eee8f5;color:#70518e}.tone-blue{background:#e8f0f7;color:#3f6f9d}.dashboard-attention-list b{display:block;color:var(--mf-text);font-size:10px}.dashboard-attention-list small{display:block;margin-top:2px;color:var(--mf-muted);font-size:9px;line-height:1.35}.dashboard-attention-list>a>strong{color:var(--mf-muted);font-size:13px}.dashboard-principle{padding:18px;border:1px solid #ead3df;border-radius:16px;background:var(--mf-pink-soft);color:var(--mf-text)}.dashboard-principle b{display:block;margin-top:6px;font-size:13px}.dashboard-principle p{margin:6px 0 0;color:#7b6670;font-size:10px;line-height:1.5}
.dashboard-list{padding:5px 18px 10px}.dashboard-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eee7df}.dashboard-list-row:last-child{border-bottom:0}.dashboard-list-row>div{min-width:0}.dashboard-list-row b,.dashboard-list-progress b{display:block;font-size:10px;color:var(--mf-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-list-row small,.dashboard-list-progress small{display:block;margin-top:2px;color:var(--mf-muted);font-size:9px}.dashboard-badge{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:999px;background:var(--mf-surface-2);border:1px solid var(--mf-border);color:var(--mf-muted);font-size:8px;font-weight:850;white-space:nowrap}.dashboard-badge.green{background:#eaf4ee;color:#397558;border-color:#d5e8dc}.dashboard-badge.blue{background:#eaf1f8;color:#3f6f9d;border-color:#d7e4ef}.dashboard-badge.amber{background:#faf0dc;color:#9a6a18;border-color:#eee0bd}.dashboard-badge.purple{background:#eee8f5;color:#70518e;border-color:#dfd5eb}.dashboard-badge.red{background:#f9e7e7;color:#b04750;border-color:#eed1d3}.dashboard-list-progress{padding:12px 0;border-bottom:1px solid #eee7df}.dashboard-list-progress:last-child{border-bottom:0}.dashboard-list-progress>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'title pct' 'sub pct';align-items:center;gap:1px 8px;margin-bottom:7px}.dashboard-list-progress b{grid-area:title}.dashboard-list-progress small{grid-area:sub}.dashboard-list-progress strong{grid-area:pct;font-size:11px;color:var(--mf-pink)}
@media(max-width:1250px){.dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-grid-primary{grid-template-columns:minmax(0,1fr) 320px}.dashboard-statusbar{grid-template-columns:minmax(260px,1fr) repeat(3,130px)}}
@media(max-width:1000px){.dashboard-hero{align-items:flex-start;flex-direction:column}.dashboard-hero-actions{justify-content:flex-start}.dashboard-statusbar{grid-template-columns:1fr 1fr}.dashboard-health{grid-column:1/-1}.dashboard-grid-primary,.dashboard-grid-secondary{grid-template-columns:1fr}.dashboard-grid-three{grid-template-columns:1fr 1fr}.dashboard-side-column{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:680px){.dashboard-page{gap:12px}.dashboard-hero{padding:20px 16px;border-radius:13px}.dashboard-hero h1{font-size:24px}.dashboard-hero p{font-size:12px}.dashboard-hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.dashboard-btn-primary{grid-column:1/-1}.dashboard-statusbar{grid-template-columns:1fr 1fr;gap:8px}.dashboard-health{grid-column:1/-1}.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-kpi{min-height:94px;padding:12px}.dashboard-kpi b{font-size:23px}.dashboard-grid-three,.dashboard-side-column{grid-template-columns:1fr}.dashboard-card-head{padding:14px;align-items:flex-start}.dashboard-card-head h2{font-size:14px}.dashboard-card-head p{font-size:9px}.dashboard-card-head .dashboard-btn{flex-shrink:0}.dashboard-project-row{grid-template-columns:1fr;gap:8px}.dashboard-project-count{text-align:left;display:flex;gap:5px;align-items:baseline}.dashboard-table{min-width:820px}.dashboard-completion{padding:20px 16px}.dashboard-stage-list{padding-left:16px;padding-right:16px}}
@media(max-width:430px){.dashboard-hero-actions{grid-template-columns:1fr}.dashboard-btn-primary{grid-column:auto}.dashboard-statusbar{grid-template-columns:1fr}.dashboard-health{grid-column:auto}.dashboard-kpis{grid-template-columns:1fr 1fr}.dashboard-kpi strong{font-size:9px}.dashboard-live{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-live b{display:none}}

/* ========================================================================
 * CANONICAL UI SYSTEM — FINAL GLOBAL PASS
 * One visual language for header, workspace bar, tables and modal dialogs.
 * Presentation only; no workflow/business logic is changed here.
 * ====================================================================== */
:root{
  --mf-header-h:76px;
  --mf-space-1:6px;
  --mf-space-2:10px;
  --mf-space-3:14px;
  --mf-space-4:18px;
  --mf-space-5:24px;
  --mf-table-head-h:42px;
  --mf-table-row-h:46px;
  --mf-control-h:42px;
}

/* Global shell/header --------------------------------------------------- */
.topbar{
  height:var(--mf-header-h)!important;
  background:rgba(255,253,249,.98)!important;
  border-bottom:1px solid var(--mf-border)!important;
}
.topbar-inner{
  width:100%;
  max-width:1680px;
  min-width:0;
  padding:0 22px!important;
  grid-template-columns:minmax(280px,1fr) minmax(320px,520px) minmax(280px,1fr)!important;
  gap:20px!important;
}
.topbar-left,.topbar-right,.topbar-center{min-width:0}
.topbar-brand{min-width:170px}
.topbar-brand-mark{width:38px!important;height:38px!important;border-radius:10px!important}
.topbar-brand-copy strong{font-size:15px!important;line-height:1.1}
.topbar-brand-copy small{font-size:9px!important;line-height:1.25}
.topbar-breadcrumb{min-width:0;display:flex;align-items:center;gap:7px}
.topbar-section{font-size:9px!important;letter-spacing:.13em!important}
.topbar-breadcrumb strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.global-command{height:44px!important;border-radius:12px!important;background:#fff!important}
.topbar-status{height:36px;padding:0 11px!important}
.topbar-user{display:flex;align-items:center;gap:9px;min-width:0}
.topbar-user-copy{min-width:0}
.topbar-user-copy strong,.topbar-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-logout{flex:0 0 40px}

/* Global workspace/context bar ----------------------------------------- */
.ui-context-navigator{
  min-height:74px!important;
  padding:10px 22px!important;
  background:var(--mf-surface)!important;
  border-bottom:1px solid var(--mf-border)!important;
  box-shadow:0 1px 0 rgba(35,48,62,.02);
}
.ui-context-nav-main{gap:8px!important}
.ui-context-picker{
  width:150px;
  min-width:150px!important;
  height:44px!important;
  padding:6px 11px!important;
  flex-direction:column;
  align-items:flex-start!important;
  justify-content:center;
  gap:1px!important;
  border-radius:10px!important;
  background:#fff!important;
}
.ui-context-picker strong{width:100%;font-size:12px!important;line-height:1.2}
.ui-context-picker-label{font-size:8px!important;line-height:1}
.ui-context-picker-caret{position:absolute;margin-left:125px;margin-top:1px}
.ui-context-nav-arrow{font-size:16px}
.ui-context-nav-actions .btn{height:36px;min-height:36px}

/* All ordinary cards use one geometry --------------------------------- */
.main .card,.main .ui-card,.main .workspace-section,.main .workspace-card,
.main .ui-section,.main .exec-card,.main .pc-card,.main .pc-panel,
.main .sales-card,.main .production-card,.main .purchase-card,
.main .warehouse-card,.main .delivery-card,.main .assembly-card,
.main .dashboard-card{
  border:1px solid var(--mf-border)!important;
  border-radius:16px!important;
  background:var(--mf-surface)!important;
  box-shadow:var(--mf-shadow-sm)!important;
}

/* Canonical table — normal and collapsible ----------------------------- */
.main .table-wrap,.main .mf-overflow-auto,.main .ui-table-wrap,
.main .exec-table-wrap,.main .pc-table-wrap,
.main [class*="table-wrap"],.main [class*="table-container"],
.main [class*="table-scroll"]{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}
.main .table,.main .data-table,.main .ui-table,.main .ml-table,
.main table:not(.dashboard-table){
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  color:var(--mf-text);
  font-size:12px;
}
.main .table th,.main .data-table th,.main .ui-table th,.main .ml-table th,
.main table:not(.dashboard-table) th{
  height:var(--mf-table-head-h);
  padding:10px 14px;
  background:var(--mf-surface-2)!important;
  color:#66645f;
  border-bottom:1px solid var(--mf-border);
  font-size:10px;
  line-height:1.1;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
}
.main .table td,.main .data-table td,.main .ui-table td,.main .ml-table td,
.main table:not(.dashboard-table) td{
  height:var(--mf-table-row-h);
  padding:10px 14px;
  background:#fff!important;
  color:var(--mf-text);
  border-bottom:1px solid #eee7df;
  font-size:12px;
  line-height:1.25;
  vertical-align:middle;
}
.main .table tbody tr:hover td,.main .data-table tbody tr:hover td,
.main .ui-table tbody tr:hover td,.main .ml-table tbody tr:hover td,
.main table:not(.dashboard-table) tbody tr:hover td{background:#fffaf5!important}
.main .table tbody tr:last-child td,.main .data-table tbody tr:last-child td,
.main .ui-table tbody tr:last-child td,.main .ml-table tbody tr:last-child td,
.main table:not(.dashboard-table) tbody tr:last-child td{border-bottom:0}

/* Canonical table cards: Type A = normal, Type B = hide/open */
.main .ui-table-card{
  width:100%;
  margin:0 0 18px;
  overflow:hidden;
  border:1px solid var(--mf-border)!important;
  border-radius:16px!important;
  background:var(--mf-surface)!important;
  box-shadow:var(--mf-shadow-sm)!important;
}
.main .ui-table-card-head{
  min-height:64px!important;
  padding:13px 18px!important;
  background:var(--mf-surface)!important;
  border-bottom:1px solid var(--mf-border)!important;
}
.main .ui-table-card-title strong{font-size:14px!important;font-weight:800!important}
.main .ui-table-card-title small{font-size:10px!important}
.main .ui-table-card-toggle{
  min-height:34px!important;
  border:1px solid var(--mf-border-strong)!important;
  border-radius:9px!important;
  background:#fff!important;
}
.main .ui-table-card-body{background:#fff!important;padding:0!important}
.main .ui-table-card .ui-table-wrap>table,
.main .ui-table-card .table-wrap>table{min-width:760px}
.main .ui-table-card .ui-table th{height:var(--mf-table-head-h)!important;padding:10px 14px!important}
.main .ui-table-card .ui-table td{height:var(--mf-table-row-h)!important;padding:10px 14px!important}
.main .ui-table-card-collapsible:not([open]) .ui-table-card-head{border-bottom:0!important}

/* Canonical modal/popup ------------------------------------------------- */
.modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,
.ui-context-modal,.mf-command-modal{
  background:rgba(15,29,43,.50)!important;
  backdrop-filter:blur(3px)!important;
}
.modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,
.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,
.mf-command-dialog,.ui-context-dialog{
  width:min(860px,calc(100vw - 48px))!important;
  max-width:860px!important;
  max-height:calc(100dvh - 48px)!important;
  border:1px solid var(--mf-border)!important;
  border-radius:16px!important;
  background:var(--mf-surface)!important;
  box-shadow:0 28px 80px rgba(20,29,38,.24)!important;
}
.ui-max-900{max-width:900px!important}
.ui-max-1050,.ui-modal-wide{max-width:1050px!important}
.modal-box>.card-head,.modal-head,.modal-header,
.add-product-head,.metal-modal-head,.ui-context-dialog-head{
  min-height:76px!important;
  padding:20px 24px!important;
  background:var(--mf-surface)!important;
  border-bottom:1px solid var(--mf-border)!important;
}
.modal-box>.card-head h2,.modal-head h2,.modal-header h2,
.add-product-head h2,.metal-modal-head h2,.ui-context-dialog-head h2{
  margin:0!important;
  color:var(--mf-text)!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.modal-box>.card-head .muted,.modal-head p,.modal-head .muted,
.add-product-head p,.metal-modal-head .ml-muted,.ui-context-dialog-head p{
  margin:6px 0 0!important;
  color:var(--mf-muted)!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,
.modal-box>form{padding:22px 24px!important;overflow:auto!important}
.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{
  min-height:64px!important;
  padding:12px 24px!important;
  background:var(--mf-surface)!important;
  border-top:1px solid var(--mf-border)!important;
}
.modal-box .form-grid,.modal-box .revision-grid,.modal-box .add-product-grid,
.add-product-grid,.metal-form-grid,.revision-grid{gap:14px!important;align-items:start}
.modal-section{padding-bottom:18px!important;margin-bottom:18px!important}
.modal-section-title{font-size:12px!important;font-weight:800!important}
.modal-section-help{font-size:10px!important;color:var(--mf-subtle)!important}

/* Inputs/buttons inside modal use exactly the same control geometry. */
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,.modal textarea,
.ml-modal input:not([type="checkbox"]):not([type="radio"]),
.ml-modal select,.ml-modal textarea,
.metal-modal input:not([type="checkbox"]):not([type="radio"]),
.metal-modal select,.metal-modal textarea,
.add-product-modal input:not([type="checkbox"]):not([type="radio"]),
.add-product-modal select,.add-product-modal textarea,
.ui-context-modal input:not([type="checkbox"]):not([type="radio"]),
.ui-context-modal select,.ui-context-modal textarea{
  min-height:42px!important;
  border:1px solid var(--mf-border-strong)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--mf-text)!important;
}
.modal-x,.metal-modal-close,.modal-box>.card-head>.btn,
.modal-head>.btn,.add-product-head>.btn{
  width:36px!important;height:36px!important;min-height:36px!important;
  padding:0!important;display:grid!important;place-items:center!important;
  flex:0 0 36px!important;border-radius:9px!important;
}

/* Dashboard stays within the same global geometry. */
.dashboard-page{max-width:100%;}
.dashboard-card-head{min-height:70px!important}
.dashboard-table{min-width:830px!important}

/* Tablet --------------------------------------------------------------- */
@media(max-width:1100px){
  .topbar-inner{grid-template-columns:minmax(230px,1fr) minmax(280px,440px) auto!important;padding:0 18px!important}
  .topbar-status{display:none}
  .ui-context-navigator{padding-left:18px!important;padding-right:18px!important}
}

/* Mobile --------------------------------------------------------------- */
@media(max-width:760px){
  .topbar{height:64px!important}
  .topbar-inner{height:64px!important;display:flex!important;gap:8px!important;padding:0 12px!important}
  .topbar-left{flex:0 0 auto}
  .topbar-brand{min-width:0!important;gap:7px!important}
  .topbar-brand-copy{display:block!important}
  .topbar-brand-copy strong{font-size:13px!important}
  .topbar-brand-copy small{font-size:8px!important}
  .topbar-brand-mark{width:34px!important;height:34px!important}
  .topbar-brand-mark img{width:22px!important;height:22px!important}
  .topbar-divider,.topbar-breadcrumb,.topbar-right{display:none!important}
  .topbar-center{display:block!important;flex:1;min-width:0}
  .global-command{height:40px!important;padding:0 9px!important}
  .global-command-text{font-size:11px!important}
  .global-command kbd{display:none}
  .ui-context-navigator{min-height:66px!important;padding:8px 12px!important}
  .ui-context-nav-main{display:grid!important;grid-template-columns:auto minmax(0,1fr) 1fr!important;width:100%;gap:6px!important}
  .ui-context-nav-kicker{grid-column:1/-1}
  .ui-context-nav-arrow{display:none}
  .ui-context-picker{width:100%!important;min-width:0!important;height:40px!important}
  .ui-context-picker-caret{right:10px;position:absolute}
  .ui-context-nav-actions{display:none!important}
  .main .ui-table-card-head{min-height:58px!important;padding:11px 12px!important}
  .main .ui-table-card .ui-table-wrap>table,
  .main .ui-table-card .table-wrap>table{min-width:650px!important}
  .main .ui-table-card .ui-table th{height:38px!important;padding:8px 10px!important;font-size:9px!important}
  .main .ui-table-card .ui-table td{height:42px!important;padding:8px 10px!important;font-size:11px!important}
  .modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,
  .ui-context-modal,.mf-command-modal{padding:10px!important}
  .modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,
  .ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,
  .mf-command-dialog,.ui-context-dialog{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:14px!important;
  }
  .modal-box>.card-head,.modal-head,.modal-header,
  .add-product-head,.metal-modal-head,.ui-context-dialog-head{padding:16px!important}
  .modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,
  .modal-box>form{padding:16px!important}
  .modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{padding:11px 16px!important}
}
@media(max-width:460px){
  .topbar-brand-copy{display:none!important}
  .topbar-brand-mark{width:34px!important;height:34px!important}
  .ui-context-nav-main{grid-template-columns:1fr 1fr!important}
  .ui-context-nav-kicker{grid-column:1/-1}
  .modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{
    display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important
  }
  .modal-foot .btn,.add-product-foot .btn,.metal-modal-foot .btn{width:100%}
}

/* ================================================================
   CANONICAL SIDEBAR
   Keep the existing Magenta logo size; normalize navigation geometry.
   ================================================================ */
.sidebar.sidebar-final{
  width:var(--mf-sidebar)!important;
  padding:18px 14px 14px!important;
  gap:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.sidebar.sidebar-final::-webkit-scrollbar{width:7px}
.sidebar.sidebar-final::-webkit-scrollbar-track{background:transparent}
.sidebar.sidebar-final::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}

.sidebar.sidebar-final .brand{
  height:102px!important;
  min-height:102px!important;
  margin:0 0 12px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.sidebar.sidebar-final .brand-link{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important}
/* Deliberately unchanged: requested logo size. */
.sidebar.sidebar-final .brand-logo{
  width:142px!important;
  height:auto!important;
  max-width:142px!important;
  display:block!important;
}

.sidebar.sidebar-final .sidebar-search{
  width:calc(100% - 8px)!important;
  height:42px!important;
  min-height:42px!important;
  margin:2px 4px 18px!important;
  padding:0 11px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.sidebar.sidebar-final .sidebar-search span{flex:0 0 16px;text-align:center;font-size:13px;color:#738196}
.sidebar.sidebar-final .sidebar-search input{min-width:0!important;height:100%!important;font-size:12px!important}

.sidebar.sidebar-final .section-label{
  padding:12px 12px 7px!important;
  margin:0!important;
  line-height:1.2!important;
  color:#91a7be!important;
  font-size:9px!important;
  letter-spacing:.15em!important;
}

.sidebar.sidebar-final .menu-group{
  width:100%!important;
  margin:1px 0!important;
}
.sidebar.sidebar-final .menu-group-toggle,
.sidebar.sidebar-final > .menu{
  width:100%!important;
  min-height:42px!important;
  height:42px!important;
  padding:0 11px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#dce6f1!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-align:left!important;
}
.sidebar.sidebar-final .menu-group-toggle:hover,
.sidebar.sidebar-final > .menu:hover{background:rgba(255,255,255,.055)!important}

.sidebar.sidebar-final .menu-group-left{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  white-space:nowrap!important;
}
.sidebar.sidebar-final .menu-group-left>span:last-child{overflow:hidden;text-overflow:ellipsis}
.sidebar.sidebar-final .menu-group-toggle::after{content:none!important;display:none!important}

.sidebar.sidebar-final .menu-chevron{
  width:18px!important;
  flex:0 0 18px!important;
  display:grid!important;
  place-items:center!important;
  color:#9fb2c8!important;
  font-size:12px!important;
  line-height:1!important;
}
.sidebar.sidebar-final .menu-group:not(.is-open) .menu-chevron{transform:rotate(-90deg)}
.sidebar.sidebar-final .menu-group.is-open>.menu-group-toggle{
  background:#203b59!important;
  color:#fff!important;
}

.sidebar.sidebar-final .menu-icon{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.075)!important;
  color:#d2deea!important;
  font-size:11px!important;
  line-height:1!important;
}

/* navigation.php uses .menu-submenu; normalize this class directly. */
.sidebar.sidebar-final .menu-submenu{
  display:none!important;
  width:100%!important;
  padding:3px 0 5px 20px!important;
  margin:0!important;
}
.sidebar.sidebar-final .menu-group.is-open>.menu-submenu{display:block!important}
.sidebar.sidebar-final .menu-submenu .menu{
  width:100%!important;
  min-height:39px!important;
  height:39px!important;
  padding:0 10px!important;
  margin:0!important;
  border-left:1px solid rgba(197,31,120,.42)!important;
  border-radius:0 8px 8px 0!important;
  gap:9px!important;
  background:transparent!important;
  color:#cfdbe7!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.sidebar.sidebar-final .menu-submenu .menu:hover{background:rgba(255,255,255,.055)!important}
.sidebar.sidebar-final .menu-submenu .menu.active{
  background:#203b59!important;
  color:#fff!important;
  border-left:2px solid var(--mf-pink)!important;
  padding-left:9px!important;
}
.sidebar.sidebar-final .menu-submenu .menu-icon{
  width:24px!important;height:24px!important;min-width:24px!important;flex-basis:24px!important;
  border-radius:7px!important;background:rgba(255,255,255,.06)!important;font-size:10px!important;
}
.sidebar.sidebar-final .menu-submenu .menu.active .menu-icon{background:rgba(197,31,120,.18)!important;color:#fff!important}

.sidebar.sidebar-final .sidebar-spacer{min-height:14px!important}
.sidebar.sidebar-final .user-mini{padding:11px 10px!important;margin-top:4px!important}

@media(max-width:1100px){
  .sidebar.sidebar-final{width:276px!important}
}
@media(max-width:760px){
  .sidebar.sidebar-final{width:min(276px,86vw)!important;padding:16px 12px 12px!important}
  .sidebar.sidebar-final .brand{height:102px!important;min-height:102px!important}
  .sidebar.sidebar-final .brand-logo{width:142px!important;max-width:142px!important}
}


/* ========================================================================
   MAGENTA FURNITURE — CANONICAL APP SHELL
   One layout owner. Sidebar is an independent full-height rail;
   content owns header, page body and footer. The desktop rail is viewport-fixed; only its navigation scrolls.
   ======================================================================== */
html,body{width:100%;max-width:100%;overflow-x:hidden!important}

@media (min-width:1025px){
  .app{
    display:grid!important;
    grid-template-columns:var(--mf-sidebar) minmax(0,1fr)!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .app>.sidebar.sidebar-final{
    grid-column:1!important;
    grid-row:1!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--mf-sidebar)!important;
    max-width:var(--mf-sidebar)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:18px 14px 14px!important;
    overflow:hidden!important;
    transform:none!important;
    visibility:visible!important;
    pointer-events:auto!important;
    box-sizing:border-box!important;
    z-index:1100!important;
  }
  .app>.content{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    width:auto!important;
    min-width:0!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .app>.content>.topbar,
  .app>.content>.ui-context-navigator,
  .app>.content>.ui-entity-context,
  .app>.content>.main,
  .app>.content>.footer-note{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  .app>.content>.topbar{position:sticky!important;top:0!important;z-index:900!important;flex:0 0 auto!important}
  .app>.content>.main{flex:1 0 auto!important;overflow-x:hidden!important}
  .app>.content>.footer-note{position:relative!important;z-index:1!important;flex:0 0 auto!important;overflow:hidden!important}

  .app.sidebar-hidden{
    grid-template-columns:0 minmax(0,1fr)!important;
  }
  .app.sidebar-hidden>.sidebar.sidebar-final{
    width:0!important;
    max-width:0!important;
    padding:0!important;
    overflow:hidden!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
  }
  .app.sidebar-hidden>.content{grid-column:2!important;width:auto!important;margin:0!important}
  .app>.sidebar-overlay{display:none!important}
}

@media (max-width:1024px){
  .app,.app.sidebar-hidden{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  .app>.content,.app.sidebar-hidden>.content{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  .app>.sidebar.sidebar-final{
    position:fixed!important;
    z-index:1100!important;
    top:0!important;right:auto!important;bottom:0!important;left:0!important;
    width:min(276px,86vw)!important;
    max-width:86vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:16px 12px 12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:translateX(-105%)!important;
    visibility:hidden!important;
    transition:transform .2s ease,visibility .2s ease!important;
    box-sizing:border-box!important;
  }
  .app>.sidebar.sidebar-final.open{transform:translateX(0)!important;visibility:visible!important}
  .app>.content>.topbar,.app>.content>.ui-context-navigator,.app>.content>.ui-entity-context,.app>.content>.main,.app>.content>.footer-note{
    width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important;
  }
  .app>.content>.topbar{position:sticky!important;top:0!important;z-index:900!important}
  .app>.content>.main{flex:1 0 auto!important;overflow-x:hidden!important}
  .app>.content>.footer-note{flex:0 0 auto!important;overflow:hidden!important}
  .app>.sidebar-overlay{display:block!important;position:fixed!important;z-index:1090!important;inset:0!important;background:rgba(10,25,42,.46)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .2s ease,visibility .2s ease!important}
  .app>.sidebar.open + .sidebar-overlay{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
}

/* ================================================================
   CANONICAL SHELL STABILITY — SIDEBAR RAIL
   Brand/search/user stay fixed inside the rail; only navigation scrolls.
   This prevents the sidebar from appearing to "jump" to the bottom while
   the page itself is scrolled.
   ================================================================ */
.sidebar.sidebar-final{
  overflow:hidden!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
}
.sidebar.sidebar-final .sidebar-rail-head,
.sidebar.sidebar-final .sidebar-rail-foot{flex:0 0 auto!important}
.sidebar.sidebar-final .sidebar-rail-head{display:block!important}
.sidebar.sidebar-final .sidebar-nav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.22) transparent!important;
  padding-right:2px!important;
  overscroll-behavior:contain!important;
}
.sidebar.sidebar-final .sidebar-nav::-webkit-scrollbar{width:7px}
.sidebar.sidebar-final .sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar.sidebar-final .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:999px}
.sidebar.sidebar-final .sidebar-nav .sidebar-spacer{display:none!important}
.sidebar.sidebar-final .sidebar-rail-foot{padding-top:8px!important;background:var(--mf-navy)!important}
.sidebar.sidebar-final .sidebar-rail-foot .user-mini{margin-top:0!important}

/* Keep the application header visible while the main page is scrolled. */
@media (min-width:1025px){
  .app>.content{position:relative!important;isolation:isolate!important}
  .app>.content>.topbar{position:sticky!important;top:0!important;z-index:1200!important;align-self:stretch!important}
  .app>.content>.main{position:relative!important;z-index:1!important}
  .app>.content>.footer-note{position:relative!important;z-index:1!important}
}
@media (max-width:1024px){
  .app>.sidebar.sidebar-final{overflow:hidden!important}
}

/* ========================================================================
   CANONICAL HEADER — VIEWPORT LOCK
   Header belongs to the application viewport, not the scrolling page.
   ======================================================================== */
@media (min-width:1025px){
  .app>.content{
    padding-top:var(--mf-header-h)!important;
  }
  .app>.content>.topbar{
    position:fixed!important;
    top:0!important;
    left:var(--mf-sidebar)!important;
    right:0!important;
    width:auto!important;
    height:var(--mf-header-h)!important;
    min-height:var(--mf-header-h)!important;
    z-index:1200!important;
    margin:0!important;
  }
  .app.sidebar-hidden>.content>.topbar{
    left:0!important;
  }
}
@media (max-width:1024px){
  .app>.content{
    padding-top:var(--mf-header-h)!important;
  }
  .app>.content>.topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--mf-header-h)!important;
    min-height:var(--mf-header-h)!important;
    z-index:1200!important;
    margin:0!important;
  }
}

/* ========================================================================
   CANONICAL CONTEXT BAR — NORMAL FLOW
   The Project/Product workspace bar belongs directly below the fixed header,
   but it is NOT fixed/sticky. It scrolls away with the page content.
   ======================================================================== */
@media (min-width:1025px){
  .app>.content>.ui-context-navigator{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    z-index:2!important;
    margin:0!important;
    flex:0 0 auto!important;
    align-self:stretch!important;
    width:100%!important;
    min-height:74px!important;
    box-sizing:border-box!important;
  }
  .app>.content>.ui-entity-context{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
  }
}
@media (max-width:1024px){
  .app>.content>.ui-context-navigator{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    z-index:2!important;
    margin:0!important;
    flex:0 0 auto!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  .app>.content>.ui-entity-context{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
  }
}

/* ========================================================================
   CANONICAL TABLE STANDARD — FINAL APPLICATION LAYER
   Type A: normal visible table
   Type B: collapsible Project → Product hierarchy
   This layer is presentation-only and intentionally lives in the existing
   canonical stylesheet so page-specific legacy table rules cannot fragment
   the visual language again.
   ======================================================================== */
.main .ui-table-standard-host > .table-wrap,
.main .ui-table-standard-host > .ui-table-wrap,
.main .ui-table-standard-host .ui-table-standard-wrap,
.main .ui-table-card .ui-table-standard-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.main .ui-table-standard-host > .table-wrap > table,
.main .ui-table-standard-host > .ui-table-wrap > table,
.main .ui-table-standard-host .ui-table-standard-wrap > table,
.main .ui-table-card .ui-table-standard-wrap > table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  background:var(--mf-surface);
}

.main .ui-table-standard-host > .table-wrap > table th,
.main .ui-table-standard-host > .ui-table-wrap > table th,
.main .ui-table-standard-host .ui-table-standard-wrap > table th,
.main .ui-table-card .ui-table-standard-wrap > table th{
  height:42px!important;
  padding:10px 14px!important;
  background:var(--mf-surface-2)!important;
  color:#68655f!important;
  border-bottom:1px solid var(--mf-border)!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.25!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
}

.main .ui-table-standard-host > .table-wrap > table td,
.main .ui-table-standard-host > .ui-table-wrap > table td,
.main .ui-table-standard-host .ui-table-standard-wrap > table td,
.main .ui-table-card .ui-table-standard-wrap > table td{
  min-height:46px;
  padding:10px 14px!important;
  background:#fff!important;
  color:var(--mf-text)!important;
  border-bottom:1px solid #eee7df!important;
  font-size:12px!important;
  line-height:1.45!important;
  vertical-align:middle;
}

.main .ui-table-standard-host > .table-wrap > table tbody tr:nth-child(even) td,
.main .ui-table-standard-host > .ui-table-wrap > table tbody tr:nth-child(even) td,
.main .ui-table-standard-host .ui-table-standard-wrap > table tbody tr:nth-child(even) td,
.main .ui-table-card .ui-table-standard-wrap > table tbody tr:nth-child(even) td{
  background:#fffdfa!important;
}

.main .ui-table-standard-host > .table-wrap > table tbody tr:hover td,
.main .ui-table-standard-host > .ui-table-wrap > table tbody tr:hover td,
.main .ui-table-standard-host .ui-table-standard-wrap > table tbody tr:hover td,
.main .ui-table-card .ui-table-standard-wrap > table tbody tr:hover td{
  background:#fff8f3!important;
}

.main .ui-table-standard-host > .table-wrap > table tbody tr:last-child td,
.main .ui-table-standard-host > .ui-table-wrap > table tbody tr:last-child td,
.main .ui-table-standard-host .ui-table-standard-wrap > table tbody tr:last-child td,
.main .ui-table-card .ui-table-standard-wrap > table tbody tr:last-child td{
  border-bottom:0!important;
}

.main .ui-table-standard-host > .table-wrap > table th:first-child,
.main .ui-table-standard-host > .table-wrap > table td:first-child,
.main .ui-table-standard-host > .ui-table-wrap > table th:first-child,
.main .ui-table-standard-host > .ui-table-wrap > table td:first-child,
.main .ui-table-standard-host .ui-table-standard-wrap > table th:first-child,
.main .ui-table-standard-host .ui-table-standard-wrap > table td:first-child,
.main .ui-table-card .ui-table-standard-wrap > table th:first-child,
.main .ui-table-card .ui-table-standard-wrap > table td:first-child{
  padding-left:18px!important;
}

.main .ui-table-standard-host > .table-wrap > table th:last-child,
.main .ui-table-standard-host > .table-wrap > table td:last-child,
.main .ui-table-standard-host > .ui-table-wrap > table th:last-child,
.main .ui-table-standard-host > .ui-table-wrap > table td:last-child,
.main .ui-table-standard-host .ui-table-standard-wrap > table th:last-child,
.main .ui-table-standard-host .ui-table-standard-wrap > table td:last-child,
.main .ui-table-card .ui-table-standard-wrap > table th:last-child,
.main .ui-table-card .ui-table-standard-wrap > table td:last-child{
  padding-right:18px!important;
}


/* Existing Project → Product context surfaces use the same Type B language. */
.main .mf-context-project,
.main .procurement-collapsible,
.main .production-table-shell,
.main .division-project-card{
  border:1px solid var(--mf-border);
  border-radius:14px;
  background:var(--mf-surface);
  box-shadow:var(--mf-shadow-sm);
  overflow:hidden;
}
.main .mf-context-project-head,
.main .procurement-collapse-summary,
.main .production-table-toolbar{
  min-height:58px;
  padding:12px 16px;
  background:var(--mf-surface);
  border-bottom:1px solid var(--mf-border);
}
.main .mf-context-project-head strong,
.main .procurement-collapse-summary h2,
.main .production-table-toolbar strong{
  color:var(--mf-text);
  font-size:14px;
  font-weight:850;
}
.main .mf-context-project-summary{font-weight:750;color:var(--mf-muted)}
.main .mf-context-detail{padding:0!important}
.main .mf-context-detail > .table-wrap,
.main .mf-context-detail > .ui-table-wrap{margin:0!important}

/* Type B canonical cards keep the same compact project/product hierarchy. */
.main .ui-table-card-collapsible{border-radius:14px!important}
.main .ui-table-card-collapsible > .ui-table-card-head{min-height:58px!important;padding:12px 16px!important}
.main .ui-table-card-collapsible > .ui-table-card-body{background:#fff!important}

@media(max-width:1024px){
  .main .ui-table-standard-host > .table-wrap > table,
  .main .ui-table-standard-host > .ui-table-wrap > table,
  .main .ui-table-standard-host .ui-table-standard-wrap > table,
  .main .ui-table-card .ui-table-standard-wrap > table{min-width:700px}
}
@media(max-width:640px){
  .main .ui-table-standard-host > .table-wrap > table,
  .main .ui-table-standard-host > .ui-table-wrap > table,
  .main .ui-table-standard-host .ui-table-standard-wrap > table,
  .main .ui-table-card .ui-table-standard-wrap > table{min-width:650px}
  .main .ui-table-standard-host > .table-wrap > table th,
  .main .ui-table-standard-host > .ui-table-wrap > table th,
  .main .ui-table-standard-host .ui-table-standard-wrap > table th,
  .main .ui-table-card .ui-table-standard-wrap > table th{height:38px!important;padding:8px 10px!important;font-size:9px!important}
  .main .ui-table-standard-host > .table-wrap > table td,
  .main .ui-table-standard-host > .ui-table-wrap > table td,
  .main .ui-table-standard-host .ui-table-standard-wrap > table td,
  .main .ui-table-card .ui-table-standard-wrap > table td{padding:8px 10px!important;font-size:11px!important}
}

/* ========================================================================
   MAGENTA TABLE STANDARD — REFERENCE UI
   Reference: Sales > Project > Daftar Produk.
   All normal tables use this visual language; collapsible tables reuse it
   inside the Project/Product shell. Presentation only.
   ======================================================================== */
.main .ui-table-card,
.main .ui-table-standard-host{
  background:var(--mf-surface)!important;
  border:1px solid var(--mf-border)!important;
  border-radius:16px!important;
  box-shadow:var(--mf-shadow-sm)!important;
  overflow:hidden!important;
}
.main .ui-table-standard-host{
  margin:0 0 18px!important;
}
.main .ui-table-card .ui-table-wrap,
.main .ui-table-standard-host > .table-wrap,
.main .ui-table-standard-host > .ui-table-wrap{
  background:var(--mf-surface)!important;
  padding:0!important;
}

/* Fine magenta rule used by the reference table. */
.main .ui-table-card table.ui-table,
.main .ui-table-standard-host table.ui-table,
.main .ui-table-standard-host table.table,
.main .ui-table-standard-host table.data-table{
  border-top:3px solid var(--mf-pink)!important;
}

.main .ui-table-card table.ui-table th,
.main .ui-table-standard-host table.ui-table th,
.main .ui-table-standard-host table.table th,
.main .ui-table-standard-host table.data-table th{
  height:34px!important;
  padding:8px 14px!important;
  background:#fbf9f5!important;
  color:#64748a!important;
  border-bottom:1px solid var(--mf-border)!important;
  font-size:9.5px!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  line-height:1.25!important;
  text-transform:uppercase!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
}

.main .ui-table-card table.ui-table td,
.main .ui-table-standard-host table.ui-table td,
.main .ui-table-standard-host table.table td,
.main .ui-table-standard-host table.data-table td{
  min-height:62px!important;
  padding:13px 14px!important;
  background:#fffdf9!important;
  color:var(--mf-text)!important;
  border-bottom:1px solid #ebe3da!important;
  font-size:12px!important;
  line-height:1.48!important;
  vertical-align:middle!important;
}

/* Do not use zebra striping: the reference uses clean white rows. */
.main .ui-table-card table.ui-table tbody tr:nth-child(even) td,
.main .ui-table-standard-host table.ui-table tbody tr:nth-child(even) td,
.main .ui-table-standard-host table.table tbody tr:nth-child(even) td,
.main .ui-table-standard-host table.data-table tbody tr:nth-child(even) td{
  background:#fffdf9!important;
}
.main .ui-table-card table.ui-table tbody tr:hover td,
.main .ui-table-standard-host table.ui-table tbody tr:hover td,
.main .ui-table-standard-host table.table tbody tr:hover td,
.main .ui-table-standard-host table.data-table tbody tr:hover td{
  background:#fff9f5!important;
}

.main .ui-table-card table.ui-table th:first-child,
.main .ui-table-card table.ui-table td:first-child,
.main .ui-table-standard-host table.ui-table th:first-child,
.main .ui-table-standard-host table.ui-table td:first-child,
.main .ui-table-standard-host table.table th:first-child,
.main .ui-table-standard-host table.table td:first-child{
  padding-left:16px!important;
}
.main .ui-table-card table.ui-table th:last-child,
.main .ui-table-card table.ui-table td:last-child,
.main .ui-table-standard-host table.ui-table th:last-child,
.main .ui-table-standard-host table.ui-table td:last-child,
.main .ui-table-standard-host table.table th:last-child,
.main .ui-table-standard-host table.table td:last-child{
  padding-right:16px!important;
}

/* Product cells: image + code/name/type, matching the reference table. */
.main .ui-table-card table.ui-table td:first-child img,
.main .ui-table-standard-host table.ui-table td:first-child img,
.main .ui-table-standard-host table.table td:first-child img{
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
  display:inline-block!important;
  vertical-align:middle!important;
  margin-right:10px!important;
  border-radius:5px!important;
}
.main .ui-table-card table.ui-table td:first-child b,
.main .ui-table-standard-host table.ui-table td:first-child b,
.main .ui-table-standard-host table.table td:first-child b{
  color:#17314d!important;
  font-weight:850!important;
}
.main .ui-table-card table.ui-table td:first-child small,
.main .ui-table-standard-host table.ui-table td:first-child small,
.main .ui-table-standard-host table.table td:first-child small{
  color:var(--mf-muted)!important;
  font-size:10px!important;
}

/* Product/detail thumbnail contract: never let source image dimensions expand table rows. */
.ui-table td .mf-thumb-54,.table td .mf-thumb-54{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;object-fit:contain!important;object-position:center!important;display:block!important;flex:0 0 64px!important;border-radius:6px!important;background:#fff!important}

/* Reference helper classes used by product/detail tables. */
.main .mf-flex-center-10{display:table-cell!important;vertical-align:middle!important;min-width:190px!important}
.main .mf-flex-center-10 > .mf-thumb-54,.main .mf-flex-center-10 > img{display:inline-block!important;vertical-align:middle!important;margin-right:10px!important}
.main .mf-flex-center-10 > div{display:inline-block!important;vertical-align:middle!important;min-width:0!important}
.main .mf-thumb-54,.mf-thumb-54{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;object-fit:contain!important;object-position:center!important;flex:0 0 64px!important;display:block!important;border-radius:6px!important;background:#fff!important}
.main .mf-min-150{min-width:150px!important}
.main .mf-min-180{min-width:180px!important}
.main .mf-min-220{min-width:220px!important}
.main .color-gallery{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
.main .color-gallery img{width:42px!important;height:42px!important;object-fit:cover!important;border:1px solid var(--mf-border)!important;border-radius:5px!important;background:#fff!important}

/* Status/action columns remain compact and readable. */
.main .ui-table-card table.ui-table td:last-child,
.main .ui-table-standard-host table.ui-table td:last-child,
.main .ui-table-standard-host table.table td:last-child{
  white-space:nowrap!important;
}

/* Type B keeps the same table body; only the project/product header controls collapse. */
.main .ui-table-card-collapsible > .ui-table-card-head,
.main .mf-context-project-head,
.main .procurement-collapse-summary,
.main .production-table-toolbar{
  background:#fffdf9!important;
  border-bottom:1px solid var(--mf-border)!important;
}
.main .ui-table-card-collapsible > .ui-table-card-body{background:#fffdf9!important}

@media(max-width:760px){
  .main .ui-table-card table.ui-table td,
  .main .ui-table-standard-host table.ui-table td,
  .main .ui-table-standard-host table.table td{padding:11px 10px!important}
  .main .ui-table-card table.ui-table th,
  .main .ui-table-standard-host table.ui-table th,
  .main .ui-table-standard-host table.table th{padding:8px 10px!important}
}

/* ========================================================================
   SALES DETAIL — PROFESSIONAL PROJECT WORKSPACE
   Presentation-only. Keeps the existing workflow and data intact.
   ======================================================================== */
.main .ui-sales-page{
  width:100%;
  max-width:none;
  margin:0;
  padding:24px 28px 42px;
}
.main .ui-sales-page .ui-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:0 0 18px;
  margin:0 0 18px;
  border-bottom:1px solid var(--mf-border);
}
.main .ui-sales-page .ui-page-head .eyebrow{
  margin:0 0 5px;
  color:var(--mf-pink);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.main .ui-sales-page .ui-page-head .page-title{
  margin:0;
  color:#17314d;
  font-size:28px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.02em;
}
.main .ui-sales-page .page-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Workflow must be a horizontal professional process bar, never a raw OL. */
.main .ui-sales-page .ui-workflow{
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid var(--mf-border);
  border-radius:12px;
  background:var(--mf-surface);
  box-shadow:var(--mf-shadow-sm);
}
.main .ui-sales-page .ui-workflow ol{
  display:flex;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}
.main .ui-sales-page .ui-workflow-step{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 0;
  min-width:0;
  color:#8a8b8d;
}
.main .ui-sales-page .ui-workflow-step:not(:last-child)::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  margin:0 10px;
  background:#ddd6ce;
}
.main .ui-sales-page .ui-workflow-marker{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border:1px solid #ddd6ce;
  border-radius:50%;
  background:#fff;
  color:#8a8b8d;
  font-size:10px;
  font-weight:900;
}
.main .ui-sales-page .ui-workflow-copy{display:block;min-width:0;white-space:nowrap}
.main .ui-sales-page .ui-workflow-copy strong{display:block;color:#697586;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.main .ui-sales-page .ui-workflow-copy small{display:none}
.main .ui-sales-page .ui-workflow-complete .ui-workflow-marker{background:#edf8f1;border-color:#c9e8d5;color:#23804a}
.main .ui-sales-page .ui-workflow-complete .ui-workflow-copy strong{color:#23804a}
.main .ui-sales-page .ui-workflow-current .ui-workflow-marker{background:var(--mf-pink);border-color:var(--mf-pink);color:#fff;box-shadow:0 4px 10px rgba(196,26,126,.18)}
.main .ui-sales-page .ui-workflow-current .ui-workflow-copy strong{color:#17314d}

.main .ui-sales-page > .notice:not(.success),
.main .ui-sales-page > .alert{
  margin:0 0 18px;
  border-radius:10px;
  font-size:11px;
  line-height:1.5;
}
.main .ui-sales-page > .grid.mf-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}
.main .ui-sales-page .stat-card{
  min-height:88px;
  padding:14px 16px;
  border:1px solid var(--mf-border);
  border-radius:12px;
  background:var(--mf-surface);
  box-shadow:var(--mf-shadow-sm);
}
.main .ui-sales-page .stat-top{font-size:10px;color:#7b8190;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.main .ui-sales-page .stat-icon{color:var(--mf-pink)}
.main .ui-sales-page .ui-stat-value,
.main .ui-sales-page .ui-section-number{margin-top:7px;color:#17314d;font-size:15px;font-weight:850;line-height:1.25}
.main .ui-sales-page .stat-note{margin-top:3px;color:var(--mf-muted);font-size:10px}

.main .ui-sales-page > .card{
  margin:0 0 18px;
  border:1px solid var(--mf-border);
  border-radius:14px;
  background:var(--mf-surface);
  box-shadow:var(--mf-shadow-sm);
  overflow:hidden;
}
.main .ui-sales-page > .card > .card-head{
  min-height:64px;
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--mf-border);
  background:#fffdf9;
}
.main .ui-sales-page > .card > .card-head h2{
  margin:0 0 3px;
  color:#17314d;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
}
.main .ui-sales-page > .card > .card-head .muted{font-size:10px;line-height:1.4;color:var(--mf-muted)}
.main .ui-sales-page > .card > .grid{padding:16px 18px}
.main .ui-sales-page .notice.success{margin:0;padding:13px 18px;border:0;border-bottom:1px solid var(--mf-border);border-radius:0;background:#f3faf5}
.main .ui-sales-page .mf-form-row-10{padding:16px 18px}

/* Material approval block */
.main .ui-sales-page .card .grid.mf-grid-3>div{
  padding:11px 13px;
  border:1px solid #eee7df;
  border-radius:9px;
  background:#fff;
}
.main .ui-sales-page .card .grid.mf-grid-3 .muted{font-size:9px;text-transform:uppercase;letter-spacing:.04em}

/* Product table follows the supplied reference exactly: clean rows, magenta rule. */
.main .ui-sales-page .card:has(table) > .table-wrap{
  border-top:3px solid var(--mf-pink);
}
.main .ui-sales-page .card:has(table) > .table-wrap > table{
  width:100%;
  min-width:1180px;
  border-collapse:separate;
  border-spacing:0;
}
.main .ui-sales-page .card:has(table) > .table-wrap > table th{
  height:36px!important;
  padding:9px 12px!important;
  background:#fbf9f5!important;
  color:#64748a!important;
  border-bottom:1px solid var(--mf-border)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.main .ui-sales-page .card:has(table) > .table-wrap > table td{
  padding:13px 12px!important;
  background:#fffdf9!important;
  border-bottom:1px solid #ebe3da!important;
  color:#17314d!important;
  font-size:11px!important;
  line-height:1.5!important;
  vertical-align:middle!important;
}
.main .ui-sales-page .card:has(table) > .table-wrap > table tbody tr:hover td{background:#fff8f3!important}
.main .ui-sales-page .card:has(table) > .table-wrap > table tbody tr:last-child td{border-bottom:0!important}
.main .ui-sales-page .card:has(table) > .table-wrap > table td:first-child{padding-left:16px!important}
.main .ui-sales-page .card:has(table) > .table-wrap > table td:last-child{padding-right:16px!important}
.main .ui-sales-page .card:has(table) > .table-wrap > table td:first-child .mf-thumb-54{width:58px!important;height:58px!important;border:1px solid #eee7df;border-radius:6px;background:#fff}
.main .ui-sales-page .card:has(table) > .table-wrap > table td:first-child b{font-size:11px;color:#17314d}
.main .ui-sales-page .card:has(table) > .table-wrap > table td:first-child .muted{font-size:10px}
.main .ui-sales-page .color-gallery img{width:46px!important;height:46px!important}

/* Revision history is a dense audit table, not a second visual language. */
.main .ui-sales-page .card:last-of-type .table-wrap > table{min-width:1000px}

@media(max-width:1100px){
  .main .ui-sales-page > .grid.mf-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .main .ui-sales-page{padding:16px 14px 30px}
  .main .ui-sales-page .ui-page-head{align-items:flex-start;flex-direction:column}
  .main .ui-sales-page .page-title{font-size:23px!important}
  .main .ui-sales-page > .grid.mf-grid-4{grid-template-columns:1fr}
  .main .ui-sales-page .ui-workflow{overflow-x:auto}
  .main .ui-sales-page .ui-workflow ol{min-width:620px}
  .main .ui-sales-page .ui-workflow-step{flex:0 0 auto}
}

/* ========================================================================
   MAGENTA FURNITURE — FINAL TABLE & ACTION STANDARD
   This is the single visual authority for operational tables and buttons.
   ======================================================================== */
:root{
  --mf-action-h:40px;
  --mf-action-pad:14px;
  --mf-table-head-h:44px;
  --mf-table-row-h:48px;
}

/* Buttons: one comfortable standard size. Keep icon-only controls separate. */
.main .btn,
.main a.btn,
.main button.btn,
.modal .btn,
.ui-context-dialog .btn,
.ui-table-card .btn{
  min-height:var(--mf-action-h)!important;
  height:var(--mf-action-h);
  padding:0 var(--mf-action-pad)!important;
  border-radius:9px;
  font-size:12px;
  line-height:1;
  font-weight:750;
}
.main .btn-sm,
.main .btn-small,
.main .btn.small,
.modal .btn-sm,
.modal .btn-small,
.modal .btn.small{
  min-height:var(--mf-action-h)!important;
  height:var(--mf-action-h);
  padding:0 var(--mf-action-pad)!important;
  font-size:12px;
}

/* Type A — normal table card. */
.main .ui-table-card-normal,
.main .ui-table-standard-host{
  background:var(--mf-surface);
  border:1px solid var(--mf-border);
  border-radius:16px;
  box-shadow:0 2px 12px rgba(40,47,55,.055);
  overflow:hidden;
}
.main .ui-table-standard-host{margin-bottom:18px}
.main .ui-table-standard-host>.table-wrap,
.main .ui-table-standard-host>.ui-table-wrap,
.main .ui-table-standard-host>[class*="table-wrap"]{
  border:0;
  border-radius:0;
  margin:0;
}

/* Any legacy table is visually promoted into the same Type A geometry. */
.main .table-wrap,
.main .ui-table-wrap,
.main [class*="table-container"],
.main [class*="table-scroll"]{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
}
.main .table-wrap>table,
.main .ui-table-wrap>table,
.main [class*="table-container"]>table,
.main [class*="table-scroll"]>table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  background:#fff;
}
.main .ui-table-card table,
.main .ui-table-standard-host table{
  margin:0;
}
.main .table-wrap>table>thead>tr>th,
.main .ui-table-wrap>table>thead>tr>th,
.main [class*="table-container"]>table>thead>tr>th,
.main [class*="table-scroll"]>table>thead>tr>th{
  height:var(--mf-table-head-h);
  padding:11px 14px;
  background:var(--mf-surface-2);
  color:#66645f;
  border-bottom:1px solid var(--mf-border);
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
}
.main .table-wrap>table>tbody>tr>td,
.main .ui-table-wrap>table>tbody>tr>td,
.main [class*="table-container"]>table>tbody>tr>td,
.main [class*="table-scroll"]>table>tbody>tr>td{
  min-height:var(--mf-table-row-h);
  height:var(--mf-table-row-h);
  padding:11px 14px;
  background:#fff;
  color:var(--mf-text);
  border-bottom:1px solid #eee7df;
  font-size:12px;
  line-height:1.45;
  vertical-align:middle;
}
.main .table-wrap>table>tbody>tr:hover>td,
.main .ui-table-wrap>table>tbody>tr:hover>td,
.main [class*="table-container"]>table>tbody>tr:hover>td,
.main [class*="table-scroll"]>table>tbody>tr:hover>td{background:#fffaf6}
.main .table-wrap>table>tbody>tr:last-child>td,
.main .ui-table-wrap>table>tbody>tr:last-child>td{border-bottom:0}
.main .table-wrap>table th:first-child,
.main .table-wrap>table td:first-child,
.main .ui-table-wrap>table th:first-child,
.main .ui-table-wrap>table td:first-child{padding-left:18px}
.main .table-wrap>table th:last-child,
.main .table-wrap>table td:last-child,
.main .ui-table-wrap>table th:last-child,
.main .ui-table-wrap>table td:last-child{padding-right:18px}
.main .table-wrap .empty,
.main .ui-table-wrap .empty,
.main table td.empty{
  padding:28px 18px!important;
  text-align:center;
  color:var(--mf-muted);
  background:var(--mf-surface-2);
}

/* Type B — collapsible grouped operational table. */
.main details.ui-table-card-collapsible,
.main details[data-ui-table-group="project"],
.main details[data-ui-table-group="product"]{
  margin:0 0 18px;
  background:var(--mf-surface);
  border:1px solid var(--mf-border);
  border-radius:16px;
  box-shadow:0 2px 12px rgba(40,47,55,.055);
  overflow:hidden;
}
.main .ui-table-card-collapsible>.ui-table-card-head,
.main details[data-ui-table-group]>.ui-table-card-head{
  min-height:64px;
  padding:13px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:var(--mf-surface);
  border-bottom:1px solid var(--mf-border);
  cursor:pointer;
  list-style:none;
}
.main .ui-table-card-collapsible>.ui-table-card-head::-webkit-details-marker,
.main details[data-ui-table-group]>.ui-table-card-head::-webkit-details-marker{display:none}
.main .ui-table-card-collapsible:not([open])>.ui-table-card-head,
.main details[data-ui-table-group]:not([open])>.ui-table-card-head{border-bottom:0}
.main .ui-table-card-title strong{font-size:14px;font-weight:800;color:var(--mf-text)}
.main .ui-table-card-title small{display:block;margin-top:3px;color:var(--mf-muted);font-size:11px}
.main .ui-table-card-count{min-height:26px;padding:0 9px;font-size:10px;font-weight:800}
.main .ui-table-card-toggle{min-height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--mf-border);border-radius:9px;background:#fff;color:var(--mf-text);font-size:11px;font-weight:750}
.main .ui-table-card-toggle-icon::before{font-size:16px;line-height:1}
.main .ui-table-card-body{padding:0;background:#fff}

/* Project/product grouping rows inside Type B tables. */
.main .ui-table-group-row>td{height:40px!important;padding:9px 14px!important;background:#f8f3ec!important;color:var(--mf-text);font-weight:800;border-bottom:1px solid var(--mf-border)!important}
.main .ui-table-product-row>td:first-child{padding-left:28px!important}

/* Prevent oversized content from creating giant empty visual areas. */
.main .ui-table-card-body img,
.main .ui-table-standard-host img{max-height:140px;object-fit:contain}

/* Mobile affordance for wide operational tables. JS adds the class only when horizontal overflow is real. */
@media(max-width:760px){
  .main .mf-has-horizontal-scroll{position:relative;scrollbar-color:#c7b9aa transparent;padding-bottom:2px;outline:none}
  .main .mf-has-horizontal-scroll::after{
    content:'Geser ← →';
    position:absolute;top:7px;right:10px;z-index:3;
    padding:4px 8px;
    border:1px solid var(--mf-border);border-radius:999px;
    background:rgba(255,253,249,.96);color:var(--mf-muted);
    font-size:9px;font-weight:800;letter-spacing:.02em;
    pointer-events:none;box-shadow:0 3px 10px rgba(34,42,52,.06);
  }
  .main .mf-has-horizontal-scroll:focus-visible{box-shadow:0 0 0 3px rgba(197,31,120,.12);}
}

/* Responsive table contract: preserve readable columns, scroll horizontally. */
@media(max-width:760px){
  .main .table-wrap>table,
  .main .ui-table-wrap>table,
  .main [class*="table-container"]>table,
  .main [class*="table-scroll"]>table{min-width:680px}
  .main .table-wrap>table>thead>tr>th,
  .main .ui-table-wrap>table>thead>tr>th{height:42px;padding:9px 11px;font-size:9px}
  .main .table-wrap>table>tbody>tr>td,
  .main .ui-table-wrap>table>tbody>tr>td{height:44px;padding:9px 11px;font-size:11px}
  .main .btn,.main .btn-sm,.main .btn-small,.main .btn.small{min-height:38px!important;height:38px;font-size:11px}
}

/* ================================================================
   CANONICAL POPUP / MODAL SYSTEM — FINAL STANDARD
   One visual contract for every popup in the application.
   ================================================================ */
:root{
  --mf-modal-radius:18px;
  --mf-modal-pad:24px;
  --mf-modal-shadow:0 30px 90px rgba(16,41,67,.20),0 8px 28px rgba(34,42,52,.08);
}

/* Overlay */
body.mf-modal-open{overflow:hidden!important}
.modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{
  background:rgba(16,41,67,.48)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  padding:24px!important;
}

/* Dialog shell */
.modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{
  width:min(960px,calc(100vw - 48px))!important;
  max-width:960px!important;
  max-height:calc(100dvh - 48px)!important;
  border:1px solid #dfd4c8!important;
  border-radius:var(--mf-modal-radius)!important;
  background:var(--mf-surface)!important;
  box-shadow:var(--mf-modal-shadow)!important;
  overflow:hidden!important;
}
.modal-box:before,.modal-card:before,.add-product-dialog:before,.metal-modal-dialog:before,.ml-modal-dialog:before,.report-print-dialog:before,.ui-context-modal-dialog:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mf-pink);z-index:3;
}

/* Header */
.modal-box>.card-head,.modal-head,.modal-header,.add-product-head,.metal-modal-head,.ui-context-dialog-head{
  min-height:82px!important;
  padding:22px var(--mf-modal-pad)!important;
  align-items:center!important;
  gap:18px!important;
  background:var(--mf-surface)!important;
  border-bottom:1px solid var(--mf-border)!important;
}
.modal-box>.card-head>div:first-child,.modal-head>div:first-child,.modal-header>div:first-child,.add-product-head>div:first-child,.metal-modal-head>div:first-child{min-width:0}
.modal-box>.card-head h2,.modal-head h2,.modal-header h2,.add-product-head h2,.metal-modal-head h2,.ui-context-dialog-head h2{
  margin:0!important;
  color:var(--mf-text)!important;
  font-size:20px!important;
  line-height:1.25!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
}
.modal-box>.card-head h2:before,.modal-head h2:before,.modal-header h2:before,.add-product-head h2:before,.metal-modal-head h2:before{
  content:"";display:block;width:28px;height:3px;margin-bottom:9px;border-radius:99px;background:var(--mf-pink);
}
.modal-box>.card-head .muted,.modal-head p,.modal-head .muted,.modal-header p,.add-product-head p,.metal-modal-head .ml-muted,.ui-context-dialog-head .muted{
  margin:5px 0 0!important;color:var(--mf-muted)!important;font-size:11px!important;line-height:1.55!important;font-weight:500!important;max-width:720px;
}

/* Close control — consistent medium size */
.modal-box>.card-head>.btn,.modal-head>.btn,.modal-header>.btn,.add-product-head>.btn,.metal-modal-close,.modal-x{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;padding:0!important;flex:0 0 38px!important;
  display:grid!important;place-items:center!important;
  border:1px solid var(--mf-border-strong)!important;
  border-radius:10px!important;
  background:#fff!important;color:var(--mf-text)!important;
  font-size:16px!important;font-weight:650!important;
  box-shadow:none!important;
}
.modal-box>.card-head>.btn:hover,.modal-head>.btn:hover,.modal-header>.btn:hover,.add-product-head>.btn:hover,.metal-modal-close:hover,.modal-x:hover{
  background:var(--mf-surface-2)!important;border-color:#c9b9a8!important;color:var(--mf-pink)!important;
}

/* Body */
.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,.modal-box>form,.modal-box>div:not(.card-head):not(.modal-head):not(.modal-foot),.metal-modal-dialog>form{
  padding:22px var(--mf-modal-pad)!important;
  overflow:auto!important;
  min-height:0!important;
  scrollbar-gutter:stable;
}
.modal-box>form{display:block!important}

/* Form rhythm inside popups */
.modal-box label,.add-product-body label,.modal-body label,.metal-modal-body label,.revision-box label{
  color:var(--mf-text)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.01em;
}
.modal-box label>small,.add-product-body label>small,.modal-body label>small,.metal-modal-body label>small,.modal-section-help{
  color:var(--mf-subtle)!important;font-size:10px!important;font-weight:500!important;line-height:1.45;
}
.modal-box input:not([type="checkbox"]):not([type="radio"]),.modal-box select,.modal-box textarea,
.add-product-body input:not([type="checkbox"]):not([type="radio"]),.add-product-body select,.add-product-body textarea,
.modal-body input:not([type="checkbox"]):not([type="radio"]),.modal-body select,.modal-body textarea,
.metal-modal-body input:not([type="checkbox"]):not([type="radio"]),.metal-modal-body select,.metal-modal-body textarea{
  min-height:42px!important;padding:10px 12px!important;border-radius:10px!important;background:#fff!important;border-color:var(--mf-border-strong)!important;
  font-size:12px!important;color:var(--mf-text)!important;
}
.modal-box textarea,.add-product-body textarea,.modal-body textarea,.metal-modal-body textarea{min-height:92px!important;line-height:1.55!important}

/* Section blocks */
.modal-section{padding:0 0 18px!important;margin:0 0 18px!important;border-bottom:1px solid var(--mf-border)!important}
.modal-section:last-child{margin-bottom:0!important;border-bottom:0!important}
.modal-section-title{margin:0 0 6px!important;color:var(--mf-text)!important;font-size:12px!important;font-weight:850!important;letter-spacing:.01em}
.modal-section-title:before{content:"";display:inline-block;width:4px;height:4px;margin:0 7px 2px 0;border-radius:50%;background:var(--mf-pink)}
.modal-section-help{margin:0 0 10px!important}

/* Product/add form: compact professional two-column cards */
.add-product-grid,.form-grid,.revision-grid{gap:14px!important;align-items:start!important}
.add-product-grid>div,.add-product-body>.form-grid>label:not(.mf-grid-full){min-width:0}
.add-product-body .reuse-box{margin:0 0 18px!important;padding:14px 16px!important;border:1px solid #e7c6d7!important;border-radius:12px!important;background:var(--mf-pink-soft)!important}
.add-product-body .reuse-options{gap:8px!important}
.add-product-body .criteria-box,.add-product-body .notes-box,.add-product-body .color-upload-box{
  padding:12px!important;border:1px solid var(--mf-border)!important;border-radius:12px!important;background:var(--mf-surface-2)!important;
}
.add-product-body .criteria-add{margin-top:10px!important}
.add-product-body input[type="file"]{padding:8px!important;background:#fff!important}

/* Revision cards */
.revision-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.revision-box{
  position:relative!important;
  padding:15px!important;
  border:1px solid var(--mf-border)!important;
  border-radius:13px!important;
  background:var(--mf-surface-2)!important;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.revision-box:hover{border-color:#d5c6b8!important;background:#fffaf5!important}
.revision-box:has(input[type="checkbox"]:checked){border-color:#dca5c2!important;background:#fff8fc!important;box-shadow:0 0 0 3px rgba(197,31,120,.06)!important}
.revision-box .check{min-height:24px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;color:var(--mf-text)!important}
.revision-box .check input[type="checkbox"]{width:16px!important;height:16px!important;min-height:16px!important;accent-color:var(--mf-pink);flex:0 0 16px}
.revision-box .old-value{margin:9px 0 7px!important;padding:7px 9px!important;border-radius:8px!important;background:#f1ece5!important;color:var(--mf-muted)!important;font-size:10px!important;line-height:1.45}
.revision-box .old-value span{color:var(--mf-text)!important;font-weight:700!important}
.revision-box small{display:block;margin-top:6px!important;color:var(--mf-subtle)!important;font-size:10px!important}

/* Notice inside popup */
.modal-box .notice,.modal-card .notice,.add-product-body .notice,.modal-body .notice{
  margin:0 0 16px!important;padding:11px 13px!important;border:1px solid var(--mf-border)!important;border-left:3px solid var(--mf-pink)!important;border-radius:10px!important;background:var(--mf-surface-2)!important;color:var(--mf-muted)!important;font-size:11px!important;line-height:1.55!important;
}

/* Footer / action bar */
.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{
  min-height:70px!important;padding:14px var(--mf-modal-pad)!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;
  border-top:1px solid var(--mf-border)!important;background:#fbf7f1!important;
}
.modal-box>form>.mf-flex-end-gap:last-child,.modal-box>form>.ui-actions-end-gap-8:last-child,.modal-box>form>.ui-form-actions:last-child{
  position:sticky!important;bottom:-22px!important;margin:22px calc(var(--mf-modal-pad) * -1) -22px!important;padding:14px var(--mf-modal-pad)!important;
  border-top:1px solid var(--mf-border)!important;background:#fbf7f1!important;z-index:2;
}
.modal-foot .btn,.add-product-foot .btn,.metal-modal-foot .btn,.modal-box>form>.mf-flex-end-gap:last-child .btn,.modal-box>form>.ui-actions-end-gap-8:last-child .btn{
  min-height:40px!important;height:40px!important;padding:0 15px!important;border-radius:9px!important;font-size:12px!important;font-weight:800!important;
}

/* Standardize all common popup sizes */
#revisionModal .modal-box{max-width:900px!important}
#addProductModal.modal .modal-box{max-width:1040px!important}
#addProductModal.add-product-modal .add-product-dialog{max-width:1040px!important}
#productModal .modal-box{max-width:760px!important}
#pointModal .modal-card,#reqModal .modal-card{max-width:760px!important}

/* Prevent giant legacy controls / accidental oversized content */
.modal img,.modal-card img,.add-product-modal img,.metal-modal img,.ml-modal img{max-width:100%;height:auto}
.modal table,.modal-card table,.add-product-modal table,.metal-modal table,.ml-modal table{max-width:100%}

/* Responsive modal contract */
@media(max-width:760px){
  .modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{padding:10px!important}
  .modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important}
  .modal-box>.card-head,.modal-head,.modal-header,.add-product-head,.metal-modal-head{min-height:70px!important;padding:17px 16px!important}
  .modal-box>.card-head h2,.modal-head h2,.modal-header h2,.add-product-head h2,.metal-modal-head h2{font-size:18px!important}
  .modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,.modal-box>form{padding:17px 16px!important}
  .revision-grid,.add-product-grid,.form-grid{grid-template-columns:1fr!important}
  .modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{min-height:64px!important;padding:11px 16px!important}
  .modal-foot .btn,.add-product-foot .btn,.metal-modal-foot .btn{flex:1!important}
  .modal-box>form>.mf-flex-end-gap:last-child,.modal-box>form>.ui-actions-end-gap-8:last-child,.modal-box>form>.ui-form-actions:last-child{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;bottom:-17px!important;margin-bottom:-17px!important}
}

/* ================================================================
   MAGENTA FURNITURE — PREMIUM MODAL SYSTEM
   Canonical visual contract for all application popups.
   ================================================================ */
:root{
  --mf-modal-ink:#132f4c;
  --mf-modal-muted:#728198;
  --mf-modal-line:#e7ddd0;
  --mf-modal-surface:#fffdfa;
  --mf-modal-soft:#f8f4ee;
  --mf-modal-pink:#c81778;
  --mf-modal-navy:#102f4b;
}

/* Overlay: calm, focused, never muddy */
.modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{
  background:rgba(13,29,45,.48)!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px!important;
  box-sizing:border-box!important;
  z-index:9990!important;
}

/* Premium dialog frame */
.modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{
  position:relative!important;
  width:min(1040px,calc(100vw - 56px))!important;
  max-width:1040px!important;
  max-height:min(88dvh,900px)!important;
  overflow:hidden!important;
  background:var(--mf-modal-surface)!important;
  border:1px solid rgba(208,195,178,.72)!important;
  border-radius:20px!important;
  box-shadow:0 36px 100px rgba(8,24,39,.24),0 12px 32px rgba(8,24,39,.12)!important;
  isolation:isolate!important;
}

/* Brand rail gives every popup a designed, not generic, identity */
.modal-box:before,.modal-card:before,.add-product-dialog:before,.metal-modal-dialog:before,.ml-modal-dialog:before,.report-print-dialog:before,.ui-context-modal-dialog:before,.mf-command-dialog:before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:4px!important;
  background:linear-gradient(90deg,var(--mf-modal-pink) 0%,#e04a98 48%,#f0c6dc 100%)!important;
  z-index:3!important;
}

/* Header */
.modal-box>.card-head,.modal-head,.modal-header,.add-product-head,.metal-modal-head,.ui-context-dialog-head{
  position:relative!important;
  min-height:92px!important;
  display:flex!important;
  align-items:center!important;
  gap:22px!important;
  padding:24px 28px 20px!important;
  background:linear-gradient(180deg,#fffefa 0%,#fcf8f3 100%)!important;
  border-bottom:1px solid var(--mf-modal-line)!important;
}
.modal-box>.card-head>div:first-child,.modal-head>div:first-child,.modal-header>div:first-child,.add-product-head>div:first-child,.metal-modal-head>div:first-child,.ui-context-dialog-head>div:first-child{
  min-width:0!important;
  flex:1 1 auto!important;
}
.modal-box>.card-head h2,.modal-head h2,.modal-header h2,.add-product-head h2,.metal-modal-head h2,.ui-context-dialog-head h2{
  margin:0!important;
  color:var(--mf-modal-ink)!important;
  font-size:22px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:-.025em!important;
}
.modal-box>.card-head h2:after,.modal-head h2:after,.modal-header h2:after,.add-product-head h2:after,.metal-modal-head h2:after,.ui-context-dialog-head h2:after{
  content:""!important;
  display:block!important;
  width:34px!important;
  height:3px!important;
  margin-top:10px!important;
  border-radius:999px!important;
  background:var(--mf-modal-pink)!important;
}
.modal-box>.card-head .muted,.modal-head p,.modal-head .muted,.modal-header p,.add-product-head p,.metal-modal-head .ml-muted,.ui-context-dialog-head .muted{
  margin:8px 0 0!important;
  color:var(--mf-modal-muted)!important;
  font-size:12px!important;
  line-height:1.55!important;
  max-width:760px!important;
}

/* Close control */
.modal-box>.card-head>.btn,.modal-head>.btn,.modal-header>.btn,.add-product-head>.btn,.metal-modal-close,.modal-x{
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #dfd2c3!important;
  border-radius:11px!important;
  background:#fff!important;
  color:var(--mf-modal-ink)!important;
  font-size:16px!important;
  font-weight:800!important;
  box-shadow:0 2px 7px rgba(16,41,67,.04)!important;
}
.modal-box>.card-head>.btn:hover,.modal-head>.btn:hover,.modal-header>.btn:hover,.add-product-head>.btn:hover,.metal-modal-close:hover,.modal-x:hover{
  border-color:#c81778!important;
  color:#c81778!important;
  background:#fff7fb!important;
  transform:translateY(-1px)!important;
}

/* Content becomes the only scrolling region */
.modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,.modal-box>form,.modal-box>div:not(.card-head):not(.modal-head):not(.modal-foot),.metal-modal-dialog>form{
  padding:24px 28px!important;
  max-height:calc(min(88dvh,900px) - 165px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#cfc3b5 transparent!important;
}
.modal-box>form{margin:0!important;display:block!important}
.modal-body::-webkit-scrollbar,.add-product-body::-webkit-scrollbar,.metal-modal-body::-webkit-scrollbar,.modal-box>form::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-thumb,.add-product-body::-webkit-scrollbar-thumb,.metal-modal-body::-webkit-scrollbar-thumb,.modal-box>form::-webkit-scrollbar-thumb{background:#d3c8bc;border-radius:999px;border:2px solid transparent;background-clip:padding-box}

/* Form typography and fields */
.modal-box label,.add-product-body label,.modal-body label,.metal-modal-body label,.revision-box label{
  display:block!important;
  color:var(--mf-modal-ink)!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.45!important;
}
.modal-box label>small,.add-product-body label>small,.modal-body label>small,.metal-modal-body label>small,.modal-section-help{
  display:block!important;
  margin:5px 0 9px!important;
  color:var(--mf-modal-muted)!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1.5!important;
}
.modal-box input:not([type="checkbox"]):not([type="radio"]),.modal-box select,.modal-box textarea,
.add-product-body input:not([type="checkbox"]):not([type="radio"]),.add-product-body select,.add-product-body textarea,
.modal-body input:not([type="checkbox"]):not([type="radio"]),.modal-body select,.modal-body textarea,
.metal-modal-body input:not([type="checkbox"]):not([type="radio"]),.metal-modal-body select,.metal-modal-body textarea{
  width:100%!important;
  min-height:44px!important;
  box-sizing:border-box!important;
  margin-top:7px!important;
  padding:11px 13px!important;
  border:1px solid #d9cdbf!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--mf-modal-ink)!important;
  font:inherit!important;
  font-size:13px!important;
  font-weight:550!important;
  outline:none!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.modal-box textarea,.add-product-body textarea,.modal-body textarea,.metal-modal-body textarea{min-height:96px!important;line-height:1.55!important;resize:vertical!important}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus,
.add-product-body input:focus,.add-product-body select:focus,.add-product-body textarea:focus,
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus,
.metal-modal-body input:focus,.metal-modal-body select:focus,.metal-modal-body textarea:focus{
  border-color:#c81778!important;
  box-shadow:0 0 0 3px rgba(200,23,120,.10)!important;
  background:#fff!important;
}

/* Sections read as deliberate modules */
.modal-section{
  margin:0 0 20px!important;
  padding:18px!important;
  border:1px solid var(--mf-modal-line)!important;
  border-radius:14px!important;
  background:#fff!important;
}
.modal-section:last-child{margin-bottom:0!important}
.modal-section-title{
  margin:0 0 5px!important;
  color:var(--mf-modal-ink)!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
}
.modal-section-title:before{content:""!important;display:inline-block!important;width:5px!important;height:5px!important;margin:0 8px 2px 0!important;border-radius:50%!important;background:var(--mf-modal-pink)!important}

/* Revision cards */
.revision-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.revision-box{
  padding:17px!important;
  border:1px solid #e3d8cc!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff 0%,#faf6f0 100%)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.revision-box:focus-within{border-color:#d8a6c3!important;box-shadow:0 6px 22px rgba(16,41,67,.06)!important}
.revision-box .check{display:flex!important;align-items:center!important;gap:9px!important;font-weight:850!important}
.revision-box .check input{width:17px!important;height:17px!important;accent-color:#c81778!important}
.revision-box .old-value{margin-top:11px!important;padding:9px 10px!important;border-radius:8px!important;background:#f4efe8!important;color:#6e7d90!important;font-size:11px!important;line-height:1.45!important}
.revision-box .old-value span{color:#31475f!important;font-weight:700!important}
.revision-box input:not([type="checkbox"]),.revision-box textarea{background:#fff!important}

/* Notices */
.modal-box .notice,.modal-card .notice,.add-product-body .notice,.modal-body .notice{
  margin:0 0 18px!important;
  padding:13px 15px!important;
  border:1px solid #e4d7c8!important;
  border-left:3px solid #c81778!important;
  border-radius:10px!important;
  background:#faf6f0!important;
  color:#53677e!important;
  font-size:12px!important;
  line-height:1.55!important;
}

/* Footer / action bar */
.modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{
  min-height:76px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:15px 28px!important;
  border-top:1px solid var(--mf-modal-line)!important;
  background:#fcf8f3!important;
}
.modal-box>form>.mf-flex-end-gap:last-child,.modal-box>form>.ui-actions-end-gap-8:last-child,.modal-box>form>.ui-form-actions:last-child{
  position:sticky!important;
  bottom:-24px!important;
  margin:24px -28px -24px!important;
  padding:15px 28px!important;
  border-top:1px solid var(--mf-modal-line)!important;
  background:rgba(252,248,243,.97)!important;
  backdrop-filter:blur(8px)!important;
  z-index:5!important;
}
.modal-foot .btn,.add-product-foot .btn,.metal-modal-foot .btn,.modal-box>form>.mf-flex-end-gap:last-child .btn,.modal-box>form>.ui-actions-end-gap-8:last-child .btn{
  min-height:40px!important;
  padding:0 16px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:800!important;
}
.modal-foot .btn-primary,.add-product-foot .btn-primary,.metal-modal-foot .btn-primary{box-shadow:0 7px 18px rgba(200,23,120,.16)!important}

/* Product chooser / upload areas */
.modal-product-select,.color-upload-box,.reuse-box,.criteria-box,.notes-box{
  border-radius:12px!important;
}
.reuse-box{padding:14px!important;border:1px solid #ead8e3!important;background:#fff7fb!important}
.color-upload-box{padding:13px!important;border:1px dashed #d9c5d0!important;background:#fcf8f9!important}

/* Small screens: same design, not just compressed */
@media(max-width:760px){
  .modal,.ml-modal,.metal-modal,.add-product-modal,.report-print-modal,.ui-context-modal,.mf-command-modal{padding:10px!important}
  .modal-box,.modal-card,.add-product-dialog,.metal-modal-dialog,.ml-modal-dialog,.report-print-dialog,.ui-context-modal-dialog,.mf-command-dialog{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;border-radius:15px!important}
  .modal-box>.card-head,.modal-head,.modal-header,.add-product-head,.metal-modal-head,.ui-context-dialog-head{min-height:76px!important;padding:18px 17px 16px!important;gap:12px!important}
  .modal-box>.card-head h2,.modal-head h2,.modal-header h2,.add-product-head h2,.metal-modal-head h2,.ui-context-dialog-head h2{font-size:18px!important}
  .modal-body,.add-product-body,.metal-modal-body,.panel-modal-body,.modal-box>form{padding:18px 17px!important;max-height:calc(100dvh - 150px)!important}
  .revision-grid{grid-template-columns:1fr!important}
  .modal-foot,.add-product-foot,.metal-modal-foot,.receipt-modal-foot{padding:11px 17px!important}
  .modal-box>form>.mf-flex-end-gap:last-child,.modal-box>form>.ui-actions-end-gap-8:last-child,.modal-box>form>.ui-form-actions:last-child{margin-left:-17px!important;margin-right:-17px!important;padding-left:17px!important;padding-right:17px!important;bottom:-18px!important;margin-bottom:-18px!important}
}

/* Sales revision form: structured specification + image approval standard */
#revisionModal .revision-box-wide{grid-column:1/-1}
#revisionModal .revision-old-spec{display:grid;gap:6px;margin-top:8px;padding:10px 12px;border:1px solid var(--mf-border);border-radius:10px;background:#fff}
#revisionModal .revision-spec-old-item{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:12px;padding:6px 0;border-bottom:1px solid var(--mf-border)}
#revisionModal .revision-spec-old-item:last-child{border-bottom:0}
#revisionModal .revision-new-label{margin:14px 0 7px;color:var(--mf-text);font-size:11px;font-weight:800}
#revisionModal .revision-spec-list{display:grid;gap:8px}
#revisionModal .revision-spec-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,1.4fr) 38px;gap:8px;align-items:center}
#revisionModal .revision-spec-row .btn{min-width:38px;padding:0 10px}
#revisionModal .revision-color-gallery{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;min-height:40px;align-items:center}
#revisionModal .revision-color-gallery a{display:block;width:88px;height:66px;border:1px solid var(--mf-border);border-radius:10px;overflow:hidden;background:#fff}
#revisionModal .revision-color-gallery img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
#revisionModal #revisionColorFiles{padding:10px;background:#fff}
#revisionModal #addRevisionSpec{margin-top:10px}
@media(max-width:760px){
  #revisionModal .revision-spec-row{grid-template-columns:1fr 1fr 38px}
  #revisionModal .revision-spec-row input:first-child{grid-column:1/3}
  #revisionModal .revision-spec-row input:nth-child(2){grid-column:1/3}
  #revisionModal .revision-spec-row .btn{grid-column:3;grid-row:1 / span 2}
}

#revisionModal .revision-history-spec{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
#revisionModal .revision-history-spec>div{padding:8px 10px;border:1px solid var(--mf-border);border-radius:8px;background:var(--mf-surface-2)}
#revisionModal .revision-history-spec .muted{display:block;margin-bottom:4px;font-size:10px}

/* ==========================================================
   MAGENTA CANONICAL UI STANDARD — FINAL PASS
   One card, table, row, button and empty-state language.
   ========================================================== */
.main .mf-standard-page-head,
.main .page-head.ui-page-head{
  min-height:78px;
  margin:0 0 18px;
  padding:2px 0 16px;
  align-items:flex-end;
  border-bottom:1px solid var(--mf-border);
}
.main .mf-standard-page-head .page-title,
.main .page-head.ui-page-head .page-title{
  margin:0;
  font-size:26px;
  line-height:1.18;
  font-weight:850;
  letter-spacing:-.025em;
  color:var(--mf-text);
}
.main .mf-standard-page-head .page-subtitle,
.main .page-head.ui-page-head .page-subtitle{
  margin:6px 0 0;
  max-width:900px;
  color:var(--mf-muted);
  font-size:12px;
  line-height:1.5;
}
.main .mf-standard-page-head .page-head-actions{gap:8px}

/* Canonical cards: same shell everywhere. */
.main .card,.main .ui-card,.main .workspace-section,.main .workspace-card,
.main .ui-section,.main [class$="-card"]:not(.stat-card){
  border-radius:14px;
  border:1px solid var(--mf-border);
  box-shadow:0 2px 12px rgba(40,47,55,.055);
}
.main .card-head,.main .ui-card-head,.main .ui-section-head,
.main .exec-card-head,.main .pc-card-head{
  min-height:62px;
  padding:14px 18px;
}
.main .card-head h2,.main .ui-card-head h2,.main .ui-section-head h2,
.main .exec-card-head h2,.main .pc-card-head h2{
  font-size:16px;
  line-height:1.25;
  font-weight:800;
}
.main .card-head .muted,.main .ui-card-head .muted,.main .ui-section-head p{
  margin-top:4px;
  font-size:11px;
  line-height:1.45;
}

/* Canonical buttons: never tiny, never oversized. */
.main .btn,.main button.btn,.main a.btn,
.modal .btn,.ml-modal .btn,.metal-modal .btn{
  min-height:40px;
  height:40px;
  padding:0 14px;
  border-radius:9px;
  font-size:12px;
  font-weight:750;
}
.main .btn-sm,.main .btn-small{min-height:34px;height:34px;padding:0 11px;font-size:11px}

/* Canonical table: identical header + row rhythm across modules. */
.main table.ui-table,.main table.ui-table-premium,.main table.ui-table-standard,
.main .ui-table-card table,.main .table-wrap table{
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}
.main table.ui-table thead th,.main table.ui-table-premium thead th,
.main table.ui-table-standard thead th,.main .ui-table-card table thead th,
.main .table-wrap table thead th{
  height:42px;
  min-height:42px;
  padding:10px 14px;
  background:var(--mf-surface-2);
  border-bottom:1px solid var(--mf-border);
  color:#68655f;
  font-size:10px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
  vertical-align:middle;
  white-space:nowrap;
}
.main table.ui-table tbody td,.main table.ui-table-premium tbody td,
.main table.ui-table-standard tbody td,.main .ui-table-card table tbody td,
.main .table-wrap table tbody td{
  height:48px;
  min-height:48px;
  padding:10px 14px;
  background:#fff;
  border-bottom:1px solid #eee7df;
  color:var(--mf-text);
  font-size:12px;
  line-height:1.35;
  vertical-align:middle;
}
.main table.ui-table tbody tr:last-child td,.main table.ui-table-premium tbody tr:last-child td,
.main table.ui-table-standard tbody tr:last-child td,.main .ui-table-card table tbody tr:last-child td,
.main .table-wrap table tbody tr:last-child td{border-bottom:0}
.main table.ui-table tbody tr:hover td,.main table.ui-table-premium tbody tr:hover td,
.main table.ui-table-standard tbody tr:hover td,.main .ui-table-card table tbody tr:hover td,
.main .table-wrap table tbody tr:hover td{background:#fffaf6}

/* Canonical table card shells: Type A normal / Type B collapsible. */
.main .ui-table-card{
  margin:0 0 18px;
  overflow:hidden;
  border-radius:14px;
  background:var(--mf-surface);
}
.main .ui-table-card-head{
  min-height:62px;
  padding:13px 18px;
  background:var(--mf-surface);
  border-bottom:1px solid var(--mf-border);
}
.main .ui-table-card-title strong{font-size:15px;font-weight:800;line-height:1.25}
.main .ui-table-card-title small{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:var(--mf-muted)}
.main .ui-table-card-meta{gap:8px}
.main .ui-table-card-toggle{min-height:34px;height:34px;padding:0 11px;border-radius:9px}
.main .ui-table-card-count{min-height:24px;padding:0 8px}

/* One empty-state treatment, including empty tables. */
.main .empty,.main .ui-empty,.main .ui-state,
.main .ui-table-empty,.main .ctx-empty{
  min-height:92px;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  color:var(--mf-muted);
  background:var(--mf-surface-2);
  border:0;
  border-radius:0;
  font-size:12px;
  line-height:1.45;
}
.main .empty strong,.main .ui-empty strong,.main .ui-state-title{color:var(--mf-text);font-size:12px;font-weight:800}
.main .ui-empty-icon,.main .ui-state-icon{
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--mf-border);border-radius:50%;
  background:#fff;color:var(--mf-muted);font-size:12px;font-weight:850;
}
.main .ui-state-copy,.main .ui-empty span{max-width:520px;color:var(--mf-muted);font-size:11px}
.main .ui-table-empty-row td{
  height:92px!important;
  min-height:92px!important;
  padding:20px!important;
  text-align:center!important;
  background:var(--mf-surface-2)!important;
  color:var(--mf-muted)!important;
  border-bottom:0!important;
}
.main .ui-table-empty-content{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:650}
.main .ui-table-empty-content::before{
  content:'—';width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--mf-border);border-radius:50%;background:#fff;font-weight:850;color:var(--mf-muted);
}

/* Keep grouped project/product rows readable while retaining the same rhythm. */
.main .ui-table-group-row td{height:42px!important;min-height:42px!important;padding:9px 14px!important;background:#f8f3ec!important}
.main .ui-table-product-row td{min-height:48px}

@media (max-width:760px){
  .main .mf-standard-page-head,.main .page-head.ui-page-head{min-height:64px;padding-bottom:12px;margin-bottom:14px}
  .main .mf-standard-page-head .page-title,.main .page-head.ui-page-head .page-title{font-size:22px}
  .main .card-head,.main .ui-card-head,.main .ui-section-head{min-height:58px;padding:13px 14px}
  .main table.ui-table tbody td,.main table.ui-table-premium tbody td,
  .main table.ui-table-standard tbody td,.main .ui-table-card table tbody td,
  .main .table-wrap table tbody td{height:44px;min-height:44px;padding:8px 10px;font-size:11px}
  .main table.ui-table thead th,.main table.ui-table-premium thead th,
  .main table.ui-table-standard thead th,.main .ui-table-card table thead th,
  .main .table-wrap table thead th{height:38px;padding:8px 10px;font-size:9px}
}


/* Canonical utility geometry — shared by every non-print page. */
.ui-mt-18{margin-top:18px!important}
.ui-mt-20{margin-top:20px!important}
.ui-mb-16{margin-bottom:16px!important}
.ui-align-end{align-self:end!important}
.ui-block{display:block!important}
.ui-flex-between-gap-12{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ui-pt-14{padding-top:14px!important}
.ui-m-0{margin:0!important}
.ui-pt-0{padding-top:0!important}
.ui-cursor-default{cursor:default!important}
.ui-disabled-link{pointer-events:none!important;opacity:.45!important}
[data-progress-width]{transition:width .18s ease}


/* ========================================================================
   FINAL GLOBAL UI AUDIT LAYER
   One visual language for shared hierarchy/workspace surfaces and pages
   that historically used module-specific markup. This remains in the
   canonical stylesheet; no page-specific override file is introduced.
   ======================================================================== */

/* Shared Project → Product hierarchy used by PPIC / GBJ / Production. */
.main .ui-hierarchy-toolbar{
  min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;margin:0 0 10px;background:var(--mf-surface-2);
  border:1px solid var(--mf-border);border-radius:12px;
}
.main .ui-hierarchy-toolbar-copy{display:flex;align-items:baseline;gap:7px;min-width:0;color:var(--mf-muted);font-size:11px}
.main .ui-hierarchy-toolbar-copy strong{color:var(--mf-text);font-size:12px;font-weight:850}
.main .ui-hierarchy-toolbar-actions{display:flex;gap:6px;flex:0 0 auto}
.main .ui-hierarchy-toolbar-actions button{
  min-height:32px;padding:0 10px;border:1px solid var(--mf-border-strong);border-radius:8px;
  background:#fff;color:var(--mf-text);font-size:11px;font-weight:750;
}
.main .ui-hierarchy-toolbar-actions button:hover{background:#fffaf5;border-color:#c9bbad}
.main .ctx-hierarchy,.main .mf-context-board{display:grid;gap:var(--mf-surface-gap)}
.main .mf-context-board{padding:0;background:var(--mf-surface);border-radius:0}
.main .mf-context-empty{min-height:92px;display:flex;align-items:center;justify-content:center;padding:22px 18px;text-align:center;color:var(--mf-muted);background:var(--mf-surface-2);border-top:1px solid var(--mf-border);font-size:11px;line-height:1.45}
.main .ctx-project,.main .ctx-product,.main .mf-context-project,.main .mf-context-product{
  overflow:hidden;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm);
}
.main .ctx-project-head,.main .ctx-product-head,.main .mf-context-project-head,.main .mf-context-product-head{
  width:100%;min-height:58px;display:flex;align-items:center;gap:11px;padding:10px 14px;
  border:0;border-bottom:1px solid var(--mf-border);background:var(--mf-surface);color:var(--mf-text);text-align:left;
}
.main .ctx-project-head:hover,.main .ctx-product-head:hover,.main .mf-context-project-head:hover,.main .mf-context-product-head:hover{background:#fffaf5}
.main .ctx-chevron,.main .mf-context-chevron{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px;border-radius:7px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:11px;font-weight:900}
.main .ctx-project-ident,.main .ctx-product-ident,.main .mf-context-project-name,.main .mf-context-product-name{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.main .ctx-project-ident strong,.main .ctx-product-ident strong,.main .mf-context-project-name strong,.main .mf-context-product-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-text);font-size:13px;font-weight:850}
.main .ctx-project-ident small,.main .ctx-product-ident small,.main .mf-context-project-name small,.main .mf-context-product-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-muted);font-size:10px;font-weight:600}
.main .ctx-summary,.main .mf-context-project-summary,.main .mf-context-product-summary{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:10px;font-weight:800}
.main .ctx-project-body,.main .mf-context-project-body{padding:10px;background:var(--mf-surface)}
.main .ctx-product{box-shadow:none;border-radius:11px}
.main .ctx-product-head,.main .mf-context-product-head{min-height:48px;background:#fff;padding-left:12px}
.main .ctx-product-body,.main .mf-context-product-body{padding:0;background:#fff}
.main .ctx-inner-table-wrap,.main .mf-context-detail{width:100%;overflow:auto;padding:0;background:#fff}
.main .ctx-inner-table,.main .mr-product-table,.main .mr-table,.main .mr-mini{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.main .ctx-inner-table th,.main .mr-product-table th,.main .mr-table th,.main .mr-mini th{
  height:42px;padding:10px 13px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);
  color:#68645f;font-size:10px;font-weight:850;letter-spacing:.055em;text-transform:uppercase;text-align:left;white-space:nowrap;
}
.main .ctx-inner-table td,.main .mr-product-table td,.main .mr-table td,.main .mr-mini td{
  min-height:46px;padding:10px 13px;background:#fff;border-bottom:1px solid #eee7df;color:var(--mf-text);font-size:12px;vertical-align:middle;
}
.main .ctx-inner-table tbody tr:hover td,.main .mr-product-table tbody tr:hover td,.main .mr-table tbody tr:hover td,.main .mr-mini tbody tr:hover td{background:#fffaf5}
.main .ctx-inner-table tbody tr:last-child td,.main .mr-product-table tbody tr:last-child td,.main .mr-table tbody tr:last-child td,.main .mr-mini tbody tr:last-child td{border-bottom:0}
.main .ctx-compact-cell{display:table-cell;white-space:normal;min-width:180px}
.main .ctx-compact-cell b{display:block;color:var(--mf-text);font-weight:800}
.main .ctx-compact-cell small{display:block;margin-top:3px;color:var(--mf-muted);font-size:10px;line-height:1.35}

/* PPIC workspace navigation and context copy. */
.main .ppic-workspace-nav{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 14px;padding:5px;
  background:var(--mf-surface-2);border:1px solid var(--mf-border);border-radius:12px;
}
.main .ppic-workspace-nav a{
  min-height:34px;display:inline-flex;align-items:center;padding:0 11px;border-radius:8px;
  color:var(--mf-muted);font-size:11px;font-weight:800;white-space:nowrap;
}
.main .ppic-workspace-nav a:hover{background:#fff;color:var(--mf-text)}
.main .ppic-workspace-nav a.active{background:var(--mf-pink);color:#fff;box-shadow:0 5px 12px rgba(197,31,120,.14)}
.main .ppic-context-note{
  display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:10px 13px;border:1px solid var(--mf-border);
  border-radius:10px;background:#fff;color:var(--mf-muted);font-size:11px;
}
.main .ppic-context-note b{color:var(--mf-text)}
.main .ppic-workspace-exact-table{margin-top:0}
.main .ppic-workspace-exact-table .ctx-project + .ctx-project{margin-top:0}
.main .ppic-workspace-exact-table .ctx-project-body{padding:0;background:#fff}

/* Material Requirement workspace — same shell as every other operational page. */
.main .mr-page{display:grid;gap:16px}
.main .mr-hero{
  display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:20px 22px;
  background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;box-shadow:var(--mf-shadow-sm);
}
.main .mr-hero .eyebrow{margin-bottom:1px}
.main .mr-hero h1{margin:0;color:var(--mf-text);font-size:28px;line-height:1.15;letter-spacing:-.025em}
.main .mr-hero p{margin:0;color:var(--mf-muted);font-size:12px}
.main .mr-flow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.main .mr-flow span,.main .mr-flow a{min-height:27px;display:inline-flex;align-items:center;padding:0 9px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.main .mr-flow a{background:#fff;color:var(--mf-text)}
.main .mr-flow span.active{background:var(--mf-pink-soft);border-color:#edc7da;color:var(--mf-pink)}
.main .mr-flow i{font-style:normal;color:#b3a89d;font-size:11px}
.main .mr-notice{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:11px}
.main .mr-notice-label{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:#fff;border:1px solid var(--mf-border);color:var(--mf-text);font-size:9px;font-weight:850;letter-spacing:.05em;white-space:nowrap}
.main .mr-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.main .mr-kpi{min-width:0;padding:15px 16px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm)}
.main .mr-kpi small{display:block;color:var(--mf-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.main .mr-kpi strong{display:block;margin-top:5px;color:var(--mf-text);font-size:20px;line-height:1.2;font-weight:850}
.main .mr-kpi em{display:block;margin-top:3px;color:var(--mf-subtle);font-size:10px;font-style:normal}
.main .mr-section{overflow:hidden;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;box-shadow:var(--mf-shadow-sm)}
.main .mr-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--mf-border)}
.main .mr-section-head h2{margin:0;color:var(--mf-text);font-size:16px;line-height:1.25}
.main .mr-section-head p{margin:4px 0 0;color:var(--mf-muted);font-size:11px}
.main .mr-toolbar{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.main .mr-toolbar input{width:280px;min-height:36px;font-size:11px}
.main .mr-project-wrap,.main .mr-table-wrap{padding:12px}
.main .mr-proforma-summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .mr-proforma-summary .muted{flex:1 1 280px;min-width:220px}
.main .mr-proforma-summary form{margin:0}

.main .mr-project-groups{gap:9px}
.main .mr-project-group{box-shadow:none}
.main .mr-project-group .mf-context-project-head{min-height:54px}
.main .mr-product-group{margin-top:8px}
.main .mr-material-detail{padding:0!important}
.main .mr-product-table .stack b,.main .mr-table .stack b{display:block;font-weight:800}
.main .mr-product-table .sub,.main .mr-table .sub{display:block;margin-top:3px;color:var(--mf-muted);font-size:10px;line-height:1.3}
.main .mr-product-table .num,.main .mr-table .num{text-align:right;white-space:nowrap}
.main .mr-product-table .status-cell,.main .mr-table .status-cell{min-width:180px}
.main .mr-product-table .material-ref-btn{min-height:32px;font-size:10px}
.main .mr-ref-row td{padding:0!important;background:var(--mf-surface-2)!important}
.main .mr-ref-box{padding:12px}
.main .mr-ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.main .mr-ref-section{overflow:hidden;border:1px solid var(--mf-border);border-radius:10px;background:#fff}
.main .mr-ref-title{padding:9px 11px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:var(--mf-text);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.main .mr-mini{min-width:560px}
.main .mr-mini th{height:36px;padding:8px 10px;font-size:9px}
.main .mr-mini td{min-height:38px;padding:8px 10px;font-size:10px}
.main .mr-empty{min-height:76px;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;color:var(--mf-muted);font-size:11px;background:var(--mf-surface-2)}

/* Broad module normalization: custom module cards keep the same shell. */
.main [class*="-hero"].workspace-hero,
.main [class*="-hero"].procurement-hero,
.main [class*="-hero"].delivery-hero,
.main [class*="-hero"].ppic-hero,
.main [class*="-hero"].division-hero,
.main [class*="-hero"].ext-workspace-hero,
.main [class*="-hero"].admin-users-hero,
.main [class*="-hero"].audit-hero,
.main [class*="-hero"].control-hero{
  background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:16px;box-shadow:var(--mf-shadow-sm);
}
.main .procurement-kpis,.main .warehouse-cards,.main .ppic-control-grid,.main .ppic-kpis,.main .delivery-kpis,.main .ext-kpi-grid,.main .usage-kpis,.main .batch-kpis,.main .admin-summary-grid,.main .audit-summary,.main .process-queue-kpis,.main .division-hero-kpis,.main .combined-kpis{
  display:grid;gap:var(--mf-surface-gap);
}
.main .stat-card,.main .warehouse-table-card,.main .procurement-home-card,.main .ppic-section-shell,.main .pc-card,.main .audit-card,.main .ext-panel,.main .gbj-hierarchy-card,.main .assembly-plan-card,.main .drawing-card,.main .production-card,.main .prod-support-card{
  background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm);
}
.main .warehouse-table-toolbar,.main .usage-context-tools,.main .gbj-context-toolbar,.main .production-table-tools,.main .delivery-board-search,.main .ui-table-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;background:var(--mf-surface-2);border:1px solid var(--mf-border);border-radius:10px;
}
.main .warehouse-table-toolbar input,.main .usage-filter input,.main .delivery-board-search input,.main .production-table-search{min-height:36px;font-size:11px}
.main .warehouse-table-toggle,.main .production-table-toggle{min-height:32px;padding:0 10px;border:1px solid var(--mf-border-strong);border-radius:8px;background:#fff;color:var(--mf-text);font-size:11px;font-weight:750}
.main .data-card,.main .procurement-board,.main .purchase-receiving-project,.main .pr-approval-card,.main .po-card{background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm)}
.main .data-card-head,.main .po-card-main,.main .ext-panel-head,.main .assembly-plan-head,.main .audit-card-head{border-bottom:1px solid var(--mf-border);background:var(--mf-surface);}
.main .info-chip,.main .pc-pill{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:10px;font-weight:800}

@media(max-width:1100px){
  .main .mr-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .main .ui-hierarchy-toolbar{align-items:flex-start;flex-direction:column}
  .main .ui-hierarchy-toolbar-actions{width:100%}
  .main .ui-hierarchy-toolbar-actions button{flex:1}
  .main .ppic-workspace-nav{overflow-x:auto;flex-wrap:nowrap}
  .main .ppic-workspace-nav a{flex:0 0 auto}
  .main .mr-hero{padding:16px}
  .main .mr-hero h1{font-size:23px}
  .main .mr-notice{align-items:flex-start;flex-direction:column}
  .main .mr-kpis{grid-template-columns:1fr 1fr}
  .main .mr-section-head{display:block;padding:14px}
  .main .mr-toolbar{margin-top:10px;width:100%}
  .main .mr-toolbar input{width:100%;flex:1}
  .main .mr-toolbar .btn{flex:0 0 auto}
  .main .mr-project-wrap,.main .mr-table-wrap{padding:8px}
  .main .mr-ref-grid{grid-template-columns:1fr}
}
@media(max-width:460px){.main .mr-kpis{grid-template-columns:1fr}}


/* Shared GBJ step/scope treatment. Kept canonical so all GBJ forms use the same language. */
.main .gbj-step-card > .card-head{min-height:68px;padding:15px 18px}
.main .gbj-section-heading{display:flex;align-items:flex-start;gap:11px}
.main .gbj-section-index{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:10px;font-weight:900;letter-spacing:.03em}
.main .gbj-scope-form{padding:16px 18px 18px!important;gap:12px!important}
.main .gbj-scope-form .field{gap:5px}
.main .gbj-field-help{margin-top:-1px;color:var(--mf-subtle);font-size:10px;font-weight:500}
.main .gbj-selected-scope{padding-top:0!important;padding-bottom:16px!important}
.main .gbj-selected-scope .badge{margin-right:6px}
.main .gbj-context-toolbar{min-height:52px!important;padding:10px 14px!important;border-radius:12px!important}
.main .gbj-context-toolbar > div:first-child{display:flex;align-items:baseline;gap:7px;min-width:0;color:var(--mf-muted);font-size:11px}
.main .gbj-context-toolbar > div:first-child b{color:var(--mf-text);font-size:12px;font-weight:850}
.main .gbj-context-toolbar > div:first-child span{overflow:hidden;text-overflow:ellipsis}
.main .gbj-context-toolbar-actions{display:flex;gap:6px;flex:0 0 auto}
.main .gbj-context-toolbar-actions .btn{min-height:32px!important;height:32px!important;padding:0 10px!important;font-size:11px!important;border-radius:8px!important}

/* =====================================================================
   MAGENTA CANONICAL GBJ HERO
   Shared GBJ page header + workflow navigation. The component is the
   single page header for GBJ modules; no duplicate page-head is needed.
   ===================================================================== */
.main .mf-gbj-hero{
  position:relative;
  margin:0 0 18px;
  padding:20px 22px 16px;
  background:var(--mf-surface);
  border:1px solid var(--mf-border);
  border-radius:14px;
  box-shadow:var(--mf-shadow-sm);
}
.main .mf-gbj-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.main .mf-gbj-copy{min-width:0}
.main .mf-gbj-eyebrow{
  margin-bottom:5px;
  color:var(--mf-pink);
  font-size:10px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.main .mf-gbj-title{
  margin:0;
  max-width:900px;
  color:var(--mf-text);
  font-size:26px;
  line-height:1.18;
  font-weight:850;
  letter-spacing:-.025em;
}
.main .mf-gbj-subtitle{
  margin:6px 0 0;
  max-width:920px;
  color:var(--mf-muted);
  font-size:12px;
  line-height:1.5;
}
.main .mf-gbj-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
  max-width:48%;
}
.main .mf-gbj-actions .btn{min-height:38px;height:38px}
.main .mf-gbj-flow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--mf-border);
}
.main .mf-gbj-step{
  position:relative;
  min-width:0;
  min-height:48px;
  padding:9px 10px;
  border:1px solid var(--mf-border);
  border-radius:9px;
  background:var(--mf-surface-2);
}
.main .mf-gbj-step:not(:last-child)::after{
  content:'›';
  position:absolute;
  right:-7px;
  top:50%;
  z-index:2;
  width:14px;
  height:14px;
  margin-top:-7px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--mf-surface);
  color:var(--mf-muted);
  font-size:13px;
  font-weight:850;
}
.main .mf-gbj-step b{
  display:block;
  overflow:hidden;
  color:var(--mf-text);
  font-size:10px;
  line-height:1.25;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.main .mf-gbj-step span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--mf-muted);
  font-size:9px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:900px){
  .main .mf-gbj-flow{grid-template-columns:repeat(5,minmax(145px,1fr));overflow-x:auto;padding-bottom:3px}
  .main .mf-gbj-step{flex:0 0 145px}
}
@media(max-width:760px){
  .main .mf-gbj-head{display:block}
  .main .mf-gbj-actions{justify-content:flex-start;max-width:none;margin-top:14px}
}
@media(max-width:640px){
  .main .mf-gbj-hero{padding:16px}
  .main .mf-gbj-title{font-size:23px}
  .main .mf-gbj-actions .btn{flex:1 1 auto}
}

/* =====================================================================
   MAGENTA UI — MODULE COMPLETENESS PASS
   Shared treatment for legacy module markup that now lives on the
   canonical presentation layer. No business logic is changed here.
   ===================================================================== */

/* Shared section heading used by Purchasing / Warehouse / PPIC forms. */
.main .section-title-row,
.main .section-head,
.main .section-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid var(--mf-border);
  background:var(--mf-surface);
}
.main .section-title-row>div:first-child,
.main .section-head>div:first-child,
.main .section-heading>div:first-child{min-width:0}
.main .section-title-row h2,
.main .section-head h2,
.main .section-heading h2{
  margin:4px 0 0;
  color:var(--mf-text);
  font-size:18px;
  line-height:1.25;
  font-weight:850;
  letter-spacing:-.015em;
}
.main .section-title-row .muted,
.main .section-head p,
.main .section-heading p{
  margin:5px 0 0;
  color:var(--mf-muted);
  font-size:11px;
  line-height:1.5;
}
.main .info-chip,
.main .item-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:0 9px;
  border:1px solid var(--mf-border);
  border-radius:999px;
  background:var(--mf-surface-2);
  color:var(--mf-muted);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

/* Production workspace ------------------------------------------------- */
.main .production-shared-head{margin-bottom:12px}
.main .production-workflow-pill{
  display:inline-flex;align-items:center;gap:7px;
  min-height:30px;padding:0 10px;
  border:1px solid var(--mf-border);border-radius:999px;
  background:var(--mf-surface-2);color:var(--mf-muted);
  font-size:10px;font-weight:800;white-space:nowrap;
}
.main .workflow-dot{width:6px;height:6px;border-radius:50%;background:var(--mf-pink);box-shadow:0 0 0 3px var(--mf-pink-soft)}



/* Production process queue — operator-facing workspace. */
.main .production-head{margin-bottom:14px}
.main .production-head .page-head-actions{align-items:flex-start}
.main .production-head .page-subtitle{max-width:980px}

.main .process-queue-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr);
  align-items:stretch;
  gap:18px;
  margin:0 0 10px;
  padding:18px 20px;
  border:1px solid var(--mf-border);
  border-radius:16px;
  background:var(--mf-surface);
  box-shadow:var(--mf-shadow-sm);
}
.main .process-queue-title{display:flex;align-items:center;gap:13px;min-width:0}
.main .process-queue-icon{
  display:grid;place-items:center;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--mf-border);
  border-radius:12px;
  background:var(--mf-surface-2);
  color:var(--mf-info);
  font-size:13px;font-weight:950;letter-spacing:.05em;
}
.main .process-queue-title>div{min-width:0}
.main .process-queue-title h2{margin:3px 0 0;font-size:19px;line-height:1.2;font-weight:900;letter-spacing:-.015em}
.main .process-queue-title p{max-width:620px;margin:5px 0 0;color:var(--mf-muted);font-size:10px;line-height:1.55}
.main .process-queue-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-self:stretch}
.main .process-queue-kpis>div{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:9px 10px;
  border:1px solid var(--mf-border);border-radius:10px;
  background:var(--mf-surface-2);
}
.main .process-queue-kpis span{color:var(--mf-muted);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.main .process-queue-kpis b{margin-top:3px;color:var(--mf-text);font-size:17px;line-height:1.1;font-weight:900}

.main .process-status-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin:0 0 14px;padding:8px;
  border:1px solid var(--mf-border);border-radius:12px;
  background:var(--mf-surface-2);
}
.main .process-status-strip>div{
  display:grid;grid-template-columns:10px auto 1fr;align-items:center;gap:7px;
  min-width:0;padding:7px 10px;
  border:1px solid var(--mf-border);border-radius:9px;background:#fff;
}
.main .process-status-strip .dot{width:8px;height:8px;border-radius:50%}
.main .process-status-strip .dot.blue{background:var(--mf-info)}
.main .process-status-strip .dot.amber{background:var(--mf-warning)}
.main .process-status-strip .dot.green{background:var(--mf-success)}
.main .process-status-strip .dot.muted{background:#b9b3aa}
.main .process-status-strip b{font-size:14px;font-weight:900;line-height:1}
.main .process-status-strip small{min-width:0;color:var(--mf-muted);font-size:9px;font-weight:750;text-align:right;white-space:nowrap}

.main .process-queue-list{display:grid;gap:10px}
.main .queue-project{
  overflow:hidden;
  border:1px solid var(--mf-border);
  border-radius:14px;
  background:var(--mf-surface);
  box-shadow:var(--mf-shadow-sm);
}
.main .queue-project-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;
  border-bottom:1px solid var(--mf-border);
  background:var(--mf-surface-2);
}
.main .queue-project-ident{min-width:0}
.main .queue-project-ident h2{margin:2px 0 0;color:var(--mf-text);font-size:13px;line-height:1.2;font-weight:900}
.main .queue-project-ident span{display:block;margin-top:4px;color:var(--mf-muted);font-size:9px;line-height:1.4}
.main .queue-project-summary{display:flex;align-items:baseline;gap:5px;padding:7px 10px;border:1px solid var(--mf-border);border-radius:9px;background:#fff;white-space:nowrap}
.main .queue-project-summary b{font-size:16px;font-weight:900}
.main .queue-project-summary span{color:var(--mf-muted);font-size:9px;font-weight:750}
.main .queue-products{display:grid;gap:10px;padding:10px}
.main .queue-product{overflow:hidden;border:1px solid var(--mf-border);border-radius:11px;background:#fff}
.main .queue-product-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;
  background:#fff;
  border-bottom:1px solid var(--mf-border);
}
.main .queue-product-head>div{min-width:0}
.main .queue-product-code{display:block;color:var(--mf-pink);font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.main .queue-product-head h3{margin:3px 0 0;font-size:12px;line-height:1.25;font-weight:900}
.main .queue-product-head>div>span:last-child{display:block;margin-top:3px;color:var(--mf-muted);font-size:9px;line-height:1.45}
.main .queue-product-head .btn{flex:0 0 auto}
.main .queue-component-head,.main .queue-component-row{
  display:grid;
  grid-template-columns:minmax(235px,1.8fr) 72px 78px 72px 92px 122px 138px;
  align-items:center;
}
.main .queue-component-head{
  min-height:34px;
  background:var(--mf-surface-2);
  border-bottom:1px solid var(--mf-border);
  color:var(--mf-muted);
  font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}
.main .queue-component-head>span{padding:0 9px}
.main .queue-component-row{
  min-height:58px;
  border-bottom:1px solid var(--mf-border);
  background:#fff;
  font-size:10px;
}
.main .queue-component-row:last-child{border-bottom:0}
.main .queue-component-row:hover{background:#fffafc}
.main .queue-component-row>div{min-width:0;padding:8px 9px}
.main .queue-component-ident{display:flex;align-items:center;gap:8px}
.main .component-index{
  display:grid;place-items:center;
  width:28px;height:28px;flex:0 0 28px;
  border:1px solid var(--mf-border);border-radius:8px;
  background:var(--mf-surface-2);color:var(--mf-muted);
  font-size:9px;font-weight:900;
}
.main .queue-component-ident b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:850}
.main .queue-component-ident small{display:block;margin-top:2px;color:var(--mf-muted);font-size:8px;line-height:1.35}
.main .queue-component-row .qty-good{color:var(--mf-success);font-weight:850}
.main .queue-component-row .qty-reject{color:var(--mf-danger);font-weight:850}
.main .queue-mini-progress{display:block;min-width:54px;margin-top:4px;height:5px;overflow:hidden;border-radius:99px;background:var(--mf-surface-2);border:1px solid var(--mf-border)}
.main .queue-mini-progress .ui-progress-fill{display:block;height:100%;border-radius:99px;background:var(--mf-pink)}
.main .queue-component-row .badge{justify-self:start}
.main .queue-done{display:inline-flex;align-items:center;gap:4px;color:var(--mf-success);font-size:9px;font-weight:900}
.main .queue-wait{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border:1px dashed var(--mf-border-strong);border-radius:8px;color:var(--mf-subtle);font-size:9px;font-weight:800}
.main .replacement-component-row{background:#fffdf7}
.main .replacement-component-row:hover{background:#fffaf0}
.main .queue-empty{
  display:grid;place-items:center;
  min-height:150px;margin:0;
  padding:24px;
  border:1px dashed var(--mf-border-strong);
  border-radius:13px;
  background:var(--mf-surface);
  text-align:center;
}
.main .queue-empty .empty{max-width:580px}
.main .queue-empty .empty b{display:block;color:var(--mf-text);font-size:12px;font-weight:900}
.main .queue-empty .empty span{display:block;margin-top:7px;color:var(--mf-muted);font-size:10px;line-height:1.55}

@media(max-width:1100px){
  .main .process-queue-hero{grid-template-columns:1fr}
  .main .process-queue-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .main .queue-component-head,.main .queue-component-row{grid-template-columns:minmax(215px,1.7fr) 68px 74px 68px 86px 118px 130px;min-width:790px}
  .main .queue-component-head,.main .queue-component-row{width:100%}
  .main .queue-product{overflow-x:auto}
  .main .queue-component-head,.main .queue-component-row{width:790px}
}
@media(max-width:760px){
  .main .process-queue-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .process-status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .queue-project-head,.main .queue-product-head{align-items:flex-start;flex-direction:column}
  .main .queue-project-summary{align-self:flex-start}
  .main .queue-product-head .btn{width:100%}
}
@media(max-width:460px){
  .main .process-queue-hero{padding:15px}
  .main .process-queue-title{align-items:flex-start}
  .main .process-queue-kpis{gap:6px}
  .main .process-status-strip{grid-template-columns:1fr}
  .main .queue-project-head,.main .queue-products{padding:9px}
}

/* Production division workspace — canonical shared layout for Metal + Panel. */
.main .division-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.15fr);align-items:stretch;
  gap:18px;padding:20px;margin:0 0 16px;overflow:hidden;
}
.main .division-hero-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.main .division-tag{display:inline-flex;align-items:center;width:max-content;min-height:24px;padding:0 9px;border:1px solid var(--mf-pink-soft);border-radius:999px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.main .division-hero.metal .division-tag{border-color:var(--mf-info-soft);background:var(--mf-info-soft);color:var(--mf-info)}
.main .division-hero h2{margin:7px 0 0;color:var(--mf-text);font-size:22px;line-height:1.2;font-weight:850;letter-spacing:-.02em}
.main .division-hero p{max-width:760px;margin:7px 0 0;color:var(--mf-muted);font-size:11px;line-height:1.55}
.main .division-hero-kpis{grid-template-columns:repeat(4,minmax(0,1fr));align-self:stretch}
.main .division-hero-kpis>div{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:11px 13px;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface-2)}
.main .division-hero-kpis span{color:var(--mf-muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.main .division-hero-kpis b{margin-top:4px;color:var(--mf-text);font-size:18px;line-height:1.15;font-weight:850}
.main .production-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:16px 0 10px;padding:0 2px}
.main .production-section-title>div{min-width:0}
.main .production-section-title h2{margin:3px 0 0;color:var(--mf-text);font-size:18px;line-height:1.25;font-weight:850;letter-spacing:-.015em}
.main .production-section-title p{max-width:920px;margin:5px 0 0;color:var(--mf-muted);font-size:11px;line-height:1.5}
.main .production-section-title .section-kicker{color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.main .production-section-title.ui-mt-neg-8{margin-top:4px}
.main .production-section-title.project-overview-title{margin-top:20px}
.main .process-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.main .process-module-card{display:flex;flex-direction:column;min-width:0;min-height:174px;padding:15px;text-decoration:none;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm);color:var(--mf-text);transition:border-color .15s,box-shadow .15s,transform .15s}
.main .process-module-card:hover{border-color:var(--mf-border-strong);box-shadow:var(--mf-shadow);transform:translateY(-1px)}
.main .process-module-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.main .process-module-icon{display:grid;place-items:center;min-width:34px;height:30px;padding:0 7px;border:1px solid var(--mf-border);border-radius:8px;background:var(--mf-surface-2);color:var(--mf-pink);font-size:9px;font-weight:900;letter-spacing:.04em}
.main .division-hero.metal~.process-module-grid .process-module-icon{color:var(--mf-info)}
.main .process-module-name{margin-top:11px;font-size:13px;font-weight:850;line-height:1.25}
.main .process-module-desc{min-height:31px;margin-top:4px;color:var(--mf-muted);font-size:10px;line-height:1.45}
.main .process-module-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:auto;padding-top:11px}
.main .process-module-metrics>div{min-width:0;padding:7px 8px;border:1px solid var(--mf-border);border-radius:8px;background:var(--mf-surface-2)}
.main .process-module-metrics span,.main .process-module-metrics b{display:block}
.main .process-module-metrics span{color:var(--mf-muted);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.main .process-module-metrics b{margin-top:2px;font-size:11px;line-height:1.2}
.main .process-module-card>.progress{margin-top:9px}
.main .process-module-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;color:var(--mf-muted);font-size:9px}
.main .process-module-foot b{color:var(--mf-pink);font-weight:850}
.main .production-division-table-shell{margin-top:0}
.main .production-division-hierarchy{padding:10px}
.main .production-division-grid-body{display:block}
.main .production-division-grid{overflow:hidden;border:1px solid var(--mf-border);border-radius:10px;background:#fff}
.main .production-division-grid-head,.main .production-division-grid-row{display:grid;grid-template-columns:minmax(230px,1.7fr) 110px minmax(190px,1.3fr) 110px 150px;align-items:center;gap:0}
.main .production-division-grid-head{min-height:36px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:var(--mf-muted);font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.main .production-division-grid-head>span,.main .production-division-grid-row>div{padding:0 10px}
.main .production-division-grid-row{min-height:62px;border-bottom:1px solid var(--mf-border);background:#fff}
.main .production-division-grid-row:last-child{border-bottom:0}
.main .production-division-grid-row:hover{background:#fffaf5}
.main .production-division-qty b{display:block;font-size:11px}
.main .production-division-qty small{display:block;margin-top:2px;color:var(--mf-muted);font-size:9px}
.main .production-division-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:7px}
.main .production-division-progress-top span{font-size:11px;font-weight:850}
.main .production-division-progress-top small{color:var(--mf-muted);font-size:8px;white-space:nowrap}
.main .production-division-progress .progress{margin-top:5px}
.main .production-division-status{white-space:nowrap}
.main .production-division-actions{display:flex;justify-content:flex-end;gap:5px}
.main .production-division-actions .btn{min-height:32px;padding:0 9px;font-size:10px}
.main .production-division-detail-row{border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .production-division-detail{padding:11px 12px}
.main .division-processes-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.main .division-processes-title span{font-size:10px;font-weight:850}
.main .division-processes-title small{color:var(--mf-muted);font-size:9px}
.main .division-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.main .division-process-mini{min-width:0;padding:9px;border:1px solid var(--mf-border);border-radius:9px;background:#fff}
.main .division-process-mini>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:6px}
.main .division-process-mini>div:first-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:800}
.main .division-process-mini>div:first-child b{font-size:9px}
.main .division-process-mini .progress{margin-top:5px;height:5px}
.main .division-process-mini small{display:block;margin-top:4px;color:var(--mf-muted);font-size:8px}
.main .division-proforma-list{display:grid;gap:10px;margin-top:14px}
.main .division-proforma-card{overflow:hidden}
.main .division-project-card{overflow:hidden;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .division-project-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .division-project-head>div{min-width:0}
.main .division-project-head .project-no{display:block;color:var(--mf-pink);font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.main .division-project-head h3{margin:4px 0 0;font-size:13px;line-height:1.25;font-weight:850}
.main .division-project-head .muted{display:block;margin-top:3px;color:var(--mf-muted);font-size:9px}
.main .division-product-list{background:#fff}
.main .division-product-row{display:grid;grid-template-columns:minmax(220px,1.5fr) 120px minmax(220px,1.4fr) 170px;align-items:center;gap:0;min-height:68px;padding:0;text-decoration:none;color:var(--mf-text)}
.main .division-product-row>div{padding:10px 12px}
.main .division-product-id span,.main .division-product-id b{display:block}
.main .division-product-id span{color:var(--mf-muted);font-size:8px;font-weight:800}
.main .division-product-id b{margin-top:3px;font-size:11px}
.main .division-product-qty span,.main .division-product-qty b{display:block}
.main .division-product-qty span{color:var(--mf-muted);font-size:8px;font-weight:800}
.main .division-product-qty b{margin-top:3px;font-size:12px}
.main .division-product-progress>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:9px}
.main .division-product-progress .progress{margin-top:5px}
.main .division-product-status{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.main .division-product-status>b{color:var(--mf-pink);font-size:14px}
.main .division-product-processes{padding:10px 12px 12px;border-top:1px solid var(--mf-border);background:var(--mf-surface-2)}

.main .production-section-nav{
  display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;
  margin:0 0 18px;padding:5px;
  border:1px solid var(--mf-border);border-radius:12px;
  background:var(--mf-surface-2);box-shadow:var(--mf-shadow-sm);
}
.main .production-section-nav a{
  min-width:82px;min-height:48px;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:6px 12px;border-radius:9px;
  color:var(--mf-muted);background:transparent;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.main .production-section-nav a span{
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:#fff;border:1px solid var(--mf-border);color:var(--mf-subtle);
  font-size:9px;font-weight:850;letter-spacing:.04em;
}
.main .production-section-nav a small{font-size:10px;font-weight:800;white-space:nowrap}
.main .production-section-nav a:hover{background:#fff;color:var(--mf-text)}
.main .production-section-nav a.is-active{background:var(--mf-pink);color:#fff;box-shadow:0 6px 14px rgba(197,31,120,.14)}
.main .production-section-nav a.is-active span{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25);color:#fff}

.main .prod-division-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.main .prod-division-card{
  position:relative;display:block;min-width:0;padding:20px;
  border:1px solid var(--mf-border);border-radius:16px;
  background:var(--mf-surface);box-shadow:var(--mf-shadow-sm);overflow:hidden;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.main .prod-division-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-pink)}
.main .prod-division-card.metal:before{background:#3d6f9e}
.main .prod-division-card:hover{transform:translateY(-1px);box-shadow:var(--mf-shadow);border-color:var(--mf-border-strong)}
.main .prod-division-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.main .prod-division-code{font-size:9px;font-weight:850;letter-spacing:.12em;color:var(--mf-subtle)}
.main .prod-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.06em}
.main .prod-division-card.metal .prod-chip{background:var(--mf-info-soft);color:var(--mf-info)}
.main .prod-division-icon{width:38px;height:38px;display:grid;place-items:center;margin-bottom:10px;border:1px solid var(--mf-border);border-radius:10px;background:#fff;color:var(--mf-pink);font-size:14px;font-weight:900}
.main .prod-division-card.metal .prod-division-icon{color:var(--mf-info)}
.main .prod-division-card h2{margin:0;color:var(--mf-text);font-size:19px;line-height:1.25;font-weight:850}
.main .prod-division-card p{margin:7px 0 14px;color:var(--mf-muted);font-size:11px;line-height:1.55}
.main .prod-route-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface-2);font-size:10px;color:var(--mf-muted)}
.main .prod-route-line b{color:var(--mf-text);font-weight:800;text-align:right}
.main .prod-card-arrow{display:flex;align-items:center;justify-content:space-between;margin-top:13px;color:var(--mf-pink);font-size:11px;font-weight:850}
.main .prod-card-arrow span{font-size:15px}
.main .prod-support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.main .prod-support-card{
  min-width:0;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:12px 14px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:13px;
  color:var(--mf-text);box-shadow:var(--mf-shadow-sm);transition:border-color .15s,transform .15s;
}
.main .prod-support-card:hover{border-color:var(--mf-border-strong);transform:translateY(-1px)}
.main .prod-support-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:10px;font-weight:900}
.main .prod-support-card b,.main .prod-support-card small{display:block;min-width:0}
.main .prod-support-card b{font-size:11px;font-weight:850}
.main .prod-support-card small{margin-top:2px;color:var(--mf-muted);font-size:9px;line-height:1.4}
.main .prod-support-card>span:last-child{color:var(--mf-subtle);font-size:15px}

.main .combined-production-section{
  overflow:hidden;margin-top:16px;border:1px solid var(--mf-border);border-radius:16px;
  background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)
}
.main .combined-production-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--mf-border)}
.main .combined-production-head h2{margin:4px 0 0;font-size:18px;line-height:1.25;font-weight:850}
.main .combined-production-head p{margin:5px 0 0;color:var(--mf-muted);font-size:11px;line-height:1.5}
.main .combined-production-total{width:210px;flex:0 0 210px;padding:11px 12px;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface-2)}
.main .combined-production-total>span,.main .combined-production-total>b{display:block}
.main .combined-production-total>span{color:var(--mf-muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.main .combined-production-total>b{margin-top:2px;font-size:20px;line-height:1.2}
.main .combined-production-total .progress{margin-top:8px}
.main .combined-kpis{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 14px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}
.main .combined-kpis>div{padding:11px 12px;border:1px solid var(--mf-border);border-radius:10px;background:#fff}
.main .combined-kpis span,.main .combined-kpis small,.main .combined-kpis b{display:block}
.main .combined-kpis span{font-size:9px;color:var(--mf-muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.main .combined-kpis b{margin-top:3px;font-size:18px;line-height:1.2}
.main .combined-kpis small{margin-top:2px;color:var(--mf-subtle);font-size:9px}
.main .production-table-shell{margin:14px;border:1px solid var(--mf-border);border-radius:13px;background:var(--mf-surface);overflow:hidden}
.main .production-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}
.main .production-table-toolbar strong,.main .production-table-toolbar small{display:block}
.main .production-table-toolbar strong{font-size:11px;font-weight:850}
.main .production-table-toolbar small{margin-top:2px;color:var(--mf-muted);font-size:9px}
.main .production-table-tools{display:flex;align-items:center;gap:7px}
.main .production-table-search{display:flex;flex-direction:row;align-items:center;gap:7px;min-width:260px;height:34px;padding:0 9px;border:1px solid var(--mf-border-strong);border-radius:8px;background:#fff;color:var(--mf-subtle)}
.main .production-table-search input{min-height:30px;height:30px;padding:0;border:0;box-shadow:none;font-size:10px}
.main .production-table-search input:focus{box-shadow:none;border:0}
.main .production-table-toggle{min-height:34px;height:34px}
.main .ctx-hierarchy{display:grid;gap:var(--mf-surface-gap);padding:12px}
.main .ctx-project{overflow:hidden;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface)}
.main .ctx-project-head,.main .ctx-product-head{
  width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,42%);align-items:center;gap:8px;
  min-height:48px;padding:8px 12px;border:0;border-bottom:1px solid var(--mf-border);background:var(--mf-surface);color:var(--mf-text);text-align:left;
}
.main .ctx-product-head{min-height:44px;grid-template-columns:22px minmax(0,1fr) minmax(0,36%);background:var(--mf-surface);border-bottom:1px solid var(--mf-border)}
.main .ctx-project-head:hover,.main .ctx-product-head:hover{background:var(--mf-surface-2)}
.main .ctx-chevron{color:var(--mf-pink);font-size:12px;font-weight:900}
.main .ctx-project-ident,.main .ctx-product-ident{min-width:0;overflow:hidden}
.main .ctx-project-ident strong,.main .ctx-product-ident strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:850}
.main .ctx-product-ident small,.main .ctx-project-ident small{display:block;margin-top:2px;color:var(--mf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.main .ctx-summary,.main .ctx-product-summary{min-width:0;max-width:100%;justify-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:var(--mf-muted);font-size:9px;font-weight:750}
.main .ctx-project-body{padding:12px;background:var(--mf-surface)}
.main .ctx-product{overflow:hidden;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface)}
.main .ctx-product+.ctx-product{margin-top:var(--mf-surface-gap)}
.main .ctx-product-body{background:var(--mf-surface)}
.main .ctx-inner-table-wrap{overflow-x:auto}
.main .ctx-inner-table{min-width:720px!important}
.main .ctx-inner-table th{height:38px!important;padding:8px 10px!important;font-size:9px!important}
.main .ctx-inner-table td{height:44px!important;padding:8px 10px!important;font-size:11px!important}
.main .ctx-empty{min-height:100px;margin:12px;border:1px dashed var(--mf-border);border-radius:10px}
.main .production-progress-cell{min-width:90px}
.main .production-progress-cell>span{display:block;font-size:10px;font-weight:800}
.main .production-progress-cell .progress{margin-top:5px}
.main .production-progress-cell small{display:block;margin-top:3px;color:var(--mf-subtle);font-size:9px}
.main .production-product-cell{display:flex!important;align-items:center;gap:8px}
.main .production-product-mark{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:9px;font-weight:900}
.main .production-product-copy{min-width:0}
.main .production-product-copy b,.main .production-product-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main .production-product-copy b{font-size:11px}
.main .production-product-copy small{margin-top:2px;color:var(--mf-muted);font-size:9px}
.main .production-row-actions{text-align:right;white-space:nowrap}
.main .production-overview-grid{width:100%;overflow-x:auto}
.main .production-overview-grid-head,.main .production-overview-grid-row{display:grid;grid-template-columns:minmax(210px,2fr) 70px minmax(90px,1fr) minmax(90px,1fr) minmax(130px,1.2fr) 90px 80px;min-width:860px;align-items:center}
.main .production-overview-grid-head{min-height:40px;padding:0 12px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border);color:#68655f;font-size:9px;font-weight:850;letter-spacing:.055em;text-transform:uppercase}
.main .production-overview-grid-row{min-height:60px;padding:7px 12px;border-bottom:1px solid #eee7df;font-size:11px}
.main .production-overview-grid-row:last-child{border-bottom:0}
.main .production-overview-grid-row>div{min-width:0;padding:0 5px}
.main .production-overview-grid-row>div:first-child{padding-left:0}
.main .production-overview-grid-row>div:last-child{padding-right:0}
.main .production-cell-sub{display:block;margin-top:2px;color:var(--mf-subtle);font-size:9px;font-weight:600}
.main .production-overview-note{margin-top:16px}
.main .production-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.main .production-home>.card{margin-top:0}
.main .production-home .stat-card{padding:14px 16px;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .production-home .stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--mf-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.main .production-home .stat-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:9px;font-weight:900}
.main .production-home .stat{margin-top:7px;font-size:24px;line-height:1;font-weight:900;color:var(--mf-text)}
.main .production-home .stat-note{margin-top:5px;color:var(--mf-muted);font-size:9px}

/* Purchasing / PR workspace ------------------------------------------ */
.main .purchasing-head{margin-bottom:18px}
.main .pr-create-card,.main .pr-approval-board{overflow:hidden}
.main .pr-create-card .section-title-row{padding:18px 20px;background:var(--mf-surface)}
.main .pr-create-card form{padding:0 20px 18px}
.main .pr-header-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding-top:16px}
.main .pr-field{min-width:0}
.main .pr-field-label{display:flex;align-items:baseline;gap:5px;color:var(--mf-text);font-size:10px;font-weight:850;line-height:1.25}
.main .pr-field-label small{font-size:9px;color:var(--mf-muted);font-weight:600}
.main .pr-field.full-span{grid-column:1/-1}
.main .pr-field input,.main .pr-field select,.main .pr-field textarea{font-size:11px}
.main .pr-field textarea{min-height:78px}
.main .pr-items-wrap{margin-top:16px;overflow:hidden;border:1px solid var(--mf-border);border-radius:12px;background:#fff}
.main .pr-items-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}
.main .pr-items-heading strong,.main .pr-items-heading span{display:block}
.main .pr-items-heading strong{font-size:11px;font-weight:850}
.main .pr-items-heading>div>span{margin-top:2px;color:var(--mf-muted);font-size:9px}
.main .pr-table-wrap{border:0!important;border-radius:0!important}
.main #prItemsTable{min-width:920px!important}
.main #prItemsTable th{height:38px!important;padding:8px 10px!important;font-size:9px!important}
.main #prItemsTable td{height:58px!important;padding:8px 10px!important}
.main #prItemsTable select,.main #prItemsTable input{min-height:38px;height:38px;padding:8px 9px;font-size:10px}
.main .pr-row .pr-material{font-weight:700}
.main .shortage-value{font-size:11px;font-weight:800;color:var(--mf-warning)}
.main .pr-remove{width:34px;height:34px;border-radius:8px}
.main .pr-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-top:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .pr-footnote{display:flex;align-items:flex-start;gap:6px;min-width:0;color:var(--mf-muted);font-size:9px;line-height:1.45}
.main .pr-footnote>span:first-child{color:var(--mf-info);font-weight:900}
.main .pr-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.main .role-notice{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;margin-bottom:14px}
.main .role-notice-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:10px;font-weight:900}
.main .pr-approval-board{margin-top:16px}
.main .pr-approval-board>.section-title-row{background:var(--mf-surface)}
.main .pr-approval-groups{display:grid;gap:9px;padding:12px}
.main .pr-project-group{overflow:hidden;border:1px solid var(--mf-border);border-radius:11px;background:#fff}
.main .pr-project-toggle{width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:46px;padding:8px 11px;border:0;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2);color:var(--mf-text);text-align:left}
.main .pr-project-toggle:hover{background:#f8f2eb}
.main .pr-project-toggle:before{content:'▾';color:var(--mf-pink);font-weight:900}
.main .pr-project-toggle .mf-context-chevron{display:none}
.main .pr-project-body{padding:9px;background:#fff}
.main .pr-approval-card{overflow:hidden;margin:0;border-radius:11px;box-shadow:none!important}
.main .pr-approval-card+.pr-approval-card{margin-top:8px}
.main .pr-approval-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--mf-border);background:#fff}
.main .pr-doc-no{font-size:12px;font-weight:900;color:var(--mf-text)}
.main .pr-doc-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:3px;color:var(--mf-muted);font-size:9px}
.main .pr-summary-table-wrap{overflow-x:auto}
.main .pr-approval-table{min-width:620px!important}
.main .pr-approval-table th{height:36px!important;padding:8px 10px!important;font-size:9px!important}
.main .pr-approval-table td{height:50px!important;padding:8px 10px!important;font-size:10px!important}
.main .pr-approval-table td small{display:block;margin-top:2px;color:var(--mf-muted);font-size:9px}
.main .pr-approval-content{padding:10px 12px;background:var(--mf-surface-2);border-top:1px solid var(--mf-border)}
.main .pr-shortage-detail{border:1px solid var(--mf-border);border-radius:9px;background:#fff;overflow:hidden}
.main .pr-shortage-detail summary{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;color:var(--mf-text);font-size:10px;font-weight:800;cursor:pointer;list-style:none}
.main .pr-shortage-detail summary::-webkit-details-marker{display:none}
.main .pr-shortage-table{overflow-x:auto;border-top:1px solid var(--mf-border)}
.main .pr-shortage-table table{min-width:560px!important}
.main .pr-shortage-table th{height:34px!important;padding:7px 9px!important;font-size:8px!important}
.main .pr-shortage-table td{height:40px!important;padding:7px 9px!important;font-size:10px!important}
.main .reject-note{margin-top:8px;padding:9px 10px;border:1px solid #efd3d5;border-radius:8px;background:var(--mf-danger-soft);color:var(--mf-danger);font-size:10px}
.main .pr-decision-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:11px 12px;border:1px solid var(--mf-border);border-radius:9px;background:#fff}
.main .pr-decision-title{font-size:10px;font-weight:850;color:var(--mf-text)}
.main .pr-decision-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}

/* Shared Purchasing cards / headings. */
.main .purchasing-home{display:grid;gap:14px}
.main .purchasing-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.main .purchasing-kpis>.stat-card{padding:14px 16px}
.main .procurement-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.main .procurement-home-card{padding:16px}
.main .procurement-home-card h2{margin:5px 0 0;font-size:15px}
.main .procurement-home-card p{margin:5px 0 0;color:var(--mf-muted);font-size:10px;line-height:1.45}
.main .procurement-flow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px}
.main .procurement-flow>*{display:inline-flex;align-items:center;min-height:26px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px;font-weight:800}

/* Consistent progress primitive used across modules. */
.main .progress{height:7px;overflow:hidden;border-radius:999px;background:#eee7df}
.main .ui-progress-fill{display:block;width:var(--ui-progress-width,0%);height:100%;border-radius:inherit;background:var(--mf-pink);transition:width .25s ease}

@media(max-width:1000px){
  .main .division-hero{grid-template-columns:1fr}
  .main .division-hero-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .main .process-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .division-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .production-division-grid-head,.main .production-division-grid-row{grid-template-columns:minmax(210px,1.5fr) 90px minmax(170px,1.2fr) 100px 130px}
  .main .division-product-row{grid-template-columns:minmax(190px,1.4fr) 100px minmax(180px,1.2fr) 140px}
  .main .prod-division-grid{grid-template-columns:1fr}
  .main .prod-support-grid{grid-template-columns:1fr}
  .main .combined-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .purchasing-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .procurement-home-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .main .division-hero{padding:16px}
  .main .division-hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .production-section-title{align-items:flex-start;flex-direction:column;gap:8px}
  .main .process-module-grid{grid-template-columns:1fr}
  .main .division-process-grid{grid-template-columns:1fr}
  .main .production-division-grid-head,.main .production-division-grid-row{grid-template-columns:210px 90px 190px 100px 125px;min-width:715px}
  .main .production-division-grid{overflow-x:auto}
  .main .division-product-row{grid-template-columns:190px 100px 190px 140px;min-width:620px}
  .main .division-product-row-wrap{overflow-x:auto}
  .main .division-project-head{align-items:flex-start;flex-direction:column}
  .main .division-product-status{justify-content:flex-start}
  .main .production-section-nav{overflow-x:auto;flex-wrap:nowrap}
  .main .production-section-nav a{flex:0 0 auto}
  .main .production-workflow-pill{white-space:normal}
  .main .combined-production-head{display:block}
  .main .combined-production-total{width:auto;margin-top:12px}
  .main .combined-kpis{grid-template-columns:1fr 1fr}
  .main .production-table-toolbar{align-items:stretch;flex-direction:column}
  .main .production-table-tools{width:100%;align-items:stretch;flex-direction:column}
  .main .production-table-search{min-width:0;width:100%}
  .main .production-table-toggle{width:100%}
  .main .pr-header-grid{grid-template-columns:1fr}
  .main .pr-field.full-span{grid-column:auto}
  .main .pr-footer{align-items:stretch;flex-direction:column}
  .main .pr-actions{justify-content:stretch}
  .main .pr-actions .btn{flex:1}
  .main .section-title-row,.main .section-head,.main .section-heading{display:block;padding:15px 16px}
  .main .section-title-row>.info-chip,.main .section-head>.badge,.main .section-heading>.badge{margin-top:10px}
  .main .pr-approval-card-head{align-items:flex-start;flex-direction:column}
  .main .pr-decision-panel{align-items:stretch;flex-direction:column}
  .main .pr-decision-actions .btn{flex:1}
}

/* =====================================================================
   MAGENTA UI — CROSS-MODULE CONSISTENCY PASS
   ===================================================================== */

/* PPIC ----------------------------------------------------------------- */
.main .ppic-home{display:grid;gap:14px}
.main .ppic-hero,.main .warehouse-hero,.main .delivery-hero,.main .mf-assembly-hero,.main .procurement-hero{
  display:flex;align-items:stretch;justify-content:space-between;gap:20px;
  padding:20px;border:1px solid var(--mf-border);border-radius:16px;
  background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)
}
.main .ppic-hero-copy,.main .warehouse-hero-copy,.main .delivery-hero-copy,.main .mf-assembly-hero-copy,.main .procurement-hero-main{min-width:0;flex:1}
.main .ppic-hero h1,.main .warehouse-hero h1,.main .delivery-hero h1,.main .mf-assembly-hero h1,.main .procurement-hero h2{margin:5px 0 0;font-size:27px;line-height:1.15;font-weight:900;letter-spacing:-.025em}
.main .ppic-hero p,.main .warehouse-hero p,.main .delivery-hero p,.main .mf-assembly-hero p,.main .procurement-hero-main p{max-width:860px;margin:7px 0 0;color:var(--mf-muted);font-size:11px;line-height:1.55}
.main .ppic-hero-flow,.main .warehouse-flow,.main .delivery-flow,.main .mf-assembly-flow,.main .procurement-flow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:13px}
.main .ppic-hero-flow span,.main .warehouse-flow-step,.main .delivery-flow span,.main .mf-assembly-flow span,.main .procurement-flow span{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px;font-weight:850;letter-spacing:.03em}
.main .ppic-hero-flow span:first-child,.main .warehouse-flow-step.active,.main .mf-assembly-flow span.active,.main .procurement-flow span.is-active{background:var(--mf-pink-soft);border-color:#edc7da;color:var(--mf-pink)}
.main .ppic-hero-flow i,.main .warehouse-flow-line,.main .delivery-flow i,.main .mf-assembly-flow i,.main .procurement-flow i{font-style:normal;color:var(--mf-subtle);font-size:12px}
.main .ppic-hero-actions,.main .warehouse-hero-actions,.main .delivery-hero-actions,.main .mf-assembly-actions,.main .procurement-hero-side{display:flex;align-items:flex-start;justify-content:flex-end;gap:7px;flex-wrap:wrap;flex:0 0 auto}
.main .procurement-hero-side{min-width:250px;display:grid;grid-template-columns:1fr;align-content:center;padding-left:16px;border-left:1px solid var(--mf-border)}
.main .procurement-eyebrow{color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.12em}
.main .procurement-live-dot,.main .delivery-live-dot{display:inline-block;width:6px;height:6px;margin:0 4px;border-radius:50%;background:#38a66d}
.main .procurement-side-label{color:var(--mf-subtle);font-size:9px;font-weight:850;letter-spacing:.1em}
.main .procurement-action{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--mf-border);border-radius:10px;background:#fff;color:var(--mf-text)}
.main .procurement-action>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--mf-surface-2);color:var(--mf-pink);font-weight:900}
.main .procurement-action strong,.main .procurement-action small{display:block}.main .procurement-action strong{font-size:10px}.main .procurement-action small{margin-top:1px;color:var(--mf-muted);font-size:9px}.main .procurement-action.primary{border-color:#edc7da;background:var(--mf-pink-soft)}
.main .ppic-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--mf-surface-gap)}
.main .ppic-kpi{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .ppic-kpi-icon{width:31px;height:31px;display:grid;place-items:center;flex:0 0 31px;border-radius:9px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:9px;font-weight:900}.main .ppic-kpi-icon.amber{background:var(--mf-warning-soft);color:var(--mf-warning)}.main .ppic-kpi-icon.blue{background:var(--mf-info-soft);color:var(--mf-info)}.main .ppic-kpi-icon.red{background:var(--mf-danger-soft);color:var(--mf-danger)}.main .ppic-kpi-icon.purple,.main .ppic-kpi-icon.rose{background:var(--mf-pink-soft);color:var(--mf-pink)}
.main .ppic-kpi small,.main .ppic-kpi strong,.main .ppic-kpi em{display:block}.main .ppic-kpi small{font-size:8px;color:var(--mf-muted);font-weight:850;letter-spacing:.04em}.main .ppic-kpi strong{margin-top:2px;font-size:17px}.main .ppic-kpi em{margin-top:1px;color:var(--mf-subtle);font-size:8px;font-style:normal}
.main .ppic-stage-card,.main .ppic-panel,.main .ppic-section-shell{overflow:hidden;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .ppic-section-heading,.main .delivery-section-heading,.main .mf-assembly-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--mf-border)}
.main .ppic-section-heading h2,.main .delivery-section-heading h2,.main .mf-assembly-section-head h2{margin:4px 0 0;font-size:16px;font-weight:850}.main .ppic-section-heading p,.main .delivery-section-heading p,.main .mf-assembly-section-head p{margin:4px 0 0;color:var(--mf-muted);font-size:10px;line-height:1.45}
.main .ppic-stage-rail{display:flex;align-items:center;gap:6px;padding:14px 18px;overflow-x:auto}.main .ppic-stage-rail a{min-width:150px;padding:10px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2)}.main .ppic-stage-rail b,.main .ppic-stage-rail span,.main .ppic-stage-rail small{display:block}.main .ppic-stage-rail b{color:var(--mf-pink);font-size:9px}.main .ppic-stage-rail span{margin-top:2px;font-size:11px;font-weight:850}.main .ppic-stage-rail small{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .ppic-stage-rail i{font-style:normal;color:var(--mf-subtle)}
.main .ppic-control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.main .ppic-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid var(--mf-border)}.main .ppic-panel-head h2{margin:4px 0 0;font-size:15px}.main .ppic-panel-head p{margin:3px 0 0;color:var(--mf-muted);font-size:10px}.main .ppic-alert-count{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:10px;font-weight:900}.main .ppic-attention-list,.main .ppic-mini-list{padding:8px}.main .ppic-attention-item,.main .ppic-mini-list>a{display:flex;align-items:center;gap:9px;padding:10px;border-bottom:1px solid var(--mf-border);color:var(--mf-text)}.main .ppic-attention-item:last-child,.main .ppic-mini-list>a:last-child{border-bottom:0}.main .ppic-attention-item>div,.main .ppic-mini-list>a>div{min-width:0;flex:1}.main .ppic-attention-item b,.main .ppic-attention-item small,.main .ppic-mini-list b,.main .ppic-mini-list span{display:block}.main .ppic-attention-item b,.main .ppic-mini-list b{font-size:10px}.main .ppic-attention-item small,.main .ppic-mini-list span{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .attention-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:10px;font-weight:900}.main .attention-icon.amber{background:var(--mf-warning-soft);color:var(--mf-warning)}.main .attention-icon.red{background:var(--mf-danger-soft);color:var(--mf-danger)}.main .attention-icon.purple{background:var(--mf-pink-soft);color:var(--mf-pink)}
.main .ppic-project-list{padding:10px}.main .ppic-project-card{overflow:hidden;border:1px solid var(--mf-border);border-radius:11px;background:#fff}.main .ppic-project-card+details{margin-top:8px}.main .ppic-project-card summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--mf-surface-2);cursor:pointer;list-style:none}.main .ppic-project-card summary::-webkit-details-marker{display:none}.main .ppic-project-title{display:flex;align-items:center;gap:8px}.main .project-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:9px;font-weight:900}.main .ppic-project-title b{font-size:11px}.main .ppic-project-products{padding:8px}.main .ppic-product-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1.4fr);gap:12px;align-items:center;padding:11px;border:1px solid var(--mf-border);border-radius:10px;background:#fff}.main .ppic-product-row+.ppic-product-row{margin-top:7px}.main .ppic-product-main{display:flex;align-items:center;gap:9px;min-width:0}.main .ppic-product-main img,.main .ppic-product-placeholder{width:42px;height:42px;flex:0 0 42px;border-radius:9px;object-fit:cover;border:1px solid var(--mf-border)}.main .ppic-product-placeholder{display:grid;place-items:center;background:var(--mf-surface-2);color:var(--mf-subtle);font-size:9px;font-weight:900}.main .ppic-product-main b,.main .ppic-product-main small,.main .ppic-product-main .product-code{display:block}.main .ppic-product-main b{font-size:11px}.main .ppic-product-main small{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .ppic-split-form{display:grid;grid-template-columns:repeat(3,minmax(80px,1fr)) auto;gap:7px;align-items:end}.main .ppic-split-form label{gap:4px}.main .ppic-split-form label>span{font-size:9px}.main .ppic-split-form input{min-height:36px;height:36px;font-size:10px}.main .split-help{grid-column:1/-1;color:var(--mf-muted);font-size:9px}

/* Delivery ---------------------------------------------------------------- */
.main .delivery-home{display:grid;gap:14px}.main .delivery-hero-flow{min-width:300px;max-width:430px;padding:13px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface-2)}.main .delivery-eyebrow,.main .delivery-section-kicker{color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.1em}.main .delivery-flow-label{font-size:9px;color:var(--mf-subtle);font-weight:850}.main .delivery-flow-note{margin-top:8px;color:var(--mf-muted);font-size:9px;line-height:1.4}.main .delivery-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.main .delivery-kpi{padding:13px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .delivery-kpi span,.main .delivery-kpi strong,.main .delivery-kpi small{display:block}.main .delivery-kpi span{font-size:9px;color:var(--mf-muted);font-weight:800;text-transform:uppercase}.main .delivery-kpi strong{margin-top:3px;font-size:21px}.main .delivery-kpi small{margin-top:2px;color:var(--mf-subtle);font-size:9px}.main .delivery-kpi.warning strong{color:var(--mf-warning)}.main .delivery-kpi.success strong{color:var(--mf-success)}.main .delivery-kpi.replacement strong{color:var(--mf-pink)}.main .delivery-workflow-card{overflow:hidden;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .delivery-status-rail{display:flex;align-items:center;gap:8px;padding:14px 18px;overflow-x:auto}.main .delivery-status-rail>div:not(.rail-arrow){min-width:150px;padding:9px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface-2)}.main .delivery-status-rail b,.main .delivery-status-rail span,.main .delivery-status-rail small{display:block}.main .delivery-status-rail b{font-size:9px;color:var(--mf-pink)}.main .delivery-status-rail span{font-size:10px;font-weight:850}.main .delivery-status-rail small{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .rail-arrow{color:var(--mf-subtle)}.main .delivery-board-search{display:flex;min-width:280px;padding:0;border:0;background:transparent}.main .delivery-board-search input{min-height:36px;height:36px;font-size:10px}.main .delivery-kind{display:inline-flex;margin-top:4px;padding:3px 6px;border-radius:999px;background:var(--mf-info-soft);color:var(--mf-info);font-size:8px;font-weight:850}.main .delivery-kind.replacement{background:var(--mf-pink-soft);color:var(--mf-pink)}
/* Assembly ---------------------------------------------------------------- */
.main .mf-assembly-shell{display:grid;gap:14px}.main .mf-assembly-hero{align-items:flex-start}.main .mf-assembly-eyebrow,.main .mf-assembly-label{color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.1em}.main .mf-assembly-actions{min-width:220px;flex-direction:column;align-items:stretch}.main .mf-assembly-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.main .mf-assembly-kpi{padding:13px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .mf-assembly-kpi span,.main .mf-assembly-kpi b,.main .mf-assembly-kpi small{display:block}.main .mf-assembly-kpi span{font-size:8px;color:var(--mf-muted);font-weight:850;letter-spacing:.05em}.main .mf-assembly-kpi b{margin-top:3px;font-size:20px}.main .mf-assembly-kpi small{margin-top:2px;color:var(--mf-subtle);font-size:9px}.main .mf-assembly-progress-card{display:grid;grid-template-columns:1fr minmax(180px,320px) 60px;gap:14px;align-items:center;padding:15px 18px;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .mf-assembly-progress-card strong,.main .mf-assembly-progress-card small{display:block}.main .mf-assembly-progress-card strong{margin-top:3px;font-size:18px}.main .mf-assembly-progress-card small{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .mf-assembly-progress{height:8px;overflow:hidden;border-radius:999px;background:#eee7df}.main .mf-assembly-progress>span{display:block;width:0;height:100%;background:var(--mf-pink);border-radius:inherit}.main .mf-assembly-progress-pct{text-align:right;font-size:16px}.main .mf-assembly-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface-2)}.main .mf-assembly-toolbar b,.main .mf-assembly-toolbar span{display:block}.main .mf-assembly-toolbar b{font-size:11px}.main .mf-assembly-toolbar span{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .mf-assembly-search{display:flex;flex-direction:row;align-items:center;gap:7px;min-width:280px}.main .mf-assembly-search input{min-height:36px;height:36px;font-size:10px}.main .mf-assembly-table-card{overflow:hidden}.main .mf-assembly-project-toggle,.main .mf-assembly-product-toggle{width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px;padding:8px 11px;border:0;background:var(--mf-surface-2);text-align:left}.main .mf-assembly-product-toggle{background:#fff;min-height:44px}.main .mf-assembly-project-toggle:hover,.main .mf-assembly-product-toggle:hover{background:#f8f2eb}.main .mf-assembly-chevron{color:var(--mf-pink);font-weight:900}.main .mf-assembly-project-heading strong,.main .mf-assembly-product-heading strong,.main .mf-assembly-product-heading small{display:block}.main .mf-assembly-project-heading strong,.main .mf-assembly-product-heading strong{font-size:11px}.main .mf-assembly-product-heading small{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .mf-assembly-group-meta{color:var(--mf-muted);font-size:9px;white-space:nowrap}.main .mf-assembly-project-content-cell{padding:8px!important;background:#fff!important}.main .mf-assembly-product-block{overflow:hidden;border:1px solid var(--mf-border);border-radius:9px}.main .mf-assembly-product-block+.mf-assembly-product-block{margin-top:7px}.main .mf-assembly-point-table{min-width:760px!important}.main .mf-assembly-point-table th{height:38px!important;padding:8px 10px!important;font-size:9px!important}.main .mf-assembly-point-table td{height:46px!important;padding:8px 10px!important;font-size:10px!important}.main .mf-mini-progress{height:7px;min-width:80px;overflow:hidden;border-radius:999px;background:#eee7df}.main .mf-mini-progress>span{display:block;width:0;height:100%;background:var(--mf-pink);border-radius:inherit}

/* Warehouse ---------------------------------------------------------------- */
.main .warehouse-pro-shell,.main .warehouse-home{display:grid;gap:var(--mf-surface-gap)}.main .warehouse-hero{align-items:flex-start}.main .warehouse-hero-actions{max-width:290px}.main .warehouse-home>.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mf-surface-gap)}.main .warehouse-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mf-surface-gap)}.main .warehouse-material-table-card{overflow:hidden}.main .warehouse-table-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}.main .warehouse-table-search{display:flex;align-items:center;gap:7px;min-width:260px}.main .warehouse-table-search input{min-height:34px;height:34px;font-size:10px}.main .warehouse-division-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px;border:1px solid var(--mf-border);border-radius:15px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}

/* Control / Admin / Sales ------------------------------------------------ */
.main .pc-hero,.main .admin-users-page,.main .audit-page,.main .sales-create{display:grid;gap:14px}.main .pc-hero{padding:18px;border:1px solid var(--mf-border);border-radius:15px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .pc-kpis,.main .admin-summary-grid,.main .audit-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.main .pc-kpi,.main .admin-stat,.main .audit-metric{padding:13px;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .pc-kpi span,.main .pc-kpi strong,.main .pc-kpi small,.main .admin-stat span,.main .admin-stat b,.main .audit-metric span,.main .audit-metric b{display:block}.main .pc-kpi span,.main .admin-stat span,.main .audit-metric span{font-size:9px;color:var(--mf-muted);font-weight:800;text-transform:uppercase}.main .pc-kpi strong,.main .admin-stat b,.main .audit-metric b{margin-top:3px;font-size:19px}.main .pc-kpi small{margin-top:2px;color:var(--mf-subtle);font-size:9px}.main .admin-users-table,.main .audit-table-wrap{overflow:hidden;border:1px solid var(--mf-border);border-radius:13px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}.main .admin-users-table table,.main .audit-table{min-width:760px}.main .sales-create>.card{overflow:hidden}.main .sales-create>.ui-card{margin:0}.main .sales-create .product-search{padding:14px 18px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface)}.main .sales-create .product-search input{width:100%;min-height:42px;height:42px;font-size:12px}.main .sales-create .product-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px;background:var(--mf-surface-2)}.main .sales-create .product-card{display:flex;flex-direction:column;min-width:0;min-height:230px;padding:0;overflow:hidden;border:1px solid var(--mf-border);border-radius:12px;background:#fff;color:var(--mf-text);text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.main .sales-create .product-card:hover{border-color:#d5bfd0;box-shadow:var(--mf-shadow-sm);transform:translateY(-1px)}.main .sales-create .product-card:focus-visible{outline:3px solid rgba(197,31,120,.16);outline-offset:2px}.main .sales-create .product-card img,.main .sales-create .product-image-placeholder{display:grid;place-items:center;width:100%;height:155px;flex:0 0 155px;object-fit:contain;padding:12px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}.main .sales-create .product-image-placeholder{color:var(--mf-subtle);font-size:10px;font-weight:800;letter-spacing:.03em;text-align:center}.main .sales-create .product-card-body{display:flex;flex-direction:column;gap:4px;padding:13px 14px}.main .sales-create .product-card-body b{display:block;color:var(--mf-text);font-size:13px;line-height:1.35;font-weight:800}.main .sales-create .product-card-body span{display:block;margin:0;color:var(--mf-muted);font-size:11px;line-height:1.35}.main .sales-create .sales-product-list{padding:0 18px}.main .sales-create .sales-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.main .sales-create .empty{margin:0 18px 18px;border:1px solid var(--mf-border);border-radius:10px}

@media(max-width:1100px){
  .main .ppic-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .main .delivery-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .main .mf-assembly-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .warehouse-home>.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .warehouse-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .sales-create .product-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .main .ppic-hero,.main .warehouse-hero,.main .delivery-hero,.main .mf-assembly-hero,.main .procurement-hero{display:block;padding:16px}
  .main .ppic-hero-actions,.main .warehouse-hero-actions,.main .delivery-hero-actions,.main .mf-assembly-actions{margin-top:12px;justify-content:flex-start;max-width:none}
  .main .ppic-kpi-grid,.main .delivery-kpis{grid-template-columns:1fr 1fr}.main .ppic-control-grid{grid-template-columns:1fr}
  .main .ppic-product-row{grid-template-columns:1fr}.main .ppic-split-form{grid-template-columns:1fr 1fr}.main .ppic-split-form .btn{grid-column:1/-1}
  .main .mf-assembly-kpis{grid-template-columns:1fr 1fr}.main .mf-assembly-progress-card{grid-template-columns:1fr}.main .mf-assembly-progress-pct{text-align:left}.main .mf-assembly-toolbar{display:block}.main .mf-assembly-search{min-width:0;margin-top:9px}
  .main .warehouse-home>.grid,.main .warehouse-cards{grid-template-columns:1fr}.main .sales-create .product-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.main .pc-kpis,.main .admin-summary-grid,.main .audit-summary{grid-template-columns:1fr 1fr}
}

/* Canonical context hierarchy: Project → Site → Product. */
.main .ctx-site{overflow:hidden;border:1px solid var(--mf-border);border-radius:11px;background:var(--mf-surface);box-shadow:none}
.main .ctx-site + .ctx-site{margin-top:10px}
.main .ctx-site-head{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;border-bottom:1px solid var(--mf-border);background:var(--mf-surface);color:var(--mf-text);text-align:left;cursor:pointer}
.main .ctx-site-head:hover{background:#fffaf5}
.main .ctx-site-ident{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.main .ctx-site-ident strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:850}
.main .ctx-site-ident small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-muted);font-size:9px;font-weight:600}
.main .ctx-site-body{padding:10px;background:var(--mf-surface)}
.main .ctx-site-body > .ctx-product + .ctx-product{margin-top:7px}
.main .ctx-site-unassigned{border-style:dashed;background:var(--mf-surface)}
.main .ctx-site-unassigned .ctx-site-head{background:var(--mf-surface)}
.main .gbj-site-product-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 8px}
.main .gbj-site-product-meta > div:first-child{min-width:0;display:grid;gap:3px}
.main .gbj-site-product-stats{display:flex;align-items:stretch;gap:8px;flex:0 0 auto}
.main .gbj-site-product-stats span{min-width:72px;padding:7px 9px;border:1px solid var(--mf-border);border-radius:8px;background:var(--mf-surface-2);text-align:right}
.main .gbj-site-product-stats b{display:block;font-size:12px;color:var(--mf-text);line-height:1.1}
.main .gbj-site-product-stats small{display:block;margin-top:3px;color:var(--mf-muted);font-size:9px;font-weight:700}
.main .gbj-site-product-note{display:flex;justify-content:space-between;gap:12px;padding:0 14px 12px;color:var(--mf-muted);font-size:10px;font-weight:650}
@media (max-width:900px){
  .main .gbj-site-product-meta{align-items:flex-start;flex-direction:column}
  .main .gbj-site-product-stats{width:100%}
  .main .gbj-site-product-stats span{flex:1;text-align:left}
}

/* Canonical External Process workspace treatment. Shared by all External Process views. */
.main .ext-workspace-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);gap:18px;align-items:stretch;padding:20px}
.main .ext-hero-main{min-width:0}
.main .ext-eyebrow,.main .ext-section-kicker{display:block;color:var(--mf-pink);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.main .ext-eyebrow{margin-bottom:7px}
.main .ext-eyebrow .ext-live-dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#36a269;vertical-align:middle}
.main .ext-workspace-hero h1{margin:0;color:var(--mf-text);font-size:27px;line-height:1.12;font-weight:900;letter-spacing:-.02em}
.main .ext-workspace-hero p{margin:7px 0 0;color:var(--mf-muted);font-size:11px;line-height:1.55}
.main .ext-hero-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.main .ext-hero-status{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:14px 16px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface-2)}
.main .ext-hero-status span{color:var(--mf-muted);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.main .ext-hero-status strong{margin-top:5px;color:var(--mf-text);font-size:15px;font-weight:900}
.main .ext-hero-status small{margin-top:4px;color:var(--mf-muted);font-size:9px;line-height:1.4}
.main .ext-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
.main .ext-kpi{padding:13px 14px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .ext-kpi span,.main .ext-kpi b,.main .ext-kpi small{display:block}
.main .ext-kpi span{color:var(--mf-muted);font-size:8px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.main .ext-kpi b{margin-top:5px;color:var(--mf-text);font-size:20px;line-height:1}
.main .ext-kpi small{margin-top:4px;color:var(--mf-subtle);font-size:9px}
.main .ext-flow-strip{display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;align-items:center;gap:5px;margin-top:12px;padding:10px 12px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .ext-flow-item{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:54px;padding:8px 10px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface-2);color:var(--mf-muted);text-decoration:none}
.main .ext-flow-item.active{border-color:#dfc5d7;background:var(--mf-pink-soft);color:var(--mf-text)}
.main .ext-flow-item span{font-size:8px;font-weight:850;color:var(--mf-pink)}
.main .ext-flow-item b{margin-top:2px;font-size:10px;font-weight:850}
.main .ext-flow-item small{margin-top:2px;color:var(--mf-muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main .ext-flow-strip>i{display:block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--mf-border-strong)}
.main .ext-context-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:10px 12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2)}
.main .ext-context-label{display:block;color:var(--mf-pink);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.main .ext-context-bar strong{display:block;margin-top:3px;color:var(--mf-text);font-size:10px}
.main .ext-context-note{max-width:520px;color:var(--mf-muted);font-size:9px;line-height:1.45;text-align:right}
.main .ext-section-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding:8px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface)}
.main .ext-section-nav a{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid var(--mf-border);border-radius:8px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px;font-weight:800;text-decoration:none}
.main .ext-section-nav a:hover{border-color:var(--mf-border-strong);color:var(--mf-text);background:#fff}
.main .ext-panel{overflow:hidden;margin-top:12px}
.main .ext-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 16px}
.main .ext-panel-head h2{margin:3px 0 0;color:var(--mf-text);font-size:17px;line-height:1.2;font-weight:900}
.main .ext-panel-head p{margin:4px 0 0;color:var(--mf-muted);font-size:9px;line-height:1.5}
.main .ext-panel-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:8px;font-weight:850;white-space:nowrap}
.main .ext-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:14px 16px}
.main .ext-form-grid label{display:flex;flex-direction:column;gap:5px;color:var(--mf-text);font-size:9px;font-weight:850}
.main .ext-form-grid label.full-span{grid-column:1/-1}
.main .ext-form-grid select,.main .ext-form-grid input{width:100%;min-height:38px;height:38px;padding:0 10px;border:1px solid var(--mf-border);border-radius:9px;background:#fff;color:var(--mf-text);font-size:10px}
.main .ext-form-grid select:focus,.main .ext-form-grid input:focus{border-color:#d5bfd0;box-shadow:0 0 0 3px var(--mf-pink-soft);outline:0}
.main .ext-form-grid small{color:var(--mf-muted);font-size:8px;font-weight:600;line-height:1.35}
.main .ext-form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--mf-border);background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px}
.main .ext-board{overflow:hidden;padding:0 16px 16px}
.main .ext-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}
.main .ext-mini-stats>div{padding:9px 10px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface-2)}
.main .ext-mini-stats span,.main .ext-mini-stats b{display:block}.main .ext-mini-stats span{color:var(--mf-muted);font-size:8px}.main .ext-mini-stats b{margin-top:3px;font-size:13px}
.main .ext-action-card{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:10px 11px;border:1px solid var(--mf-border);border-radius:9px;background:#fff}
.main .ext-action-card.in{border-left:3px solid #4c9b71}.main .ext-action-card.out{border-left:3px solid var(--mf-pink)}
.main .ext-id{font-size:10px;font-weight:850}.main .ext-muted-action{color:var(--mf-muted);font-size:9px}.main .ext-inline-fields{display:flex;gap:7px;flex-wrap:wrap}.main .ext-inline-fields.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.main .ext-inline-fields input,.main .ext-inline-fields select{min-height:34px;height:34px;font-size:9px}
.main .ext-legend{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--mf-muted);font-size:8px}.main .ext-legend span{display:inline-flex;align-items:center;gap:4px}.main .ext-legend i{width:7px;height:7px;border-radius:50%}.main .dot-done{background:#4c9b71}.main .dot-ready{background:#d39a31}.main .dot-send{background:var(--mf-pink)}
.main .ext-history{overflow:hidden;margin-top:12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface)}
.main .ext-history-pills{display:flex;gap:7px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .ext-history-pills span{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:#fff;color:var(--mf-muted);font-size:8px;font-weight:800}
.main .ext-history-summary{padding:12px 14px;color:var(--mf-muted);font-size:9px}
.main .ext-admin-zone{margin-top:12px;padding:12px;border:1px dashed var(--mf-border-strong);border-radius:10px;background:var(--mf-surface-2)}

@media(max-width:900px){
  .main .ext-workspace-hero{grid-template-columns:1fr}
  .main .ext-kpi-grid,.main .ext-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .ext-flow-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .ext-flow-strip>i{display:none}
}
@media(max-width:640px){
  .main .ext-workspace-hero{padding:16px}.main .ext-workspace-hero h1{font-size:23px}
  .main .ext-kpi-grid,.main .ext-mini-stats,.main .ext-form-grid{grid-template-columns:1fr}
  .main .ext-form-grid label.full-span{grid-column:auto}
  .main .ext-panel-head,.main .ext-form-footer,.main .ext-context-bar{display:block}
  .main .ext-panel-head .ext-panel-badge{margin-top:9px}
  .main .ext-form-footer .btn{margin-top:9px}
  .main .ext-context-note{max-width:none;margin-top:7px;text-align:left}
  .main .ext-inline-fields.three{grid-template-columns:1fr}
  .main .ext-flow-strip{grid-template-columns:1fr}
}

/* Canonical Production Report workspace — shared by Metal, Panel and combined report. */
.main .production-report-page{display:flex;flex-direction:column;gap:16px;min-width:0}
.main .production-report-page>.card{margin:0}
.main .production-report-page .report-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:20px 22px;border-radius:16px}
.main .production-report-page .report-page-head h1{margin:2px 0 0;font-size:27px;line-height:1.12;letter-spacing:-.025em;color:var(--mf-text)}
.main .production-report-page .report-page-head p{margin:7px 0 0;color:var(--mf-muted);font-size:12px}
.main .production-report-page .report-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.main .production-report-page .report-filter{padding:18px 20px;background:var(--mf-surface-2)}
.main .production-report-page .report-filter form{display:flex;flex-direction:column;gap:14px}
.main .production-report-page .report-filter-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.main .production-report-page .report-filter-grid label{display:flex;flex-direction:column;gap:6px;color:var(--mf-text);font-size:10px;font-weight:800}
.main .production-report-page .report-filter-grid input,
.main .production-report-page .report-filter-grid select{min-height:40px;height:40px;padding:0 10px;border:1px solid var(--mf-border-strong);border-radius:9px;background:#fff;font-size:11px}
.main .production-report-page .report-filter .btn{align-self:flex-end}
.main .production-report-page .report-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.main .production-report-page .stat-card{min-width:0;padding:15px 16px;border:1px solid var(--mf-border);border-radius:14px;background:var(--mf-surface);box-shadow:var(--mf-shadow-sm)}
.main .production-report-page .stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--mf-muted);font-size:10px;font-weight:800}
.main .production-report-page .stat-icon{display:inline-grid;place-items:center;min-width:25px;height:25px;padding:0 6px;border:1px solid var(--mf-border);border-radius:7px;background:var(--mf-surface-2);color:var(--mf-text);font-size:9px;font-weight:900}
.main .production-report-page .stat{margin-top:8px;color:var(--mf-text);font-size:24px;line-height:1;font-weight:900;letter-spacing:-.03em}
.main .production-report-page .stat.good{color:var(--mf-success)}
.main .production-report-page .stat.reject,.main .production-report-page .report-alert-number{color:var(--mf-danger)}
.main .production-report-page .stat-note{margin-top:5px;color:var(--mf-subtle);font-size:9px}
.main .production-report-page .report-table-card{overflow:hidden}
.main .production-report-page .report-table-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface)}
.main .production-report-page .report-table-head h2{margin:3px 0 0;color:var(--mf-text);font-size:17px;line-height:1.25;font-weight:900;letter-spacing:-.015em}
.main .production-report-page .report-table-head p{margin:5px 0 0;color:var(--mf-muted);font-size:10px;line-height:1.5}
.main .production-report-page .report-table-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;min-width:220px}
.main .production-report-page .report-table-meta>span{display:inline-flex;align-items:center;min-height:27px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px;font-weight:800;white-space:nowrap}
.main .production-report-page .report-table-meta .danger-chip{border-color:#ead0d2;background:var(--mf-danger-soft);color:var(--mf-danger)}
.main .production-report-page .table-wrap{width:100%;min-width:0;overflow:auto}
.main .production-report-page .report-hierarchy-list{min-width:980px;padding:12px 14px 16px;background:var(--mf-surface-2)}
.main .production-report-page .report-project-group-row{border:1px solid var(--mf-border);border-radius:12px 12px 0 0;background:var(--mf-surface);overflow:hidden}
.main .production-report-page .report-project-group-cell{width:100%}
.main .production-report-page .report-group-toggle{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;border:0;background:transparent;color:var(--mf-text);text-align:left}
.main .production-report-page .report-group-toggle:hover{background:var(--mf-surface-2)}
.main .production-report-page .report-group-chevron{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border:1px solid var(--mf-border);border-radius:7px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:11px;font-weight:900}
.main .production-report-page .report-group-name{display:flex;flex-direction:column;min-width:0;flex:1}
.main .production-report-page .report-group-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900}
.main .production-report-page .report-group-name small{margin-top:2px;color:var(--mf-muted);font-size:9px;font-weight:600}
.main .production-report-page .report-group-summary{display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border:1px solid var(--mf-border);border-radius:999px;background:var(--mf-surface-2);color:var(--mf-muted);font-size:9px;font-weight:800;white-space:nowrap}
.main .production-report-page .report-project-body-row{padding:0 8px 8px;border:1px solid var(--mf-border);border-top:0;border-radius:0 0 12px 12px;background:var(--mf-surface-2)}
.main .production-report-page .report-project-body-cell{display:flex;flex-direction:column;gap:8px}
.main .production-report-page .report-product-group{overflow:hidden;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface)}
.main .production-report-page .report-product-toggle{min-height:46px;padding:0 10px}
.main .production-report-page .report-product-toggle .report-group-chevron{width:23px;height:23px;flex-basis:23px;background:#f2eee8;color:var(--mf-text)}
.main .production-report-page .report-product-toggle .report-group-name strong{font-size:11px}
.main .production-report-page .report-product-body{padding:0 8px 8px;background:var(--mf-surface-2)}
.main .production-report-page .report-division-block{overflow:hidden;margin-top:8px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface)}
.main .production-report-page .report-division-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .production-report-page .report-division-title>div{display:flex;align-items:center;gap:7px;min-width:0}
.main .production-report-page .report-division-kicker{color:var(--mf-pink);font-size:8px;font-weight:900;letter-spacing:.08em}
.main .production-report-page .report-division-title strong{color:var(--mf-text);font-size:10px;font-weight:900}
.main .production-report-page .report-division-title>span{color:var(--mf-muted);font-size:9px;font-weight:800;white-space:nowrap}
.main .production-report-page .report-product-table-wrap{width:100%;overflow:auto}
.main .production-report-page .production-report-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px;background:var(--mf-surface);font-size:10px}
.main .production-report-page .production-report-table th{height:38px;padding:8px 9px;border-bottom:1px solid var(--mf-border);background:#f8f4ee;color:#657183;font-size:8px;line-height:1.25;font-weight:900;letter-spacing:.06em;text-align:center;vertical-align:middle;white-space:nowrap}
.main .production-report-page .production-report-table th:first-child{text-align:left}
.main .production-report-page .production-report-table td{height:58px;padding:8px 9px;border-bottom:1px solid var(--mf-border);color:var(--mf-text);text-align:center;vertical-align:middle;background:#fffdf9}
.main .production-report-page .production-report-table tbody tr:last-child td{border-bottom:0}
.main .production-report-page .production-report-table .part-cell{text-align:left;min-width:190px}
.main .production-report-page .part-no{font-size:10px;font-weight:900;color:var(--mf-text)}
.main .production-report-page .part-name{margin-top:2px;color:var(--mf-muted);font-size:9px;font-weight:650}
.main .production-report-page .part-meta{margin-top:4px;color:var(--mf-subtle);font-size:8px}
.main .production-report-page .process-output-cell{min-width:86px}
.main .production-report-page .process-output-cell.is-routed{background:#fffdf9}
.main .production-report-page .process-output-cell.is-not-routed{background:#fbf5f4}
.main .production-report-page .process-output-cell strong,.main .production-report-page .total-production-cell strong{display:block;color:var(--mf-text);font-size:11px;font-weight:900}
.main .production-report-page .process-output-cell small,.main .production-report-page .total-production-cell small{display:block;margin-top:2px;color:var(--mf-muted);font-size:8px;white-space:nowrap}
.main .production-report-page .route-x{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--mf-danger-soft);color:var(--mf-danger);font-size:14px;font-weight:900}
.main .production-report-page .total-production-cell{min-width:110px;background:#faf6ef!important;border-left:1px solid var(--mf-border)}
.main .production-report-page .total-production-cell strong{font-size:12px}
.main .production-report-page .daily-report-table{min-width:920px}
.main .production-report-page .daily-report-table th{text-align:left}
.main .production-report-page .daily-report-table th:nth-last-child(-n+3),.main .production-report-page .daily-report-table td:nth-last-child(-n+3){text-align:right}
.main .production-report-page .daily-report-table td{height:48px}
.main .production-report-page .empty,.main .production-report-page .report-empty-state{min-height:120px;display:flex;align-items:center;justify-content:center;padding:28px;color:var(--mf-muted);font-size:11px;text-align:center;background:var(--mf-surface-2);border:1px dashed var(--mf-border-strong);border-radius:10px}
.main .production-report-page .red-text{color:var(--mf-danger)}
.main .production-report-page .report-print-actions{display:flex;gap:8px;justify-content:flex-end}
.main .production-report-page .report-signature{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.main .production-report-page .report-signature>div{min-height:80px;padding:12px 14px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface)}
.main .production-report-page .report-signature strong{display:block;font-size:10px;color:var(--mf-text)}
.main .production-report-page .report-signature span{display:block;margin-top:3px;color:var(--mf-muted);font-size:9px}

@media(max-width:1100px){
  .main .production-report-page .report-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .main .production-report-page{gap:12px}
  .main .production-report-page .report-page-head,.main .production-report-page .report-table-head{display:block}
  .main .production-report-page .report-head-actions,.main .production-report-page .report-table-meta{justify-content:flex-start;margin-top:12px}
  .main .production-report-page .report-filter-grid{grid-template-columns:1fr 1fr}
  .main .production-report-page .report-filter .btn{align-self:stretch}
  .main .production-report-page .report-kpis{grid-template-columns:1fr}
  .main .production-report-page .report-signature{grid-template-columns:1fr}
}
@media(max-width:520px){
  .main .production-report-page .report-filter-grid{grid-template-columns:1fr}
  .main .production-report-page .report-page-head h1{font-size:23px}
  .main .production-report-page .report-table-head h2{font-size:15px}
  .main .production-report-page .report-head-actions .btn{flex:1}
}

/* Production report interaction + document footer — canonical shared treatment. */
.main .production-report-page .report-hidden{display:none!important}
.main .production-report-page .report-group-hidden{display:none!important}
.main .production-report-page .daily-data-row td b{display:block;font-size:10px;font-weight:850;color:var(--mf-text)}
.main .production-report-page .daily-data-row td small{display:block;margin-top:2px;color:var(--mf-muted);font-size:8px}
.main .production-report-page .daily-data-row .num{font-weight:850;text-align:right}
.main .production-report-page .daily-data-row .good{color:var(--mf-success)}
.main .production-report-page .daily-data-row .reject{color:var(--mf-danger)}
.main .production-report-page .daily-total-row td{height:38px;padding:8px 9px;background:#f4efe8;border-top:1px solid var(--mf-border);font-size:9px;font-weight:900;color:var(--mf-text)}
.main .production-report-page .daily-grand-row td{height:44px;padding:9px;background:var(--mf-navy);border-bottom:0;color:#fff;font-size:9px;font-weight:900}
.main .production-report-page .daily-grand-row .good{color:#d7f0e1}
.main .production-report-page .daily-grand-row .reject{color:#ffdadd}
.main .production-report-page .daily-grand-row .num{text-align:right}
.report-print-modal .report-print-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--mf-border);background:var(--mf-surface)}
.report-print-modal .report-print-dialog-head h2{margin:3px 0 0;font-size:18px;color:var(--mf-text)}
.report-print-modal .report-print-dialog-head p{margin:5px 0 0;color:var(--mf-muted);font-size:11px}
.report-print-modal .report-print-close{width:34px;height:34px;border:1px solid var(--mf-border);border-radius:8px;background:#fff;color:var(--mf-text);font-size:20px;line-height:1}
.report-print-modal .report-print-options{display:grid;gap:9px;padding:18px 22px}
.report-print-modal .report-print-option{display:flex;flex-direction:row;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2);cursor:pointer}
.report-print-modal .report-print-option:has(input:checked){border-color:#dfbfd3;background:var(--mf-pink-soft)}
.report-print-modal .report-print-option input{width:auto;min-height:auto;margin:3px 0 0;accent-color:var(--mf-pink)}
.report-print-modal .report-print-option strong,.report-print-modal .report-print-option small{display:block}
.report-print-modal .report-print-option strong{font-size:11px;color:var(--mf-text)}
.report-print-modal .report-print-option small{margin-top:3px;color:var(--mf-muted);font-size:9px;line-height:1.4}
.report-print-modal .report-print-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 22px 18px}
.report-print-modal .report-print-preview>div{padding:10px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface-2)}
.report-print-modal .report-print-preview span,.report-print-modal .report-print-preview strong{display:block}
.report-print-modal .report-print-preview span{font-size:8px;color:var(--mf-muted);font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.report-print-modal .report-print-preview strong{margin-top:3px;font-size:10px;color:var(--mf-text)}
.report-print-modal .report-print-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:13px 22px;border-top:1px solid var(--mf-border);background:var(--mf-surface-2)}

@media(max-width:760px){
  .report-print-modal .report-print-preview{grid-template-columns:1fr}
}

/* Transfer selection workspace — canonical surface token, no page-local inline styling. */
.transfer-selection-card{background:var(--mf-surface-2);box-shadow:none}

/* Canonical physical traceability workspace */
.production-trace-flow,.ext-physical-flow,.delivery-source-rule{margin:20px 0;border:1px solid var(--border,#e6dfd4);background:var(--surface,#fffdf9);border-radius:16px;padding:20px}
.production-trace-flow-head,.ext-physical-flow-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:16px}
.production-trace-flow h2,.ext-physical-flow h2,.delivery-source-rule h2{margin:3px 0 5px}
.production-trace-flow p,.ext-physical-flow p,.delivery-source-rule p{margin:0;color:var(--muted,#6f6a61);font-size:13px}
.production-trace-rail{display:flex;align-items:stretch;gap:8px;overflow:auto;padding-bottom:3px}
.production-trace-rail>i{align-self:center;color:#9b948a;font-style:normal;font-weight:800}
.production-trace-node{min-width:150px;padding:12px;border:1px solid #e5ded2;border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:3px}
.production-trace-node b{font-size:11px;color:#8b847a}.production-trace-node span{font-weight:800}.production-trace-node small{color:#777067}.production-trace-node.external{border-style:dashed}
.ext-flow-strip-physical{margin-top:0}.ext-flow-strip-physical .ext-flow-item{min-width:150px}
.delivery-source-rule{display:flex;justify-content:space-between;gap:24px;align-items:center}.delivery-source-grid{display:flex;gap:10px;flex-wrap:wrap}.delivery-source-item{min-width:145px;border:1px solid #e5ded2;border-radius:12px;padding:11px 14px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.delivery-source-item span{grid-row:1 / span 2;font-size:20px}.delivery-source-item small{grid-column:2;color:#777067}.delivery-source-item.blocked{border-style:dashed}.traceability-control-card .warehouse-table-tools{display:flex;align-items:center;gap:8px}
@media (max-width:900px){.delivery-source-rule{display:block}.delivery-source-grid{margin-top:14px}.production-trace-rail{overflow-x:auto}.production-trace-node{min-width:135px}}
.warehouse-receive-form{display:block}.warehouse-receive-items{display:grid;gap:7px}.warehouse-receive-item{display:grid;grid-template-columns:minmax(220px,1.5fr) 90px 110px 90px 120px;gap:8px;align-items:center;padding:8px 10px;border:1px solid #e8e1d7;border-radius:10px;background:#fff}.warehouse-receive-item small{display:block;color:#7b746b}.warehouse-receive-item input{width:100%}.warehouse-receive-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;margin-top:10px}.warehouse-receive-actions input{min-width:240px}@media(max-width:900px){.warehouse-receive-item{grid-template-columns:1fr 70px 90px 80px}.warehouse-receive-item input{grid-column:1/-1}.warehouse-receive-actions{display:block}.warehouse-receive-actions input{width:100%;min-width:0;margin-bottom:8px}}

/* Canonical transaction feedback states */
.mf-tx-loading{opacity:.72;pointer-events:none;position:relative}.mf-tx-loading::after{content:' ';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:mfTxSpin .7s linear infinite}@keyframes mfTxSpin{to{transform:rotate(360deg)}}.mf-tx-feedback{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:13px}.mf-tx-feedback.ok{background:#edf8f0;border:1px solid #cce8d3}.mf-tx-feedback.err{background:#fff1ef;border:1px solid #f0c7c1}

/* =====================================================================
   MAGENTA PROJECT COMMAND CENTER
   Project is the contextual hub; transaction actions remain in domain
   workspaces. These styles are canonical and shared, not page overrides.
   ===================================================================== */
.main .project-command-hero{margin-bottom:14px}
.main .project-command-kpis{grid-template-columns:repeat(8,minmax(0,1fr));margin-bottom:14px}
.main .project-command-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:14px;margin-bottom:14px}
.main .project-command-grid.project-command-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
.main .project-command-products{min-width:0}
.main .project-command-attention{min-width:0}
.main .project-command-products .pc-table{min-width:980px}
.main .project-command-products .pc-table td small{display:block;margin-top:3px;color:var(--mf-muted);font-size:9px;line-height:1.25}
.main .pc-row-progress{width:100%;height:4px;margin-top:6px;overflow:hidden;border-radius:999px;background:var(--mf-surface-2)}
.main .pc-row-progress i{display:block;height:100%;width:var(--mf-progress,0%);border-radius:inherit;background:currentColor;opacity:.7}
.main .project-command-document-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.main .project-command-document-metrics>div{padding:12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2)}
.main .project-command-document-metrics b,.main .project-command-document-metrics span{display:block}
.main .project-command-document-metrics b{font-size:20px;font-weight:900}
.main .project-command-document-metrics span{margin-top:2px;color:var(--mf-muted);font-size:9px;font-weight:700}
.main .project-command-timeline{padding:6px 14px 12px}
.main .project-timeline-item{position:relative;display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid var(--mf-border)}
.main .project-timeline-item:last-child{border-bottom:0}
.main .project-timeline-dot{width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--mf-pink);box-shadow:0 0 0 3px var(--mf-pink-soft)}
.main .project-timeline-item b,.main .project-timeline-item small,.main .project-timeline-item time{display:block}
.main .project-timeline-item b{font-size:10px;font-weight:850}
.main .project-timeline-item small{margin-top:3px;color:var(--mf-muted);font-size:9px}
.main .project-timeline-item time{color:var(--mf-subtle);font-size:9px;white-space:nowrap}
@media(max-width:1180px){
  .main .project-command-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .main .project-command-grid,.main .project-command-grid.project-command-secondary{grid-template-columns:1fr}
}
@media(max-width:700px){
  .main .project-command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main .project-command-document-metrics{grid-template-columns:1fr}
  .main .project-timeline-item{grid-template-columns:9px minmax(0,1fr)}
  .main .project-timeline-item time{grid-column:2}
  .main .project-command-hero .pc-hero-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .main .project-command-hero .pc-hero-actions .btn:last-child{grid-column:1/-1}
}

/* Production Command Center — canonical workspace layer */
.main .production-command-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:20px 22px;margin-bottom:14px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px}
.main .production-command-copy{min-width:0;max-width:900px}.main .production-command-copy h2{margin:4px 0 0;font-size:20px;line-height:1.2;font-weight:900;letter-spacing:-.02em}.main .production-command-copy p{margin:7px 0 0;color:var(--mf-muted);font-size:11px;line-height:1.55}.main .production-command-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.main .production-command-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mf-surface-gap);margin-bottom:14px}
.main .production-command-division-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}.main .production-command-division{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}.main .production-command-division:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(24,32,48,.08)}.main .production-command-division h3{margin:3px 0 2px;font-size:15px;font-weight:900}.main .production-command-division small{color:var(--mf-muted);font-size:10px}
.main .production-command-actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.main .production-command-actions-grid .prod-support-card{margin:0}
.main .production-command-exceptions{margin-bottom:14px}.main .production-command-exception-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 14px 14px}.main .production-command-exception-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2);text-decoration:none;color:inherit}.main .production-command-exception-list a:hover{border-color:var(--mf-border-strong);background:var(--mf-surface)}.main .production-command-exception-list b{font-size:10px}.main .production-command-exception-list span{font-size:10px;color:var(--mf-muted)}
@media (max-width:900px){.main .production-command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.main .production-command-actions-grid{grid-template-columns:1fr}.main .production-command-exception-list{grid-template-columns:1fr}}
@media (max-width:680px){.main .production-command-hero{align-items:stretch;flex-direction:column;padding:16px}.main .production-command-actions{justify-content:flex-start}.main .production-command-division-grid{grid-template-columns:1fr}.main .production-command-kpis{gap:8px}.main .production-command-kpis .stat-card{padding:12px}.main .production-command-exception-list a{grid-template-columns:1fr auto}}

.ui-card-flat{border:1px solid var(--border,#e5e7eb);box-shadow:none}
.ui-mt-3{margin-top:12px}
.ui-actions-end{display:flex;align-items:end;justify-content:flex-end}

.ui-accessory-thumb{width:48px;height:48px;object-fit:contain;border-radius:8px;border:1px solid #ddd}

/* Sales create follows the universal product-card language rather than a compact legacy picker. */
@media(max-width:520px){
  .main .sales-create .product-picker{grid-template-columns:1fr}
  .main .sales-create .product-card{min-height:0}
  .main .sales-create .product-card img,.main .sales-create .product-image-placeholder{height:170px;flex-basis:170px}
}

/* Component-based production routing — shared entry/status UI for Proforma and SPK Resmi. */
.main .process-plan-card{border:1px solid var(--mf-border);background:var(--mf-surface);overflow:hidden}
.main .process-plan-card>.card-head{padding:16px 18px;border-bottom:1px solid var(--mf-border);align-items:flex-start}
.main .process-plan-card>.card-head h2{margin:3px 0 4px;font-size:17px;font-weight:900;letter-spacing:-.01em}
.main .process-plan-card>.card-head .muted{max-width:950px;line-height:1.55}
.main .routing-lock-notice{margin:12px 14px 0}
.main .process-plan-intro{display:flex;justify-content:space-between;gap:14px;margin:14px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2);padding:11px 13px}
.main .process-plan-intro>div{display:grid;gap:3px;min-width:0}.main .process-plan-intro span{color:var(--mf-muted);font-size:10px;line-height:1.45}
.main .plan-rule-chip{align-self:center;border:1px solid var(--mf-border);border-radius:999px;padding:6px 9px;background:var(--mf-surface);font-size:9px;font-weight:800;white-space:nowrap;color:var(--mf-muted)}
.main .component-plan-row{margin:0 14px 12px;border:1px solid var(--mf-border);border-radius:12px;background:var(--mf-surface);overflow:hidden}
.main .component-plan-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}
.main .component-plan-title>div{display:flex;align-items:center;gap:9px;min-width:0}.main .component-plan-title>b{font-size:11px}
.main .component-plan-title>span{font-size:10px;color:var(--mf-muted);white-space:nowrap}.main .component-plan-no{min-width:34px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:10px;font-weight:900}
.main .component-plan-helper{padding:9px 14px;color:var(--mf-muted);font-size:10px;line-height:1.45;border-bottom:1px solid var(--mf-border)}
.main .selected-process-list{display:grid;gap:7px;padding:10px 14px 12px}.main .selected-empty{padding:11px 12px;border:1px dashed var(--mf-border-strong);border-radius:9px;color:var(--mf-muted);font-size:10px;text-align:center}
.main .selected-process{display:grid;grid-template-columns:18px 30px minmax(0,1fr) repeat(3,28px);align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--mf-border);border-radius:9px;background:var(--mf-surface-2);cursor:grab}
.main .selected-process.dragging{opacity:.55}.main .drag-handle{font-size:12px;color:var(--mf-subtle);letter-spacing:-2px}.main .plan-seq{display:grid;place-items:center;width:27px;height:24px;border-radius:6px;background:var(--mf-surface);border:1px solid var(--mf-border);font-size:9px;font-weight:900}.main .selected-process-main{display:grid;gap:2px;min-width:0}.main .selected-process-main b{font-size:10px}.main .selected-process-main small{font-size:9px;color:var(--mf-muted)}
.main .order-btn{width:28px;height:28px;border:1px solid var(--mf-border);border-radius:7px;background:var(--mf-surface);font-weight:800;cursor:pointer}.main .order-btn:hover{border-color:var(--mf-border-strong);background:var(--mf-surface-2)}
.main .process-add-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0 14px 13px}.main .add-label{font-size:10px;font-weight:800;color:var(--mf-muted);margin-right:2px}.main .add-process-btn{border:1px solid var(--mf-border);background:var(--mf-surface);border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}.main .add-process-btn:hover{border-color:var(--mf-pink);color:var(--mf-pink)}
.main .plan-fixed-rule{display:grid;gap:4px;margin:0 14px 12px;padding:11px 12px;border-left:3px solid var(--mf-pink);background:var(--mf-surface-2);border-radius:7px;font-size:10px;line-height:1.5}.main .plan-fixed-rule span{color:var(--mf-muted)}
.main .plan-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--mf-border);background:var(--mf-surface-2)}
.main .routing-locked .component-plan-row{background:var(--mf-surface-2)}.main .routing-locked-item{cursor:default}.main .routing-locked-item .order-btn{display:none}
.main .component-workflow-summary{overflow:hidden}.main .component-workflow-summary>.card-head{align-items:flex-start}.main .component-workflow-summary h2{margin:3px 0 3px;font-size:16px;font-weight:900}.main .component-workflow-summary .muted{max-width:980px;line-height:1.5}
.main .component-workflow-source-grid{display:grid;gap:12px;padding:0 14px 14px}.main .component-workflow-division{border:1px solid var(--mf-border);border-radius:11px;overflow:hidden;background:var(--mf-surface)}
.main .component-workflow-division-head{display:flex;justify-content:space-between;gap:12px;padding:12px 13px;background:var(--mf-surface-2);border-bottom:1px solid var(--mf-border)}.main .component-workflow-division-head h3{margin:2px 0 2px;font-size:13px;font-weight:900}.main .component-workflow-division-head span{font-size:9px;color:var(--mf-muted)}.main .component-workflow-division-label{display:inline-block!important;font-size:9px!important;font-weight:900;color:var(--mf-pink)!important;text-transform:uppercase;letter-spacing:.08em}
.main .component-workflow-head-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.main .component-workflow-table-wrap{overflow:auto}.main .component-workflow-table{width:100%;border-collapse:collapse}.main .component-workflow-table th,.main .component-workflow-table td{padding:9px 10px;border-bottom:1px solid var(--mf-border);vertical-align:top;font-size:10px}.main .component-workflow-table th{background:var(--mf-surface-2);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--mf-muted)}.main .component-workflow-table tr:last-child td{border-bottom:0}.main .component-workflow-table td>div{margin-top:2px;color:var(--mf-muted);font-size:9px}.main .component-workflow-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 14px 14px;padding:13px;border:1px dashed var(--mf-border-strong);border-radius:10px;background:var(--mf-surface-2)}.main .component-workflow-empty>div:first-child{display:grid;gap:3px}.main .component-workflow-empty span{font-size:10px;color:var(--mf-muted);line-height:1.45}.main .component-workflow-actions{display:flex;gap:7px;flex-wrap:wrap}.main .component-workflow-empty-inline{padding:12px;color:var(--mf-muted);font-size:10px}.main .component-workflow-note{margin:0 14px 14px}
@media(max-width:760px){.main .process-plan-intro,.main .plan-actions,.main .component-workflow-division-head,.main .component-workflow-empty{flex-direction:column;align-items:stretch}.main .selected-process{grid-template-columns:18px 30px minmax(0,1fr);}.main .selected-process .order-btn{grid-row:2}.main .component-workflow-head-actions{justify-content:flex-start}.main .component-workflow-table{min-width:700px}}

/* Shared workspace components ------------------------------------------------
   The components below are structural primitives. Pages consume them instead
   of creating their own geometry, which keeps desktop, tablet and Android in
   the same visual system. */
.ui-page{width:100%;min-width:0;display:flex;flex-direction:column;gap:0}
.ui-page > *{min-width:0;max-width:100%}

.ui-stat-grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.ui-stat-grid.ui-stat-grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.ui-stat-grid .stat-card{min-width:0;min-height:98px;padding:16px 17px;background:var(--mf-surface);border:1px solid var(--mf-border);border-radius:14px;box-shadow:var(--mf-shadow-sm)}
.ui-stat-grid .stat-top{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--mf-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.ui-stat-grid .stat-top > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-stat-grid .stat-icon{width:26px;height:26px;display:grid;place-items:center;flex:0 0 26px;border:1px solid var(--mf-border);border-radius:8px;background:var(--mf-surface-2);color:var(--mf-pink);font-size:10px}
.ui-stat-grid .stat{margin-top:8px;font-size:23px;line-height:1.1;font-weight:850;letter-spacing:-.02em;color:var(--mf-text)}
.ui-stat-grid .stat-note{margin-top:4px;color:var(--mf-subtle);font-size:10px;line-height:1.35}

.ui-process-body{padding:16px 18px 18px}
.ui-process-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.ui-process-strip li{min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:11px 12px;border:1px solid var(--mf-border);border-radius:10px;background:var(--mf-surface-2)}
.ui-process-index{width:26px;height:26px;display:grid;place-items:center;grid-row:1 / span 2;border-radius:7px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:10px;font-weight:850}
.ui-process-strip strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-text);font-size:10px;font-weight:850;letter-spacing:.04em}
.ui-process-strip small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-muted);font-size:10px;line-height:1.35}

.ui-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mf-surface-gap)}
.ui-module-card{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:14px;border:1px solid var(--mf-border);border-radius:11px;background:#fff;color:var(--mf-text);text-decoration:none;transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease}
.ui-module-card:hover{border-color:#d9b1c7;background:#fffafc;transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,42,52,.055)}
.ui-module-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--mf-pink-soft);color:var(--mf-pink);font-size:12px;font-weight:850}
.ui-module-copy{display:grid;gap:3px;min-width:0}
.ui-module-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}
.ui-module-copy small{color:var(--mf-muted);font-size:10px;line-height:1.4}
.ui-module-arrow{color:var(--mf-muted);font-size:14px;font-weight:800}

.ui-table-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;min-width:min(100%,520px)}
.ui-table-toolbar input{width:min(320px,100%);min-width:180px}
.ui-table-toolbar .btn{flex:0 0 auto}
.ui-table-subtext{display:block;margin-top:3px;color:var(--mf-muted);font-size:10px;line-height:1.35}
.ui-table-primary-text{display:block;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-table-secondary-text{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mf-muted)}
.ui-table-actions,.ui-table-action-stack{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap;min-width:0}
.ui-table-actions > .btn,.ui-table-action-stack > .btn{margin-left:0}
.ui-product-media{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;min-width:54px}
.ui-product-media .ui-product-thumb,.ui-product-media .ui-image-placeholder{width:54px;height:54px;display:block;object-fit:contain;border:1px solid var(--mf-border);border-radius:8px;background:#fff}
.ui-product-media .ui-image-placeholder{display:grid;place-items:center;padding:5px;text-align:center;border-style:dashed;background:var(--mf-surface-2);color:var(--mf-subtle);font-size:9px;font-weight:750;line-height:1.25}
.main .mf-flex-center-10 > .ui-product-media{display:inline-grid;vertical-align:middle;margin-right:10px}


/* Shared utility geometry — definitions used by views across modules. */
.mf-margin-0{margin:0!important}
.mf-mt-1{margin-top:4px!important}
.mf-mt-2{margin-top:8px!important}
.mf-mt-3{margin-top:12px!important}
.mf-mt-4{margin-top:16px!important}
.mf-mb-1{margin-bottom:4px!important}
.mf-mb-2{margin-bottom:8px!important}
.mf-mb-3{margin-bottom:12px!important}
.mf-mb-4{margin-bottom:16px!important}
.mf-margin-y-5{margin-top:20px!important;margin-bottom:20px!important}
.mf-flex-gap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mf-flex-end{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.mf-flex-end-gap{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.mf-actions-top{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.ui-pad-20{padding:20px!important}
.ui-pad-20-mt-16{margin-top:16px!important;padding:20px!important}
.ui-form-grid-2-mt-14{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.ui-list-page{width:100%;min-width:0;display:grid;gap:18px}
.page-pattern-list{min-width:0}

/* Hierarchy content must never escape its card geometry. */
.main .ctx-project-head > *,.main .ctx-product-head > *,.main .ctx-site-head > *{min-width:0}
.main .ctx-site-ident{flex:1 1 auto;min-width:0;overflow:hidden}
.main .ctx-site-ident strong,.main .ctx-site-ident small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main .ctx-site-head .ctx-summary{flex:0 1 42%;justify-self:auto;text-align:right}

/* Canonical spacing for the production access note. */
.main .production-overview-note h2{margin:4px 0 0;font-size:18px;line-height:1.25;font-weight:850;color:var(--mf-text)}
.main .production-overview-note .muted{margin-top:6px!important;line-height:1.5}

@media(max-width:760px){
  .ui-form-grid-2-mt-14{grid-template-columns:1fr}
  .main .ui-table-action-cell{min-width:0!important;white-space:normal!important;text-align:left!important}
  .main .ctx-project-head,.main .ctx-product-head{grid-template-columns:22px minmax(0,1fr);min-height:50px}
  .main .ctx-product-head{min-height:46px}
  .main .ctx-summary,.main .ctx-product-summary{grid-column:2;justify-self:stretch;max-width:none;text-align:left;white-space:normal;line-height:1.35}
  .main .ctx-site-head{flex-wrap:wrap;align-items:flex-start;min-height:50px}
  .main .ctx-site-head .ctx-summary{flex:1 1 100%;text-align:left}
  .main .ctx-project-body{padding:10px}
  .main .ctx-site-body{padding:10px}
}
@media(max-width:460px){
  .main .ctx-project-body{padding:8px}
  .main .ctx-site-body{padding:8px}
}

@media(max-width:1100px){
  .ui-stat-grid.ui-stat-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ui-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-process-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
  .ui-page .ui-page-head{align-items:flex-start}
  .ui-stat-grid,.ui-stat-grid.ui-stat-grid-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ui-stat-grid .stat-card{min-height:88px;padding:13px 14px}
  .ui-stat-grid .stat{font-size:21px}
  .ui-process-body{padding:14px}
  .ui-process-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-module-grid{grid-template-columns:1fr}
  .ui-table-toolbar{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
  .ui-table-toolbar input{width:100%;min-width:0;grid-column:1 / -1}
  .ui-table-toolbar .btn{width:100%}

  .ui-table-responsive{overflow:visible}
  .ui-table-responsive table{display:block;min-width:0;width:100%}
  .ui-table-responsive thead{display:none}
  .ui-table-responsive tbody,.ui-table-responsive tr{display:block;width:100%}
  .ui-table-responsive tbody tr{padding:10px 14px;border-bottom:1px solid var(--mf-border);background:#fff}
  .ui-table-responsive tbody tr:last-child{border-bottom:0}
  .ui-table-responsive tbody td{height:auto;min-height:0;display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);align-items:start;gap:10px;padding:7px 0;border:0;background:transparent;font-size:12px;line-height:1.4}
  .ui-table-responsive tbody td::before{content:attr(data-label);padding-top:1px;color:var(--mf-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
  .ui-table-responsive tbody td[data-label="Foto"]{align-items:center}
  .ui-table-responsive tbody td[data-label="Foto"]::before{align-self:center}
  .ui-table-responsive tbody td.ui-table-action-cell{display:block;padding-top:10px;border-top:1px solid var(--mf-border);margin-top:4px}
  .ui-table-responsive tbody td.ui-table-action-cell::before{display:block;margin-bottom:7px}
  .ui-table-responsive .ui-table-actions,.ui-table-responsive .ui-table-action-stack{width:100%;justify-content:flex-start;gap:8px}
  .ui-table-responsive .ui-table-actions .mf-inline,.ui-table-responsive .ui-table-action-stack .mf-inline{display:contents}
  .ui-table-responsive .ui-table-actions .btn,.ui-table-responsive .ui-table-action-stack .btn{min-width:0;flex:1 1 130px}
  .ui-table-responsive .ui-table-subtext,.ui-table-responsive .ui-table-primary-text,.ui-table-responsive .ui-table-secondary-text{max-width:none;white-space:normal;overflow:visible;text-overflow:clip}
  .ui-table-responsive tbody td[colspan]{display:block;text-align:center;padding:28px 14px;background:var(--mf-surface-2)}
  .ui-table-responsive tbody td[colspan]::before{display:none}
}

@media(max-width:480px){
  .ui-stat-grid,.ui-stat-grid.ui-stat-grid-6{grid-template-columns:1fr}
  .ui-process-strip{grid-template-columns:1fr}
  .ui-module-card{padding:13px}
  .ui-table-toolbar{grid-template-columns:1fr}
  .ui-table-toolbar .btn{width:100%}
  .ui-table-responsive tbody td{grid-template-columns:1fr;gap:4px}
  .ui-table-responsive tbody td::before{padding-top:0}
  .ui-product-media{width:62px;height:62px;flex-basis:62px;min-width:62px}
  .ui-product-media .ui-product-thumb,.ui-product-media .ui-image-placeholder{width:62px;height:62px}
}

/* Canonical card content inset: outer cards keep an intentional breathing room.
   Full-bleed table bodies stay edge-to-edge; ordinary content gets one shared inset. */
:root{
  --mf-card-inset-x:20px;
  --mf-card-inset-y:18px;
  --mf-card-content-gap:14px;
}
.main .card > form,
.main .ui-card > form,
.main .workspace-section > form,
.main .workspace-card > form,
.main .ui-section > form,
.main .card > .form-grid,
.main .ui-card > .form-grid,
.main .card > .grid,
.main .ui-card > .grid,
.main .workspace-section > .grid,
.main .workspace-card > .grid,
.main .ui-section > .grid,
.main .card > .grid-form,
.main .ui-card > .grid-form,
.main .card > .ui-detail-grid,
.main .ui-card > .ui-detail-grid{
  margin:0;
  padding:var(--mf-card-inset-y) var(--mf-card-inset-x) calc(var(--mf-card-inset-y) + 2px);
  min-width:0;
}
.main .card > .notice,
.main .ui-card > .notice,
.main .workspace-section > .notice,
.main .workspace-card > .notice,
.main .ui-section > .notice{
  margin:var(--mf-card-content-gap) var(--mf-card-inset-x) 0;
}
.main .card > .empty,
.main .ui-card > .empty,
.main .workspace-section > .empty,
.main .workspace-card > .empty,
.main .ui-section > .empty,
.main .card > .ui-empty,
.main .ui-card > .ui-empty{
  margin:var(--mf-card-content-gap) var(--mf-card-inset-x) var(--mf-card-content-gap);
  border-radius:10px;
}
.main .card > .stat-note,
.main .ui-card > .stat-note,
.main .workspace-section > .stat-note,
.main .workspace-card > .stat-note,
.main .ui-section > .stat-note{
  margin:0 var(--mf-card-inset-x);
  padding-top:10px;
  padding-bottom:2px;
}
.main .card > .mf-mt-2,
.main .ui-card > .mf-mt-2,
.main .workspace-section > .mf-mt-2,
.main .workspace-card > .mf-mt-2,
.main .ui-section > .mf-mt-2{
  margin-left:var(--mf-card-inset-x)!important;
  margin-right:var(--mf-card-inset-x)!important;
  margin-bottom:var(--mf-card-inset-y)!important;
}
.main .card > .warehouse-table-body,
.main .ui-card > .warehouse-table-body{
  min-width:0;
}
.main .card > .warehouse-table-toolbar,
.main .ui-card > .warehouse-table-toolbar{
  margin:var(--mf-card-content-gap);
}
@media(max-width:760px){
  :root{--mf-card-inset-x:16px;--mf-card-inset-y:16px;--mf-card-content-gap:12px}
}
@media(max-width:480px){
  :root{--mf-card-inset-x:12px;--mf-card-inset-y:14px;--mf-card-content-gap:10px}
}

/* Canonical page-root rhythm: one shared spacing contract for all modules.
   Existing nested component margins remain local; only direct page children participate. */
.main.ui-page-root{display:flex;flex-direction:column;align-items:stretch;row-gap:var(--mf-page-gap)}
.main.ui-page-root > *{min-width:0;max-width:100%;margin-block-start:0;margin-block-end:0}
.main.ui-page-root > script{display:none}



/* Shared table action contract — one geometry for all action columns. */
.main table.ui-actions-table{table-layout:auto}
.main table.ui-actions-table thead th:last-child,
.main table.ui-actions-table tbody td:last-child,
.main table.ui-actions-table .ui-table-action-cell{
  width:1%;
  min-width:184px;
  text-align:right!important;
  white-space:nowrap!important;
}
.main table.ui-actions-table tbody td:last-child > .ui-table-actions,
.main table.ui-actions-table tbody td:last-child > .ui-table-action-stack{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}
.main table.ui-actions-table tbody td:last-child > form,
.main table.ui-actions-table tbody td:last-child > form.mf-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  min-width:0;
}
.main table.ui-actions-table tbody td:last-child > .btn,
.main table.ui-actions-table tbody td:last-child > form .btn,
.main table.ui-actions-table tbody td:last-child .ui-table-actions > .btn,
.main table.ui-actions-table tbody td:last-child .ui-table-action-stack > .btn{
  min-height:36px;
  height:36px;
  min-width:64px;
  padding:0 12px;
  border-radius:9px;
  font-size:11px;
  line-height:1;
  flex:0 0 auto;
}
.main table.ui-actions-table tbody td:last-child > .btn + .btn,
.main table.ui-actions-table tbody td:last-child > a.btn + a.btn,
.main table.ui-actions-table tbody td:last-child > button.btn + button.btn{
  margin-left:0;
}
.main table.ui-actions-table tbody td:last-child .muted{white-space:normal}

@media(max-width:760px){
  .main table.ui-actions-table thead th:last-child{min-width:0;width:auto}
  .main table.ui-actions-table tbody td:last-child,
  .main table.ui-actions-table .ui-table-action-cell{
    width:auto;
    min-width:0;
    text-align:left!important;
    white-space:normal!important;
  }
  .main table.ui-actions-table tbody td:last-child > .ui-table-actions,
  .main table.ui-actions-table tbody td:last-child > .ui-table-action-stack{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .main table.ui-actions-table tbody td:last-child > form,
  .main table.ui-actions-table tbody td:last-child > form.mf-inline{
    flex-wrap:wrap;
    width:100%;
  }
  .main table.ui-actions-table tbody td:last-child > .btn,
  .main table.ui-actions-table tbody td:last-child > form .btn,
  .main table.ui-actions-table tbody td:last-child .ui-table-actions > .btn,
  .main table.ui-actions-table tbody td:last-child .ui-table-action-stack > .btn{
    flex:1 1 120px;
    min-width:120px;
    min-height:40px;
    height:40px;
  }
}

/* Master List Product: Part Induk image */
.ml-part-photo-cell{width:150px;vertical-align:top}.ui-part-thumb{width:72px;height:54px;object-fit:cover;border:1px solid var(--ui-border,#d9d5cc);border-radius:6px;background:#f6f4ef;display:block}.ui-part-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:9px;color:#8a877f;letter-spacing:.04em;text-align:center}.ui-part-photo-form{display:flex;gap:4px;align-items:center;margin-top:6px;flex-wrap:wrap}.ui-part-photo-form label.btn{cursor:pointer}.ui-part-thumb-inline{display:inline-block;width:36px;height:28px;vertical-align:middle;margin-right:8px}.mf-part-group-cell{vertical-align:middle}.mf-print-part-group{font-weight:700;background:#f3f1ec;display:flex;align-items:center;gap:8px;padding:2px 0}.ui-part-print-thumb{width:22mm;height:15mm;object-fit:cover;border:1px solid #bbb;border-radius:2mm;display:inline-block;vertical-align:middle;margin-right:3mm}@media (max-width:720px){.ml-part-photo-cell{width:110px}.ui-part-thumb{width:60px;height:46px}.ui-part-photo-form{flex-direction:column;align-items:flex-start}}@media print{.ui-part-photo-form{display:none}.ui-part-thumb{box-shadow:none}}

/* Global command dialog backdrop — independent of removed workspace selector. */
.mf-command-backdrop{position:absolute;inset:0;background:transparent}

/* ========================================================================
   GLOBAL PAGE GEOMETRY CONTRACT
   One outer alignment system for every application page.
   Presentation only: no workflow, state, phase, stage, or version behavior.
   ======================================================================== */
:root{
  --mf-shell-gutter:24px;
  --mf-page-gap:18px;
  --mf-content-max:1680px;
  --mf-page-top:24px;
  --mf-page-bottom:42px;
}

/* Desktop content is left-anchored to the sidebar boundary with one shared
   gutter. A max width remains, but it can never create a second hidden gutter. */
@media (min-width:1025px){
  .app>.content>.main{
    width:min(calc(100% - (var(--mf-shell-gutter) * 2)),var(--mf-content-max))!important;
    max-width:var(--mf-content-max)!important;
    margin-left:var(--mf-shell-gutter)!important;
    margin-right:var(--mf-shell-gutter)!important;
    padding:var(--mf-page-top) 0 var(--mf-page-bottom)!important;
  }
  .app>.content>.topbar .topbar-inner{
    width:min(calc(100% - (var(--mf-shell-gutter) * 2)),var(--mf-content-max))!important;
    max-width:var(--mf-content-max)!important;
    margin-left:var(--mf-shell-gutter)!important;
    margin-right:var(--mf-shell-gutter)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .app>.content>.footer-note{
    width:min(calc(100% - (var(--mf-shell-gutter) * 2)),var(--mf-content-max))!important;
    max-width:var(--mf-content-max)!important;
    margin-left:var(--mf-shell-gutter)!important;
    margin-right:var(--mf-shell-gutter)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .app>.content>.main.ui-page-root{
    row-gap:var(--mf-page-gap)!important;
  }
}

/* Every page root uses the same outer rhythm. Module-specific children keep
   their internal geometry, while root-level margins are owned by the shell. */
.main.ui-page-root > *{
  margin-block-start:0!important;
  margin-block-end:0!important;
}
.main.ui-page-root > .ui-sales-page,
.main.ui-page-root > .dashboard-page,
.main.ui-page-root > .ui-page,
.main.ui-page-root > .ui-list-page,
.main.ui-page-root > .page-pattern,
.main.ui-page-root > .page-pattern-list,
.main.ui-page-root > .purchasing-home,
.main.ui-page-root > .ppic-home,
.main.ui-page-root > .production-home,
.main.ui-page-root > .warehouse-pro-shell,
.main.ui-page-root > .mf-assembly-shell,
.main.ui-page-root > .production-report-page,
.main.ui-page-root > .mr-page,
.main.ui-page-root > .ml-wrap,
.main.ui-page-root > .admin-users-page,
.main.ui-page-root > .audit-page,
.main.ui-page-root > .sales-create{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

/* Nested page roots must use the same vertical rhythm instead of carrying
   historical 12/14/16px gaps from individual module passes. */
.main.ui-page-root > .ui-sales-page,
.main.ui-page-root > .dashboard-page,
.main.ui-page-root > .ui-page,
.main.ui-page-root > .ui-list-page,
.main.ui-page-root > .page-pattern,
.main.ui-page-root > .purchasing-home,
.main.ui-page-root > .ppic-home,
.main.ui-page-root > .production-home,
.main.ui-page-root > .warehouse-pro-shell,
.main.ui-page-root > .mf-assembly-shell,
.main.ui-page-root > .production-report-page,
.main.ui-page-root > .mr-page,
.main.ui-page-root > .ml-wrap,
.main.ui-page-root > .admin-users-page,
.main.ui-page-root > .audit-page,
.main.ui-page-root > .sales-create{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:var(--mf-page-gap)!important;
}

/* These shells contain their own cards/sections. Their former child margins
   are disabled so the shared gap is the only outer vertical spacing. */
.main.ui-page-root > .ui-sales-page > *,
.main.ui-page-root > .dashboard-page > *,
.main.ui-page-root > .ui-page > *,
.main.ui-page-root > .ui-list-page > *,
.main.ui-page-root > .page-pattern > *,
.main.ui-page-root > .purchasing-home > *,
.main.ui-page-root > .ppic-home > *,
.main.ui-page-root > .production-home > *,
.main.ui-page-root > .warehouse-pro-shell > *,
.main.ui-page-root > .mf-assembly-shell > *,
.main.ui-page-root > .production-report-page > *,
.main.ui-page-root > .mr-page > *,
.main.ui-page-root > .ml-wrap > *,
.main.ui-page-root > .admin-users-page > *,
.main.ui-page-root > .audit-page > *,
.main.ui-page-root > .sales-create > *{
  margin-block-start:0!important;
  margin-block-end:0!important;
  min-width:0;
  max-width:100%;
}

/* Page headings are one shared anchor: identical bottom spacing and no
   module-specific margin compensation. */
.main .page-head,
.main .ui-page-head,
.main .mf-standard-page-head,
.main .report-page-head{
  margin-block-start:0!important;
  margin-block-end:0!important;
}

/* Common inter-section stacks use the same 18px contract. */
.main .ui-list-page,
.main .ml-wrap{row-gap:var(--mf-page-gap)!important}

/* Tablet */
@media (min-width:761px) and (max-width:1024px){
  :root{--mf-shell-gutter:18px;--mf-page-top:20px;--mf-page-bottom:36px}
  .app>.content>.main{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:var(--mf-page-top) var(--mf-shell-gutter) var(--mf-page-bottom)!important;
  }
}

/* Mobile */
@media (max-width:760px){
  :root{--mf-shell-gutter:12px;--mf-page-top:16px;--mf-page-bottom:28px}
  .app>.content>.main{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:var(--mf-page-top) var(--mf-shell-gutter) var(--mf-page-bottom)!important;
  }
  .main.ui-page-root > .ui-sales-page,
  .main.ui-page-root > .dashboard-page,
  .main.ui-page-root > .ui-page,
  .main.ui-page-root > .ui-list-page,
  .main.ui-page-root > .page-pattern,
  .main.ui-page-root > .purchasing-home,
  .main.ui-page-root > .ppic-home,
  .main.ui-page-root > .production-home,
  .main.ui-page-root > .warehouse-pro-shell,
  .main.ui-page-root > .mf-assembly-shell,
  .main.ui-page-root > .production-report-page,
  .main.ui-page-root > .mr-page,
  .main.ui-page-root > .ml-wrap,
  .main.ui-page-root > .admin-users-page,
  .main.ui-page-root > .audit-page,
  .main.ui-page-root > .sales-create{
    gap:var(--mf-page-gap)!important;
  }
}


/* =====================================================================
   MAGENTA UI — CANONICAL PAGE TITLE CARD
   Every page-level title uses one visual container. This is presentation
   only: no workflow, state, routing, database, phase, stage, or version logic.
   ===================================================================== */
.main .mf-page-title-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-width:0;
  min-height:92px;
  padding:18px 20px;
  margin:0;
  background:var(--mf-surface);
  border:1px solid var(--mf-border);
  border-radius:14px;
  box-shadow:var(--mf-shadow-sm);
}
.main .mf-page-title-card::before{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:0;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--mf-pink);
}
.main .mf-page-title-card > *{min-width:0}
.main .mf-page-title-card > :first-child{min-width:0;flex:1 1 auto;padding-left:4px}
.main .mf-page-title-card .page-head-copy{min-width:0}
.main .mf-page-title-card .page-title,
.main .mf-page-title-card > div:first-child > h1,
.main .mf-page-title-card h1{
  margin:0;
  color:var(--mf-text);
  font-size:27px;
  line-height:1.16;
  font-weight:850;
  letter-spacing:-.025em;
}
.main .mf-page-title-card .page-subtitle,
.main .mf-page-title-card > div:first-child > p,
.main .mf-page-title-card p{
  margin:7px 0 0;
  max-width:980px;
  color:var(--mf-muted);
  font-size:12px;
  line-height:1.55;
}
.main .mf-page-title-card .eyebrow,
.main .mf-page-title-card .ui-eyebrow,
.main .mf-page-title-card .section-kicker,
.main .mf-page-title-card .ml-kicker{
  margin:0 0 4px;
}
.main .mf-page-title-card .page-head-actions,
.main .mf-page-title-card .ml-hero-actions,
.main .mf-page-title-card .ui-hero-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
}

/* Title-only hero variants inherit the same card geometry instead of
   looking like a separate visual system. */
.main .mf-page-title-card.ml-hero{
  align-items:flex-start;
  padding:18px 20px;
}
.main .mf-page-title-card.mr-hero{
  padding:18px 20px;
}
.main .mf-page-title-card.ui-hero{
  min-height:88px;
  align-items:flex-start;
  padding:18px 20px;
}

@media(max-width:760px){
  .main .mf-page-title-card,
  .main .mf-page-title-card.ml-hero,
  .main .mf-page-title-card.mr-hero,
  .main .mf-page-title-card.ui-hero{
    display:block;
    min-height:0;
    padding:16px 16px 16px 18px;
    border-radius:13px;
  }
  .main .mf-page-title-card::before{top:12px;bottom:12px}
  .main .mf-page-title-card .page-title,
  .main .mf-page-title-card > div:first-child > h1,
  .main .mf-page-title-card h1{font-size:23px}
  .main .mf-page-title-card .page-subtitle,
  .main .mf-page-title-card > div:first-child > p,
  .main .mf-page-title-card p{font-size:11px}
  .main .mf-page-title-card .page-head-actions,
  .main .mf-page-title-card .ml-hero-actions,
  .main .mf-page-title-card .ui-hero-actions{
    justify-content:flex-start;
    margin-top:12px;
  }
}
/* =====================================================================
   MAGENTA UI — FINAL TITLE CARD SIZE STANDARD
   Shared baseline geometry for every page-level title card.
   The baseline is identical; cards may grow only when their real content
   needs more room, so no title or action is clipped. Presentation only.
   ===================================================================== */
.main .mf-page-title-card,
.main .mf-page-title-card.ml-hero,
.main .mf-page-title-card.mr-hero,
.main .mf-page-title-card.ui-hero,
.main .mf-page-title-card.audit-hero,
.main .mf-page-title-card.page-head,
.main .mf-page-title-card.ui-page-head{
  width:100%;
  box-sizing:border-box;
  min-height:120px;
  height:auto;
  padding:18px 20px;
  margin:0;
  border-radius:14px;
  align-items:center;
}
.main .mf-page-title-card .page-title,
.main .mf-page-title-card h1{
  font-size:27px;
  line-height:1.16;
  margin:0;
}
.main .mf-page-title-card .page-subtitle,
.main .mf-page-title-card p{
  margin-top:7px;
  line-height:1.5;
}
.main .mf-page-title-card .page-head-actions,
.main .mf-page-title-card .ml-hero-actions,
.main .mf-page-title-card .ui-hero-actions{
  align-self:center;
  flex-shrink:0;
}
.main .mf-page-title-card .mf-mt-2{margin-top:4px!important}

@media (min-width:761px) and (max-width:1024px){
  .main .mf-page-title-card,
  .main .mf-page-title-card.ml-hero,
  .main .mf-page-title-card.mr-hero,
  .main .mf-page-title-card.ui-hero,
  .main .mf-page-title-card.audit-hero,
  .main .mf-page-title-card.page-head,
  .main .mf-page-title-card.ui-page-head{
    min-height:116px;
    padding:18px;
  }
}

@media (max-width:760px){
  .main .mf-page-title-card,
  .main .mf-page-title-card.ml-hero,
  .main .mf-page-title-card.mr-hero,
  .main .mf-page-title-card.ui-hero,
  .main .mf-page-title-card.audit-hero,
  .main .mf-page-title-card.page-head,
  .main .mf-page-title-card.ui-page-head{
    min-height:112px;
    height:auto;
    padding:16px 16px 16px 18px;
    border-radius:13px;
    display:block;
  }
  .main .mf-page-title-card .page-title,
  .main .mf-page-title-card h1{font-size:23px;line-height:1.18}
  .main .mf-page-title-card .page-subtitle,
  .main .mf-page-title-card p{font-size:11px;line-height:1.45}
}
/* Purchasing composite item UI */
.po-composite-builder{margin-top:12px;border-top:1px solid rgba(0,0,0,.08);padding-top:12px}
.po-composite-builder>summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.po-composite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.po-composite-grid label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.po-composite-actions{display:flex;align-items:end}
.po-composite-list{display:grid;gap:8px;margin-top:10px}
.po-composite-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:rgba(0,0,0,.02)}
.po-composite-row small{display:block;font-weight:500;opacity:.72;margin-top:2px}
@media (max-width:760px){.po-composite-grid{grid-template-columns:1fr}.po-composite-row{align-items:flex-start}}

/* Master List material raw-stock sizing */
.mf-material-stock-size{margin-top:10px;padding:9px 10px;border:1px solid rgba(0,0,0,.10);border-radius:10px;background:rgba(255,255,255,.72);min-width:360px}
.mf-material-stock-size .mf-check{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-bottom:8px;cursor:pointer}
.mf-material-stock-size .mf-check input{margin:0}
.mf-stock-grid{display:grid;grid-template-columns:repeat(4,minmax(78px,1fr));gap:7px}
.mf-stock-grid label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;line-height:1.2}
.mf-stock-grid input{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid rgba(0,0,0,.16);border-radius:7px;background:#fff;font-size:12px}
@media(max-width:900px){.mf-stock-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}.mf-material-stock-size{min-width:0}}
@media(max-width:560px){.mf-stock-grid{grid-template-columns:1fr}.mf-material-stock-size{min-width:0}}


/* Material Requirement workspace — professional editable/locked state */
.mr-header-card{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid var(--mf-border);border-radius:14px;background:linear-gradient(135deg,#fff 0%,#fbfaf8 100%);box-shadow:0 5px 18px rgba(30,25,20,.04)}
.mr-header-copy{min-width:0;max-width:760px}.mr-header-copy h2{margin:3px 0 6px;font-size:21px;line-height:1.2}.mr-header-copy p{margin:0;color:#77736d;font-size:12px;line-height:1.6}.mr-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.mr-header-actions form{margin:0}.mr-lock-button{min-width:145px;white-space:nowrap}.mr-lock-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #ded9d2;border-radius:999px;background:#fff;font-size:10px;font-weight:900;letter-spacing:.07em}.mr-lock-badge.is-open{color:#35684a}.mr-lock-badge.is-locked{color:#7b4d35;background:#fffaf5}.mr-lock-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}.mr-status-note{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:11px 13px;border:1px solid #e4ded6;border-radius:11px;background:#fff}.mr-status-note.is-locked{border-color:#e7d8ca;background:#fffaf5}.mr-status-note.is-open{background:#f8fbf9}.mr-status-icon{font-size:16px;line-height:1.2}.mr-status-note strong{display:block;font-size:12px;margin-bottom:2px}.mr-status-note span{display:block;color:#77736d;font-size:11px;line-height:1.45}.mr-table{min-width:960px}.mr-table th{vertical-align:middle}.mr-table td{vertical-align:top}.mr-table tbody tr{transition:background .15s ease}.mr-table tbody tr:hover td{background:#fffdf9}.mr-table .mf-material-stock-size{margin-top:7px;background:#faf9f7;border-color:#e5dfd7}.mr-table .mf-stock-grid{gap:7px}.mr-table .mf-stock-grid label{font-size:10px;color:#77736d}.mr-table .mf-stock-grid input,.mr-table select,.mr-table input[name=waste_pct]{min-height:34px}.mr-table .ml-total{font-size:13px;white-space:nowrap}.mr-locked-footer{display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 13px;border:1px solid #e5d8cb;border-radius:10px;background:#fffaf5;color:#6e6259;font-size:11px;line-height:1.45}.mr-locked-footer>span{font-size:16px}.mr-locked-footer b{color:#4f443d}.mr-table select:disabled,.mr-table input:disabled{opacity:.72;cursor:not-allowed;background:#f3f1ee}.mr-table button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:900px){.mr-header-card{display:block}.mr-header-actions{justify-content:flex-start;margin-top:14px}.mr-table{min-width:900px}}

/* =====================================================================
   MAGENTA UI CONTRACT — ALL ROUTES
   Shared final layer: consistent workspace width, spacing, cards and zoom.
   Intentionally presentation-only; no business selectors or workflow changes.
   ===================================================================== */
:root {
  --mf-space-1: clamp(6px, .45rem, 8px);
  --mf-space-2: clamp(10px, .7rem, 12px);
  --mf-space-3: clamp(14px, 1rem, 18px);
  --mf-space-4: clamp(18px, 1.25rem, 24px);
  --mf-space-5: clamp(22px, 1.6rem, 30px);
  --mf-workspace-pad-x: clamp(12px, 1.5vw, 28px);
  --mf-workspace-pad-y: clamp(16px, 1.4vw, 26px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; }
.app, .content, .main, .ui-page-root,
.main > *, .main section, .main article, .main form,
.main .workspace, .main .workspace-content,
.main .page-content, .main .page-container, .main .module-content,
.main .ui-page, .main .ui-page-content {
  min-width: 0;
  max-width: 100%;
}
.content { width: 100%; }
.main {
  width: 100%;
  max-width: none;
  padding: var(--mf-workspace-pad-y) var(--mf-workspace-pad-x) clamp(28px, 3vw, 48px);
}
.main > * + * { margin-top: var(--mf-space-3); }
.main > .page-head + *, .main > .ui-page-head + *,
.main > .ml-wrap > * + *, .main > .workspace > * + *,
.main > .workspace-content > * + *, .main > .page-content > * + * {
  margin-top: var(--mf-space-3);
}
.page-head, .ui-page-head, .ml-hero {
  gap: var(--mf-space-3);
  margin-bottom: var(--mf-space-3);
}
.page-head h1, .page-title, .ui-page-head h1,
.main h1 { overflow-wrap: anywhere; }
.main h2, .main h3, .main h4 { line-height: 1.3; overflow-wrap: anywhere; }
.main p { max-width: 100%; }

/* A single spacing rhythm for card collections across every module. */
.main .grid, .main .grid-3, .main .form-grid, .main .grid-form,
.main .ui-detail-grid, .main .stat-grid, .main .kpi-grid,
.main .ml-summary, .main .dashboard-grid, .main .workspace-grid,
.main .process-grid, .main .production-process-grid {
  min-width: 0;
  gap: var(--mf-space-3);
}
.main .card, .main .ui-card, .main .workspace-card,
.main .workspace-section, .main .ui-section, .main .ui-table-card,
.main .stat-card, .main .kpi-card {
  min-width: 0;
  max-width: 100%;
  border-radius: var(--mf-radius-lg);
}
.main .card-head, .main .ui-card-head, .main .ui-section-head,
.main .ui-table-card-head {
  gap: var(--mf-space-2);
  flex-wrap: wrap;
}
.main .card-head > *, .main .ui-card-head > *,
.main .ui-section-head > *, .main .ui-table-card-head > * { min-width: 0; }
.main .card-body, .main .ui-section-body { min-width: 0; }
.main .card + .card, .main .ui-card + .ui-card,
.main .workspace-card + .workspace-card,
.main .workspace-section + .workspace-section,
.main .ui-section + .ui-section,
.main .ui-table-card + .ui-table-card { margin-top: var(--mf-space-3); }

/* Empty states remain legible without forcing blank panels to grow. */
.main .empty, .main .ui-empty, .main .empty-state,
.main .table-empty, .main .no-data {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.main .card:empty, .main .ui-card:empty,
.main .workspace-card:empty, .main .ui-section:empty,
.main .ui-table-card:empty { display: none; }
.main .card-body:empty, .main .ui-section-body:empty { display: none; }
.main .card-head:only-child, .main .ui-card-head:only-child,
.main .ui-section-head:only-child { border-bottom: 0; }

/* Tables may scroll inside their own wrapper, never widen the workspace. */
.main .table-wrap, .main .ui-table-wrap, .main .table-responsive,
.main .table-container, .main .overflow-x-auto, .main .mf-overflow-auto {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.main table { max-width: 100%; }
.main input, .main select, .main textarea,
.main .btn, .main button { max-width: 100%; }
.main .page-head-actions, .main .ui-card-actions,
.main .toolbar, .main .table-toolbar, .main .filter-toolbar,
.main .form-actions, .main .action-group {
  min-width: 0;
  flex-wrap: wrap;
}

/* The top bar must reflow cleanly when browser zoom reduces CSS viewport width. */
.topbar-inner { width: 100%; min-width: 0; }
.topbar-left, .topbar-center, .topbar-right,
.topbar-user, .topbar-user-copy { min-width: 0; }
@media (min-width: 1101px) {
  .main { padding-left: clamp(18px, 1.45vw, 30px); padding-right: clamp(18px, 1.45vw, 30px); }
  .main > * { width: 100%; }
}
@media (max-width: 1100px) {
  .main { padding: 18px clamp(14px, 2vw, 22px) 32px; }
  .topbar-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
  .main .grid-3, .main .process-grid, .main .production-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .main { padding: 14px 12px 28px; }
  .main > * + * { margin-top: 14px; }
  .main .grid-3, .main .process-grid, .main .production-process-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-head, .ui-page-head { align-items: stretch; }
  .page-head-actions, .ui-card-actions, .toolbar,
  .table-toolbar, .filter-toolbar { justify-content: flex-start; }
  .main .card-head, .main .ui-card-head, .main .ui-section-head {
    display: flex;
    align-items: flex-start;
  }
  .main .card-head .ui-card-actions,
  .main .ui-card-head .ui-card-actions { margin-top: 0; }
  .topbar-inner { gap: 8px; }
}
@media (max-width: 460px) {
  .main .stat-grid, .main .kpi-grid, .main .stat-grid,
  .main .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .main .card-head, .main .ui-card-head, .main .ui-section-head,
  .main .ui-table-card-head { padding: 12px; }
  .main .card-body, .main .ui-section-body { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Global typography + control sizing standard — all workspace pages */
:root {
  --mf-card-title-size: 16px;
  --mf-card-title-line: 1.35;
  --mf-button-height: 38px;
  --mf-button-font-size: 12px;
  --mf-button-x-padding: 14px;
}
/* Card and section headings share one readable hierarchy across modules. */
.main .card-head h2,
.main .ui-card-head h2,
.main .ui-section-head h2,
.main .ui-table-card-head h2,
.main .workspace-card-title,
.main .card-title,
.main .ui-card-title {
  font-size: var(--mf-card-title-size) !important;
  line-height: var(--mf-card-title-line) !important;
  font-weight: 750 !important;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}
.main .card-head .muted,
.main .ui-card-head .muted,
.main .ui-section-head p,
.main .ui-table-card-head p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
/* All regular buttons use a consistent height, type scale, and padding. */
.main .btn,
.main button.btn,
.main .button,
.main button.button,
.main input[type="button"],
.main input[type="submit"],
.main input[type="reset"],
.main .ui-btn,
.main .action-button {
  min-height: var(--mf-button-height) !important;
  padding-inline: var(--mf-button-x-padding) !important;
  font-size: var(--mf-button-font-size) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  border-radius: 9px;
  max-width: 100%;
}
.main .btn-sm,
.main .btn-small,
.main .ui-btn-sm,
.main button.btn-sm,
.main button.btn-small {
  min-height: 32px !important;
  padding-inline: 10px !important;
  font-size: 11px !important;
}
.main .icon-btn,
.main .icon-button,
.main .ui-icon-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px !important;
  padding: 0 !important;
}
/* Keep page-level hero/title cards distinct from ordinary card headings. */
.main .page-title,
.main .page-head h1,
.main .ui-page-head h1,
.main .mf-page-title-card h1,
.main .mf-page-title-card .page-title {
  font-size: clamp(23px, 1.65vw, 27px) !important;
  line-height: 1.2 !important;
}
@media (max-width: 760px) {
  .main .card-head h2,
  .main .ui-card-head h2,
  .main .ui-section-head h2,
  .main .ui-table-card-head h2,
  .main .workspace-card-title,
  .main .card-title,
  .main .ui-card-title { font-size: 15px !important; }
  .main .btn,
  .main button.btn,
  .main .button,
  .main button.button,
  .main .ui-btn,
  .main .action-button { min-height: 36px !important; padding-inline: 11px !important; }
}


/* MAGENTA UI — PAGE HEADER SIZE MATCH: OPERATIONAL DASHBOARD
   Geometry only: keep each page header's existing colors, border, accent and shadow.
   Match the operational dashboard hero's padding and heading scale. */
.main .mf-page-title-card,
.main .mf-page-title-card.ml-hero,
.main .mf-page-title-card.mr-hero,
.main .mf-page-title-card.ui-hero,
.main .mf-page-title-card.audit-hero,
.main .mf-page-title-card.page-head,
.main .mf-page-title-card.ui-page-head {
  min-height: 0 !important;
  height: auto !important;
  padding: 26px 28px !important;
  box-sizing: border-box !important;
}
.main .mf-page-title-card .page-title,
.main .mf-page-title-card > div:first-child > h1,
.main .mf-page-title-card h1 {
  font-size: 30px !important;
  line-height: 1.15 !important;
}
@media (min-width: 761px) and (max-width: 1024px) {
  .main .mf-page-title-card,
  .main .mf-page-title-card.ml-hero,
  .main .mf-page-title-card.mr-hero,
  .main .mf-page-title-card.ui-hero,
  .main .mf-page-title-card.audit-hero,
  .main .mf-page-title-card.page-head,
  .main .mf-page-title-card.ui-page-head {
    padding: 22px 24px !important;
  }
}
@media (max-width: 760px) {
  .main .mf-page-title-card,
  .main .mf-page-title-card.ml-hero,
  .main .mf-page-title-card.mr-hero,
  .main .mf-page-title-card.ui-hero,
  .main .mf-page-title-card.audit-hero,
  .main .mf-page-title-card.page-head,
  .main .mf-page-title-card.ui-page-head {
    padding: 20px 18px !important;
  }
  .main .mf-page-title-card .page-title,
  .main .mf-page-title-card > div:first-child > h1,
  .main .mf-page-title-card h1 {
    font-size: 24px !important;
  }
}

/* MAGENTA GLOBAL PAGE-HEADER GEOMETRY — dashboard reference
   Intentionally normalizes dimensions only; preserves each module's colors,
   accent borders, shadows, content, actions and business behavior. */
.main .mf-page-title-card,
.main .report-page-head,
.main .page-head.ui-page-head,
.main .mf-standard-page-head {
  box-sizing: border-box;
  padding: 26px 28px !important;
  min-width: 0;
}
.main .mf-page-title-card h1,
.main .mf-page-title-card .page-title,
.main .report-page-head h1,
.main .page-head.ui-page-head h1,
.main .page-head.ui-page-head .page-title,
.main .mf-standard-page-head h1,
.main .warehouse-hero.workspace-hero h1,
.main .procurement-hero h1,
.main .ppic-hero h1,
.main .delivery-hero h1 {
  font-size: 30px !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em;
}
.main .warehouse-hero.workspace-hero,
.main .procurement-hero,
.main .ppic-hero,
.main .delivery-hero {
  box-sizing: border-box;
  padding: 26px 28px !important;
  min-width: 0;
}
.main .mf-page-title-card .page-head-actions,
.main .mf-page-title-card .ml-hero-actions,
.main .mf-page-title-card .dashboard-hero-actions,
.main .report-page-head .page-head-actions {
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .main .mf-page-title-card,
  .main .report-page-head,
  .main .page-head.ui-page-head,
  .main .mf-standard-page-head,
  .main .warehouse-hero.workspace-hero,
  .main .procurement-hero,
  .main .ppic-hero,
  .main .delivery-hero {
    padding: 22px 24px !important;
  }
}
@media (max-width: 760px) {
  .main .mf-page-title-card,
  .main .report-page-head,
  .main .page-head.ui-page-head,
  .main .mf-standard-page-head,
  .main .warehouse-hero.workspace-hero,
  .main .procurement-hero,
  .main .ppic-hero,
  .main .delivery-hero {
    padding: 20px 18px !important;
  }
  .main .mf-page-title-card h1,
  .main .mf-page-title-card .page-title,
  .main .report-page-head h1,
  .main .page-head.ui-page-head h1,
  .main .page-head.ui-page-head .page-title,
  .main .mf-standard-page-head h1,
  .main .warehouse-hero.workspace-hero h1,
  .main .procurement-hero h1,
  .main .ppic-hero h1,
  .main .delivery-hero h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}


/* FINAL VISIBLE FIX: match page-header card footprint to Operational Dashboard.
   Desktop header cards use the dashboard's minimum vertical footprint; content can
   still expand naturally when actions wrap. Colors, borders and business logic unchanged. */
.main .mf-page-title-card,
.main .report-page-head,
.main .page-head.ui-page-head,
.main .mf-standard-page-head,
.main .warehouse-hero.workspace-hero,
.main .procurement-hero,
.main .ppic-hero,
.main .delivery-hero,
.main .mf-assembly-hero {
  min-height: 178px !important;
  padding: 26px 28px !important;
  box-sizing: border-box !important;
  align-content: center;
}
.main .mf-page-title-card h1,
.main .mf-page-title-card .page-title,
.main .report-page-head h1,
.main .page-head.ui-page-head h1,
.main .page-head.ui-page-head .page-title,
.main .mf-standard-page-head h1,
.main .warehouse-hero h1,
.main .procurement-hero h1,
.main .procurement-hero h2,
.main .ppic-hero h1,
.main .delivery-hero h1,
.main .mf-assembly-hero h1 {
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .main .mf-page-title-card, .main .report-page-head,
  .main .page-head.ui-page-head, .main .mf-standard-page-head,
  .main .warehouse-hero.workspace-hero, .main .procurement-hero,
  .main .ppic-hero, .main .delivery-hero, .main .mf-assembly-hero {
    min-height: 160px !important;
    padding: 22px 24px !important;
  }
}
@media (max-width: 760px) {
  .main .mf-page-title-card, .main .report-page-head,
  .main .page-head.ui-page-head, .main .mf-standard-page-head,
  .main .warehouse-hero.workspace-hero, .main .procurement-hero,
  .main .ppic-hero, .main .delivery-hero, .main .mf-assembly-hero {
    min-height: 0 !important;
    padding: 20px 18px !important;
  }
  .main .mf-page-title-card h1, .main .mf-page-title-card .page-title,
  .main .report-page-head h1, .main .page-head.ui-page-head h1,
  .main .page-head.ui-page-head .page-title, .main .mf-standard-page-head h1,
  .main .warehouse-hero h1, .main .procurement-hero h1,
  .main .procurement-hero h2, .main .ppic-hero h1,
  .main .delivery-hero h1, .main .mf-assembly-hero h1 {
    font-size: 24px !important;
  }
}

/* Admin user management: responsive table and edit panel independent of table cell width. */
.main .admin-users-page { min-width: 0; width: 100%; }
.main .admin-users-page .card { min-width: 0; }
.main .admin-users-page .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; }
.main .admin-users-page table.admin-users-table { width: 100%; min-width: 900px; table-layout: auto; }
.main .admin-users-page table.admin-users-table th,
.main .admin-users-page table.admin-users-table td { vertical-align: middle; }
.main .admin-users-page table.admin-users-table td:last-child { width: 92px; min-width: 92px; text-align: right; }
.main .admin-users-page .admin-manage { display: inline-block; }
.main .admin-users-page .admin-manage > summary { cursor: pointer; white-space: nowrap; }
.main .admin-users-page .admin-manage[open] > summary { position: fixed; inset: 0; z-index: 10001; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(20, 24, 35, .38); color: transparent; font-size: 0; list-style: none; }
.main .admin-users-page .admin-manage[open] > summary::-webkit-details-marker { display: none; }
.main .admin-users-page .admin-manage-panel { position: fixed; z-index: 10002; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 22px; border: 1px solid var(--mf-border, #e2d6cc); border-radius: 16px; background: var(--mf-surface, #fff); box-shadow: 0 22px 70px rgba(20,24,35,.24); box-sizing: border-box; }
.main .admin-users-page .admin-edit-grid,
.main .admin-users-page .admin-user-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.main .admin-users-page .admin-edit-grid label,
.main .admin-users-page .admin-user-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; font-weight: 700; }
.main .admin-users-page .admin-edit-grid input,
.main .admin-users-page .admin-edit-grid select,
.main .admin-users-page .admin-reset-form input,
.main .admin-users-page .admin-user-form input,
.main .admin-users-page .admin-user-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.main .admin-users-page .admin-reset-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mf-border, #e2d6cc); }
.main .admin-users-page .admin-edit-form > button { margin-top: 14px; }
.main .admin-users-page .admin-user-form > button { margin-top: 16px; }
.main .admin-users-page .permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
@media (max-width: 760px) {
  .main .admin-users-page .admin-manage-panel { padding: 16px; width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .main .admin-users-page .admin-edit-grid,
  .main .admin-users-page .admin-user-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .main .admin-users-page .admin-reset-form { grid-template-columns: minmax(0, 1fr); }
}

/* Authorization matrix: restore clear role cards and responsive permission chips. */
.main .admin-users-page .admin-permission-card { overflow: hidden; }
.main .admin-users-page .admin-permission-card > .card-head { padding: 20px 22px; border-bottom: 1px solid var(--mf-border, #e2d6cc); }
.main .admin-users-page .permission-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  min-width: 0;
  box-sizing: border-box;
}
.main .admin-users-page .permission-role {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--mf-border, #e2d6cc);
  border-radius: 12px;
  background: var(--mf-surface, #fffdfa);
  box-shadow: 0 2px 8px rgba(38, 31, 25, .045);
  box-sizing: border-box;
}
.main .admin-users-page .permission-role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mf-border, #e2d6cc);
}
.main .admin-users-page .permission-role-head strong { color: var(--mf-text, #26364a); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.main .admin-users-page .permission-role-head > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f5edf3;
  color: #8f1d61;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.main .admin-users-page .permission-full {
  padding: 12px;
  border-radius: 8px;
  background: #e8f6ee;
  color: #17663b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
}
.main .admin-users-page .permission-tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; min-width: 0; }
.main .admin-users-page .permission-tags > span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid #e5dce4;
  border-radius: 7px;
  background: #faf6f9;
  color: #455468;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .main .admin-users-page .permission-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .main .admin-users-page .admin-permission-card > .card-head { padding: 16px; }
  .main .admin-users-page .permission-role { padding: 13px; }
}

/* Standar tampilan responsif lintas modul: kartu, tabel, dan formulir. */
.page-content, .page-body, .content-area, main { min-width: 0; }
.card, .ui-card, .workspace-section, .workspace-card, .ui-section { max-width: 100%; }
.table-wrap, .table-responsive, .data-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap table, .table-responsive table, .data-table-wrap table { width: 100%; }
input, select, textarea, button { max-width: 100%; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-width: 0; }
.form-grid > *, .grid > *, .grid-3 > *, .field, .form-group { min-width: 0; }
@media (max-width: 760px) {
  .page-head, .ui-page-head, .card-head, .ui-card-head, .ui-section-head { flex-wrap: wrap; }
  .grid, .form-grid, .grid-form, .ui-detail-grid, .grid-3, .stat-grid, .kpi-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .page-title, .page-head h1 { font-size: 22px; overflow-wrap: anywhere; }
  .card-head, .ui-card-head, .ui-section-head, .card-body, .ui-section-body { padding: 15px; }
  .page-head-actions, .ui-card-actions { justify-content: flex-start; }
}


/* =====================================================================
   SALES / PPIC — PRODUCT ROWS + REUSABLE SPECIFICATION CHOOSER
   The related HTML is created dynamically by sales-create.js, so it needs
   explicit component styles instead of inheriting generic form defaults.
   ===================================================================== */
.main .sales-create .reuse-box.show{display:block!important;min-height:0!important}
.main .sales-create .reuse-options{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;margin-top:10px!important}
.main .sales-create .reuse-option{
  display:grid!important;grid-template-columns:17px minmax(0,1fr)!important;align-items:start!important;
  gap:10px!important;width:100%!important;min-width:0!important;margin:0!important;padding:11px 12px!important;
  border:1px solid var(--mf-border)!important;border-radius:10px!important;background:#fff!important;
  color:var(--mf-text)!important;text-align:left!important;cursor:pointer!important;flex-direction:row!important;
}
.main .sales-create .reuse-option:hover{border-color:#d7aec5!important;background:#fffafd!important}
.main .sales-create .reuse-option.selected{border-color:var(--mf-pink)!important;background:#fff8fc!important;box-shadow:0 0 0 2px rgba(197,31,120,.07)!important}
.main .sales-create .reuse-option input[type="radio"]{
  appearance:auto!important;-webkit-appearance:radio!important;display:block!important;width:16px!important;height:16px!important;
  min-width:16px!important;min-height:16px!important;margin:2px 0 0!important;padding:0!important;
  flex:0 0 16px!important;border:0!important;box-shadow:none!important;accent-color:var(--mf-pink)!important;
}
.main .sales-create .reuse-option .reuse-radio{display:none!important}
.main .sales-create .reuse-option>span:last-child{display:block!important;min-width:0!important;max-width:100%!important}
.main .sales-create .reuse-option b{display:block!important;margin:0 0 3px!important;color:var(--mf-text)!important;font-size:12px!important;font-weight:850!important;line-height:1.35!important}
.main .sales-create .reuse-option small{display:block!important;margin:0!important;color:var(--mf-muted)!important;font-size:10px!important;font-weight:500!important;line-height:1.5!important;overflow-wrap:anywhere!important}
.main .sales-create .reuse-option small br{display:block!important;content:""!important;margin-top:2px!important}

.main .sales-create .sales-product-list{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:0 18px 18px!important;min-width:0!important}
.main .sales-create .sales-product-item{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;min-width:0!important;
  overflow:hidden!important;border:1px solid var(--mf-border)!important;border-radius:13px!important;
  background:#fff!important;box-shadow:var(--mf-shadow-sm)!important;
}
.main .sales-create .sales-product-summary{
  display:grid!important;grid-template-columns:76px minmax(145px,1.45fr) minmax(125px,1fr) minmax(110px,.9fr) minmax(78px,.55fr) minmax(115px,.8fr) auto!important;
  align-items:center!important;gap:12px!important;min-width:0!important;padding:14px!important;background:#fff!important;
}
.main .sales-create .sales-product-thumb{
  display:block!important;width:76px!important;height:76px!important;min-width:76px!important;max-width:76px!important;
  max-height:76px!important;object-fit:contain!important;padding:5px!important;border:1px solid var(--mf-border)!important;
  border-radius:10px!important;background:var(--mf-surface-2)!important;
}
.main .sales-create .sales-product-thumb.placeholder{
  display:grid!important;place-items:center!important;color:var(--mf-subtle)!important;font-size:9px!important;
  font-weight:850!important;text-align:center!important;overflow-wrap:anywhere!important;
}
.main .sales-create .sales-product-summary>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;min-width:0!important;max-width:100%!important}
.main .sales-create .sales-product-summary .label{
  display:block!important;margin:0!important;color:var(--mf-muted)!important;font-size:9px!important;
  font-weight:850!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.35!important;
}
.main .sales-create .sales-product-summary .value{
  display:block!important;margin:0!important;color:var(--mf-text)!important;font-size:12px!important;
  font-weight:800!important;line-height:1.4!important;overflow-wrap:anywhere!important;
}
.main .sales-create .sales-product-summary .muted-value{
  display:block!important;margin:0!important;color:var(--mf-muted)!important;font-size:10px!important;
  font-weight:550!important;line-height:1.5!important;overflow-wrap:anywhere!important;
}
.main .sales-create .sales-product-summary .mf-inline-actions-5{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;white-space:nowrap!important}
.main .sales-create .sales-product-summary .mf-inline-actions-5 .btn{min-height:34px!important;height:34px!important;padding:0 10px!important;font-size:10px!important}
.main .sales-create .sales-product-item .stored-fields{display:block!important;min-width:0!important;padding:11px 14px!important;border-top:1px solid var(--mf-border)!important;background:#fcfaf7!important}
.main .sales-create .sales-product-item .stored-file-wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important;min-width:0!important}
.main .sales-create .sales-color-upload-title{display:block!important;color:var(--mf-text)!important;font-size:10px!important;font-weight:850!important;line-height:1.4!important}
.main .sales-create .sales-product-item .stored-file-wrap input[type="file"]{
  display:block!important;width:100%!important;min-width:0!important;min-height:40px!important;height:auto!important;
  padding:7px 9px!important;border:1px dashed var(--mf-border-strong)!important;border-radius:9px!important;
  background:#fff!important;color:var(--mf-text)!important;font-size:11px!important;box-sizing:border-box!important;
}
.main .sales-create .sales-color-upload-help{display:block!important;margin:0!important;color:var(--mf-subtle)!important;font-size:9px!important;font-weight:500!important;line-height:1.45!important}

@media (max-width:1180px){
  .main .sales-create .sales-product-summary{
    grid-template-columns:66px minmax(150px,1.3fr) minmax(120px,1fr) minmax(95px,.8fr) minmax(70px,.5fr) minmax(110px,.8fr) auto!important;
    gap:9px!important;padding:12px!important;
  }
  .main .sales-create .sales-product-thumb{width:66px!important;height:66px!important;min-width:66px!important;max-width:66px!important;max-height:66px!important}
}
@media (max-width:900px){
  .main .sales-create .sales-product-summary{
    grid-template-columns:60px minmax(0,1fr) auto!important;
    grid-template-areas:"image product actions" "image spec spec" "dimension qty due"!important;
    gap:9px 10px!important;align-items:start!important;padding:12px!important;
  }
  .main .sales-create .sales-product-summary>:nth-child(1){grid-area:image!important}
  .main .sales-create .sales-product-summary>:nth-child(2){grid-area:product!important}
  .main .sales-create .sales-product-summary>:nth-child(3){grid-area:spec!important}
  .main .sales-create .sales-product-summary>:nth-child(4){grid-area:dimension!important}
  .main .sales-create .sales-product-summary>:nth-child(5){grid-area:qty!important}
  .main .sales-create .sales-product-summary>:nth-child(6){grid-area:due!important}
  .main .sales-create .sales-product-summary>:nth-child(7){grid-area:actions!important}
  .main .sales-create .sales-product-thumb{width:60px!important;height:60px!important;min-width:60px!important;max-width:60px!important;max-height:60px!important}
  .main .sales-create .sales-product-summary .value{font-size:11px!important}
}
@media (max-width:560px){
  .main .sales-create .sales-product-summary{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"image actions" "product product" "spec spec" "dimension qty" "due due"!important}
  .main .sales-create .sales-product-summary>:nth-child(1){grid-area:image!important}
  .main .sales-create .sales-product-summary>:nth-child(2){grid-area:product!important}
  .main .sales-create .sales-product-summary>:nth-child(3){grid-area:spec!important}
  .main .sales-create .sales-product-summary>:nth-child(4){grid-area:dimension!important}
  .main .sales-create .sales-product-summary>:nth-child(5){grid-area:qty!important}
  .main .sales-create .sales-product-summary>:nth-child(6){grid-area:due!important}
  .main .sales-create .sales-product-summary>:nth-child(7){grid-area:actions!important}
  .main .sales-create .sales-product-summary .mf-inline-actions-5{align-self:start}
  .main .sales-create .sales-product-list{padding:0 10px 12px!important}
  .main .sales-create .sales-product-item .stored-fields{padding:10px!important}
}


/* Sales / PPIC — compact specification selector and searchable configuration table.
   These selectors are intentionally global because modal-system moves dialogs to body. */
.reuse-box.show{display:block!important;min-height:0!important}
.specification-selection-box{display:none;margin:0 0 16px!important;padding:12px 14px!important;border:1px solid #e7c6d7!important;border-radius:11px!important;background:var(--mf-pink-soft)!important}
.specification-selection-box.show{display:block!important}
.specification-selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.specification-selection-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.specification-selection-copy>b{display:block;font-size:11px;font-weight:850;color:var(--mf-text)}
.specification-selection-copy>span{display:block;font-size:10px;line-height:1.45;color:var(--mf-muted);overflow-wrap:anywhere}
.specification-selection-button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-height:34px!important;height:34px!important;padding:0 11px!important;border:1px solid var(--mf-border-strong)!important;border-radius:8px!important;background:#fff!important;color:var(--mf-text)!important;font-size:10px!important;font-weight:800!important;white-space:nowrap}
.specification-selection-button:hover{border-color:var(--mf-pink)!important;color:var(--mf-pink)!important}
.specification-reuse-state{display:none!important}
.specification-picker-dialog{width:min(1080px,calc(100vw - 48px))!important;max-width:1080px!important}
.specification-picker-table{min-width:920px!important}
.specification-picker-table th:nth-child(1){min-width:140px}
.specification-picker-table th:nth-child(2){min-width:160px}
.specification-picker-table th:nth-child(3){min-width:260px}
.specification-picker-table th:nth-child(4){min-width:130px}
.specification-picker-table th:nth-child(5){min-width:100px}
.specification-picker-spec-line{font-size:11px;line-height:1.5;color:var(--mf-text);overflow-wrap:anywhere}
.specification-picker-new-row td{background:#fff6fb!important}
.specification-picker-new-row .ui-picker-value{color:var(--mf-pink)!important}
.specification-picker-table .ui-picker-action button{min-width:86px}
.specification-picker-dialog .specification-picker-new{min-height:34px!important;padding:0 12px!important;font-size:11px!important;white-space:nowrap}
@media(max-width:760px){
  .specification-selection-toolbar{align-items:flex-start;flex-direction:column}
  .specification-selection-button{width:100%}
  .specification-picker-dialog{width:calc(100vw - 20px)!important;max-width:none!important}
  .specification-picker-table{min-width:850px!important}
  .specification-picker-dialog .ui-picker-head{padding:16px!important}
  .specification-picker-dialog .ui-picker-toolbar{padding:12px 16px!important;align-items:stretch;flex-direction:column}
  .specification-picker-dialog .ui-picker-body{padding:0 16px!important}
  .specification-picker-dialog .ui-picker-foot{padding:12px 16px!important;align-items:flex-start;flex-direction:column}
}