/* Workforce Connect Customer Care - Booking Details Page V2 */

.page-case .main{
  max-width:1500px;
}

.page-case .contextual-help{
  padding:12px 16px;
  margin-bottom:14px;
}

.page-case .contextual-help summary{
  font-size:13px;
}

.page-case .title-row{
  margin-bottom:16px;
  align-items:center;
}

.page-case .title-row h1{
  margin-bottom:0;
  font-size:clamp(25px,2.5vw,34px);
}

.page-case .case-title-actions{
  gap:10px;
}

.page-case .case-title-actions .link-button,
.page-case .case-title-actions > a{
  white-space:nowrap;
}

.page-case .panel{
  padding:20px;
  border-radius:12px;
}

.page-case .case-form-v2 label{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:#17384a;
}

.page-case .case-form-v2 input,
.page-case .case-form-v2 textarea,
.page-case .case-form-v2 select{
  margin-top:6px;
  min-height:42px;
  padding:9px 11px;
  border-radius:6px;
  font-size:14px;
  background:#fff;
}

.page-case .case-form-v2 input:focus,
.page-case .case-form-v2 textarea:focus,
.page-case .case-form-v2 select:focus{
  border-color:#4e93a7;
}

.page-case .case-core-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:13px 14px;
  align-items:end;
}

.page-case .case-core-grid .span-3{grid-column:span 3;}
.page-case .case-core-grid .span-4{grid-column:span 4;}
.page-case .case-core-grid .span-5{grid-column:span 5;}
.page-case .case-core-grid .span-6{grid-column:span 6;}
.page-case .case-core-grid .span-9{grid-column:span 9;}
.page-case .case-core-grid .span-12{grid-column:1/-1;}

.page-case .issue-field textarea{
  min-height:64px;
  resize:vertical;
  field-sizing:content;
}

.page-case .case-subheading{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 10px;
  color:#315565;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.page-case .case-subheading::after{
  content:"";
  height:1px;
  flex:1;
  background:#dbe6eb;
}

.page-case .booking-v2-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:13px 14px;
  align-items:end;
}

.page-case .booking-v2-grid textarea.compact-details{
  height:42px;
  min-height:42px;
  max-height:110px;
  resize:vertical;
  overflow:auto;
  field-sizing:content;
}

.page-case .booking-v2-grid .time-field input{
  width:150px;
  max-width:100%;
}

.page-case .booking-save-row{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.page-case .booking-save-row button{
  min-width:190px;
  min-height:42px;
  padding:9px 22px;
  border-radius:7px;
}

.page-case .notes{
  margin-top:16px;
}

.page-case section.panel h2{
  margin-bottom:8px;
}

.page-case section.panel > p:last-child{
  margin-bottom:0;
}

@media(max-width:1050px){
  .page-case .case-core-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-case .case-core-grid > *{
    grid-column:auto !important;
  }
  .page-case .case-core-grid .issue-field{
    grid-column:1/-1 !important;
  }
  .page-case .booking-v2-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .page-case .panel{
    padding:16px;
  }
  .page-case .case-core-grid,
  .page-case .booking-v2-grid{
    grid-template-columns:1fr;
    gap:11px;
  }
  .page-case .case-core-grid .issue-field{
    grid-column:auto !important;
  }
  .page-case .booking-v2-grid .time-field input{
    width:100%;
  }
  .page-case .booking-save-row button{
    width:100%;
  }
}


/* =========================================================
   BOOKING CONTROLS - EXACT TWO ROW LAYOUT
   Row 1: Appointment date | Appointment time | Status | Priority
   Row 2: Received date | Days till overdue | Target date | Save
   ========================================================= */

.page-case .booking-v2-grid.booking-v2-grid-exact{
  display:grid !important;
  grid-template-columns:1fr .72fr 1fr .9fr !important;
  gap:12px 14px !important;
  align-items:end !important;
}

.page-case .booking-v2-grid-exact > *{
  min-width:0 !important;
  margin:0 !important;
}

.page-case .booking-v2-grid-exact input,
.page-case .booking-v2-grid-exact select,
.page-case .booking-v2-grid-exact textarea,
.page-case .booking-v2-grid-exact button{
  width:100% !important;
  box-sizing:border-box !important;
}

.page-case .booking-v2-grid-exact textarea.compact-details{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  resize:none !important;
  overflow:hidden !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.page-case .booking-v2-grid-exact .time-field input{
  width:100% !important;
  max-width:none !important;
}

.page-case .booking-v2-grid-exact .booking-save-cell{
  display:flex !important;
  align-items:flex-end !important;
  height:100% !important;
}

.page-case .booking-v2-grid-exact .booking-save-cell button{
  width:100% !important;
  min-height:42px !important;
  margin:0 !important;
  border-radius:7px !important;
}

.page-case .booking-save-row{
  display:none !important;
}

@media(max-width:1000px){
  .page-case .booking-v2-grid.booking-v2-grid-exact{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:560px){
  .page-case .booking-v2-grid.booking-v2-grid-exact{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   BOOKING DETAILS - 3 COLUMN TOP GRID + IMPORTANT CONTROLS
   ========================================================= */

.page-case .case-core-grid.case-core-grid-3col{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:13px 16px !important;
  align-items:end !important;
}

.page-case .case-core-grid-3col > *{
  grid-column:auto !important;
  min-width:0 !important;
}

.page-case .case-core-grid-3col .issue-field{
  grid-column:1 / -1 !important;
}

.page-case .booking-v2-grid-exact .important-control{
  font-size:15px !important;
  font-weight:800 !important;
  color:#102f3f !important;
}

.page-case .booking-v2-grid-exact .important-control input,
.page-case .booking-v2-grid-exact .important-control select{
  font-size:15px !important;
  font-weight:700 !important;
  min-height:44px !important;
}

.page-case .booking-v2-grid-exact .booking-row-divider{
  grid-column:1 / -1 !important;
  height:1px !important;
  background:#ccdbe3 !important;
  margin:3px 0 1px !important;
}

.page-case .booking-v2-grid-exact .compact-details{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  resize:none !important;
  overflow:hidden !important;
}

@media(max-width:900px){
  .page-case .case-core-grid.case-core-grid-3col{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .page-case .case-core-grid-3col .issue-field{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:560px){
  .page-case .case-core-grid.case-core-grid-3col{
    grid-template-columns:1fr !important;
  }
  .page-case .case-core-grid-3col .issue-field{
    grid-column:auto !important;
  }
}


/* =========================================================
   CASE HEADER - PRINT BUTTON SPACING
   Move Print job sheet slightly left away from Back to dashboard.
   ========================================================= */
.page-case .case-title-actions{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}

.page-case .case-title-actions .link-button{
  margin-right:4px !important;
}