/* =========================================================
   GreenEco — Tasks / Workforce popup parity
   Scope: task routes only. Visual/layout rules only.
   No task behavior, API, permissions, events, or data flow changed.
   ========================================================= */

/*
  A Tasks page remains mounted behind its managed modal, so :has()
  gives us a safe scope without touching generic dialogs elsewhere.
*/
body:has(.task-unified-screen) .greeneco-managed-modal-backdrop,
body:has(.task-detail-page) .greeneco-managed-modal-backdrop{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:rgba(7,24,41,.64)!important;
  padding:8px 10px!important;
  overflow:hidden!important;
}

/* Match Workforce dialog proportions while retaining GreenEco's managed-window shell. */
body:has(.task-unified-screen) .greeneco-managed-modal-card,
body:has(.task-detail-page) .greeneco-managed-modal-card{
  width:min(850px,calc(100vw - 24px))!important;
  max-width:850px!important;
  max-height:100%!important;
  min-height:0!important;
  margin:0 auto!important;
  border:1px solid #555!important;
  border-radius:5px!important;
  background:#fff!important;
  box-shadow:0 18px 50px rgba(0,0,0,.38)!important;
  overflow:hidden!important;
  resize:none!important;
  transition:none!important;
  animation:none!important;
}

/* Wide task editors keep their extra room, equivalent to the wide Workforce forms. */
body:has(.task-unified-screen) .greeneco-managed-modal-card.modal-wide,
body:has(.task-detail-page) .greeneco-managed-modal-card.modal-wide{
  width:min(1040px,calc(100vw - 24px))!important;
  max-width:1040px!important;
}

/* Workforce-style title row; keep minimize/close controls and their handlers unchanged. */
body:has(.task-unified-screen) .greeneco-managed-modal-card > .modal-header,
body:has(.task-detail-page) .greeneco-managed-modal-card > .modal-header{
  flex:0 0 auto!important;
  min-height:45px!important;
  height:auto!important;
  padding:7px 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  background:#eef4f6!important;
  border-bottom:1px solid #aaa!important;
  color:#17212b!important;
  box-shadow:none!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card > .modal-header h2,
body:has(.task-detail-page) .greeneco-managed-modal-card > .modal-header h2{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  text-align:center!important;
  font-size:16px!important;
  line-height:1.3!important;
  font-weight:800!important;
}

/* Keep window-control geometry stable; do not alter their function. */
body:has(.task-unified-screen) .greeneco-managed-modal-card > .modal-header .modal-taskbar-minimize,
body:has(.task-unified-screen) .greeneco-managed-modal-card > .modal-header .modal-size-button,
body:has(.task-unified-screen) .greeneco-managed-modal-card > .modal-header .icon-button,
body:has(.task-detail-page) .greeneco-managed-modal-card > .modal-header .modal-taskbar-minimize,
body:has(.task-detail-page) .greeneco-managed-modal-card > .modal-header .modal-size-button,
body:has(.task-detail-page) .greeneco-managed-modal-card > .modal-header .icon-button{
  flex:0 0 30px!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:2px!important;
  box-shadow:none!important;
}

/* Body is the only scrolling region, just like the Workforce popup. */
body:has(.task-unified-screen) .greeneco-managed-modal-card > .modal-body,
body:has(.task-detail-page) .greeneco-managed-modal-card > .modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:14px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  overflow-anchor:none!important;
  scrollbar-gutter:stable!important;
  background:#fff!important;
}

/* Task modal forms: same label/input geometry and cyan working fields as Workforce. */
body:has(.task-unified-screen) .greeneco-managed-modal-card .entity-form,
body:has(.task-detail-page) .greeneco-managed-modal-card .entity-form{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid.single-column,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid.single-column{
  grid-template-columns:1fr!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid > label,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid > label{
  display:grid!important;
  grid-template-columns:105px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
  font-size:12px!important;
  font-weight:700!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid > label > span,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid > label > span{
  width:auto!important;
  min-width:0!important;
  text-align:right!important;
  line-height:1.25!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid input:not([type=checkbox]):not([type=radio]),
body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid select,
body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid textarea,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid input:not([type=checkbox]):not([type=radio]),
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid select,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid textarea{
  width:100%!important;
  min-width:0!important;
  min-height:29px!important;
  margin:0!important;
  padding:4px 7px!important;
  border:1px solid #6d7a82!important;
  border-radius:0!important;
  background:#bde9ec!important;
  color:#17212b!important;
  box-sizing:border-box!important;
  font-family:Tahoma,Arial,sans-serif!important;
  font-size:12px!important;
  box-shadow:none!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid textarea,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid textarea{
  min-height:80px!important;
  height:80px!important;
  resize:vertical!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid input:focus,
body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid select:focus,
body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid textarea:focus,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid input:focus,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid select:focus,
body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid textarea:focus{
  background:#d9f6f7!important;
  outline:1px solid #3b8e9c!important;
  outline-offset:0!important;
}

/* Template editor fieldsets/tables keep all fields and actions but adopt the same flat panels. */
body:has(.task-templates-page) .greeneco-managed-modal-card .plain-fieldset{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

body:has(.task-templates-page) .greeneco-managed-modal-card .table-panel,
body:has(.task-templates-page) .greeneco-managed-modal-card .table-scroll{
  border-radius:0!important;
  box-shadow:none!important;
}

body:has(.task-templates-page) .greeneco-managed-modal-card .table-panel{
  border:1px solid #777!important;
  background:#fff!important;
}

body:has(.task-templates-page) .greeneco-managed-modal-card .data-table th{
  background:#727272!important;
  color:#fff!important;
  border-color:#999!important;
}

body:has(.task-templates-page) .greeneco-managed-modal-card .data-table td{
  border-color:#999!important;
}

/* Bottom command row exactly follows Workforce popup placement. */
body:has(.task-unified-screen) .greeneco-managed-modal-card .modal-actions,
body:has(.task-detail-page) .greeneco-managed-modal-card .modal-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin:0!important;
  padding:12px!important;
  border-top:1px solid #ccc!important;
  background:#fff!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .modal-actions > button,
body:has(.task-detail-page) .greeneco-managed-modal-card .modal-actions > button{
  min-width:120px!important;
  min-height:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:0!important;
  font-size:12px!important;
  font-weight:700!important;
  box-shadow:none!important;
}

/* Preserve semantic button tones while using Workforce geometry. */
body:has(.task-unified-screen) .greeneco-managed-modal-card .modal-actions .secondary-button,
body:has(.task-detail-page) .greeneco-managed-modal-card .modal-actions .secondary-button{
  color:#17212b!important;
  background:#fff!important;
  border:1px solid #777!important;
}

body:has(.task-unified-screen) .greeneco-managed-modal-card .modal-actions .primary-button,
body:has(.task-detail-page) .greeneco-managed-modal-card .modal-actions .primary-button{
  color:#fff!important;
  background:#08658f!important;
  border:1px solid #075272!important;
}

/* Responsive parity with Workforce: one-column form on narrow screens. */
@media(max-width:1000px){
  body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid,
  body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid{
    grid-template-columns:1fr!important;
  }

  body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid .full-field,
  body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid .full-field{
    grid-column:auto!important;
  }
}

@media(max-width:620px){
  body:has(.task-unified-screen) .greeneco-managed-modal-card .form-grid > label,
  body:has(.task-detail-page) .greeneco-managed-modal-card .form-grid > label{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
}

/* =========================================================
   Global modal stability / anti-jitter
   Keeps workspace geometry and scroll position stable while managed
   windows are inserted/removed. Does not block background state.
   ========================================================= */

html,
body,
#root,
.app-shell{
  overflow-anchor:none!important;
}

.app-workspace{
  overflow-anchor:none!important;
  scrollbar-gutter:stable!important;
  scroll-behavior:auto!important;
}

.greeneco-managed-modal-backdrop{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
  contain:layout paint!important;
}

.greeneco-managed-modal-card{
  transform:none!important;
  animation:none!important;
  will-change:auto!important;
}

.greeneco-managed-modal-card > .modal-body{
  scrollbar-gutter:stable!important;
  overflow-anchor:none!important;
}

/* Avoid a width recalc when a modal's own content starts/stops overflowing. */
.greeneco-managed-modal-card,
.greeneco-managed-modal-card > .modal-body{
  box-sizing:border-box!important;
}

/* Do not animate size changes during open/close; +/- buttons still resize instantly. */
.modal-card.modal-resizable{
  transition:none!important;
}