:root{
  --navy:#173957;--navy-dark:#102c44;--blue:#2476aa;--bg:#f3f7fa;--card:#fff;
  --line:#d8e3eb;--text:#102a43;--muted:#60758a;--danger:#b42318;--success:#177245;
  font-family:Inter,"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:9px;background:var(--blue);color:#fff;padding:10px 15px;font-weight:700}
button.secondary{background:#eef4f7;color:var(--text);border:1px solid var(--line)}
button.danger,.danger{background:var(--danger);color:#fff}.hidden{display:none!important}.screen{min-height:100vh}
.center-screen{display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,var(--navy-dark),var(--navy))}
.card{background:var(--card);border-radius:20px;box-shadow:0 18px 55px rgba(0,0,0,.22)}
.boot-card,.error-card{width:min(440px,100%);padding:42px;text-align:center}.auth-card{width:min(470px,100%);padding:38px}
.brand-mark{font-size:44px;text-align:center}.auth-card h1,.boot-card h1{margin:5px 0;text-align:center;font-size:32px}
.subtitle{text-align:center;color:var(--muted);margin:0 0 28px}.auth-form{display:grid;gap:16px}.auth-form.compact{gap:12px}
label{display:grid;gap:7px;font-weight:700;font-size:14px}input,select,textarea{width:100%;border:1px solid #c8d7e2;border-radius:9px;padding:10px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(36,118,170,.16);border-color:var(--blue)}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:22px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}
.message{min-height:22px;margin:18px 0 0;color:var(--muted);font-size:14px}.message.error{color:var(--danger)}.message.success{color:var(--success)}
.app-shell{min-height:100vh}.app-header{background:var(--navy);color:#fff;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.app-header h1{margin:0;font-size:24px}.app-header p{margin:3px 0 0;color:#c5d7e5}.account-box{display:flex;align-items:center;gap:14px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line)}
.tabs button{background:transparent;color:#405d73}.tabs button.active{background:#eaf2f7;color:var(--navy)}.badge{display:inline-grid;place-items:center;min-width:21px;height:21px;border-radius:99px;background:#dceaf3;font-size:12px}
.content{padding:22px;max-width:1600px;margin:auto}.view{display:grid;gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.panel h2{margin:0 0 4px}.panel p{color:var(--muted);margin:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.metric{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.metric span{display:block;color:var(--muted)}.metric strong{display:block;font-size:28px;margin-top:6px}
.toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 220px auto auto auto;gap:10px;align-items:center}.check-inline{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:500}.check-inline input,.check-card input{width:auto}
.table-panel{padding:0;overflow:hidden}.table-panel .panel-title{padding:18px 18px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:1050px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}th{background:#f7fafc;color:#415d73;font-size:13px;position:sticky;top:0}
td.number,th.number{text-align:right}.item-title{font-weight:800}.muted{color:var(--muted);font-size:12px}.stock-low{color:var(--danger);font-weight:800}
.row-actions,.qty-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.qty-input{width:78px}.flag-list{display:flex;gap:5px;flex-wrap:wrap}.flag{border-radius:99px;padding:4px 8px;font-size:11px;background:#eaf2f7}.flag.green{background:#e4f4ea;color:#126b3b}.flag.orange{background:#fff0dc;color:#8a4d00}
.placeholder{text-align:center;padding:60px 20px}dialog{border:0;border-radius:18px;padding:0;width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(16,44,68,.56)}dialog form,dialog>div,dialog>.dialog-header{padding-left:22px;padding-right:22px}
.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-top:22px}.dialog-header h2{margin:0}.dialog-header p{margin:4px 0;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 22px}.span2{grid-column:1/-1}.check-card{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:12px;border-radius:10px}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;padding:18px 22px;border-top:1px solid var(--line)}#quantityDialog,#deleteDialog{width:min(520px,calc(100vw - 24px))}
#quantityDialog form>label,#deleteDialog form>label{margin:14px 22px}.inline-form{display:flex;gap:8px;padding:16px 22px}.category-list{padding:0 22px 22px}.category-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}
.toast{position:fixed;right:20px;bottom:20px;background:var(--navy-dark);color:#fff;padding:13px 18px;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.25);z-index:9999}
@media(max-width:950px){.toolbar{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:1fr}.toolbar>*:first-child{grid-column:1/-1}}
@media(max-width:700px){.app-header{align-items:flex-start;flex-direction:column}.account-box{width:100%;justify-content:space-between}.auth-card{padding:27px 22px}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.toolbar{grid-template-columns:1fr}.toolbar>*:first-child{grid-column:auto}}

.container-summary{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;margin-bottom:16px}
.container-summary>div{border:1px solid var(--line);border-radius:12px;padding:14px;background:#f8fbfd}
.container-summary span{display:block;color:var(--muted);font-size:13px}
.container-summary strong{display:block;margin-top:4px;font-size:22px}
.dialog-field{margin:15px 22px}
.status-chip{display:inline-block;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700;background:#fff0dc;color:#8a4d00}
.status-chip.arrived{background:#e4f4ea;color:#126b3b}
button[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.container-summary{grid-template-columns:1fr 1fr}}

/* Step3.1: inventory layout polish */
.qty-actions{
  display:grid;
  grid-template-columns:86px 46px 46px 64px;
  gap:7px;
  align-items:center;
  min-width:270px;
}
.qty-actions .qty-input{width:86px;min-width:86px}
.qty-actions button{min-width:46px;padding:10px 8px;white-space:nowrap}
.row-actions{display:grid;grid-template-columns:minmax(118px,1fr) minmax(118px,1fr);gap:8px;align-items:center}
.row-actions button{width:100%;white-space:nowrap}
.dialog-actions-split{justify-content:space-between;align-items:center}
.dialog-actions-right{display:flex;gap:9px;margin-left:auto}

.capacity-panel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
  background:#f8fbfd;
}
.capacity-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:14px}
.capacity-heading h3{margin:0 0 4px}
.capacity-heading p{margin:0;color:var(--muted)}
.capacity-heading>strong{font-size:22px;white-space:nowrap}
.capacity-row{
  display:grid;
  grid-template-columns:90px minmax(220px,1fr) 100px;
  gap:12px;
  align-items:center;
  margin:12px 0;
}
.capacity-label{display:flex;justify-content:space-between;gap:8px}
.capacity-track{height:20px;background:#dfe9ef;border-radius:999px;overflow:hidden;border:1px solid #cfdee7}
.capacity-bar{height:100%;width:0%;background:linear-gradient(90deg,#2476aa,#2e92cb);transition:width .25s ease}
.capacity-bar.over{background:linear-gradient(90deg,#d97706,#b42318)}
.capacity-note{font-size:12px;color:var(--muted);text-align:right}
.capacity-warning{margin-top:10px!important;color:var(--danger)!important;font-weight:700}
@media(max-width:900px){
  .qty-actions{grid-template-columns:78px 42px 42px 58px;min-width:240px}
  .row-actions{grid-template-columns:1fr}
}
@media(max-width:700px){
  .capacity-row{grid-template-columns:72px 1fr}
  .capacity-note{grid-column:2;text-align:left}
  .dialog-actions-split{align-items:stretch;flex-direction:column}
  .dialog-actions-right{width:100%;margin-left:0}
  .dialog-actions-right button,#deleteItemFromDialogBtn{flex:1}
}


/* Step7: inventory thumbnails + stable Dealer price field */
.inventory-item-cell{display:flex;align-items:center;gap:11px;min-width:0}
.inventory-item-copy{min-width:0}
.inventory-thumb{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f5f8fa;color:var(--muted)}
.inventory-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.inventory-thumb-placeholder{font-size:9px;line-height:1.15;text-align:center;padding:4px;white-space:nowrap}
#itemWholesalePriceField.field-disabled{color:var(--muted)}
#itemWholesalePriceField.field-disabled input{background:#f3f5f7;color:#8793a0;cursor:not-allowed}

/* Step4 inventory completion */
.toolbar{
  grid-template-columns:minmax(280px,1fr) 220px auto auto auto auto;
}
.split-button{display:flex;position:relative}
.split-button>button:first-child{border-radius:9px 0 0 9px}
.split-button>button:nth-child(2){border-radius:0 9px 9px 0;border-left:1px solid rgba(255,255,255,.35);padding-left:10px;padding-right:10px}
.split-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px;min-width:170px}
.split-menu button{width:100%;background:#fff;color:var(--text);text-align:left}
.split-menu button:hover{background:#eef4f7}
.settings-section{border-top:1px solid var(--line);padding-top:20px;margin-top:8px}
.pdf-report-host{position:fixed;left:0;top:0;width:1040px;background:#fff;color:#111;z-index:-2147483647;pointer-events:none}
.pdf-report{width:1040px;padding:0;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;background:#fff;color:#111}
.pdf-category{page-break-before:always}
.pdf-category:first-child{page-break-before:auto}
.pdf-category h1{font-size:22px;margin:0 0 8px}
.pdf-meta{font-size:11px;color:#555;margin-bottom:12px}
.pdf-table{width:100%;border-collapse:collapse;font-size:10px}
.pdf-table th,.pdf-table td{border:1px solid #aaa;padding:5px;vertical-align:top}
.pdf-table th{background:#eef3f6}
.pdf-number{text-align:right}
.pdf-subtotal{margin-top:12px;text-align:right;font-size:14px;font-weight:700}
.pdf-grand-total{page-break-before:always;display:grid;place-items:center;min-height:980px;text-align:center}
.pdf-grand-total h1{font-size:30px}
.pdf-grand-total strong{display:block;font-size:38px;margin-top:18px}
.pdf-page-note{font-size:10px;color:#666;margin-top:10px}
.recipient-actions{display:flex;gap:8px}
@media(max-width:1100px){
  .toolbar{grid-template-columns:minmax(240px,1fr) 210px auto auto}
  .split-button{grid-column:auto}
}
@media(max-width:700px){
  .toolbar{grid-template-columns:1fr}
  .split-button{width:100%}
  .split-button>button:first-child{flex:1}
}

/* Step4.1 final polish */
.dialog-left-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.settings-form{display:grid;gap:16px;max-width:900px}
.settings-actions{display:flex;justify-content:flex-end}
.container-totals{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.container-totals strong{font-size:22px;white-space:nowrap}
.pdf-report{width:1120px}
.pdf-table{table-layout:fixed}
.pdf-table th:nth-child(1),.pdf-table td:nth-child(1){width:12%}
.pdf-table th:nth-child(2),.pdf-table td:nth-child(2){width:31%}
.pdf-table th:nth-child(3),.pdf-table td:nth-child(3){width:8%}
.pdf-table th:nth-child(4),.pdf-table td:nth-child(4){width:9%}
.pdf-table th:nth-child(5),.pdf-table td:nth-child(5){width:12%}
.pdf-table th:nth-child(6),.pdf-table td:nth-child(6){width:14%}
.pdf-table th:nth-child(7),.pdf-table td:nth-child(7){width:14%}
.pdf-table td{word-break:break-word}
.fixed-category{display:inline-block;border-radius:999px;padding:4px 9px;background:#eef4f7;color:var(--muted);font-size:12px}
@media(max-width:700px){
  .dialog-left-actions,.dialog-actions-right{width:100%}
  .dialog-left-actions button,.dialog-actions-right button{flex:1}
}

/* Step5 production workflows */
.header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.filter-row{display:grid;grid-template-columns:minmax(260px,1fr) 220px 210px auto;gap:10px;margin-bottom:10px}
.production-month-filter{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:12px;font-weight:700}
.production-month-filter>span{white-space:nowrap}.production-month-filter input[type="month"]{width:100%;max-width:100%;min-width:0;box-sizing:border-box;border:0;background:transparent;padding:9px 0;color:var(--text);font:inherit;font-weight:600}
.record-summary{margin:0 0 12px!important}
.subheading{margin:24px 0 10px}
#productManagerDialog{width:min(1100px,calc(100vw - 24px))}
.product-manager-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:18px 22px 22px}
.product-manager-layout aside{border-right:1px solid var(--line);padding-right:16px}
.product-manager-layout aside>button{width:100%;margin-bottom:12px}
.product-config-list{display:grid;gap:7px}
.product-config-item{background:#eef4f7;color:var(--text);text-align:left;width:100%}
#productConfigForm{display:grid;gap:16px}
.component-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.component-heading h3{margin:0}
.component-rows{display:grid;gap:9px}
.component-row{display:grid;grid-template-columns:minmax(260px,1fr) 130px auto;gap:9px;align-items:center}
.record-detail{padding:18px 22px 24px}
.record-detail dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px}
.record-detail dt{font-weight:800}.record-detail dd{margin:0}
.record-detail table{min-width:0}
.pdf-report{width:1120px}
.pdf-table th:nth-child(1),.pdf-table td:nth-child(1){width:55%}
.pdf-table th:nth-child(2),.pdf-table td:nth-child(2){width:15%}
.pdf-table th:nth-child(3),.pdf-table td:nth-child(3){width:15%}
.pdf-table th:nth-child(4),.pdf-table td:nth-child(4){width:15%}
.pdf-table th:nth-child(n+5),.pdf-table td:nth-child(n+5){width:auto}
@media(max-width:850px){.filter-row{grid-template-columns:1fr 1fr}.product-manager-layout{grid-template-columns:1fr}.product-manager-layout aside{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}.component-row{grid-template-columns:1fr 100px auto}}
@media(max-width:600px){.filter-row,.component-row{grid-template-columns:1fr}.header-actions{width:100%}.header-actions button{flex:1}}

/* Step5.3: dedicated smartphone UI
   Desktop rules above remain unchanged. The mobile-ui class is toggled by js/core.js. */
@media(max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-ui{padding:0;background:#eef4f7;-webkit-text-size-adjust:100%}
  body.mobile-ui button,body.mobile-ui input,body.mobile-ui select,body.mobile-ui textarea{font-size:16px}
  body.mobile-ui button{min-height:44px;padding:10px 13px;border-radius:10px}

  /* Compact mobile header */
  body.mobile-ui .app-header{
    position:sticky;top:0;z-index:60;
    min-height:64px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
  }
  body.mobile-ui .app-header>div:first-child{min-width:0}
  body.mobile-ui .app-header h1{font-size:21px;line-height:1.15;white-space:nowrap}
  body.mobile-ui .app-header p{font-size:12px;margin-top:2px;white-space:nowrap}
  body.mobile-ui .account-box{width:auto;min-width:0;margin-left:auto;display:flex;justify-content:flex-end;gap:7px}
  body.mobile-ui .account-box>span{display:none}
  body.mobile-ui .account-box button{width:auto;min-width:0;white-space:nowrap;padding:8px 11px;min-height:40px;font-size:14px}

  /* Mobile navigation is a single swipeable strip, not a wrapped PC menu. */
  body.mobile-ui .tabs{
    position:sticky;top:64px;z-index:55;
    display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:6px;padding:8px 10px;background:#fff;white-space:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  body.mobile-ui .tabs::-webkit-scrollbar{display:none}
  body.mobile-ui .tabs button{flex:0 0 auto;min-height:42px;padding:9px 12px;font-size:14px;border-radius:10px}

  body.mobile-ui .content{width:100%;max-width:none;margin:0;padding:10px 10px calc(20px + env(safe-area-inset-bottom))}
  body.mobile-ui .view{gap:10px}
  body.mobile-ui .panel{padding:14px;border-radius:14px}
  body.mobile-ui .panel-title{align-items:flex-start;gap:10px;margin-bottom:12px}
  body.mobile-ui .panel-title h2{font-size:24px}
  body.mobile-ui .panel-title p{font-size:13px;line-height:1.45}
  body.mobile-ui .panel-title>button{flex:0 0 auto}

  /* Dashboard */
  body.mobile-ui .metric-grid{grid-template-columns:1fr 1fr;gap:10px}
  body.mobile-ui .metric{padding:16px;border-radius:14px;min-width:0}
  body.mobile-ui .metric:nth-child(3){grid-column:1/-1}
  body.mobile-ui .metric span{font-size:13px}
  body.mobile-ui .metric strong{font-size:24px;overflow-wrap:anywhere}

  /* Inventory toolbar becomes a purpose-built mobile control grid. */
  body.mobile-ui #view-inventory>.toolbar{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}
  body.mobile-ui #view-inventory>.toolbar>*{min-width:0}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(1),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(2),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(3),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(6){grid-column:1/-1}
  body.mobile-ui #view-inventory>.toolbar button{width:100%}
  body.mobile-ui .check-inline{min-height:44px;padding:8px 3px;white-space:normal}
  body.mobile-ui .split-button{width:100%}
  body.mobile-ui .split-button>button:first-child{flex:1}
  body.mobile-ui .split-menu{left:0;right:0;min-width:0}

  /* Every data table becomes a readable mobile card list. */
  body.mobile-ui .table-panel{padding:0;border:0;background:transparent;overflow:visible}
  body.mobile-ui .table-panel .panel-title{margin:0 0 10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px}
  body.mobile-ui .table-wrap{overflow:visible;width:100%}
  body.mobile-ui .table-wrap table{display:block;width:100%;min-width:0;border-collapse:separate}
  body.mobile-ui .table-wrap thead{display:none}
  body.mobile-ui .table-wrap tbody{display:grid;gap:10px;width:100%}
  body.mobile-ui .table-wrap tr{display:block;width:100%;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px}
  body.mobile-ui .table-wrap td{
    display:grid;grid-template-columns:minmax(88px,32%) minmax(0,1fr);align-items:center;gap:10px;
    width:100%;min-width:0;padding:10px 12px;border-bottom:1px solid #e8eff4;text-align:left!important;
    overflow-wrap:anywhere;
  }
  body.mobile-ui .table-wrap td:last-child{border-bottom:0}
  body.mobile-ui .table-wrap td::before{content:attr(data-label);font-size:12px;font-weight:800;color:#60758a;line-height:1.25}
  body.mobile-ui .table-wrap td[colspan]{display:block;padding:18px;text-align:center!important}
  body.mobile-ui .table-wrap td[colspan]::before{display:none}
  body.mobile-ui .table-wrap td .item-title,body.mobile-ui .table-wrap td strong{font-size:16px}
  body.mobile-ui .table-wrap td.number{text-align:left!important}

  /* Inventory action cells need the full card width. */
  body.mobile-ui #inventoryBody td:nth-child(1){display:block;background:#f8fbfd;padding:13px 12px}
  body.mobile-ui #inventoryBody td:nth-child(1)::before{display:none}
  body.mobile-ui #inventoryBody td:nth-child(3){font-size:18px;font-weight:800}
  body.mobile-ui #inventoryBody td:nth-child(6),body.mobile-ui #inventoryBody td:nth-child(7){display:block}
  body.mobile-ui #inventoryBody td:nth-child(6)::before,body.mobile-ui #inventoryBody td:nth-child(7)::before{display:block;margin-bottom:8px}
  body.mobile-ui .qty-actions{display:grid;grid-template-columns:minmax(72px,1fr) 44px 44px 64px;gap:6px;min-width:0;width:100%}
  body.mobile-ui .qty-actions .qty-input{width:100%;min-width:0}
  body.mobile-ui .qty-actions button{min-width:0;padding:8px 6px}
  body.mobile-ui .row-actions{display:grid;grid-template-columns:1fr;min-width:0;width:100%}
  body.mobile-ui .row-actions button{width:100%}

  /* Containers */
  body.mobile-ui .container-summary{grid-template-columns:1fr 1fr;gap:8px}
  body.mobile-ui .container-summary>div{padding:12px}
  body.mobile-ui .container-summary strong{font-size:20px}
  body.mobile-ui .capacity-panel{padding:13px;border-radius:14px}
  body.mobile-ui .capacity-heading{display:grid;gap:10px;margin-bottom:12px}
  body.mobile-ui .container-totals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body.mobile-ui .container-totals strong{font-size:18px}
  body.mobile-ui .capacity-row{grid-template-columns:64px 1fr;gap:8px}
  body.mobile-ui .capacity-note{grid-column:2;text-align:left}

  /* Production */
  body.mobile-ui .header-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  body.mobile-ui .header-actions button{width:100%}
  body.mobile-ui #view-molding .panel-title,body.mobile-ui #view-rigging .panel-title{display:grid}
  body.mobile-ui .filter-row{grid-template-columns:1fr;gap:8px}
  body.mobile-ui .record-summary{font-size:13px}

  /* Settings */
  body.mobile-ui .settings-section{padding-top:16px;margin-top:10px}
  body.mobile-ui .settings-section>.panel-title{display:grid}
  body.mobile-ui .settings-section>.panel-title button{width:100%}
  body.mobile-ui .factory-device-current{grid-template-columns:1fr;padding:13px}
  body.mobile-ui .factory-qr-grid{grid-template-columns:1fr}
  body.mobile-ui .factory-qr-card{padding:14px}
  body.mobile-ui .factory-qr-code{min-height:0}
  body.mobile-ui .factory-qr-code canvas,body.mobile-ui .factory-qr-code img{max-width:220px!important;width:100%!important;height:auto!important}
  body.mobile-ui .factory-qr-actions{display:grid;grid-template-columns:1fr 1fr}

  /* Dialogs are mobile work screens rather than squeezed desktop modals. */
  body.mobile-ui dialog{
    width:calc(100vw - 10px)!important;max-width:none!important;max-height:calc(100dvh - 10px);
    margin:auto;border-radius:16px;overscroll-behavior:contain;
  }
  body.mobile-ui dialog form,body.mobile-ui dialog>div,body.mobile-ui dialog>.dialog-header{padding-left:14px;padding-right:14px}
  body.mobile-ui .dialog-header{position:sticky;top:0;z-index:5;padding-top:14px;padding-bottom:12px;background:#fff;border-bottom:1px solid var(--line)}
  body.mobile-ui .dialog-header h2{font-size:24px}
  body.mobile-ui .dialog-header p{font-size:13px;line-height:1.4}
  body.mobile-ui .dialog-header>button{min-width:72px;flex:0 0 auto}
  body.mobile-ui .form-grid{grid-template-columns:1fr;gap:12px;padding:14px}
  body.mobile-ui .span2{grid-column:auto}
  body.mobile-ui label{font-size:14px}
  body.mobile-ui input,body.mobile-ui select,body.mobile-ui textarea{padding:12px;min-height:46px}
  body.mobile-ui textarea{min-height:100px}
  body.mobile-ui .dialog-field{margin:13px 14px}
  body.mobile-ui .dialog-actions{
    position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#fff;
  }
  body.mobile-ui .dialog-actions>button{width:100%}
  body.mobile-ui .dialog-actions-split{display:grid;grid-template-columns:1fr;align-items:stretch}
  body.mobile-ui .dialog-left-actions,body.mobile-ui .dialog-actions-right{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;margin:0}
  body.mobile-ui .dialog-left-actions:has(button:only-child),body.mobile-ui .dialog-actions-right:has(button:only-child){grid-template-columns:1fr}
  body.mobile-ui .inline-form{display:grid;grid-template-columns:1fr auto;padding:12px 14px}
  body.mobile-ui .category-list{padding:0 14px 14px}
  body.mobile-ui .category-row{gap:10px}

  /* Product manager */
  body.mobile-ui #productManagerDialog{width:calc(100vw - 10px)!important}
  body.mobile-ui .product-manager-layout{grid-template-columns:1fr;gap:14px;padding:14px}
  body.mobile-ui .product-manager-layout aside{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px}
  body.mobile-ui .product-manager-layout aside>button{position:sticky;top:76px;z-index:3}
  body.mobile-ui .component-heading{align-items:stretch;display:grid;grid-template-columns:1fr auto}
  body.mobile-ui .component-row{grid-template-columns:1fr;gap:7px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#f8fbfd}
  body.mobile-ui .component-row button{width:100%}
  body.mobile-ui #productConfigForm>.dialog-actions{position:static;padding-left:0;padding-right:0}

  /* Record details and generic content */
  body.mobile-ui .record-detail{padding:14px}
  body.mobile-ui .record-detail dl{grid-template-columns:90px 1fr;gap:8px 10px}
  body.mobile-ui .placeholder{padding:36px 14px}
  body.mobile-ui .recipient-actions{display:grid;grid-template-columns:1fr}

  body.mobile-ui .toast{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));text-align:center}
  body.mobile-ui .auth-card{padding:26px 18px;border-radius:18px}
  body.mobile-ui .center-screen{padding:16px}
}


/* Step5.4 batch usability fixes */
.mobile-only{display:none!important}
.product-config-item.active{background:#d9ebf6;color:var(--navy);outline:2px solid rgba(36,118,170,.18)}
.product-config-empty{display:grid;place-items:center;align-content:center;min-height:260px;padding:30px;border:1px dashed var(--line);border-radius:14px;background:#f8fbfd;text-align:center;color:var(--muted)}
.product-config-empty strong{color:var(--text);font-size:18px}.product-config-empty p{margin:8px 0 0}

@media(max-width:720px){
  body.mobile-ui .mobile-only{display:flex!important}
  body.mobile-ui .inventory-desktop-table{display:none!important}

  /* Mobile is a separate, denser work layout. */
  body.mobile-ui .app-header{min-height:52px;padding:7px 10px}
  body.mobile-ui .app-header h1{font-size:18px}
  body.mobile-ui .app-header p{font-size:10px;margin-top:1px}
  body.mobile-ui .account-box{gap:5px}
  body.mobile-ui .account-box button{min-height:36px;padding:6px 9px;font-size:12px;border-radius:8px}
  body.mobile-ui .tabs{top:52px;padding:5px 7px;gap:4px;scroll-snap-type:x proximity}
  body.mobile-ui .tabs button{scroll-snap-align:start;min-height:36px;padding:6px 10px;font-size:13px;border-radius:9px}
  body.mobile-ui .content{padding:8px 8px calc(16px + env(safe-area-inset-bottom))}
  body.mobile-ui .view{gap:8px}
  body.mobile-ui .panel{padding:10px;border-radius:12px}

  /* Inventory mobile header and compact controls. */
  body.mobile-ui .mobile-inventory-heading{align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0}
  body.mobile-ui .mobile-inventory-heading h2{margin:0;font-size:22px}
  body.mobile-ui .mobile-inventory-heading p{margin:1px 0 0;color:var(--muted);font-size:12px}
  body.mobile-ui .mobile-inventory-heading button{width:38px;min-width:38px;min-height:36px;padding:4px;font-size:22px}
  body.mobile-ui #view-inventory>.toolbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(1){grid-column:1/-1}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(2){grid-column:1/3}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(3){grid-column:3/4}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(4),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(5),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(6){grid-column:auto}
  body.mobile-ui #view-inventory>.toolbar input[type=search],body.mobile-ui #view-inventory>.toolbar select{min-height:40px;padding:8px 10px;font-size:14px}
  body.mobile-ui #view-inventory>.toolbar button{min-height:40px;padding:7px 5px;font-size:12px}
  body.mobile-ui #view-inventory>.toolbar #newItemBtn{font-size:13px}
  body.mobile-ui .check-inline{display:flex;justify-content:center;align-items:center;gap:5px;min-height:40px;padding:4px 3px;font-size:11px;line-height:1.15;text-align:center}
  body.mobile-ui .check-inline input{width:18px;height:18px;flex:0 0 18px}
  body.mobile-ui .split-button{display:grid;grid-template-columns:1fr 32px;width:100%;min-width:0}
  body.mobile-ui .split-button>button:first-child{min-width:0;white-space:nowrap;border-radius:9px 0 0 9px}
  body.mobile-ui .split-button>button:nth-child(2){width:32px;padding:4px;border-radius:0 9px 9px 0}
  body.mobile-ui .split-menu{left:auto;right:0;min-width:150px}

  /* Purpose-built inventory cards; desktop table stays desktop-only. */
  body.mobile-ui .inventory-mobile-list{display:grid!important;gap:7px}
  body.mobile-ui .inventory-mobile-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
  body.mobile-ui .inventory-mobile-head{display:flex;align-items:flex-start;gap:8px}

  body.mobile-ui .inventory-mobile-head .inventory-thumb{flex-basis:46px;width:46px;height:46px;border-radius:8px}
  body.mobile-ui .inventory-mobile-title{min-width:0;flex:1}
  body.mobile-ui .inventory-mobile-title strong{display:block;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
  body.mobile-ui .inventory-mobile-title span{display:block;margin-top:2px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
  body.mobile-ui .inventory-mobile-detail{flex:0 0 auto;min-height:34px;padding:5px 9px;font-size:12px}
  body.mobile-ui .inventory-mobile-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:8px}
  body.mobile-ui .inventory-mobile-metrics>div{min-width:0;padding:6px 7px;border-radius:8px;background:#f5f9fb}
  body.mobile-ui .inventory-mobile-metrics span{display:block;color:var(--muted);font-size:10px}
  body.mobile-ui .inventory-mobile-metrics strong{display:block;margin-top:1px;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
  body.mobile-ui .inventory-mobile-qty{display:grid;grid-template-columns:minmax(64px,1fr) 38px 38px 52px;gap:5px;margin-top:7px}
  body.mobile-ui .inventory-mobile-qty input{min-height:36px;padding:6px 7px;font-size:14px}
  body.mobile-ui .inventory-mobile-qty button{min-height:36px;padding:5px 4px;font-size:12px}
  body.mobile-ui .inventory-mobile-qty button:nth-child(2),body.mobile-ui .inventory-mobile-qty button:nth-child(3){font-size:18px}
  body.mobile-ui .inventory-mobile-empty{padding:20px;text-align:center;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:12px}

  /* Generic mobile tables remain cards but much denser than the previous version. */
  body.mobile-ui .table-wrap tbody{gap:7px}
  body.mobile-ui .table-wrap tr{border-radius:11px}
  body.mobile-ui .table-wrap td{grid-template-columns:minmax(74px,28%) minmax(0,1fr);gap:7px;padding:7px 9px;font-size:13px}
  body.mobile-ui .table-wrap td::before{font-size:10px}

  /* Mobile dialogs: compact work screens with one close path + sticky save/actions. */
  body.mobile-ui dialog{width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px);border-radius:14px}
  body.mobile-ui .dialog-header{padding:10px 12px 9px}
  body.mobile-ui .dialog-header h2{font-size:21px}
  body.mobile-ui .dialog-header p{font-size:11px;margin-top:2px}
  body.mobile-ui .dialog-header>button{min-width:60px;min-height:36px;padding:6px 9px;font-size:12px}
  body.mobile-ui .form-grid{gap:8px;padding:10px 12px}
  body.mobile-ui label{gap:4px;font-size:12px}
  body.mobile-ui input,body.mobile-ui select,body.mobile-ui textarea{min-height:40px;padding:8px 9px;font-size:14px}
  body.mobile-ui textarea{min-height:80px}
  body.mobile-ui .check-card{padding:9px}
  body.mobile-ui .dialog-actions{gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  body.mobile-ui .dialog-actions>button{min-height:40px;padding:7px 8px;font-size:13px}
  body.mobile-ui .dialog-actions-split{grid-template-columns:minmax(0,1.5fr) minmax(90px,.7fr)}
  body.mobile-ui .dialog-left-actions{grid-template-columns:1fr 1fr;gap:6px}
  body.mobile-ui .dialog-actions-right{grid-template-columns:1fr;gap:6px}
  body.mobile-ui #deleteItemFromDialogBtn{font-size:12px}

  /* Product manager: pressing +new product now visibly opens the editor. */
  body.mobile-ui .product-manager-layout{padding:10px 12px;gap:10px}
  body.mobile-ui .product-manager-layout aside{padding-bottom:10px}
  body.mobile-ui .product-manager-layout aside>button{position:static;margin-bottom:7px;min-height:40px}
  body.mobile-ui .product-config-list{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px}
  body.mobile-ui .product-config-item{flex:0 0 auto;width:auto;max-width:220px;padding:7px 10px;font-size:12px}
  body.mobile-ui .product-config-empty{min-height:150px;padding:20px 12px}
  body.mobile-ui .product-config-empty strong{font-size:15px}
  body.mobile-ui .product-config-empty p{font-size:11px}
  body.mobile-ui .component-heading{grid-template-columns:1fr auto}
  body.mobile-ui .component-heading h3{font-size:16px}
  body.mobile-ui .component-heading button{min-height:36px;font-size:12px}
  body.mobile-ui .component-row{padding:7px;gap:5px}
}

/* Step6: item media, user management and molding photo */
#itemDialog{width:min(1040px,calc(100vw - 24px))}
.item-media-section{margin:0 22px 18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fbfdfe}
.item-media-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.item-media-heading h3{margin:0 0 3px}.item-media-heading p{margin:0;color:var(--muted);font-size:13px}
.file-drop-zone{display:grid;place-items:center;gap:4px;padding:18px;border:2px dashed #bdd0dd;border-radius:12px;background:#fff;text-align:center;cursor:pointer}
.file-drop-zone.dragging{border-color:var(--blue);background:#eef7fc}.file-drop-zone span{color:var(--muted);font-size:12px}.file-drop-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pending-file-list{display:grid;gap:5px;margin-top:9px}.pending-file{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;background:#eef4f7;font-size:12px}.pending-file small{color:var(--muted);white-space:nowrap}
.item-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}.item-image-card{display:grid;gap:7px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff}.item-image-card .image-open{padding:0;background:transparent;overflow:hidden;border-radius:8px}.item-image-card img{display:block;width:100%;height:110px;object-fit:cover}.item-image-card span,.item-image-card small{display:block;overflow-wrap:anywhere}.item-image-card small{color:var(--muted)}
button.compact{padding:7px 9px;font-size:12px}.media-empty{grid-column:1/-1;padding:8px 0;margin:0}.quote-meta-grid{display:grid;grid-template-columns:180px 1fr;gap:10px;margin-bottom:10px}.item-quote-list{display:grid;gap:8px;margin-top:12px}.item-quote-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.item-quote-row strong,.item-quote-row span,.item-quote-row small{display:block}.item-quote-row span,.item-quote-row small{margin-top:2px;color:var(--muted);font-size:12px}.media-actions{display:flex;gap:7px;flex:0 0 auto}
.user-management-table input,.user-management-table select{min-width:130px}.user-management-table td:first-child{min-width:250px}
.record-photo-link{display:block;max-width:520px}.record-photo{display:block;width:100%;max-height:420px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#f7fafc}

@media(max-width:720px){
  body.mobile-ui #itemDialog{width:calc(100vw - 6px)!important}
  body.mobile-ui .item-media-section{margin:0 12px 10px;padding:10px;border-radius:11px}
  body.mobile-ui .item-media-heading h3{font-size:16px}.file-drop-zone{padding:13px 8px}
  body.mobile-ui .item-image-grid{grid-template-columns:1fr 1fr;gap:7px}.item-image-card img{height:100px}
  body.mobile-ui .quote-meta-grid{grid-template-columns:1fr;gap:7px}
  body.mobile-ui .item-quote-row{align-items:stretch;display:grid;grid-template-columns:1fr;gap:8px}.media-actions{display:grid;grid-template-columns:1fr 1fr}
  body.mobile-ui .user-management-table input,body.mobile-ui .user-management-table select{min-width:0;width:100%}
  body.mobile-ui .record-photo{max-height:300px}
}
.error-actions{display:flex;gap:10px;justify-content:center}.error-actions button{min-width:120px}
@media(max-width:720px){body.mobile-ui .error-actions{display:grid;grid-template-columns:1fr 1fr}}

/* Step8: production media, delete and variable BOM */
.attachment-mark{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;font-size:16px;vertical-align:middle;filter:saturate(.9)}
.variable-bom-config{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.variable-group-rows{display:grid;gap:14px;margin-top:12px}
.variable-group-config{border:1px solid var(--line);border-radius:14px;padding:14px;background:#f8fbfd}
.variable-group-config-head{display:grid;grid-template-columns:minmax(180px,1.5fr) 170px 120px 120px minmax(126px,max-content);gap:10px;align-items:end}
.variable-group-config-head label{min-width:0}
.variable-group-delete{align-self:end;white-space:nowrap;min-width:126px;width:auto;padding-left:14px;padding-right:14px}
.variable-option-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px}
.variable-category-add{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;align-items:center;margin-bottom:6px}
.variable-category-note{margin:0 0 10px;color:var(--muted);font-size:12px}
.variable-mode-note{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.variable-option-config-rows{display:grid;gap:8px}
.variable-option-config-row{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;align-items:center}
.production-variable-inputs{display:grid;gap:12px;margin:4px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fbfd}
.production-variable-intro{display:grid;gap:3px}.production-variable-intro>strong{font-size:17px}.production-variable-intro>span{color:var(--muted);font-size:13px}
.production-variable-group{display:grid;gap:9px;padding:12px;border:1px solid #d7e4ed;border-radius:12px;background:#fff}
.production-variable-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.production-variable-group-head>div{display:grid;gap:2px}.production-variable-group-head>div>span{font-size:12px;color:var(--muted)}
.production-variable-total{font-size:13px;font-weight:800;white-space:nowrap}.production-variable-total.ok{color:#16774a}.production-variable-total.error{color:#b42318}
.production-variable-allocations{display:grid;gap:7px}
.production-variable-allocation{display:grid;grid-template-columns:minmax(240px,1fr) 120px 48px auto;gap:7px;align-items:center}
.production-variable-unit{font-weight:800;color:var(--muted);text-align:center}
.production-variable-add{justify-self:start}
.production-variable-check-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.production-variable-check{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.production-variable-check input{width:20px;height:20px;flex:0 0 20px}
.production-variable-check>span{display:grid;gap:2px;min-width:0}.production-variable-check strong{overflow-wrap:anywhere}.production-variable-check small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.production-variable-check:has(input:checked){border-color:#7fb5d6;background:#eef7fc}.production-variable-check.stock-insufficient{border-color:#d98a83;background:#fff4f2}
.variable-selection-detail{display:grid;gap:8px;margin:8px 0 18px}.variable-selection-detail section{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fbfd}.variable-selection-detail ul{margin:6px 0 0 18px;padding:0}
#recordDetailDialog>.dialog-actions{margin-top:0}

@media(max-width:850px){
  .variable-group-config-head{grid-template-columns:1fr 1fr}.variable-group-delete{grid-column:1/-1}
  .production-variable-allocation{grid-template-columns:1fr 110px 42px auto}
}
@media(max-width:600px){
  .variable-group-config-head,.variable-option-config-row,.production-variable-allocation{grid-template-columns:1fr}
  .variable-category-add{grid-template-columns:1fr}
  .variable-option-heading,.production-variable-group-head{align-items:stretch;flex-direction:column}
  .production-variable-unit{text-align:left}.production-variable-add{width:100%}
}
@media(max-width:720px){
  body.mobile-ui .variable-bom-config{margin-top:14px;padding-top:14px}
  body.mobile-ui .variable-group-config{padding:10px}
  body.mobile-ui .variable-group-config-head,body.mobile-ui .variable-option-config-row{grid-template-columns:1fr}
  body.mobile-ui .variable-group-delete{grid-column:1/-1;width:100%;min-width:0;white-space:nowrap}
  body.mobile-ui .variable-option-heading{display:grid;grid-template-columns:1fr;align-items:stretch}
  body.mobile-ui .variable-option-heading button,body.mobile-ui .variable-category-add button{width:100%}
  body.mobile-ui .variable-category-add{grid-template-columns:1fr}
  body.mobile-ui .production-variable-inputs{padding:10px;gap:9px}
  body.mobile-ui .production-variable-group{padding:9px}
  body.mobile-ui .production-variable-group-head{display:grid;grid-template-columns:1fr;gap:5px}
  body.mobile-ui .production-variable-allocation{grid-template-columns:1fr;gap:6px;padding:8px;border:1px solid #e6edf2;border-radius:10px}
  body.mobile-ui .production-variable-unit{text-align:left}
  body.mobile-ui .production-variable-add{width:100%}
  body.mobile-ui #recordDetailDialog>.dialog-actions{grid-template-columns:1fr 1fr}
}

/* Step9: pending usability + audit + A4 PDF + admin visibility */
.settings-admin-notice{margin:14px 0 0!important;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#f8fbfd;color:var(--muted)!important}
.item-history-section{margin:0 22px 18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fbfdfe}
.item-history-list{display:grid;gap:8px}
.item-history-row{display:grid;gap:7px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.item-history-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.item-history-meta>span{flex:0 0 auto;color:var(--muted);font-size:12px;text-align:right}
.item-history-change{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr);gap:8px;padding-top:5px;border-top:1px solid #edf2f5;font-size:13px}
.item-history-change>span{overflow-wrap:anywhere}
#itemDialog .dialog-header{padding-left:22px;padding-right:22px}
.item-dialog-scroll-body{display:contents}

/* A4 landscape usable width: keep the rendered DOM comfortably inside 297mm minus margins. */
.pdf-report-host{width:1040px}
.pdf-report{width:1040px!important;max-width:1040px;padding:0!important;box-sizing:border-box}
.pdf-render-page{width:1040px;max-width:1040px;padding:16px;box-sizing:border-box;background:#fff;color:#111}
.pdf-table{width:100%;table-layout:fixed;font-size:10px}
.pdf-table th,.pdf-table td{padding:5px 6px;overflow-wrap:anywhere;word-break:break-word}
.pdf-table th:nth-child(1),.pdf-table td:nth-child(1){width:64%!important}
.pdf-table th:nth-child(2),.pdf-table td:nth-child(2){width:10%!important}
.pdf-table th:nth-child(3),.pdf-table td:nth-child(3){width:13%!important}
.pdf-table th:nth-child(4),.pdf-table td:nth-child(4){width:13%!important}
.pdf-table th:nth-child(n+5),.pdf-table td:nth-child(n+5){width:auto!important}
.pdf-table .pdf-number{white-space:nowrap}
.pdf-category{break-before:page!important;page-break-before:always!important;break-inside:auto}
.pdf-category:first-child{break-before:auto!important;page-break-before:auto!important}
.pdf-category:not(:first-child){break-before:page!important;page-break-before:always!important}
.pdf-table tr{break-inside:avoid;page-break-inside:avoid}
.pdf-grand-total{min-height:700px;display:grid;place-items:center;text-align:center}

@media(max-width:720px){
  /* iOS Safari does not auto-zoom focused fields at 16px or above. Keep this browser-neutral. */
  body.mobile-ui input,body.mobile-ui select,body.mobile-ui textarea{font-size:16px!important}
  body.mobile-ui #view-inventory>.toolbar input[type=search],body.mobile-ui #view-inventory>.toolbar select{font-size:16px!important}
  body.mobile-ui .inventory-mobile-qty input{font-size:16px!important}

  /* Price/value live in Detail on mobile; the list only needs the operational stock number. */
  body.mobile-ui .inventory-mobile-metrics{grid-template-columns:minmax(0,1fr);margin-top:6px}
  body.mobile-ui .inventory-mobile-metrics>div{padding:5px 7px}
  body.mobile-ui .inventory-mobile-metrics strong{font-size:15px}
  body.mobile-ui .inventory-mobile-card{padding:9px}

  /* New Item + Detail/Edit use the whole work screen. Header and save/actions never disappear. */
  body.mobile-ui #itemDialog{width:100vw!important;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;border-radius:0;overflow:hidden}
  body.mobile-ui #itemDialog #itemForm{height:100%;max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding:0!important}
  body.mobile-ui #itemDialog .dialog-header{position:relative;z-index:20;padding:max(10px,env(safe-area-inset-top)) 12px 9px;background:#fff;border-bottom:1px solid var(--line)}
  body.mobile-ui #itemDialog .item-dialog-scroll-body{display:block;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.mobile-ui #itemDialog .item-dialog-actions{position:relative;z-index:20;background:#fff;padding-bottom:max(8px,env(safe-area-inset-bottom));box-shadow:0 -8px 20px rgba(16,44,68,.08)}
  body.mobile-ui #itemDialog .item-media-section,body.mobile-ui #itemDialog .item-history-section{margin-left:12px;margin-right:12px}
  body.mobile-ui .item-history-section{margin:0 12px 10px;padding:10px;border-radius:11px}
  body.mobile-ui .item-history-meta{display:grid;gap:3px}
  body.mobile-ui .item-history-meta>span{text-align:left}
  body.mobile-ui .item-history-change{grid-template-columns:1fr;gap:3px;font-size:12px}
  body.mobile-ui #itemDialog .dialog-left-actions{grid-template-columns:1fr 1fr}
  body.mobile-ui #itemDialog .dialog-actions-right{grid-template-columns:1fr}
}

/* Step9.2: variable BOM usage-unit -> inventory-unit conversion */
.production-variable-conversion{grid-column:1/-1;margin-top:-3px;padding:7px 10px;border-radius:8px;background:#f6f9fb;line-height:1.45}
.production-variable-conversion.ok{color:var(--success);background:#eef8f2}
.production-variable-conversion.error{color:var(--danger);background:#fff1f0;font-weight:700}
@media(max-width:700px){.production-variable-conversion{margin-top:0}}

/* Step10: mobile production date/month controls and shared variable BOM */
@media(max-width:720px){
  body.mobile-ui #view-molding .filter-row,body.mobile-ui #view-rigging .filter-row{grid-template-columns:1fr!important;gap:7px}
  body.mobile-ui .production-month-filter{width:100%;max-width:100%;min-width:0;box-sizing:border-box;grid-template-columns:auto minmax(0,1fr);padding:0 9px;min-height:40px}
  body.mobile-ui .production-month-filter input[type="month"]{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:7px 0;font-size:16px!important;color:var(--text);background:transparent;color-scheme:light}
  body.mobile-ui #moldingDate,body.mobile-ui #riggingDate{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;color:var(--text);background:#fff;color-scheme:light}
  body.mobile-ui .production-variable-inputs{padding:9px;gap:8px}
  body.mobile-ui .production-variable-group{padding:9px}
  body.mobile-ui .production-variable-group-head{display:grid;grid-template-columns:1fr;gap:5px}
  body.mobile-ui .production-variable-allocation{grid-template-columns:1fr;gap:6px;padding:8px;border:1px solid #e6edf2;border-radius:10px}
  body.mobile-ui .production-variable-unit{text-align:left}
  body.mobile-ui .production-variable-add{width:100%}
  body.mobile-ui .production-variable-check-list{grid-template-columns:1fr}
  body.mobile-ui .production-variable-check{min-height:48px;padding:9px 10px}
}


/* Step13: inventory alerts, compact item history, and stable iPhone item dialog. */
.inventory-alert-mark{display:inline-block;margin-left:4px;font-size:.95em;line-height:1;vertical-align:baseline}
.item-alert-box{margin:14px 22px 0;padding:11px 13px;border:1px solid #f0b8b2;border-radius:10px;background:#fff1f0;color:var(--danger);font-weight:800;line-height:1.55}
.item-alert-box>div+div{margin-top:4px}
.item-history-toggle{width:100%;margin-top:2px}
@media(max-width:720px){
  body.mobile-ui #itemDialog[open]{
    position:fixed!important;
    inset:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:none!important;
    border-radius:0!important;
  }
  body.mobile-ui #itemDialog .dialog-header{
    padding-top:calc(10px + env(safe-area-inset-top))!important;
  }
  body.mobile-ui #itemDialog .item-alert-box{margin:10px 12px 0;padding:9px 10px;font-size:12px}
}

/* Step16 shared item media library */
.item-media-heading>button{flex:0 0 auto;white-space:nowrap}
.pending-file.pending-shared-file{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.pending-shared-file span,.pending-shared-file small{display:block;min-width:0;overflow-wrap:anywhere}
.media-library-dialog{width:min(920px,calc(100vw - 24px));max-width:920px}
.media-library-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 22px 14px}
.media-library-toolbar label{flex:1;max-width:520px}
.media-library-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;max-height:min(66vh,680px);overflow:auto;padding:0 22px 22px}
.media-library-card{display:grid;gap:8px;padding:9px;border:1px solid var(--line);border-radius:12px;background:#fff}
.media-library-card .image-open{display:block;overflow:hidden;border-radius:9px;background:#f3f6f8}
.media-library-card img{display:block;width:100%;height:140px;object-fit:cover}
.media-library-info{min-width:0}.media-library-info strong,.media-library-info small{display:block;overflow-wrap:anywhere}.media-library-info small{margin-top:3px;color:var(--muted);font-size:12px}
.media-library-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--line);border-radius:11px;background:#fff}
.media-library-row>div:first-child{min-width:0}.media-library-row strong,.media-library-row span,.media-library-row small{display:block;overflow-wrap:anywhere}.media-library-row span,.media-library-row small{margin-top:3px;color:var(--muted);font-size:12px}
.media-library-list button:disabled{opacity:.55;cursor:default}
@media(max-width:720px){
  body.mobile-ui .item-media-heading{display:grid;grid-template-columns:1fr;gap:8px}
  body.mobile-ui .item-media-heading>button{width:100%}
  body.mobile-ui .media-library-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  body.mobile-ui .media-library-toolbar{display:grid;grid-template-columns:1fr;padding:0 12px 10px}
  body.mobile-ui .media-library-list{grid-template-columns:1fr 1fr;gap:8px;max-height:none;padding:0 12px 24px}
  body.mobile-ui .media-library-card img{height:110px}
  body.mobile-ui .media-library-row{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:8px}
  body.mobile-ui .media-library-row .media-actions{grid-template-columns:1fr 1fr}
}
.pending-file.pending-shared-file{display:grid}.pending-file.pending-shared-file small{white-space:normal}

/* Step18: shared file library management */
.file-library-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 180px 180px;gap:10px;margin:14px 0 8px}
.file-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.file-library-card{display:grid;grid-template-rows:auto auto auto;gap:9px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#fff;min-width:0}
.file-library-thumb{display:block;width:100%;height:160px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#eef2f5;cursor:pointer}
.file-library-thumb:hover{filter:none;transform:none}.file-library-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.file-library-card-info{min-width:0}.file-library-card-info strong,.file-library-card-info span,.file-library-card-info small{display:block;overflow-wrap:anywhere}.file-library-card-info span,.file-library-card-info small{margin-top:3px;color:var(--muted);font-size:12px}
.file-library-document-icon{display:grid;place-items:center;width:100%;height:160px;border:0;border-radius:10px;background:#f1f4f6;color:#51616f;font-size:34px;font-weight:800;letter-spacing:.08em;cursor:pointer}
.file-library-document-icon:hover{filter:none;transform:none;background:#e8eef2}
.file-library-edit-dialog{width:min(980px,calc(100vw - 24px));max-width:980px}
.file-library-edit-body{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);gap:20px;padding:0 22px 18px}
.file-library-preview{display:grid;place-items:center;min-height:280px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#f4f7f9}
.file-library-preview img{display:block;width:100%;max-height:460px;object-fit:contain}
.file-library-large-document{font-size:30px;font-weight:800;color:#6b7a86;letter-spacing:.08em}
.file-library-edit-fields{display:grid;align-content:start;gap:14px}
.file-library-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.file-library-meta>div{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fbfcfd}.file-library-meta span,.file-library-meta strong{display:block}.file-library-meta span{font-size:11px;color:var(--muted);margin-bottom:2px}
.file-library-usage-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.file-library-edit-actions{display:flex;gap:8px;flex-wrap:wrap}
.file-library-management-section{margin:0 22px 16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdfe}.file-library-management-section h3{margin:0 0 3px}.file-library-management-section p{margin:0;color:var(--muted);font-size:13px}.file-library-management-section>input[type=file]{display:block;width:100%;margin:12px 0 9px}
.file-library-resize-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px;margin:12px 0 8px}.file-library-resize-presets{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.file-library-management-section.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:16px;border-color:#f2b7b7;background:#fff8f8}.file-library-management-section.danger-zone h3{color:#9a1d1d}
@media(max-width:720px){
  body.mobile-ui .file-library-toolbar{grid-template-columns:1fr;gap:7px}
  body.mobile-ui .file-library-grid{grid-template-columns:1fr 1fr;gap:8px}
  body.mobile-ui .file-library-card{padding:7px;gap:7px}
  body.mobile-ui .file-library-thumb,body.mobile-ui .file-library-document-icon{height:115px}
  body.mobile-ui .file-library-edit-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  body.mobile-ui .file-library-edit-body{grid-template-columns:1fr;padding:0 12px 12px;gap:12px}
  body.mobile-ui .file-library-preview{min-height:190px;max-height:320px}
  body.mobile-ui .file-library-preview img{max-height:320px}
  body.mobile-ui .file-library-meta{grid-template-columns:1fr 1fr}
  body.mobile-ui .file-library-management-section{margin:0 12px 10px;padding:11px}
  body.mobile-ui .file-library-resize-grid{grid-template-columns:1fr 1fr}.file-library-resize-grid .check-card{grid-column:1/-1}
  body.mobile-ui .file-library-management-section.danger-zone{display:grid;grid-template-columns:1fr}
}

/* Step19: image crop + Excel quote preview */
.image-crop-dialog{width:min(1040px,calc(100vw - 24px));max-width:1040px}
.image-crop-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:0 22px 12px}
.image-crop-toolbar label{min-width:150px}.image-crop-toolbar .muted{flex:1;min-width:220px}
.image-crop-canvas-wrap{margin:0 22px 14px;padding:10px;display:grid;place-items:center;overflow:auto;max-height:66vh;border:1px solid var(--line);border-radius:12px;background:#20262b;touch-action:none}
.image-crop-canvas-wrap canvas{display:block;max-width:100%;height:auto;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.image-crop-save-row{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 22px 20px}.image-crop-save-row label{min-width:min(360px,100%)}
.excel-preview-dialog{width:min(1180px,calc(100vw - 24px));max-width:1180px}
.excel-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 22px 8px}.excel-preview-sheets{display:flex;gap:6px;flex-wrap:wrap;min-width:0}.excel-preview-sheets button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#excelPreviewNotice{padding:0 22px;margin:5px 0 8px}
.excel-preview-table-wrap{margin:0 22px 22px;max-height:68vh;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.excel-preview-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:13px}.excel-preview-table th,.excel-preview-table td{min-width:90px;max-width:360px;padding:6px 8px;border:1px solid #dfe5e9;white-space:pre-wrap;overflow-wrap:anywhere;vertical-align:top}.excel-preview-table thead th,.excel-preview-table tbody th{position:sticky;background:#f3f6f8;font-weight:700;z-index:2}.excel-preview-table thead th{top:0}.excel-preview-table tbody th{left:0;min-width:44px;width:44px;text-align:right;color:var(--muted)}.excel-preview-table thead th:first-child{left:0;z-index:3;min-width:44px;width:44px}
@media(max-width:760px){
  body.mobile-ui .image-crop-dialog,body.mobile-ui .excel-preview-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  body.mobile-ui .image-crop-toolbar{padding:0 12px 8px;display:grid;grid-template-columns:1fr 1fr}body.mobile-ui .image-crop-toolbar .muted{grid-column:1/-1;min-width:0}
  body.mobile-ui .image-crop-canvas-wrap{margin:0 12px 10px;max-height:58vh;padding:6px}
  body.mobile-ui .image-crop-save-row{display:grid;grid-template-columns:1fr;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
  body.mobile-ui .excel-preview-toolbar{padding:0 12px 8px;display:grid;grid-template-columns:1fr}body.mobile-ui #excelPreviewNotice{padding:0 12px}.excel-preview-table-wrap{margin:0 12px 16px;max-height:70vh}
}

/* Step21: configurable inventory fields, safer mobile file-library layout, persistent dark theme. */
.theme-setting-card{max-width:420px;background:var(--card)}
.inventory-field-settings-list{display:grid;gap:9px}
.inventory-field-setting-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);min-width:0}
.inventory-field-setting-row.archived{opacity:.68}
.inventory-field-setting-main{min-width:0}.inventory-field-setting-main strong,.inventory-field-setting-main span{display:block;overflow-wrap:anywhere}.inventory-field-setting-main span{margin-top:3px;color:var(--muted);font-size:12px}
.inventory-field-setting-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.inventory-field-definition-form textarea{resize:vertical}
.item-custom-field-section{margin:0 22px 16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.item-custom-field-section .panel-title{margin-bottom:10px}
.item-custom-fields-grid{padding:0;grid-template-columns:1fr 1fr}
.dynamic-custom-field{position:relative;display:grid;gap:5px;min-width:0}
.dynamic-custom-field-head{display:flex;justify-content:flex-end;min-height:0}
.dynamic-custom-field-head:empty{display:none}
.dynamic-custom-field-control{min-width:0}
.custom-field-settings-btn{padding:5px 8px;font-size:11px;line-height:1.15}

/* A long storage filename must never widen a mobile dialog. */
.file-library-edit-dialog,.file-library-edit-dialog *{min-width:0}
.file-library-edit-dialog{overflow-x:hidden}
.file-library-edit-dialog .dialog-header>div{min-width:0;max-width:100%}
.file-library-edit-dialog .dialog-header h2,.file-library-edit-dialog .dialog-header p,
.file-library-edit-fields label,.file-library-meta,.file-library-usage-list{overflow-wrap:anywhere;word-break:break-word}
.file-library-edit-dialog input,.file-library-edit-dialog select,.file-library-edit-dialog textarea{max-width:100%;min-width:0}
.file-library-edit-dialog .dialog-header>[data-close-dialog]{flex:0 0 auto;white-space:nowrap}

@media(max-width:720px){
  body.mobile-ui .inventory-field-setting-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  body.mobile-ui .inventory-field-setting-state{grid-column:1/-1;justify-content:flex-start}
  body.mobile-ui .item-custom-field-section{margin:0 12px 10px;padding:11px}
  body.mobile-ui .item-custom-fields-grid{grid-template-columns:1fr}
  body.mobile-ui .item-custom-fields-grid .span2{grid-column:auto}
  body.mobile-ui .inventory-field-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;overflow-x:hidden}
  body.mobile-ui .inventory-field-dialog .dialog-header{padding-top:calc(12px + env(safe-area-inset-top))}

  body.mobile-ui .file-library-edit-dialog{
    width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;
    overflow-x:hidden;overscroll-behavior:contain;
  }
  body.mobile-ui .file-library-edit-dialog .dialog-header{
    position:sticky;top:0;z-index:30;align-items:center;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    background:var(--card);border-bottom:1px solid var(--line);
  }
  body.mobile-ui .file-library-edit-dialog .dialog-header>div{flex:1 1 auto;min-width:0;overflow:hidden}
  body.mobile-ui .file-library-edit-dialog .dialog-header h2{font-size:20px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  body.mobile-ui .file-library-edit-dialog .dialog-header p{font-size:12px;white-space:normal;overflow-wrap:anywhere;word-break:break-all}
  body.mobile-ui .file-library-edit-dialog .dialog-header>[data-close-dialog]{align-self:flex-start;margin-top:1px;flex:0 0 auto}
  body.mobile-ui .file-library-edit-body{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr);overflow-x:hidden}
  body.mobile-ui .file-library-edit-fields,body.mobile-ui .file-library-management-section{width:auto;max-width:calc(100vw - 24px);overflow:hidden}
  body.mobile-ui .file-library-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.mobile-ui .file-library-resize-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Persistent dark-gray theme. theme-init.js applies this before CSS paints. */
html[data-theme="dark"]{
  color-scheme:dark;
  --navy:#263b4b;--navy-dark:#171d22;--blue:#3f91c2;--bg:#20252a;--card:#2a3036;
  --line:#47525c;--text:#f1f4f6;--muted:#aeb9c2;--danger:#d95c55;--success:#58c58a;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .media-library-card,
html[data-theme="dark"] .media-library-row,
html[data-theme="dark"] .file-library-card,
html[data-theme="dark"] .item-custom-field-section,
html[data-theme="dark"] .inventory-field-setting-row{background:var(--card);color:var(--text)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:#343b42;color:var(--text);border-color:#56636e}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#8f9ca6}
html[data-theme="dark"] button.secondary{background:#39434b;color:var(--text);border-color:#56636e}
html[data-theme="dark"] .tabs button{color:#c7d2da}
html[data-theme="dark"] .tabs button.active{background:#354654;color:#fff}
html[data-theme="dark"] th{background:#30373d;color:#c9d3da}
html[data-theme="dark"] .container-summary>div,
html[data-theme="dark"] .capacity-panel,
html[data-theme="dark"] .file-library-meta>div,
html[data-theme="dark"] .file-library-management-section,
html[data-theme="dark"] .production-card,
html[data-theme="dark"] .bom-group,
html[data-theme="dark"] .record-card,
html[data-theme="dark"] .mobile-card,
html[data-theme="dark"] .inventory-mobile-card{background:#2d343a;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .file-library-preview,
html[data-theme="dark"] .file-library-thumb,
html[data-theme="dark"] .file-library-document-icon,
html[data-theme="dark"] .media-library-card .image-open,
html[data-theme="dark"] .inventory-thumb{background:#252b30;color:var(--muted)}
html[data-theme="dark"] .inventory-thumb img{background:#2a3036}
html[data-theme="dark"] .file-library-document-icon:hover{background:#343d44}
html[data-theme="dark"] .file-library-management-section.danger-zone{background:#39292a;border-color:#7a4644}
html[data-theme="dark"] .check-card{background:#30373d;border-color:var(--line)}
html[data-theme="dark"] #itemWholesalePriceField.field-disabled input{background:#282e33;color:#81909b}
html[data-theme="dark"] .flag{background:#344653;color:#d6e7f2}
html[data-theme="dark"] .flag.green,html[data-theme="dark"] .status-chip.arrived{background:#254637;color:#8de0b1}
html[data-theme="dark"] .flag.orange,html[data-theme="dark"] .status-chip{background:#4b3b27;color:#f1c985}
html[data-theme="dark"] .badge{background:#405360;color:#e5eef4}
html[data-theme="dark"] .image-crop-canvas-wrap{background:#161a1e}
html[data-theme="dark"] .excel-preview-table td,html[data-theme="dark"] .excel-preview-table th{border-color:var(--line)}
html[data-theme="dark"] dialog::backdrop{background:rgba(5,8,10,.72)}
html[data-theme="dark"] body.mobile-ui #itemDialog .item-dialog-actions,
html[data-theme="dark"] body.mobile-ui .file-library-edit-dialog .dialog-header{background:var(--card)}
html[data-theme="dark"] .item-media-section,
html[data-theme="dark"] .item-history-section,
html[data-theme="dark"] .container-form,
html[data-theme="dark"] .production-variable-group,
html[data-theme="dark"] .variable-group-editor,
html[data-theme="dark"] .production-media-section,
html[data-theme="dark"] .record-detail-section{background:#2d343a;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .file-drop-zone{background:#292f35;border-color:#56636e;color:var(--text)}
html[data-theme="dark"] .file-drop-zone.dragging{background:#344653;border-color:var(--blue)}
html[data-theme="dark"] .split-menu,
html[data-theme="dark"] .split-menu button,
html[data-theme="dark"] .production-month-filter,
html[data-theme="dark"] body.mobile-ui .tabs,
html[data-theme="dark"] body.mobile-ui .table-panel .panel-title,
html[data-theme="dark"] body.mobile-ui .table-wrap tr,
html[data-theme="dark"] body.mobile-ui #inventoryBody td:nth-child(1),
html[data-theme="dark"] body.mobile-ui .dialog-header,
html[data-theme="dark"] body.mobile-ui .dialog-actions,
html[data-theme="dark"] body.mobile-ui .component-row,
html[data-theme="dark"] .product-config-empty,
html[data-theme="dark"] body.mobile-ui .inventory-mobile-empty,
html[data-theme="dark"] .item-image-card,
html[data-theme="dark"] .item-quote-row,
html[data-theme="dark"] .record-photo,
html[data-theme="dark"] .variable-group-config,
html[data-theme="dark"] .production-variable-inputs,
html[data-theme="dark"] .production-variable-check,
html[data-theme="dark"] .variable-selection-detail section,
html[data-theme="dark"] .settings-admin-notice,
html[data-theme="dark"] .item-history-row,
html[data-theme="dark"] .excel-preview-table-wrap{background:#2d343a;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .excel-preview-table thead th,html[data-theme="dark"] .excel-preview-table tbody th{background:#343c43;color:var(--text)}
html[data-theme="dark"] body.mobile-ui #moldingDate,html[data-theme="dark"] body.mobile-ui #riggingDate{background:#343b42;color:var(--text)}


/* Step22: mobile dark-mode inventory stock card must match the desktop dark palette. */
html[data-theme="dark"] body.mobile-ui .inventory-mobile-metrics>div{
  background:#343b42;
  color:var(--text);
  border:1px solid #4b5862;
}
html[data-theme="dark"] body.mobile-ui .inventory-mobile-metrics span{color:#aebbc5}
html[data-theme="dark"] body.mobile-ui .inventory-mobile-metrics strong{color:var(--text)}
html[data-theme="dark"] body.mobile-ui .inventory-mobile-metrics strong.stock-low{color:var(--danger)}


/* Step25: dark-mode contrast sweep. Keep light-only surfaces from becoming white-on-white. */
html[data-theme="dark"] .product-config-item,
html[data-theme="dark"] .pending-file{background:#39434b;color:var(--text);border-color:#56636e}
html[data-theme="dark"] .product-config-item.active{background:#354e60;color:#fff;outline-color:rgba(63,145,194,.34)}
html[data-theme="dark"] .production-variable-check:has(input:checked){background:#314857;border-color:#5f92b0;color:var(--text)}
html[data-theme="dark"] .production-variable-check.stock-insufficient{background:#452f30;border-color:#89504d;color:var(--text)}
html[data-theme="dark"] .production-variable-conversion{background:#30373d;color:var(--text)}
html[data-theme="dark"] .production-variable-conversion.ok{background:#274036;color:#8fe0b2}
html[data-theme="dark"] .production-variable-conversion.error{background:#452f30;color:#ef9a95}
html[data-theme="dark"] .item-alert-box{background:#452f30;border-color:#89504d;color:#ef9a95}
html[data-theme="dark"] .capacity-track{background:#273038;border-color:#47545e}
html[data-theme="dark"] body.mobile-ui #itemDialog .dialog-header,
html[data-theme="dark"] body.mobile-ui #itemDialog .item-dialog-actions{background:var(--card);color:var(--text);border-color:var(--line)}

/* Step26: production custom fields / source-grouped file library / phone sales */
.file-library-toolbar{grid-template-columns:minmax(220px,1fr) 150px 150px 160px}
.source-chip{display:inline-flex!important;width:max-content;align-items:center;margin-top:5px!important;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:#f4f7f9;color:var(--text)!important;font-size:11px!important;font-weight:700}
.source-chip.source-molding{background:#eef6fb}.source-chip.source-rigging{background:#f1f7ee}.source-chip.source-other{background:#f5f2f8}
.file-library-private-placeholder{display:grid!important;place-items:center;width:100%;height:100%;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.settings-file-library-section .panel-title{margin-bottom:0}
.production-record-form-grid>[data-production-field],.production-custom-field{min-width:0}
.production-custom-fields{display:contents}
.production-field-manager-dialog{width:min(980px,calc(100vw - 24px));max-width:980px}
.production-field-manager-layout{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(360px,1.3fr);gap:18px;padding:0 22px 22px}
.production-field-manager-layout>aside{display:grid;align-content:start;gap:10px;min-width:0}
.production-field-list{display:grid;gap:7px;max-height:58vh;overflow:auto;padding-right:2px}
.production-field-list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.production-field-list-item>button:first-child{display:block;width:100%;text-align:left;background:transparent;color:var(--text);border:0;border-radius:0;padding:10px}
.production-field-list-item>button:first-child:hover{transform:none;filter:none;background:#eef4f7}
.production-field-list-item strong,.production-field-list-item small{display:block;overflow-wrap:anywhere}.production-field-list-item small{margin-top:3px;color:var(--muted);font-weight:400}
.production-field-list-item.active{outline:2px solid rgba(31,119,171,.22);border-color:#82aec8}.production-field-list-item.archived{opacity:.65}
.production-field-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;min-width:0}
.production-field-form>label:not(.check-card){display:grid;gap:5px}.production-field-form .span2{grid-column:1/-1}
.phone-sales-notes{max-width:440px;white-space:normal;overflow-wrap:anywhere}
.phone-sales-dynamic-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}.phone-sales-dynamic-filters label{display:grid;gap:4px;min-width:180px}.phone-sales-dynamic-filters label>span{font-size:12px;font-weight:700;color:var(--muted)}
.phone-sales-past-field{opacity:.9}.phone-sales-readonly-value{min-height:42px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;background:var(--bg);white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){
  .production-field-manager-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .production-field-manager-layout{grid-template-columns:1fr;padding:0 12px 16px;gap:12px}.production-field-list{max-height:32vh}.production-field-form{grid-template-columns:1fr}.production-field-form .span2{grid-column:1}
}
html[data-theme="dark"] .source-chip{background:#30373d;border-color:#4b555c;color:var(--text)!important}
html[data-theme="dark"] .source-chip.source-molding{background:#2c3e49}html[data-theme="dark"] .source-chip.source-rigging{background:#303f32}html[data-theme="dark"] .source-chip.source-other{background:#3a3342}
html[data-theme="dark"] .production-field-list-item{background:var(--card);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .production-field-list-item>button:first-child{color:var(--text)}
html[data-theme="dark"] .production-field-list-item>button:first-child:hover{background:#303a41}
html[data-theme="dark"] .production-field-list-item.active{background:#354e60;border-color:#5f92b0;outline-color:rgba(63,145,194,.34)}
.production-record-form-grid>.production-variable-inputs{order:9000}

/* Step27: robust production-field list scrolling + cashbook/accounting */
.production-field-manager-layout>aside{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  min-width:0;
  min-height:0;
  max-height:min(68vh,680px);
}
.production-field-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:2px 5px 6px 2px;
  scrollbar-gutter:stable;
}
.production-field-list-item{flex:0 0 auto;min-height:64px}
.production-field-list-item>button:first-child{min-height:62px;display:flex;flex-direction:column;justify-content:center}
.production-field-list-item small{line-height:1.45}

.source-chip.source-accounting{background:#fff7df}
.cashbook-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.cashbook-metrics article{display:grid;gap:5px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cashbook-metrics span{color:var(--muted);font-size:12px;font-weight:700}.cashbook-metrics strong{font-size:22px}
.accounting-documents-panel{margin-top:14px}
.accounting-status{display:inline-flex;align-items:center;width:max-content;padding:3px 8px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:800;background:#eef2f5}
.accounting-status.status-booked{background:#eaf7ef;color:#21633d;border-color:#a9d8bb}.accounting-status.status-evidence_only{background:#fff7df;color:#725b15;border-color:#dec66f}.accounting-status.status-draft{background:#eef2f5;color:#4d5961}
.accounting-capture-dialog{width:min(1080px,calc(100vw - 24px));max-width:1080px}
.accounting-capture-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);gap:18px;padding:0 22px 16px;min-width:0}
.accounting-evidence-pane,.accounting-review-pane{min-width:0}
.accounting-evidence-pane{display:flex;flex-direction:column;gap:10px}
.accounting-evidence-preview{min-height:300px;max-height:52vh;display:grid;place-items:center;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:#f5f7f8}
.accounting-evidence-preview img{display:block;max-width:100%;max-height:48vh;object-fit:contain;border-radius:6px}
.accounting-evidence-preview .file-library-large-document{min-height:150px}
.accounting-book-check{margin-top:12px}.accounting-review-pane .form-grid{padding:0}.accounting-review-pane textarea{resize:vertical}

html[data-theme="dark"] .source-chip.source-accounting{background:#4a4128}
html[data-theme="dark"] .cashbook-metrics article{background:#2d343a;border-color:var(--line)}
html[data-theme="dark"] .accounting-status{background:#343c43;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .accounting-status.status-booked{background:#274036;color:#8fe0b2;border-color:#4b735d}
html[data-theme="dark"] .accounting-status.status-evidence_only{background:#4a4128;color:#ecd786;border-color:#756940}
html[data-theme="dark"] .accounting-evidence-preview{background:#252b30;border-color:var(--line)}

@media(max-width:760px){
  .production-field-manager-layout>aside{max-height:42dvh}
  .production-field-list{max-height:34dvh}
  .production-field-list-item{min-height:66px}
  .phone-sales-dynamic-filters{display:grid;grid-template-columns:1fr}.phone-sales-dynamic-filters label{min-width:0}
  .cashbook-metrics{grid-template-columns:1fr 1fr}
  .cashbook-metrics strong{font-size:18px}
  .accounting-capture-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .accounting-capture-layout{grid-template-columns:1fr;padding:0 12px 14px;gap:14px}
  .accounting-evidence-preview{min-height:220px;max-height:40dvh}.accounting-evidence-preview img{max-height:36dvh}
  body.mobile-ui .accounting-capture-dialog .dialog-header{position:sticky;top:0;z-index:20;background:var(--card);padding-top:calc(12px + env(safe-area-inset-top))}
}

/* Step30: modal feedback, phone-sales attachments, and mobile cashbook polish */
.dialog-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(560px,calc(100vw - 32px));
  padding:12px 16px;
  border-radius:10px;
  background:var(--navy-dark);
  color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  z-index:2147483647;
  text-align:center;
  font-size:14px;
  font-weight:700;
  pointer-events:none;
}
.phone-sales-attachment-section{margin:0 22px 16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.phone-sales-attachment-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
.phone-sales-attachment-heading h3{margin:0 0 3px}.phone-sales-attachment-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.phone-sales-file-picker{margin-bottom:10px}
.phone-sales-attachment-list{display:grid;gap:8px}
.phone-sales-attachment-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.phone-sales-attachment-row>div:first-child{min-width:0}.phone-sales-attachment-row strong,.phone-sales-attachment-row small{display:block;overflow-wrap:anywhere}.phone-sales-attachment-row small{margin-top:3px;color:var(--muted);font-weight:500}
.phone-sales-attachment-row.pending{border-style:dashed}
.source-chip.source-phone_sales{background:#e7f2fb;color:#245a7d}
html[data-theme="dark"] .source-chip.source-phone_sales{background:#2b4050;color:#b8d8ee}

@media(max-width:760px){
  body.mobile-ui #view-cashbook>.panel>.panel-title,
  body.mobile-ui #view-phone-sales>.panel>.panel-title{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
  body.mobile-ui #view-cashbook .header-actions{grid-template-columns:1fr 1fr}
  body.mobile-ui #view-cashbook #newAccountingCaptureBtn{grid-column:1/-1}
  body.mobile-ui #view-cashbook .header-actions button,
  body.mobile-ui #view-phone-sales .header-actions button{min-width:0;white-space:normal;line-height:1.25;min-height:44px}
  body.mobile-ui .phone-sales-attachment-section{margin:0 12px 12px;padding:11px}
  body.mobile-ui .phone-sales-attachment-row{grid-template-columns:1fr;align-items:stretch}
  body.mobile-ui .phone-sales-attachment-row .row-actions{grid-template-columns:1fr 1fr}
  body.mobile-ui .dialog-toast{bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);font-size:13px}
}

/* Step31: stable modal scrolling + clearer mobile phone-sales cards */
@media(min-width:761px){
  #phoneSalesDialog .dialog-header>[data-close-dialog]{
    flex:0 0 auto;
    width:auto;
    min-width:88px;
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
  }
}

@media(max-width:760px){
  /* Form dialogs scroll vertically only. Horizontal scrollers that are intentional
     (for example Excel preview tables) keep their own local overflow behavior. */
  body.mobile-ui dialog{
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }
  body.mobile-ui dialog>form,
  body.mobile-ui dialog>div:not(.dialog-toast),
  body.mobile-ui dialog .dialog-header,
  body.mobile-ui dialog .dialog-actions,
  body.mobile-ui dialog .form-grid{
    min-width:0;
    max-width:100%;
  }
  body.mobile-ui dialog>form{overflow-x:hidden}
  body.mobile-ui dialog input,
  body.mobile-ui dialog select,
  body.mobile-ui dialog textarea{
    min-width:0;
    max-width:100%;
  }
  body.mobile-ui #itemDialog .item-dialog-scroll-body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  body.mobile-ui .production-field-manager-layout,
  body.mobile-ui .accounting-capture-layout,
  body.mobile-ui .record-detail,
  body.mobile-ui .media-library-toolbar,
  body.mobile-ui .media-library-list,
  body.mobile-ui .file-library-edit-body{
    min-width:0;
    max-width:100%;
  }

  /* One phone-sales record must read as one obvious card while scrolling. */
  body.mobile-ui #phoneSalesBody{gap:16px}
  body.mobile-ui #phoneSalesBody tr{
    border-width:2px;
    border-color:#c5d7e2;
    box-shadow:inset 4px 0 0 var(--blue),0 4px 12px rgba(16,44,68,.08);
  }
  body.mobile-ui #phoneSalesBody tr:nth-child(odd){background:#fff}
  body.mobile-ui #phoneSalesBody tr:nth-child(even){background:#f0f5f8}
  body.mobile-ui #phoneSalesBody td{border-bottom-color:#d7e2e9}
  body.mobile-ui #phoneSalesBody td[data-label="会社名"]{background:rgba(63,145,194,.07)}

  html[data-theme="dark"] body.mobile-ui #phoneSalesBody tr{
    border-color:#596671;
    box-shadow:inset 4px 0 0 var(--blue),0 4px 12px rgba(0,0,0,.22);
  }
  html[data-theme="dark"] body.mobile-ui #phoneSalesBody tr:nth-child(odd){background:#2b3238}
  html[data-theme="dark"] body.mobile-ui #phoneSalesBody tr:nth-child(even){background:#333c43}
  html[data-theme="dark"] body.mobile-ui #phoneSalesBody td{border-bottom-color:#53606a}
  html[data-theme="dark"] body.mobile-ui #phoneSalesBody td[data-label="会社名"]{background:rgba(63,145,194,.14)}
}

/* Step32: paged long lists + inventory field manager moved into inventory */
.pagination-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.pagination-controls>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pagination-controls button{min-width:40px}
.pagination-controls button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pagination-controls button:disabled{opacity:.45;cursor:not-allowed}
.pagination-ellipsis{padding:0 2px}
.inventory-field-manager-dialog{width:min(900px,calc(100vw - 28px));max-width:900px}
.inventory-field-manager-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px 12px}
.inventory-field-manager-dialog .inventory-field-settings-list{padding:0 22px 14px;max-height:58vh;overflow-y:auto;overflow-x:hidden}
.inventory-field-manager-dialog>.muted{display:block;padding:0 22px 18px}
.container-history-filters{margin-bottom:8px}

@media(max-width:760px){
  body.mobile-ui .pagination-controls{display:grid;grid-template-columns:1fr;align-items:stretch;gap:8px}
  body.mobile-ui .pagination-controls>div{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  body.mobile-ui .pagination-controls button{flex:0 0 auto;min-height:40px}
  body.mobile-ui .inventory-field-manager-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  body.mobile-ui .inventory-field-manager-toolbar{display:grid;grid-template-columns:1fr;padding:0 12px 10px}
  body.mobile-ui .inventory-field-manager-dialog .inventory-field-settings-list{padding:0 12px 12px;max-height:none;overflow-y:visible}
  body.mobile-ui .inventory-field-manager-dialog>.muted{padding:0 12px 18px}
}
#view-inventory>.toolbar{grid-template-columns:minmax(240px,1fr) 200px auto auto auto auto auto}
@media(max-width:950px){
  #view-inventory>.toolbar{grid-template-columns:1fr 1fr}
  #view-inventory>.toolbar>:nth-child(1),#view-inventory>.toolbar>:nth-child(2),#view-inventory>.toolbar>:nth-child(3){grid-column:1/-1}
}
@media(max-width:760px){
  body.mobile-ui #view-inventory>.toolbar{grid-template-columns:1fr 1fr!important;gap:8px;padding:10px}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(1),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(2),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(3){grid-column:1/-1!important}
  body.mobile-ui #view-inventory>.toolbar>:nth-child(4),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(5),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(6),
  body.mobile-ui #view-inventory>.toolbar>:nth-child(7){grid-column:auto!important}
}

/* Website CMS admin (GH Industries + Horizon Walker) */
.website-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.website-site-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-left:auto}.website-site-actions label{display:flex;flex-direction:column;gap:6px;font-weight:700}.website-site-actions select{min-width:210px;padding:11px;border:1px solid #c8d8e4;border-radius:10px;background:#fff;color:#173044}.website-site-actions a{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:9px;border:1px solid #c8d8e4;text-decoration:none;color:#153447;font-weight:700}.website-accordion{border:1px solid #d4e0e8;border-radius:12px;margin-top:16px;overflow:hidden}.website-accordion>summary{list-style:none;cursor:pointer;padding:20px 22px;font-size:18px;font-weight:700;background:#f4f8fb;color:#133044}.website-accordion>summary::-webkit-details-marker{display:none}.website-accordion>summary small{display:block;font-size:13px;font-weight:400;color:#62788a;margin-top:5px}.website-accordion[open]>summary{border-bottom:1px solid #d4e0e8}.website-accordion>.settings-section{padding:22px;margin:0}.website-page-grid{display:grid;grid-template-columns:minmax(205px,280px) minmax(0,1fr);gap:23px}.website-page-side{display:flex;flex-direction:column;gap:12px}.website-page-list{display:flex;flex-direction:column;gap:5px;max-height:70vh;overflow:auto}.website-page-list button{text-align:left;cursor:pointer;border:1px solid #dde5eb;background:#fff;padding:11px;border-radius:8px;color:#123044}.website-page-list button[aria-selected=true]{background:#e7f2f5;border-color:#2b8397;font-weight:700}.website-page-list small{display:block;font-weight:400;color:#678;overflow-wrap:anywhere}.website-page-form{display:flex;flex-direction:column;gap:14px;min-width:0}.website-page-form input,.website-page-form textarea,.website-page-form select{display:block;width:100%;padding:10px;border:1px solid #c9d9e4;border-radius:9px;font:inherit;color:#143348}.website-page-form label{display:block;font-weight:700}.website-page-form label input,.website-page-form label textarea,.website-page-form label select{margin-top:6px;font-weight:400}.website-page-form textarea{resize:vertical}.website-page-buttons{display:flex;gap:10px;flex-wrap:wrap}.website-seo-accordion{padding:15px;border:1px solid #d6e4ed;border-radius:10px}.website-seo-accordion>summary{cursor:pointer;font-weight:700}.website-seo-accordion[open]>summary{margin-bottom:15px}.website-page-buttons button{min-height:44px}.website-page-form #websitePageSlug:disabled{background:#eef2f6;color:#697c88}@media(max-width:760px){.website-page-grid{grid-template-columns:1fr}.website-page-list{max-height:180px}.website-toolbar{align-items:flex-start}.website-site-actions{margin:0;justify-content:flex-start}}

/* Website CMS v3: true rendered-site preview and visual selection */
.website-live-section{border:1px solid #bcd8e4;border-radius:12px;background:#f7fbfe;padding:16px;min-width:0}
.website-live-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.website-live-title h4,.website-visual-controls h4{margin:0 0 4px;color:#12344b}
.website-live-title p{font-size:13px;margin:0}
.website-live-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr);gap:12px}
#websiteVisualFrame{display:block;border:1px solid #a8c4d2;background:white;border-radius:8px;width:100%;height:520px;min-width:0}
.website-visual-controls{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #d6e4ec;padding:14px;border-radius:8px;min-width:0}
.website-visual-controls p{font-size:12px}
.website-visual-controls input[readonly]{background:#f0f3f5}
@media(max-width:1050px){.website-live-grid{grid-template-columns:1fr}#websiteVisualFrame{height:450px}}

/* Website CMS v4: fixed-width responsive design preview, collapsible page list, safe typography controls */
.website-page-grid{grid-template-columns:minmax(205px,260px) minmax(0,1fr);transition:grid-template-columns .18s ease}
.website-page-side{min-width:0;align-self:start}
.website-page-sidebar-content{display:flex;flex-direction:column;gap:10px;min-width:0}
#websitePageSidebarToggle{width:100%;font-size:13px;min-height:43px;white-space:nowrap;overflow:hidden}
.website-page-grid.is-sidebar-collapsed{grid-template-columns:50px minmax(0,1fr);gap:12px}
.website-page-grid.is-sidebar-collapsed .website-page-sidebar-content{display:none}
.website-page-grid.is-sidebar-collapsed #websitePageSidebarToggle{padding:9px 5px;writing-mode:vertical-rl;min-height:122px;height:auto;white-space:normal}
.website-live-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.website-visual-toolbar{display:flex;align-items:end;justify-content:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.website-visual-toolbar label{font-weight:700;display:flex;flex-direction:column;gap:4px}
.website-visual-toolbar select{min-width:180px;padding:7px;border:1px solid #c8d8e4;border-radius:7px;background:#fff}
.website-visual-canvas{position:relative;overflow:hidden;width:100%;height:620px;min-width:0;background:#fff;border:1px solid #a8c4d2;border-radius:8px}
#websiteVisualFrame{position:absolute;top:0;left:0;display:block;border:0;border-radius:0;background:#fff;width:1440px;height:1000px;min-width:0;max-width:none;transform-origin:top left}
.website-visual-controls{display:flex;flex-direction:column;gap:10px}
.website-style-panel{border:1px solid #d6e4ec;background:#f8fafc;padding:12px;border-radius:8px}
.website-style-panel>strong{display:block;margin-bottom:4px}
.website-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.website-style-grid label{font-size:13px}
.website-style-grid .website-style-check{display:flex;align-items:center;gap:6px;align-self:end;min-height:40px}
.website-style-grid .website-style-check input{width:auto!important;margin:0!important}
.website-style-grid input[type=color]{height:42px;padding:4px}
@media(max-width:850px){.website-page-grid,.website-page-grid.is-sidebar-collapsed{grid-template-columns:minmax(0,1fr)}.website-page-grid.is-sidebar-collapsed #websitePageSidebarToggle{writing-mode:horizontal-tb;min-height:40px}.website-page-grid.is-sidebar-collapsed .website-page-sidebar-content{display:none}.website-page-list{max-height:180px}.website-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.website-style-grid{grid-template-columns:minmax(0,1fr)}}

/* V5: desktop-only visual website editing; no mobile entry point or deep-link access. */
body.mobile-ui #openWebsiteEditorBtn,body.mobile-ui #view-website{display:none!important}
@media(max-width:720px){#openWebsiteEditorBtn,#view-website{display:none!important}}

/* Contextual floating editor. Anchor follows clicked element in the scaled real-width iframe. */
.website-visual-canvas{isolation:isolate}
.website-visual-controls{position:absolute;z-index:15;left:8px;top:8px;width:340px;max-width:calc(100% - 12px);max-height:calc(100% - 12px);overflow:auto;box-shadow:0 12px 42px rgba(13,45,68,.32);border:2px solid #3486a3;background:#fff;padding:12px}
.website-visual-controls[hidden],#websiteVisualImageControls[hidden],#websiteVisualTextStyle[hidden]{display:none!important}
.website-floating-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-12px;background:#fff;z-index:1;border-bottom:1px solid #dce8ef;padding-bottom:8px}
.website-floating-head button{font-size:12px;padding:6px;min-height:32px}
.website-visual-controls .website-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.website-visual-controls textarea{min-height:70px}
.library-folder-pane{border:1px solid #d5e3ec;padding:12px;border-radius:12px;background:#f7fafc;margin-bottom:12px}
.library-folder-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.library-upload-label{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:8px;background:#e3eff5;border:1px solid #acc7d7;font-weight:700;cursor:pointer}
.library-folder-layout{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:12px;align-items:start}
.library-folder-tree{max-height:290px;overflow:auto;border:1px solid #d3e2e8;border-radius:8px;background:#fff;padding:5px;display:flex;flex-direction:column;gap:3px}
.library-folder-node{text-align:left;min-height:34px;padding:6px 10px;overflow-wrap:anywhere}
.library-folder-node[aria-current="true"]{background:#d9eff5;border-color:#3789a0;color:#123b52}
.library-folder-layout>strong{padding:12px 0}
.library-folder-asset-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:1px solid #d6e7ed;padding:10px;border-radius:8px}
.library-folder-asset-controls label{flex:1;min-width:170px}
.library-folder-asset-controls select{width:100%}
.website-image-library-dialog{width:min(900px,calc(100vw - 36px));max-width:900px;max-height:80dvh;overflow:auto}
.website-image-library-tools{display:flex;gap:12px;padding:12px 18px}.website-image-library-tools>*{flex:1;min-width:0}
.website-image-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;padding:12px 18px;max-height:50vh;overflow:auto}
.website-library-image-card{background:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid #bdd4e2;border-radius:8px;padding:8px;min-width:0}
.website-library-image-card img{object-fit:contain;width:100%;height:105px}
.website-library-image-card small{overflow-wrap:anywhere;font-size:12px;max-width:100%}
@media(max-width:760px){.library-folder-layout{grid-template-columns:1fr}.website-visual-controls{width:min(320px,calc(100% - 12px))}}

/* Website visual layout v6: keep controls close to selected elements */
.website-v6-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0;padding:8px;background:var(--surface,rgba(110,150,170,.08));border-radius:8px}
.website-layout-controls{margin:10px 0;padding:9px 0;border-block:1px solid rgba(120,140,170,.3)}
.website-layout-controls label{min-width:0}
.website-layout-controls input,.website-layout-controls select{max-width:100%;box-sizing:border-box}
.website-layout-controls input[type="checkbox"]{width:auto}
#websiteVisualControls:not([hidden]){z-index:60;max-height:min(78vh,660px);overflow-y:auto;overscroll-behavior:contain}
#websiteVisualControls[hidden]{display:none!important}
@media(max-width:767px){#openWebsiteEditorBtn,#view-website{display:none!important}}

/* CMS v7 editor history, draggable contextual popup and editor alignment markers. */
.website-floating-head{cursor:grab;user-select:none;touch-action:none}
.website-floating-head:active{cursor:grabbing}
.website-floating-head button{cursor:pointer;touch-action:auto}
.website-v6-tools button:disabled{opacity:.46;cursor:not-allowed}
.website-visual-controls.is-manually-moved{border-color:#1b748b}
/* Keep contextual toolbar movable even when many fields are visible. */
.website-visual-controls{max-height:min(440px,calc(100% - 16px))}
#websiteVisualControls:not([hidden]){max-height:min(440px,calc(100% - 16px))}

/* v8: section hierarchy and durable version controls. */
.website-section-editor,.website-version-editor{margin:12px 0;border:1px solid #d4e2e9;border-radius:10px;padding:10px;background:#f8fafc}
.website-section-editor summary,.website-version-editor summary{font-weight:750;cursor:pointer;padding:7px}
.website-section-list{display:grid;gap:6px;max-height:330px;overflow:auto}
.website-section-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:white;padding:8px;border-radius:8px;border:1px solid #d5e3ea}
.website-section-row .section-name{flex:1;min-width:150px;font-size:13px;font-weight:650}
.website-section-row input[type=color]{min-width:38px;width:44px;height:34px;padding:2px;cursor:pointer}
.website-section-row button{padding:5px 9px;font-size:12px}
.website-version-tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.website-version-tools select{min-width:230px;flex:1}

.website-part-chooser{margin:10px 0;max-width:550px}
.website-part-chooser select{max-width:100%;width:100%}
.task-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:16px 0}.task-filters label,.task-card-foot label{display:grid;gap:5px}.task-list{display:grid;gap:12px}.task-card{border:1px solid #d7e0e5;border-left:6px solid #4680a2;border-radius:12px;padding:16px;background:var(--panel,#fff)}.task-card.priority-red{border-left-color:#c93636}.task-card.priority-yellow{border-left-color:#d99918}.task-card.task-due-soon{box-shadow:0 0 0 2px #d52e2e22}.task-card-head,.task-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}.task-card h3{margin:6px 0}.task-priority{font-size:12px;font-weight:800}.task-due{font-weight:700;color:#9b2424}.task-result-label{display:grid;gap:6px}.task-result-label textarea{width:100%;min-height:52px}.task-card-foot{margin-top:12px;flex-wrap:wrap}.task-card-foot select{min-width:130px}.task-alert-list{display:grid;gap:7px}.task-alert{display:flex;justify-content:space-between;gap:12px;text-align:left;width:100%;padding:11px;border:1px solid #dfb3b3;border-radius:9px;background:#fff3f3;color:#8c1515}.task-alert.danger{border-color:#bb2828}.task-status-config,.task-field-config{display:grid;gap:8px;margin:12px 0}.task-status-config>label,.task-field-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.task-status-config input{max-width:200px}.task-field-row>input{min-width:160px}.task-field-row label,.module-access-row label{display:inline-flex;align-items:center;gap:5px}.module-access-row{border:1px solid #d8e1e5;border-radius:8px;margin:8px 0;padding:10px}.module-access-row>div{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:6px 0}.task-create-dialog{width:min(700px,96vw)}#taskCreateDialog{max-width:min(720px,96vw);max-height:92vh;overflow:auto}#taskCreateDialog::backdrop{background:#00162288}.task-due-soon .task-due{color:#b42318}

/* Compact task rows; editing stays in the detail dialog. */
.task-list{gap:6px;overflow-x:auto;padding:2px}
.task-card{display:grid;grid-template-columns:minmax(220px,2fr) minmax(110px,.85fr) auto minmax(170px,1.2fr) 28px 64px;align-items:center;gap:12px;min-width:760px;padding:7px 10px;border-left-width:4px;border-radius:8px}
.task-card-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:15px}
.task-card-creator{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted,#61727d);font-size:13px}
.task-card-priority{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:#eaf1f5;color:#355568;white-space:nowrap}
.task-card-priority.priority-label-red{background:#fde8e7;color:#a51f1b}
.task-card-priority.priority-label-yellow{background:#fff3d4;color:#805400}
.task-card-priority.priority-label-blue{background:#e7f1fa;color:#24577e}
.task-card-due{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.task-card-due.task-due{color:#b42318;font-weight:700}
.task-card-attachment{text-align:center;font-size:16px}
.task-detail-button{padding:5px 9px}
.task-detail-dialog{width:min(680px,96vw);max-width:96vw;max-height:92vh;overflow:auto;padding:20px}
.task-detail-dialog::backdrop{background:#00162288}
.task-detail-grid{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,2fr);gap:9px 14px;margin:16px 0}
.task-detail-grid dt{font-weight:700;color:var(--muted,#61727d)}
.task-detail-grid dd{margin:0;overflow-wrap:anywhere}
.task-detail-body{white-space:pre-wrap}
.task-detail-result-label,.task-detail-status-label{display:grid;gap:6px;margin:12px 0}
.task-detail-result-label textarea{width:100%;min-height:90px}
.task-detail-status-label select{max-width:280px}
.task-detail-dialog .dialog-actions{position:sticky;bottom:-20px;background:var(--panel,#fff);padding:12px 0 0}