/* MH OFFICE V18.2 — stable dashboard layout */
#enhancedMetrics{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  margin:14px 0!important;
  width:100%!important;
}
#enhancedMetrics .metric{
  min-width:0!important;
  min-height:92px!important;
  padding:14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:inherit!important;
  background:#fff!important;
  border:1px solid var(--line,#e6e1e1)!important;
  border-radius:12px!important;
  box-shadow:0 3px 12px rgba(26,49,88,.035)!important;
  overflow:hidden!important;
}
#enhancedMetrics .metric span{
  display:block!important;
  color:var(--muted,#6f6f73)!important;
  font-size:14px!important;
  line-height:1.35!important;
  white-space:normal!important;
}
#enhancedMetrics .metric strong{
  display:block!important;
  color:var(--ink,#1b1b1b)!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:800!important;
}
#enhancedMetrics .metric.alert{
  border-color:#e9b7ba!important;
  background:#fff7f7!important;
}
#enhancedMetrics .metric.alert strong{color:var(--red,#c91f2b)!important}
#dashboardInsights{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin:14px 0 18px!important;
  width:100%!important;
  align-items:stretch!important;
}
#dashboardInsights .insight-card{
  min-width:0!important;
  padding:18px!important;
  border:1px solid var(--line,#e6e1e1)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 3px 12px rgba(26,49,88,.035)!important;
  overflow:hidden!important;
}
#dashboardInsights .insight-card h3{
  margin:0 0 12px!important;
  font-size:18px!important;
  line-height:1.35!important;
}
#dashboardInsights .mini-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:9px 0!important;
  border-bottom:1px solid #eee!important;
  min-height:42px!important;
}
#dashboardInsights .mini-row:last-child{border-bottom:0!important}
#dashboardInsights .mini-row span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
}
#dashboardInsights .mini-row strong,
#dashboardInsights .mini-row small{
  flex:0 0 auto!important;
  font-size:14px!important;
  font-weight:700!important;
}
#dashboardInsights .empty-state{padding:18px 0!important;color:var(--muted,#6f6f73)!important}
#workflowGrid{width:100%!important}
@media(max-width:1180px){
  #enhancedMetrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #dashboardInsights{grid-template-columns:1fr 1fr!important}
  #activityInsight{grid-column:1/-1!important}
}
@media(max-width:760px){
  #enhancedMetrics{grid-template-columns:1fr 1fr!important}
  #dashboardInsights{grid-template-columns:1fr!important}
  #activityInsight{grid-column:auto!important}
}
@media(max-width:480px){#enhancedMetrics{grid-template-columns:1fr!important}}

/* V18.3 metric click restore */
#enhancedMetrics .metric,.stats .card,.workflow-card{cursor:pointer!important;user-select:none}
#enhancedMetrics .metric:active,.stats .card:active,.workflow-card:active{transform:scale(.995)}

/* MH OFFICE V18.4 — full-width task/case details modal */
#detailModal{
  padding:24px!important;
  overflow:auto!important;
  align-items:center!important;
  justify-items:center!important;
}
#detailModal .detail-shell{
  width:min(1180px,calc(100vw - 64px))!important;
  max-width:1180px!important;
  min-width:0!important;
  max-height:90vh!important;
  padding:28px 30px!important;
  overflow:auto!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}
#detailModal #detailContent,
#detailModal .detail-head,
#detailModal .detail-tabs,
#detailModal .detail-body{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
#detailModal .detail-head{
  padding-inline:4px 46px!important;
  margin-bottom:14px!important;
}
#detailModal .detail-head h2{
  margin:0 0 6px!important;
  overflow-wrap:anywhere!important;
}
#detailModal .detail-head p{margin:0!important}
#detailModal .detail-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0 0 20px!important;
  border-bottom:1px solid rgba(0,0,0,.10)!important;
  padding-bottom:10px!important;
}
#detailModal .detail-tabs button{
  flex:0 0 auto!important;
  border:1px solid rgba(0,0,0,.13)!important;
  background:#fff!important;
  border-radius:9px!important;
  cursor:pointer!important;
}
#detailModal .detail-tabs button.active{
  background:#fff1f2!important;
  color:#a71920!important;
  border-color:#e7b9bc!important;
  font-weight:800!important;
}
#detailModal .detail-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:22px!important;
  row-gap:16px!important;
  align-items:start!important;
  width:100%!important;
}
#detailModal .detail-grid>label{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
#detailModal .detail-grid>label.wide{
  grid-column:1/-1!important;
}
#detailModal .detail-grid input,
#detailModal .detail-grid select,
#detailModal .detail-grid textarea{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:9px!important;
  background:#fff!important;
}
#detailModal .detail-grid textarea{
  min-height:210px!important;
}
#detailModal .meta-note{
  margin-top:18px!important;
  overflow-wrap:anywhere!important;
}
#detailModal .file-item,
#detailModal .activity-item,
#detailModal .update-item,
#detailModal .upload-box{
  width:100%!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:820px){
  #detailModal{padding:10px!important;align-items:start!important}
  #detailModal .detail-shell{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    max-height:calc(100vh - 20px)!important;
    padding:22px 16px!important;
    border-radius:14px!important;
  }
  #detailModal .detail-head{padding-inline:2px 42px!important}
  #detailModal .detail-grid{grid-template-columns:1fr!important;gap:14px!important}
  #detailModal .detail-grid>label.wide{grid-column:auto!important}
  #detailModal .detail-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:8px!important}
  #detailModal .detail-tabs button{white-space:nowrap!important}
  #detailModal .detail-grid textarea{min-height:170px!important}
}


/* V18.5 critical full-width shell */
.content{width:100%!important;max-width:none!important;margin:0!important;padding:24px clamp(18px,2.2vw,38px) 42px!important}
.main{min-width:0!important;max-width:none!important}
#tasksSection,.tasks-panel{width:100%!important;max-width:none!important}
#detailModal .dialog.detail-shell{width:min(1180px,94vw)!important;max-width:1180px!important;min-width:760px!important}
@media(max-width:850px){.content{padding:16px 12px 30px!important}#detailModal .dialog.detail-shell{width:calc(100vw - 16px)!important;min-width:0!important;max-width:none!important}}

/* V18.7 stable interactions */
.mh-customer-metric-clickable{cursor:pointer!important;transition:transform .15s ease,box-shadow .15s ease!important}.mh-customer-metric-clickable:hover{transform:translateY(-2px)!important;box-shadow:0 8px 22px #00000012!important}.mh-metric-clickable{cursor:pointer!important}


/* V18.16 — Upload UX copied from Customer V1.20 */
.hidden-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
#detailModal .composer-tools{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin:8px 0 6px!important}
#detailModal .composer-tools .ghost{background:#222!important;color:#fff!important;border-color:#222!important;padding:9px 12px!important}
#detailModal .composer-hint{font-size:12px!important}
#detailModal .pending-attachments{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin:6px 0 10px!important;min-height:0!important}
#detailModal .attachment-chip{display:flex!important;align-items:center!important;gap:8px!important;border:1px solid #ddd!important;background:#fafafa!important;border-radius:10px!important;padding:7px 9px!important;max-width:100%!important}
#detailModal .attachment-chip img{width:42px!important;height:42px!important;border-radius:7px!important;object-fit:cover!important;background:#eee!important}
#detailModal .attachment-chip .attachment-meta{min-width:0!important;max-width:260px!important}
#detailModal .attachment-chip .attachment-name{font-weight:700!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}
#detailModal .attachment-chip small{display:block!important;color:#777!important;font-size:10px!important}
#detailModal .attachment-chip button{border:0!important;background:transparent!important;color:#a71920!important;font-weight:900!important;font-size:18px!important;cursor:pointer!important;padding:0 2px!important}
#detailModal .mh-v120-upload{border:1px solid rgba(0,0,0,.08)!important;border-radius:12px!important;padding:14px!important;background:#fff!important;margin-bottom:18px!important}
#detailModal .mh-v120-upload-submit{margin-top:4px!important}
#detailModal .mh-existing-files-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:8px 0 10px!important}
#detailModal .mh-existing-files-head h3{margin:0!important}
.mh-v120-image-editor-modal{display:none;position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.62);padding:24px;overflow:auto;align-items:center;justify-content:center}
.mh-v120-image-editor-modal.open{display:flex!important}
.mh-v120-modal-box{width:min(900px,96vw);max-width:900px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.mh-v120-image-editor-modal .section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.mh-v120-image-editor-modal .section-title h2{margin:0 0 4px}
.mh-v120-image-editor-modal .muted{color:#777}
.image-editor-stage{background:#111;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:320px;touch-action:none}
#imageEditorCanvas{display:block;max-width:100%;max-height:62vh;background:#111;touch-action:none;cursor:grab}
#imageEditorCanvas:active{cursor:grabbing}
.image-editor-controls,.image-editor-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.image-editor-controls label{display:flex;align-items:center;gap:8px;font-size:13px;flex:1;min-width:220px}
.image-editor-controls input[type=range]{width:100%}
.image-editor-actions{justify-content:flex-end}
.mh-v120-image-editor-modal button{min-height:40px;border-radius:9px;padding:8px 12px;cursor:pointer}
.mh-v120-image-editor-modal .ghost{background:#222;color:#fff;border:1px solid #222}
.mh-v120-image-editor-modal .primary{background:#b51d25;color:#fff;border:1px solid #b51d25}
.mh-v120-image-editor-modal .danger{background:#fff;color:#a71920;border:1px solid #e3b7ba}
@media(max-width:700px){#detailModal .composer-tools{gap:6px!important}#detailModal .composer-tools .ghost{flex:1!important}#detailModal .composer-hint{width:100%!important}.mh-v120-modal-box{width:96vw;max-width:96vw;padding:14px}.image-editor-stage{min-height:250px}.image-editor-controls label{min-width:100%;order:3}.image-editor-actions button{flex:1}#detailModal .attachment-chip .attachment-meta{max-width:170px!important}}


/* V18.17 — task update/reply button and brand color polish */
#detailModal .mh-compose-card .mh-compose-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;margin-top:2px!important}
#detailModal .mh-compose-card .mh-compose-actions button.primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:190px!important;min-height:48px!important;padding:10px 18px!important;border-radius:10px!important;font-size:17px!important;line-height:1.35!important;font-weight:800!important;white-space:normal!important;text-align:center!important}
#detailModal #addUpdate{background:#171717!important;color:#fff!important;border:1px solid #171717!important}
#detailModal #sendCustomerReply{background:#a71920!important;color:#fff!important;border:1px solid #a71920!important}
#detailModal #addUpdate:hover{background:#000!important}
#detailModal #sendCustomerReply:hover{background:#8f151b!important}
#detailModal #addUpdate:disabled,#detailModal #sendCustomerReply:disabled{opacity:.58!important;cursor:not-allowed!important}
#detailModal .mh-compose-card.mh-customer-card{background:#fffafa!important;border:1.5px solid rgba(167,25,32,.30)!important}
#detailModal .mh-compose-card:not(.mh-customer-card){background:#fbfbfb!important;border:1px solid #e5e5e5!important}
#detailModal .detail-tabs button{color:#222!important;background:#fff!important}
#detailModal .detail-tabs button.active{background:#fff0f1!important;color:#a71920!important;border-color:#dcaeb2!important}
#detailModal .close{color:#111!important;background:transparent!important}
@media(max-width:700px){#detailModal .mh-compose-card .mh-compose-actions button.primary{width:100%!important;min-width:0!important}}

/* V18.25.13 — country task cards also on the home dashboard */
#enhancedMetrics .metric.mh-country-ae{border-top:3px solid #2f6fb2}
#enhancedMetrics .metric.mh-country-ae strong,#enhancedMetrics .metric.mh-country-ae span{color:#225d9b}
#enhancedMetrics .metric.mh-country-eg{border-top:3px solid #a54388}
#enhancedMetrics .metric.mh-country-eg strong,#enhancedMetrics .metric.mh-country-eg span{color:#8a326f}
#enhancedMetrics .metric.mh-country-other{border-top:3px solid #506b75}
#enhancedMetrics .metric.mh-country-other strong,#enhancedMetrics .metric.mh-country-other span{color:#405963}


/* V18.25.14 — Files & transactions page: full-width, usable filters, create/edit/open workflow */
#filesSection.mh-files-page{grid-column:1/-1!important;width:100%!important;min-width:0!important;padding:24px!important;margin:0!important}
#filesSection .panel-head{align-items:flex-start!important;gap:16px!important;margin-bottom:18px!important}
#filesSection .panel-head>div:first-child{display:grid!important;gap:5px!important}
#filesSection .panel-head h2{font-size:25px!important;margin:0!important}
#filesSection .panel-head small{font-size:14px!important;color:#6f6f73!important;line-height:1.6!important}
.mh-files-head-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.mh-files-head-actions button{font-size:15px!important;font-weight:800!important;padding:10px 15px!important;border-radius:9px!important;cursor:pointer!important}
.mh-files-refresh{background:#fff!important;color:#a71920!important;border:1px solid #d9b8ba!important}
.mh-files-new{background:#a71920!important;color:#fff!important;border:1px solid #a71920!important}
.mh-files-root{width:100%!important;min-width:0!important;text-align:initial!important;padding:0!important;color:#1b1b1b!important}
.mh-files-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-bottom:14px!important}
.mh-files-summary article{border:1px solid #eadede!important;border-radius:12px!important;background:#fbf9f9!important;padding:14px 16px!important;display:grid!important;gap:5px!important}
.mh-files-summary span{font-size:14px!important;color:#666!important}.mh-files-summary strong{font-size:24px!important;color:#a71920!important}
#filesSection .case-toolbar{display:grid!important;grid-template-columns:minmax(260px,2fr) repeat(4,minmax(150px,1fr)) auto!important;gap:9px!important;align-items:center!important;margin:0 0 10px!important;width:100%!important;overflow:visible!important}
#filesSection .case-toolbar input,#filesSection .case-toolbar select,#filesSection .case-toolbar button{width:100%!important;min-width:0!important;height:46px!important;border:1px solid #ddd4d4!important;border-radius:10px!important;background:#fff!important;padding:8px 12px!important;font-size:15px!important;color:#222!important}
#filesSection .case-toolbar button{background:#fff7f7!important;color:#a71920!important;border-color:#dfbfc1!important;font-weight:800!important;white-space:nowrap!important;cursor:pointer!important}
.mh-files-result{font-size:14px!important;color:#6d6666!important;margin:5px 2px 10px!important}
.mh-files-list{display:grid!important;gap:9px!important;width:100%!important}
.mh-file-card{display:grid!important;grid-template-columns:minmax(230px,1.25fr) minmax(0,3fr) auto!important;gap:14px!important;align-items:center!important;border:1px solid #e4dede!important;border-radius:12px!important;background:#fff!important;padding:14px 15px!important;cursor:pointer!important;transition:.15s ease!important}
.mh-file-card:hover{border-color:#c9979a!important;box-shadow:0 7px 20px rgba(90,20,25,.07)!important;transform:translateY(-1px)!important}
.mh-file-card-main{display:grid!important;gap:5px!important}.mh-file-card-main b{font-size:17px!important}.mh-file-card-main span{font-size:13px!important;color:#777!important}
.mh-file-card-meta{display:grid!important;grid-template-columns:repeat(3,minmax(110px,1fr))!important;gap:6px 12px!important;font-size:13px!important;color:#5f5b5b!important}
.mh-file-card-meta span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.mh-file-open{border:1px solid #a71920!important;background:#fff!important;color:#a71920!important;padding:9px 13px!important;border-radius:8px!important;font-size:14px!important;font-weight:800!important;cursor:pointer!important;white-space:nowrap!important}
.mh-files-empty{font-size:16px!important;padding:35px!important;border:1px dashed #d9caca!important;border-radius:12px!important;background:#fffafa!important}
.mh-case-form .mh-case-save-row{display:flex!important;justify-content:flex-start!important;margin-top:8px!important}.mh-case-save-row button{min-width:180px!important;padding:11px 18px!important;border:0!important;border-radius:9px!important;background:#a71920!important;color:#fff!important;font-weight:800!important}
.mh-case-edit-note{margin-top:10px!important;padding:10px 12px!important;border-radius:9px!important;background:#edf8f3!important;color:#087f4f!important;font-size:13px!important;font-weight:700!important}
@media(max-width:1250px){#filesSection .case-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}#filesSection #caseSearch{grid-column:1/-1!important}.mh-file-card{grid-template-columns:1fr auto!important}.mh-file-card-meta{grid-column:1/-1!important}}
@media(max-width:760px){#filesSection.mh-files-page{padding:14px!important}.mh-files-summary{grid-template-columns:1fr!important}#filesSection .case-toolbar{grid-template-columns:1fr!important}#filesSection #caseSearch{grid-column:auto!important}.mh-file-card{grid-template-columns:1fr!important}.mh-file-card-meta{grid-template-columns:1fr 1fr!important}.mh-file-open{width:100%!important}.mh-files-head-actions{width:100%!important}.mh-files-head-actions button{flex:1!important}}
