/* v364 — premium shared Job types UI matching Business settings chrome (all orgs)
   Dark cohesive · single-row density · blur auto-save · no Save wall.
   Loaded last after theme-state-hardening. */

/* —— Settings nav: scroll + peek at ~390px —— */
@media (max-width:900px){
  .settings-nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    gap:6px;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
    padding:6px 4px 10px !important;
    margin:0 0 10px;
  }
  .settings-nav button{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    scroll-snap-align:start;
    padding:10px 12px !important;
  }
  .settings-nav::after{
    content:"";
    flex:0 0 40px;
    pointer-events:none;
  }
}

/* —— Job types pane chrome —— */
[data-pane="jobtypes"] .panel{
  background:#121526 !important;
  border-color:#2a2f45 !important;
  box-shadow:none !important;
}
[data-pane="jobtypes"] .panel-head{
  margin-bottom:6px;
  gap:8px;
}
[data-pane="jobtypes"] .panel-head h2{
  font-size:19px;
  letter-spacing:-.3px;
}
[data-pane="jobtypes"] .kicker{color:#9f9bff}
[data-pane="jobtypes"] .hint,
[data-pane="jobtypes"] .hint small,
[data-pane="jobtypes"] label small{
  color:#8b93a8 !important;
  line-height:1.4;
  font-size:12px;
}
[data-pane="jobtypes"] .form-grid{
  gap:10px 12px;
  margin-bottom:12px !important;
}
[data-pane="jobtypes"] .form-grid label{color:#a4abc0 !important}
[data-pane="jobtypes"] .form-grid input,
[data-pane="jobtypes"] .form-grid select,
[data-pane="jobtypes"] .form-grid textarea{
  background:#151829 !important;
  border-color:#30364d !important;
  color:#eef1fb !important;
  margin-top:5px;
  padding:10px 11px;
}

.job-type-settings{
  display:grid;
  gap:6px;
}

/* Desktop / wide: colour | name | minutes+save | hide */
.job-type-row{
  display:grid !important;
  grid-template-columns:32px minmax(0,1fr) minmax(140px,200px) auto !important;
  gap:8px !important;
  align-items:center !important;
  min-width:0;
  padding:8px 10px !important;
  border:1px solid #2a2f45 !important;
  border-radius:12px !important;
  background:#151829 !important;
  box-shadow:none !important;
  color:#eef1fb;
}

.job-type-row .job-type-colour{
  width:30px !important;
  height:30px !important;
  padding:2px !important;
  border-radius:9px !important;
  border:1px solid #30364d !important;
  background:#121526 !important;
  cursor:pointer;
  align-self:center;
}

.job-type-row .job-type-name{
  min-width:0;
  width:100% !important;
  border:1px solid #30364d !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  background:#121526 !important;
  color:#eef1fb !important;
  box-sizing:border-box;
  font-weight:650;
  font-size:14px;
}

.job-type-row label span{
  display:block;
  font-size:9px !important;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#8b93a8 !important;
  margin-bottom:3px !important;
}

.job-type-meta{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  align-items:flex-end !important;
  min-width:0;
  grid-template-columns:none !important;
}

.job-type-meta label{
  flex:1 1 auto;
  min-width:0;
  display:block;
  margin:0;
  color:#a4abc0;
}

.job-type-meta .job-type-duration{
  width:100% !important;
  min-width:0;
  max-width:88px;
  box-sizing:border-box;
  border:1px solid #30364d !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  background:#121526 !important;
  color:#eef1fb !important;
  font-variant-numeric:tabular-nums;
}

/* Save hidden until dirty — compact, never full-width */
.job-type-row .job-type-save,
.job-type-meta .job-type-save{
  position:static !important;
  display:none !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:7px 11px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:700;
  white-space:nowrap;
  box-shadow:none !important;
  background:#1d2136 !important;
  border:1px solid #3a4160 !important;
  color:#dce1f2 !important;
}
.job-type-row.is-dirty .job-type-save{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

.job-type-row .job-type-hide,
.job-type-row button.job-type-hide{
  justify-self:end;
  align-self:center;
  padding:4px 2px !important;
  font-size:12px !important;
  font-weight:600 !important;
  background:transparent !important;
  color:#9aa3bb !important;
  border:0;
}
.job-type-row .job-type-hide:hover{color:#c4b5fd !important}

/* Mobile: ONE compact row — colour | name | minutes | hide */
@media (max-width:900px){
  .job-type-row{
    grid-template-columns:30px minmax(0,1fr) 72px auto !important;
    grid-template-areas:none !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    gap:7px !important;
    padding:8px !important;
  }
  .job-type-row .job-type-colour{
    grid-column:1;
    grid-row:1;
    width:28px !important;
    height:28px !important;
  }
  .job-type-row .job-type-name{
    grid-column:2;
    grid-row:1;
    min-width:0;
    padding:8px 9px !important;
    font-size:13px;
  }
  .job-type-row .job-type-meta{
    grid-column:3;
    grid-row:1;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    grid-template-columns:none !important;
  }
  .job-type-row .job-type-meta label span{
    /* tuck label — field-first density */
    position:absolute;
    width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
  }
  .job-type-meta .job-type-duration{
    max-width:72px;
    width:72px !important;
    padding:8px 6px !important;
    text-align:center;
  }
  .job-type-row .job-type-save,
  .job-type-row .job-type-meta .job-type-save{
    position:static !important;
    min-height:32px !important;
    min-width:56px !important;
    padding:6px 8px !important;
    font-size:11px !important;
  }
  .job-type-row.is-dirty{
    /* keep single row; Save squeezes into meta flex */
  }
  .job-type-row .job-type-hide,
  .job-type-row button.job-type-hide{
    grid-column:4;
    grid-row:1;
    justify-self:end;
    padding:2px 0 !important;
    font-size:11px !important;
  }

  .job-type-row > label{grid-column:1 / -1 !important}
  .job-type-row > button.secondary{
    grid-column:1 / -1 !important;
    width:auto !important;
    min-height:34px;
    justify-self:start;
    position:static !important;
  }
  .job-type-row > button.text-btn{grid-column:auto !important}
}