.employee-selector-card{padding:16px 18px}
.employee-selector-form{max-width:520px}
.employee-selector-form label{margin:0}
.selected-employee-card{padding:18px}
.selected-employee-head{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.selected-employee-head h2{margin:0 0 4px}
.selected-employee-head p{margin:0}
.employee-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.employee-settings-grid .card-inset{margin:0}
.employee-settings-grid h3{margin:0 0 8px}
.employee-settings-grid .compact-form{gap:9px}
@media(max-width:760px){
  .employee-settings-grid{grid-template-columns:1fr}
  .selected-employee-head .button{width:100%;box-sizing:border-box;text-align:center}
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.20
   Per-day normal working hours
   ========================================================= */

.weekly-working-hours-card{min-width:0}

.weekly-hours-form{display:block!important}

.weekly-hours-head,
.weekly-hours-row{
  display:grid;
  grid-template-columns:minmax(92px,1.15fr) minmax(82px,.8fr) minmax(96px,1fr) minmax(96px,1fr) minmax(90px,.9fr) minmax(58px,.65fr);
  gap:8px;
  align-items:center;
}

.weekly-hours-head{
  padding:0 4px 7px;
  font-size:11px;
  font-weight:800;
  color:#607286;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.weekly-hours-row{
  padding:7px 4px;
  border-top:1px solid #dce6ee;
}

.weekly-hours-row label{margin:0!important}

.weekly-hours-row input[type="time"],
.weekly-hours-row select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:8px 7px;
}

.weekly-working-toggle{
  display:flex!important;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-weight:700;
}

.weekly-working-toggle input{
  width:auto!important;
  margin:0;
}

.weekly-paid{
  text-align:right;
  font-size:14px;
}

.weekly-hours-row.is-off{
  opacity:.55;
}

.weekly-hours-row.is-off input[type="time"],
.weekly-hours-row.is-off select{
  pointer-events:none;
  background:#eef3f6;
}

.weekly-hours-save{
  width:100%;
  margin-top:10px;
}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(max-width:1100px){
  .weekly-hours-head{display:none}
  .weekly-hours-row{
    grid-template-columns:1fr 1fr;
    padding:10px 0;
  }
  .weekly-day{grid-column:1}
  .weekly-working-toggle{grid-column:2;justify-self:end}
  .weekly-paid{text-align:left}
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.21
   Manage Staff - wider Normal working hours panel
   ========================================================= */

@media (min-width:1200px){
  .manage-staff-main .employee-settings-grid{
    grid-template-columns:
      minmax(250px,0.95fr)
      minmax(250px,0.95fr)
      minmax(500px,1.65fr)
      minmax(280px,1fr) !important;
  }

  .manage-staff-main .weekly-working-hours-card{
    min-width:500px !important;
  }

  .manage-staff-main .weekly-hours-head,
  .manage-staff-main .weekly-hours-row{
    grid-template-columns:
      minmax(92px,1.15fr)
      minmax(88px,.9fr)
      minmax(105px,1fr)
      minmax(105px,1fr)
      minmax(105px,1fr)
      minmax(65px,.7fr) !important;
    gap:10px !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.22
   Manage Staff panel width rebalance
   - narrower Department & access
   - wider Normal working hours
   - restore full Lunch column visibility
   ========================================================= */

@media (min-width:1200px){
  .manage-staff-main .employee-settings-grid{
    grid-template-columns:
      minmax(245px,0.92fr)
      minmax(190px,0.58fr)
      minmax(590px,1.95fr)
      minmax(280px,0.95fr) !important;
    gap:12px !important;
  }

  .manage-staff-main .weekly-working-hours-card{
    min-width:590px !important;
  }

  .manage-staff-main .weekly-hours-head,
  .manage-staff-main .weekly-hours-row{
    grid-template-columns:
      minmax(88px,1fr)
      minmax(80px,.82fr)
      minmax(100px,1fr)
      minmax(100px,1fr)
      minmax(100px,1fr)
      minmax(62px,.68fr) !important;
    gap:8px !important;
  }

  .manage-staff-main .weekly-hours-row input[type="time"],
  .manage-staff-main .weekly-hours-row select{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .manage-staff-main .working-hours-card{
    overflow:visible !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.23
   Manage Staff - Department & access 45% narrower
   ========================================================= */

@media (min-width:1200px){
  .manage-staff-main .employee-settings-grid{
    grid-template-columns:
      minmax(245px,0.92fr)
      minmax(105px,0.32fr)
      minmax(675px,2.21fr)
      minmax(280px,0.95fr) !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.24
   Manage Staff FINAL desktop layout reset
   ========================================================= */

@media (min-width:1200px){

  /* Reset the four-column layout cleanly.
     Approx proportions:
     Account 25% | Department 14% | Working hours 36% | One-off 25%
  */
  .manage-staff-main .employee-settings-grid{
    display:grid !important;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,.55fr)
      minmax(0,1.45fr)
      minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    align-items:stretch !important;
  }

  .manage-staff-main .employee-settings-grid > *{
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Remove earlier forced minimum widths that were pushing columns off-screen. */
  .manage-staff-main .weekly-working-hours-card{
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    overflow:hidden !important;
  }

  .manage-staff-main .working-hours-card{
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    overflow:hidden !important;
  }

  /* Make the weekly hours table fit comfortably inside its wider box. */
  .manage-staff-main .weekly-hours-head,
  .manage-staff-main .weekly-hours-row{
    display:grid !important;
    grid-template-columns:
      minmax(64px,.85fr)
      minmax(66px,.82fr)
      minmax(76px,1fr)
      minmax(76px,1fr)
      minmax(82px,1fr)
      minmax(48px,.6fr) !important;
    gap:5px !important;
    align-items:center !important;
  }

  .manage-staff-main .weekly-hours-head{
    font-size:10px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .manage-staff-main .weekly-hours-row{
    padding:6px 2px !important;
  }

  .manage-staff-main .weekly-hours-row input[type="time"],
  .manage-staff-main .weekly-hours-row select{
    width:100% !important;
    min-width:0 !important;
    padding:7px 5px !important;
    font-size:13px !important;
  }

  .manage-staff-main .weekly-day{
    font-size:13px !important;
  }

  .manage-staff-main .weekly-working-toggle{
    gap:4px !important;
    font-size:12px !important;
  }

  .manage-staff-main .weekly-working-toggle span{
    white-space:nowrap !important;
  }

  .manage-staff-main .weekly-paid{
    font-size:13px !important;
    text-align:center !important;
  }

  /* Department only needs enough space for its dropdown and button. */
  .manage-staff-main .employee-settings-grid > :nth-child(2) select,
  .manage-staff-main .employee-settings-grid > :nth-child(2) button{
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width:1199px){
  .manage-staff-main .employee-settings-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .manage-staff-main .weekly-working-hours-card{
    min-width:0 !important;
  }
}

@media (max-width:760px){
  .manage-staff-main .employee-settings-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.25
   Manage Staff - Department & access 30% narrower
   ========================================================= */

@media (min-width:1200px){
  .manage-staff-main .employee-settings-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,.385fr)
      minmax(0,1.615fr)
      minmax(0,1fr) !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.28
   Dedicated New Employee screen
   ========================================================= */

.staff-new-employee-screen{
  max-width:1280px;
  margin:0 auto;
  padding:20px;
}

.staff-new-screen-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:18px;
}

.staff-new-screen-head h2{
  margin:0 0 5px;
}

.new-employee-full-form{
  display:block;
}

.new-employee-section{
  border:1px solid #d5e0e8;
  background:#f8fbfd;
  border-radius:12px;
  padding:16px;
  margin-top:14px;
}

.new-employee-section h3{
  margin:0 0 12px;
}

.new-employee-details-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:end;
}

.new-employee-details-grid label{
  margin:0;
}

.new-employee-details-grid input,
.new-employee-details-grid select{
  width:100%;
  box-sizing:border-box;
}

.new-employee-auto{
  display:flex!important;
  flex-direction:column;
  gap:8px;
}

.new-employee-auto .employee-auto-choice{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid #c7d5df;
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
}

.new-employee-auto .employee-auto-choice input{
  width:auto;
  margin:0;
}

.new-hours-heading{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.new-weekly-hours-head,
.new-weekly-hours-row{
  display:grid;
  grid-template-columns:
    minmax(110px,1.1fr)
    minmax(95px,.9fr)
    minmax(125px,1fr)
    minmax(125px,1fr)
    minmax(130px,1fr)
    minmax(70px,.65fr);
  gap:12px;
  align-items:center;
}

.new-weekly-hours-head{
  padding:0 8px 8px;
  font-size:12px;
  font-weight:800;
  color:#607286;
  text-transform:uppercase;
}

.new-weekly-hours-row{
  padding:9px 8px;
  border-top:1px solid #dce6ee;
}

.new-weekly-hours-row input[type="time"],
.new-weekly-hours-row select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.new-weekly-hours-row.is-off{
  opacity:.55;
}

.new-weekly-hours-row.is-off input[type="time"],
.new-weekly-hours-row.is-off select{
  pointer-events:none;
  background:#edf2f5;
}

.new-weekly-hours-row .weekly-paid{
  text-align:center;
  font-size:14px;
}

.new-employee-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}

.new-employee-actions button,
.new-employee-actions .button{
  min-width:175px;
  text-align:center;
}

@media(max-width:900px){
  .new-employee-details-grid{
    grid-template-columns:1fr 1fr;
  }

  .new-weekly-hours-head{
    display:none;
  }

  .new-weekly-hours-row{
    grid-template-columns:1fr 1fr;
  }

  .new-weekly-hours-row .weekly-day{
    grid-column:1;
  }

  .new-weekly-hours-row .weekly-working-toggle{
    grid-column:2;
    justify-self:end;
  }
}

@media(max-width:600px){
  .staff-new-screen-head{
    align-items:center;
  }

  .new-employee-details-grid,
  .new-weekly-hours-row{
    grid-template-columns:1fr;
  }

  .new-weekly-hours-row .weekly-day,
  .new-weekly-hours-row .weekly-working-toggle{
    grid-column:1;
    justify-self:start;
  }

  .new-employee-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .new-employee-actions button,
  .new-employee-actions .button{
    width:100%;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.29
   New employee setup - tighter vertical spacing
   ========================================================= */

.staff-new-employee-screen{
  padding:16px !important;
}

.staff-new-screen-head{
  margin-bottom:10px !important;
}

.new-employee-section{
  padding:12px 14px !important;
  margin-top:10px !important;
}

.new-employee-section h3{
  margin-bottom:8px !important;
}

.new-employee-details-grid{
  gap:10px 12px !important;
}

.new-hours-heading{
  margin-bottom:8px !important;
}

.new-weekly-hours-head{
  padding-bottom:5px !important;
}

.new-weekly-hours-row{
  padding:5px 8px !important;
}

.new-weekly-hours-row input[type="time"],
.new-weekly-hours-row select{
  min-height:34px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}

.new-employee-actions{
  margin-top:12px !important;
}

@media(min-width:901px){
  .new-employee-details-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.30
   New employee setup - ultra compact
   ========================================================= */

.staff-new-employee-screen{
  padding:12px !important;
}

.staff-new-screen-head{
  margin-bottom:6px !important;
}

.staff-new-screen-head h2{
  margin-bottom:2px !important;
}

.new-employee-section{
  padding:9px 12px !important;
  margin-top:7px !important;
}

.new-employee-section h3{
  margin-bottom:5px !important;
}

.new-employee-details-grid{
  gap:7px 10px !important;
}

.new-employee-details-grid label{
  line-height:1.15 !important;
}

.new-employee-details-grid input,
.new-employee-details-grid select{
  min-height:34px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}

.new-hours-heading{
  margin-bottom:5px !important;
}

.new-hours-heading p{
  margin:2px 0 0 !important;
}

.new-weekly-hours-head{
  padding:0 6px 3px !important;
}

.new-weekly-hours-row{
  padding:3px 6px !important;
  min-height:38px !important;
}

.new-weekly-hours-row input[type="time"],
.new-weekly-hours-row select{
  min-height:32px !important;
  height:32px !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
}

.new-weekly-hours-row .weekly-day,
.new-weekly-hours-row .weekly-working-toggle,
.new-weekly-hours-row .weekly-paid{
  line-height:1.1 !important;
}

.new-employee-auto .employee-auto-choice{
  min-height:34px !important;
  padding:6px 9px !important;
}

.new-employee-actions{
  margin-top:8px !important;
  gap:8px !important;
}

.new-employee-actions button,
.new-employee-actions .button{
  min-height:36px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.31
   New employee setup - tighter weekly hours
   ========================================================= */

.new-employee-hours-section{
  padding-top:7px !important;
  padding-bottom:7px !important;
}

.new-hours-heading{
  margin-bottom:3px !important;
}

.new-hours-heading h3{
  margin-bottom:1px !important;
}

.new-hours-heading p{
  margin:0 !important;
  line-height:1.2 !important;
}

.new-weekly-hours-head{
  padding:0 6px 1px !important;
  line-height:1 !important;
}

.new-weekly-hours-row{
  padding:1px 6px !important;
  min-height:34px !important;
}

.new-weekly-hours-row input[type="time"],
.new-weekly-hours-row select{
  height:30px !important;
  min-height:30px !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
}

.new-weekly-hours-row .weekly-day,
.new-weekly-hours-row .weekly-working-toggle,
.new-weekly-hours-row .weekly-paid{
  line-height:1 !important;
}

.new-employee-actions{
  margin-top:5px !important;
}


/* =========================================================
   WORKFORCE CONNECT 360 V1.1.32
   New employee setup - ultra tight normal working hours only
   ========================================================= */

.new-employee-hours-section{
  padding-top:5px !important;
  padding-bottom:5px !important;
}

.new-hours-heading{
  margin-bottom:1px !important;
}

.new-hours-heading h3{
  margin:0 0 1px !important;
}

.new-hours-heading p{
  margin:0 !important;
  line-height:1.1 !important;
}

.new-weekly-hours-head{
  padding:0 6px 0 !important;
  line-height:1 !important;
}

.new-weekly-hours-row{
  padding:0 6px !important;
  min-height:30px !important;
}

.new-weekly-hours-row input[type="time"],
.new-weekly-hours-row select{
  height:28px !important;
  min-height:28px !important;
  padding-top:1px !important;
  padding-bottom:1px !important;
}

.new-weekly-hours-row .weekly-day{
  font-size:16px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.new-weekly-hours-row .weekly-working-toggle,
.new-weekly-hours-row .weekly-paid{
  line-height:1 !important;
}

.new-employee-hours-section + .new-employee-actions{
  margin-top:4px !important;
}