/* ==========================================================================
   wet-responsive.css — Mobile responsive overrides + UI modernization
   Loaded AFTER wet-event.css.
   ========================================================================== */



/* ==========================================================================
   GLOBAL RESPONSIVE FIXES (all screen sizes)
   ========================================================================== */

/* Show only on mobile (hidden by default) */
.show-mobile-only { display: none; }

/* Event banner image — respect container width */
.body .body-left .ad img,
.body .body-left .event-body .titleBar img,
.body .body-left .event-body img[width="790"],
.body .body-left img[width="790"] {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px;
}


/* ==========================================================================
   PENDING APPROVAL SHIFT CARDS (global — mobile + desktop)
   ========================================================================== */

/* Greyed-out card wrapper for shifts awaiting approval */
.shift-pending-card {
  opacity: 0.55 !important;
  pointer-events: none !important;
  position: relative !important;
}

/* "Pending Approval" badge — amber pill, shown in the shift header */
.pending-approval-badge {
  display: inline-block !important;
  background: #e8a02a !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  float: right !important;
  margin-top: -6px !important;
  pointer-events: none !important;
}

/* View-all dept cell in shift card */
.shift-dept-cell {
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}
.shift-subdept {
  font-weight: normal;
  font-size: 13px;
  color: #555;
}

/* Location column — smaller gray text on desktop */
.body .volviewbody .greening .greentingtextlist table td:last-child {
  font-size: 13px;
  color: #888;
}

/* Department description note — space above to separate from dropdown */
.dept-note-tr td {
  padding-top: 12px !important;
}

/* Moon icon for night-shift rows only (action sets class="night" on TR) */
.body .volviewbody .greening .greentingtextlist table tr.night td:first-child label::before {
  content: "🌙 ";
}
/* Remove blue color from all text in night shift rows */
tr.night {
  color: #333 !important;
}

/* Hide Event Info chevron on desktop — only visible in mobile media block */
.eventinfo-toggle-chevron { display: none; }

/* Sub-department select — desktop: centered, wider */
#subDepartmentID {
  display: block !important;
  width: 300px !important;
  margin: 8px auto 0 !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   SHIFT PREVIEW CARDS (global — mobile + desktop)
   ========================================================================== */

.shift-preview-card {
  list-style: none !important;
  text-align: center !important;
  padding: 12px 16px 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.shift-preview-card .spc-label {
  font-size: 12px !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}
.shift-preview-card .spc-date {
  font-size: 18px !important;
  font-weight: bold !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}
.shift-preview-card .spc-time {
  font-size: 15px !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}
.shift-preview-card .spc-dept-label {
  display: block !important;
  font-size: 12px !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 10px !important;
  margin-bottom: 2px !important;
}
.shift-preview-card .spc-dept {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.shift-preview-card .spc-notes {
  font-size: 13px !important;
  color: #888 !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  line-height: 1.45 !important;
}
.shift-preview-card .spc-location {
  text-align: center !important;
  margin-top: 6px !important;
}
.shift-preview-card .spc-loc-label {
  display: block !important;
  font-size: 12px !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
}
.shift-preview-card .spc-loc-value {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   TABLET — max-width: 1024px
   Remove fixed widths, hide sidebar, single column
   ========================================================================== */
@media (max-width: 1024px) {

  /* Remove body min-width */
  body {
    min-width: auto !important;
  }

  /* Header */
  .header {
    min-width: auto;
    border-radius: 0;
  }
  .header .wrap-H {
    width: 100%;
    max-width: 1250px;
    box-sizing: border-box;
    padding: 0 15px;
  }
  .header .wrap-H .login-bar {
    margin-right: 20px;
  }

  /* Main wrappers */
  .wrap-H {
    width: 100%;
    max-width: 1250px;
    box-sizing: border-box;
    padding: 0 15px;
  }
  .wrap {
    width: 100%;
    max-width: 1050px;
    box-sizing: border-box;
    padding: 0 15px;
  }

  /* Single column: hide sidebar, expand main */
  .body .body-left {
    float: none;
    width: 100%;
  }
  .body .body-right {
    display: none;
  }

  /* Step cards — fluid width */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.closed,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* Resource sections — fluid width (inside and outside .event-body) */
  .body .body-left .event-body .work-obligation,
  .body .body-left .event-body .myfriendcont,
  .body .body-left .event-body .selfschedule,
  .body .body-left .event-body .selfschedule2,
  .body .body-left .event-body .myschedule,
  .body .body-left .event-body .workerlist,
  .body .body-left .event-body .workerlist li,
  .body .body-left .work-obligation,
  .body .body-left .myfriendcont,
  .body .body-left .selfschedule,
  .body .body-left .selfschedule2,
  .body .body-left .myschedule,
  .body .body-left .workerlist,
  .body .body-left .workerlist li {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Worker list — full width, match desktop card look */
  .body .body-left .workerlist {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
  .body .body-left .event-body .workerlist li,
  .body .body-left .workerlist li {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 20px 0 !important;
    margin: 4px 0 !important;
    background: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 14px !important;
    position: relative !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box;
  }
  .body .body-left .event-body .workerlist li .titleWrap,
  .body .body-left .workerlist li .titleWrap {
    padding-top: 0 !important;
    position: static !important;
    transform: none !important;
    display: block !important;
  }
  .body .body-left .event-body .workerlist li .titleWrap::after,
  .body .body-left .workerlist li .titleWrap::after {
    content: '';
    display: block;
    height: 15px;
    margin-top: 10px;
    background: url(../images/scallop-mobile.svg) no-repeat center bottom;
    background-size: auto 100%;
  }
  .body .body-left .event-body .workerlist li h1,
  .body .body-left .workerlist li h1 {
    font-size: 28px;
  }

  /* My Friends / My Schedule — match full width, consistent spacing */
  .body .body-left .myfriendcont,
  .body .body-left .myschedule {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  /* Resource section titles — consistent size (collapsed + expanded) */
  .body .body-left .event-body .myfriendcont .titleBar h1,
  .body .body-left .event-body .selfschedule .titleBar h1,
  .body .body-left .event-body .selfschedule2 .titleBar h1,
  .body .body-left .event-body .myschedule .titleBar h1,
  .body .body-left .myfriendcont .titleBar h1,
  .body .body-left .selfschedule .titleBar h1,
  .body .body-left .selfschedule2 .titleBar h1,
  .body .body-left .myschedule .titleBar h1,
  .body .body-left .event-body .workerlist li h1,
  .body .body-left .workerlist li h1 {
    font-size: 26px !important;
    font-family: bernhc, Arial, Helvetica, sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: normal !important;
  }

  /* Consistent spacing between resource sections */
  .body .body-left .resources-worker {
    margin-top: 40px !important;
  }
  .body .body-left .work-obligationincomplete,
  .body .body-left .work-obligation {
    margin-bottom: 6px !important;
  }

  /* Inner text blocks */
  .body .body-left .event-body .myfriendcont .contantmid .text1,
  .body-left .event-body .myfriendcont .contantmid .text1,
  .body .body-left .event-body .myfriendcont .contantmid .text2,
  .body .body-left .event-body .selfschedule .contantmid .text1,
  .body .body-left .event-body .myschedule .schedule-wetticket-notfinished .text2 {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* Application step forms */
  .body .body-left .stepForm {
    padding: 30px 15px;
    box-sizing: border-box;
  }

  /* jQuery UI dialogs — fluid */
  .ui-dialog {
    max-width: 95vw !important;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   SMALL TABLET / LANDSCAPE PHONE — max-width: 768px
   Stack step card columns, adjust padding
   ========================================================================== */
@media (max-width: 768px) {

  /* Landing pages (head.jsp layout) — fluid width */
  .content_text {
    overflow: visible !important;
  }
  .content_text .project {
    float: none !important;
    width: auto !important;
  }
  .content_text .sidebar {
    display: none !important;
  }

  /* Utility: hide/show on mobile */
  .hide-mobile { display: none !important; }
  .show-mobile-only { display: block !important; }
  .nowrap-mobile { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* Header nav adjustments */
  .header .wrap-H .logo .logo-title {
    margin-right: 15px;
    font-size: 16px;
  }
  .header .wrap-H .msg {
    margin-right: 15px;
    font-size: 13px;
  }
  .header .wrap-H .login-bar {
    margin-right: 10px;
    margin-left: 10px;
  }
  .header .wrap-H .dropdownNav {
    margin-left: 10px;
  }
  .header .wrap-H .profile-bar {
    margin-left: 10px;
  }
  .header .wrap-H .profile-bar a {
    width: auto;
  }

  /* Step cards — use flexbox to stack and reorder on mobile */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.closed,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .title.titleNumber {
    order: 0;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne .step-left,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo .step-left,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.closed .step-left,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-left {
    width: 100% !important;
    float: none;
    padding: 19px 15px 10px 66px;
    position: relative;
    min-height: auto;
    order: 1;
    box-sizing: border-box;
  }

  /* Reimbursable ticket / refund status — pull up right after step-left */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .reimbursable-ticket-cancelled {
    order: 2 !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 15px 0 66px !important;
    box-sizing: border-box;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .reimbursable-ticket-cancelled h1,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .reimbursable-ticket-cancelled h2 {
    position: static !important;
    margin: 4px 0 8px 0 !important;
    text-align: left !important;
  }

  /* Status text — static positioned, not absolute */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .step-left h1,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-left h1 {
    position: static !important;
    margin: 6px 0 0 0 !important;
    text-align: left;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .step-left h2,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-left h2 {
    position: static !important;
    margin: 18px 0 0 0 !important;
    text-align: left;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .step-left h2.text-align-center,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-left h2.text-align-center {
    text-align: center !important;
  }

  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne .step-right,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo .step-right,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-right {
    width: 100% !important;
    float: none;
    position: static !important;
    transform: none !important;
    margin: 10px 0 15px;
    text-align: center;
    order: 3;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ---- Steps collapsed state on mobile ---- */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.steps-mini,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li.steps-mini {
    min-height: 0 !important;
    max-height: 70px !important;
    overflow: hidden !important;
    padding-bottom: 18px !important;
    cursor: pointer;
    transition: max-height 0.25s ease, padding-bottom 0.25s ease;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.steps-mini .step-left h2,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li.steps-mini .step-left h2 {
    display: none !important;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.steps-mini .step-right,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li.steps-mini .step-right {
    display: none !important;
  }
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.steps-mini .reimbursable-ticket-cancelled,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li.steps-mini .reimbursable-ticket-cancelled {
    display: none !important;
  }

  /* Clear div at end */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .clear,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .clear {
    order: 4;
    width: 100%;
  }

  /* Ticket fee info — centered */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .step-right h1,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li .step-right h2,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-right h1,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-right h2 {
    text-align: center;
  }

  /* Resources for confirmed workers (may be inside or outside .event-body) */
  .body .body-left .resources-worker h1 {
    font-size: 24px;
    text-align: center;
  }
  .body .body-left .work-obligation {
    overflow: visible !important;
    padding: 0 10px 20px !important;
    box-sizing: border-box;
    width: auto !important;
  }
  .body .body-left .work-obligation .title-bar-inner {
    margin: 0 10px !important;
    padding: 12px 10px !important;
  }
  .body .body-left .work-obligation .title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .body .body-left .work-obligation .text {
    padding: 0 10px !important;
    font-size: 12px !important;
    overflow: visible !important;
    text-align: center;
  }
  .body .body-left .work-obligation .text img {
    max-width: 40px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
  }
  .body .body-left .myschedule,
  .body .body-left .selfschedule,
  .body .body-left .selfschedule2 {
    width: auto;
    overflow: hidden;
  }

  /* Reimbursable ticket cancelled sections */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne .reimbursable-ticket-cancelled,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo .reimbursable-ticket-cancelled {
    padding-left: 15px;
    padding-right: 15px;
  }

  .size-deposit-cancelled {
    width: auto !important;
    margin: 0 !important;
  }

  /* Work obligation */
  .body .body-left .event-body .work-obligation .title-bar-inner {
    margin: 0 15px;
  }
  .body .body-left .event-body .work-obligation .text {
    padding: 0 15px;
  }

  /* Special category */
  .body .body-left .event-body .special-category {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    background-size: contain;
  }

  /* Friends photos */
  .body .body-left .myfriendcont .contantmid .fbphoto {
    width: auto;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* Description bar */
  .body .body-left .event-body .descriptionBar {
    padding: 0 15px;
    margin: 30px 0;
  }

  /* Steps bar padding */
  .body .body-left .event-body .stepsBar {
    padding: 0 15px;
  }

  /* Title bar */
  .body .body-left .event-body .titleBar {
    padding: 0 15px;
  }
  .body .body-left .event-body .titleBar h1 {
    font-size: 24px;
  }

  /* Recent news */
  .body .body-left .event-body .recentNewsBar {
    padding: 20px 15px 0;
  }

  /* Resources worker */
  .body .body-left .resources-worker {
    padding: 0 15px;
  }

  /* Worker list */
  .body .body-left .workerlist {
    padding: 0 15px;
  }

  /* Header — vertically center home icon in nav bar */
  .header .wrap-H {
    display: flex !important;
    align-items: flex-end !important;
    height: 50px !important;
    padding-bottom: 6px !important;
    box-sizing: border-box !important;
  }
  .header .wrap-H .logo {
    display: flex !important;
    align-items: flex-end !important;
    float: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .header .wrap-H .logo .logo-title {
    line-height: 1 !important;
    margin-right: 10px !important;
  }
  .header .wrap-H .dropdownNav {
    margin-left: auto !important;
    float: none !important;
    order: 3 !important;
    flex-shrink: 0 !important;
  }
  .header .wrap-H .dropdownNav ul,
  .header .wrap-H .dropdownNav ul li {
    float: none !important;
    margin-right: 0 !important;
  }
  .header .wrap-H .dropdownNav ul li > a {
    white-space: nowrap !important;
  }
  .header .wrap-H .msg {
    display: none !important;
  }
  .header .wrap-H .clear {
    display: none;
  }

  /* Waiver page */
  .waiver-page-wrap {
    padding: 20px 15px 40px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .waiver-sign-panel {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .waiver-sign-left {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .waiver-section-label {
    white-space: nowrap !important;
  }
  .waiver-user-name {
    white-space: nowrap !important;
  }
  .waiver-user-detail {
    white-space: normal !important;
    word-wrap: break-word;
  }
  .waiver-sign-right {
    flex: 1 1 100% !important;
  }
  .waiver-text-box {
    padding: 16px !important;
  }
  .waiver-header-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .waiver-action-buttons {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .waiver-btn-agree,
  .waiver-btn-decline {
    width: 100% !important;
    text-align: center !important;
  }

  /* Order Processing Fee page */
  .opf-info-card,
  .opf-payment-card {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
  .opf-form-grid {
    display: block !important;
  }
  .opf-form-grid > label {
    display: block !important;
    font-weight: bold;
    margin: 14px 0 6px 0;
  }
  .opf-form-grid > label:first-child {
    margin-top: 0;
  }
  .opf-form-grid > div {
    display: block !important;
    width: 100% !important;
  }
  .opf-form-grid input[type="text"],
  .opf-form-grid input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Accepted Cards row — wrap on mobile */
  .opf-payment-card > div:first-of-type {
    flex-wrap: wrap !important;
  }
  .opf-payment-card > div:first-of-type strong {
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 8px;
  }
  /* Payment summary — tighter on mobile */
  .opf-info-card h1 {
    font-size: 20px !important;
  }
  .opf-info-card h2 {
    font-size: 18px !important;
  }

  /* Deposit / payment form */
  .depositStep2TicketReimbursable {
    padding: 0 10px;
    box-sizing: border-box;
  }
  .depositStep2TicketReimbursable a,
  .body .body-left .stepForm a,
  .body .body-left .stepForm p a {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }

  /* Application form fields */
  .body .body-left .stepForm ul.form input,
  .body .body-left .stepForm ul.form select,
  .body .body-left .stepForm ul.form textarea,
  .body .body-left .stepForm ul.form .input1 input {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Dialog popups */
  .dialog-visited .dialog-body .main-body-block .input input,
  .dialog-visited .dialog-body .main-body-block .input select {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Confetti success page */
  .body .body-left .event-body .stepsBar .steps .congratulations-header {
    font-size: 28px !important;
  }

  /* ---- Contact form & landing pages (head.jsp layout) ---- */
  .content_text .project .container .container_right {
    width: auto !important;
    float: none !important;
  }
  .content_text .project .container .container_left {
    float: none !important;
    margin-right: 0 !important;
  }
  .contact {
    width: auto !important;
    box-sizing: border-box;
    padding: 15px !important;
  }
  .contact .c-text {
    width: auto !important;
    float: none !important;
    text-align: left !important;
    margin-bottom: 4px;
  }
  .contact .c-form {
    width: auto !important;
    float: none !important;
    padding-left: 0 !important;
    margin-bottom: 10px;
  }
  .contact .c-input,
  .contact .c-textarea,
  .contact .c-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .contact .c-button,
  .contact .c-buttonOver {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 200px;
  }
  .contact .c-prompt {
    width: auto !important;
  }

  /* Terms & Privacy Policy pages — remove fixed width */
  .terms-box {
    overflow: visible !important;
  }
  .terms-box .content {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* FAQ page */
  .content_text .project .container .container_right .reg .pro_box {
    padding: 15px;
  }
  .faq-title a {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .collapsed {
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 10px 15px;
  }

  /* Work With Friends dialog — compact to fit screen without scrolling */
  .friend-content .f-title {
    font-size: 16px !important;
    padding: 4px 0 10px !important;
    width: 40% !important;
  }
  .friend-text {
    font-size: 14px !important;
    margin: 6px 10px !important;
  }
  .friend-input {
    width: calc(100% - 30px) !important;
    margin: 6px auto !important;
  }
  .my-friends {
    width: auto !important;
    padding: 6px !important;
    margin-top: 8px !important;
    min-height: 0 !important;
  }
  .my-friends ul li {
    width: 70px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-bottom: 8px !important;
  }
  .my-friends ul li img {
    width: 60px !important;
    height: 60px !important;
  }
  .friend-content .pending-request {
    margin: 6px !important;
    min-height: 0 !important;
    padding-bottom: 6px;
  }
  .friend-content .pending-request .title {
    font-size: 15px !important;
    padding: 6px 8px !important;
  }
  .friend-content .sub-title {
    font-size: 13px !important;
    padding: 10px !important;
    line-height: 1.4;
  }
  .friend-content + .friend-footer {
    padding: 8px 10px !important;
    height: auto !important;
  }

  /* Terms/waiver sign section — remove fixed left padding */
  .checkBOXBar {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .section-waiver {
    flex-wrap: wrap;
  }
  .section-waiver .left {
    width: auto;
    min-width: auto;
  }

  /* Modal overlay must be above previewTableList (z-index 9000)
     so it blocks click-through to the fixed full-screen panel below */
  .ui-widget-overlay {
    z-index: 9999 !important;
  }

  /* All jQuery UI dialogs — centered sheet on mobile, auto height */
  .ui-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: calc(100vh - 60px) !important;
    border-radius: 12px !important;
    margin: 0 !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .ui-dialog .ui-dialog-titlebar {
    border-radius: 12px 12px 0 0 !important;
    flex-shrink: 0 !important;
  }
  .ui-dialog .ui-dialog-content {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: calc(100vh - 200px) !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  .ui-dialog .ui-dialog-content iframe {
    width: 100% !important;
    height: 60vh !important;
  }
  .ui-dialog .ui-dialog-buttonpane {
    flex-shrink: 0 !important;
  }
  .ui-dialog .ui-dialog-content input[type="text"],
  .ui-dialog .ui-dialog-content input[type="email"],
  .ui-dialog .ui-dialog-content input[type="password"],
  .ui-dialog .ui-dialog-content textarea,
  .ui-dialog .ui-dialog-content select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ==========================================================================
   PHONE — max-width: 480px
   Full-width everything, compact spacing
   ========================================================================== */
@media (max-width: 480px) {

  /* Header — compact */
  .header {
    height: auto;
    min-height: 50px;
  }
  .header .wrap-H {
    padding: 0 10px;
    display: flex !important;
    align-items: flex-end !important;
    height: 50px !important;
    padding-bottom: 6px !important;
    box-sizing: border-box !important;
  }
  .header .wrap-H .logo {
    display: flex !important;
    align-items: flex-end !important;
    float: none !important;
  }
  .header .wrap-H .logo .logo-title {
    font-size: 14px;
    margin-right: 8px;
    line-height: 1 !important;
  }
  .header .wrap-H .msg {
    display: none !important;
  }
  .header .wrap-H .dropdownNav {
    margin-left: auto !important;
    float: none !important;
    order: 3 !important;
    flex-shrink: 0 !important;
  }
  .header .wrap-H .dropdownNav ul li {
    margin-right: 0 !important;
  }
  .header .wrap-H .clear {
    display: none !important;
  }
  .header .wrap-H .dropdownNav ul li a {
    font-size: 14px;
    padding-right: 15px;
    white-space: nowrap !important;
  }
  .header .wrap-H .login-bar {
    margin: 0 5px 0 auto;
  }
  .header .wrap-H .profile-bar {
    font-size: 14px;
  }

  /* Main content */
  .wrap {
    padding: 0 10px;
  }
  .body .wrap {
    margin: 15px auto;
  }

  /* Step cards — tighter padding */
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne .step-left,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo .step-left,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.closed .step-left,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-left {
    padding: 19px 10px 10px 56px;
  }

  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne .step-left h1,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo .step-left h1 {
    font-size: 20px;
    margin-left: -5px;
  }

  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleOne .step-right,
  .body .body-left .event-body .stepsBar .steps ul.step-1 li.styleTwo .step-right,
  .body .body-left .event-body .stepsBar .steps ul.step-2 li .step-right {
    margin: 10px 10px 0;
  }

  /* Steps bar */
  .body .body-left .event-body .stepsBar {
    padding: 0 10px;
  }
  .body .body-left .event-body .stepsBar .titleBar h1 {
    font-size: 22px;
  }

  /* Title bar */
  .body .body-left .event-body .titleBar {
    padding: 0 10px;
  }
  .body .body-left .event-body .titleBar h1 {
    font-size: 20px;
    line-height: 1.3;
  }
  .body .body-left .event-body .titleBar h2 {
    font-size: 14px;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* Description */
  .body .body-left .event-body .descriptionBar {
    padding: 0 10px;
    margin: 20px 0 40px;
  }
  .body .body-left .event-body .descriptionBar h1 {
    font-size: 22px;
  }

  /* Work obligation — collapsed (unexpanded) */
  .body .body-left .work-obligationincomplete {
    height: auto !important;
    width: auto !important;
    padding: 24px 20px 28px !important;
    background-image: none !important;
    background-color: #f3f3f3 !important;
    border-radius: 14px !important;
    box-sizing: border-box;
  }
  .body .body-left .work-obligationincomplete .title {
    font-size: 28px !important;
    padding-top: 0 !important;
    line-height: 1.3 !important;
    background: #f0b0a0;
    border-radius: 10px;
    padding: 14px 24px !important;
    display: inline-block;
  }
  /* Work obligation — expanded */
  .body .body-left .work-obligation .title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .body .body-left .work-obligation .title-bar-inner {
    margin: 0 10px;
    padding: 12px 0;
  }
  .body .body-left .work-obligation .text {
    text-align: center !important;
    overflow: visible !important;
  }
  .body .body-left .work-obligation .text img {
    max-width: 40px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
  }

  /* Worker list — phones */
  .body .body-left .event-body .workerlist li h1,
  .body .body-left .workerlist li h1 {
    font-size: 26px;
  }
  .body .body-left .workerlist {
    margin-top: 6px !important;
  }


  /* Waiver */
  .waiver-page-wrap {
    padding: 15px 10px 30px !important;
  }
  .waiver-text-box {
    padding: 12px !important;
    font-size: 13px !important;
  }
  .waiver-sign-name-row input[type="text"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Payment form — deposit step */
  .depositStep2TicketReimbursable input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Application form fields — full width */
  .body .body-left .stepForm ul.form input {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .body .body-left .stepForm ul.form .input1 input {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .body .body-left .stepForm ul.form select {
    max-width: 100%;
    box-sizing: border-box;
  }
  .body .body-left .stepForm ul.form textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Buttons — wider tap targets */
  .body .body-left .stepForm .stepBtn {
    text-align: center;
  }
  .body .body-left .stepForm .stepBtn a,
  .body .body-left .stepForm .stepBtn input[type="button"],
  .body .body-left .stepForm .stepBtn input[type="submit"] {
    min-width: 120px;
    padding: 8px 16px;
  }

  /* Social media bar */
  .body .body-left .socail-media {
    margin: 10px 10px 0;
  }

  /* Recent news */
  .body .body-left .event-body .recentNewsBar {
    padding: 15px 10px 0;
  }
  .body .body-left .event-body .recentNewsBar .msg .date {
    display: none;
  }

  /* Confetti success */
  .body .body-left .event-body .stepsBar .steps .congratulations-header {
    font-size: 22px !important;
  }

  /* Friend photos grid */
  .body .body-left .myfriendcont .contantmid .fbphoto {
    padding: 0 10px;
  }
  .body .body-left .myfriendcont .contantmid .fbphoto li {
    width: 80px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .body .body-left .myfriendcont .contantmid .fbphoto li .pic,
  .body .body-left .myfriendcont .contantmid .fbphoto li .pic img {
    width: 68px;
    height: 68px;
  }

  /* ---- My Schedule: center + wrap text on mobile ---- */
  .body .body-left .myschedule .titleBar,
  .body .body-left .myfriendcont .titleBar,
  .body .body-left .selfschedule .titleBar,
  .body .body-left .selfschedule2 .titleBar {
    height: auto !important;
    padding-bottom: 20px !important;
  }
  .body .body-left .myschedule .titleBar h1,
  .body .body-left .myfriendcont .titleBar h1,
  .body .body-left .selfschedule .titleBar h1,
  .body .body-left .selfschedule2 .titleBar h1,
  .body .body-left .event-body .myfriendcont .titleBar h1,
  .body .body-left .event-body .selfschedule .titleBar h1,
  .body .body-left .event-body .selfschedule2 .titleBar h1,
  .body .body-left .event-body .myschedule .titleBar h1 {
    font: 26px bernhc, Arial, Helvetica, sans-serif !important;
    margin-bottom: 0 !important;
  }
  .body .body-left .event-body .myschedule .schedulelist,
  .body .body-left .event-body .myschedule .schedulelist3,
  .body .body-left .myschedule .schedulelist,
  .body .body-left .myschedule .schedulelist3 {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    background: #e8f5f8 !important;
    border-radius: 14px !important;
    padding: 8px 5px 12px 5px !important;
  }
  /* New shift card layout — two-row header on mobile:
     Row 1: [Shift N]  (pending badge is absolute top-right)
     Row 2: [   Department Name — full width, centered, large   ] */
  .body .body-left .myschedule .schedulelist .shift-header,
  .body .body-left .myschedule .schedulelist3 .shift-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 30px 0 6px 0 !important;
    margin: 0 !important;
    position: relative !important;
    min-height: 40px !important;
    justify-content: center !important;
  }
  .body .body-left .myschedule .schedulelist .shift-header .lefttitle,
  .body .body-left .myschedule .schedulelist3 .shift-header .lefttitle {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    transform: none !important;
    font-size: 22px !important;
    margin: 0 !important;
    height: auto !important;
    padding: 3px 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    flex-shrink: 0 !important;
  }
  /* Pending approval badge — absolute top-right above dept + sub-dept */
  .body .body-left .event-body .myschedule .schedulelist .shift-header .pending-approval-badge,
  .body .body-left .event-body .myschedule .schedulelist3 .shift-header .pending-approval-badge {
    position: absolute !important;
    right: 8px !important;
    top: 6px !important;
    transform: none !important;
    margin: 0 !important;
    float: none !important;
    display: inline-block !important;
  }
  /* Department name — full-width centered row */
  .body .body-left .myschedule .schedulelist .shift-header .title-header,
  .body .body-left .myschedule .schedulelist3 .shift-header .title-header {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 4px 0 2px !important;
    margin: 0 !important;
  }
  /* Sub-department name — full-width centered row below department */
  .body .body-left .myschedule .schedulelist .shift-header .title-subheader,
  .body .body-left .myschedule .schedulelist3 .shift-header .title-subheader {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 2px !important;
  }
  .body .body-left .myschedule .schedulelist .shift-header .shift-complete-badge,
  .body .body-left .myschedule .schedulelist3 .shift-header .shift-complete-badge {
    position: static !important;
    transform: none !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }
  .body .body-left .myschedule .schedulelist .shift-complete-badge input[type="checkbox"],
  .body .body-left .myschedule .schedulelist3 .shift-complete-badge input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
  }
  .body .body-left .myschedule .schedulelist .shift-complete-badge input[type="checkbox"]:checked::after,
  .body .body-left .myschedule .schedulelist3 .shift-complete-badge input[type="checkbox"]:checked::after {
    font-size: 10px !important;
  }
  /* Collapsed state on mobile — single compact row, title truly centered */
  .body .body-left .myschedule .schedulelist.shift-collapsed .shift-header,
  .body .body-left .myschedule .schedulelist3.shift-collapsed .shift-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 44px !important;
  }
  .body .body-left .myschedule .schedulelist.shift-collapsed .shift-header .lefttitle,
  .body .body-left .myschedule .schedulelist3.shift-collapsed .shift-header .lefttitle {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .body .body-left .myschedule .schedulelist.shift-collapsed .shift-header .title-header,
  .body .body-left .myschedule .schedulelist3.shift-collapsed .shift-header .title-header {
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: center !important;
  }
  .body .body-left .myschedule .schedulelist.shift-collapsed .shift-header .shift-complete-badge,
  .body .body-left .myschedule .schedulelist3.shift-collapsed .shift-header .shift-complete-badge {
    margin-right: 8px !important;
  }
  .body .body-left .myschedule .schedulelist.shift-collapsed,
  .body .body-left .myschedule .schedulelist3.shift-collapsed {
    padding: 6px 0 6px 0 !important;
  }
  .body .body-left .myschedule .schedulelist .shift-body,
  .body .body-left .myschedule .schedulelist3 .shift-body {
    display: flex;
    margin: 8px 5px 0 !important;
  }
  .body .body-left .myschedule .schedulelist.shift-collapsed .shift-body,
  .body .body-left .myschedule .schedulelist3.shift-collapsed .shift-body,
  .body .body-left .myschedule .schedulelist.shift-collapsed .shift-instructions,
  .body .body-left .myschedule .schedulelist3.shift-collapsed .shift-instructions {
    display: none !important;
  }
  .body .body-left .myschedule .schedulelist .shift-body-left,
  .body .body-left .myschedule .schedulelist3 .shift-body-left {
    flex: 1 !important;
    padding-right: 8px !important;
  }
  .body .body-left .myschedule .schedulelist .shift-body-right,
  .body .body-left .myschedule .schedulelist3 .shift-body-right {
    flex: 1 !important;
    padding-left: 8px !important;
  }
  .body .body-left .myschedule .schedulelist .shift-instructions,
  .body .body-left .myschedule .schedulelist3 .shift-instructions {
    margin: 8px 5px 0 !important;
  }
  .body .body-left .myschedule .schedulelist2 {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
    max-height: none !important;
    margin-top: 0 !important;
    background-image: none !important;
    background-color: #e8f5f8;
    border-radius: 14px;
    padding: 20px 15px 25px !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished,
  .body .body-left .myschedule .schedule-wetticket-finished {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #e8f5f8;
    border-radius: 14px;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
  .body .body-left .myschedule .schedule-staffing-model {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    background-size: 100% auto !important;
    background-position: top center !important;
    border-radius: 14px;
    margin-top: -20px !important;
    margin-bottom: 20px !important;
  }
  .body .body-left .myschedule .schedulelist2 .text1,
  .body .body-left .myschedule .schedulelist2 .text2,
  .body .body-left .myschedule .schedule-wetticket-notfinished .text1,
  .body .body-left .myschedule .schedule-wetticket-notfinished .text2,
  .body .body-left .myschedule .schedule-wetticket-finished .text1,
  .body .body-left .myschedule .schedule-wetticket-finished .text2,
  .body .body-left .myschedule .schedule-staffing-model .text1,
  .body .body-left .myschedule .schedule-staffing-model .text2 {
    width: auto !important;
    max-width: 100%;
    padding: 2px 15px !important;
    margin-top: 4px !important;
    box-sizing: border-box;
    text-align: center !important;
    overflow: visible !important;
    height: auto !important;
  }
  .body .body-left .myschedule .schedulelist2 .text1 .text-left,
  .body .body-left .myschedule .schedulelist2 .text1 .text-right,
  .body .body-left .myschedule .schedulelist2 .text2 .text-left,
  .body .body-left .myschedule .schedulelist2 .text2 .text-right {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .body .body-left .myschedule .schedulelist2 .text3,
  .body .body-left .myschedule .schedule-wetticket-notfinished .text3,
  .body .body-left .myschedule .schedule-wetticket-finished .text3,
  .body .body-left .myschedule .schedule-staffing-model .text3 {
    width: auto !important;
    text-align: center !important;
    padding: 0 15px;
  }

  /* ---- Schedule shift cards: panelShift layout on mobile ---- */
  .body .body-left .myschedule .schedule-wetticket-notfinished,
  .body .body-left .myschedule .schedule-wetticket-finished,
  .body .body-left .myschedule .schedule-staffing-model {
    overflow: visible !important;
    padding: 10px 15px 15px !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .lefttitle,
  .body .body-left .myschedule .schedule-wetticket-finished .lefttitle,
  .body .body-left .myschedule .schedule-staffing-model .lefttitle {
    font-size: 28px !important;
    text-align: center !important;
    margin-left: 0 !important;
    height: auto !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .panelShift,
  .body .body-left .myschedule .schedule-wetticket-finished .panelShift,
  .body .body-left .myschedule .schedule-staffing-model .panelShift {
    margin: 15px 0 0 !important;
    overflow: hidden;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .panelShift .leftPanel,
  .body .body-left .myschedule .schedule-wetticket-finished .panelShift .leftPanel,
  .body .body-left .myschedule .schedule-staffing-model .panelShift .leftPanel {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    text-align: center;
  }
  .body .body-left .myschedule .schedule-wetticket-finished .panelShift .rightPanel,
  .body .body-left .myschedule .schedule-staffing-model .panelShift .rightPanel {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid #d7d7d7;
    margin-top: 15px;
    padding-top: 15px;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .title-header,
  .body .body-left .myschedule .schedule-wetticket-finished .title-header,
  .body .body-left .myschedule .schedule-staffing-model .title-header {
    text-align: center !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .date,
  .body .body-left .myschedule .schedule-wetticket-finished .date,
  .body .body-left .myschedule .schedule-staffing-model .date {
    text-align: center !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .time,
  .body .body-left .myschedule .schedule-wetticket-finished .time,
  .body .body-left .myschedule .schedule-staffing-model .time {
    text-align: center !important;
  }
  .body .body-left .myschedule .schedule-staffing-model .special-instructions {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-top: 15px !important;
  }
  .body .body-left .myschedule .schedule-staffing-model .special-instructions .left {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 5px;
  }
  .body .body-left .myschedule .schedule-staffing-model .special-instructions .right {
    width: 100% !important;
    text-align: center !important;
  }
  .body .body-left .myschedule .schedule-staffing-model .total-hours-left {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    padding-right: 0 !important;
  }
  .body .body-left .myschedule .schedule-staffing-model .total-hours-right {
    text-align: center !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .clock-left,
  .body .body-left .myschedule .schedule-wetticket-finished .clock-left {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    padding-right: 0 !important;
  }
  .body .body-left .myschedule .schedule-wetticket-notfinished .clock-right,
  .body .body-left .myschedule .schedule-wetticket-finished .clock-right {
    text-align: center !important;
  }

  /* ---- News items: truncate with ellipsis ---- */
  .body .body-left .event-body .recentNewsBar .msg {
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .body .body-left .event-body .recentNewsBar .msg .title {
    flex-shrink: 0;
  }
  .body .body-left .event-body .recentNewsBar .msg .content {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: none !important;
  }

  /* Tables — scrollable */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Mobile: Event Info toggle header (uses existing h1) ---- */
  .eventinfo-toggle-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #ddd !important;
    margin-bottom: 0 !important;
  }
  .eventinfo-toggle-chevron {
    font-size: 11px;
    color: #999;
    display: inline-block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .eventinfo-toggle-header.open .eventinfo-toggle-chevron {
    transform: rotate(90deg);
  }
  .eventinfo-body {
    margin-top: 12px;
  }
  .mobile-print-schedule {
    cursor: pointer;
    font-size: 20px;
    float: right;
    margin-top: 4px;
  }
}

/* ==========================================================================
   SELF-SCHEDULE TOOL — fluid layout for tablets and phones
   Covers schedule.jsp and edit_schedule.jsp (.volviewbody pages)
   ========================================================================== */
/* Mobile-only elements hidden on desktop */
.preview-mobile-back { display: none; }
.greentingconfirmbtn-mobile { display: none; }

/* "a note from" note card */
.body .volviewbody .volviewnote {
  width: auto !important;
  max-width: 700px !important;
  margin: 40px auto 50px !important;
  background: #fefcf8 !important;
  border: 1px solid #e8e2d6 !important;
  border-left: 4px solid #c8a96e !important;
  border-radius: 10px !important;
  padding: 30px 40px 30px 36px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.body .volviewbody .volviewnote .titleBar {
  padding: 0 0 18px !important;
}
.body .volviewbody .volviewnote .notetext {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #3a3530 !important;
}

/* "a note from" title — event name always on its own line, centered */
.note-from-title { text-align: center; }

/* Remove scallop decorations from self-schedule tool (all screen sizes) */
.body .volviewbody .volviewbodytitle .titleBar,
.body .volviewbody .greening .greeningtitleBar {
  background-image: none !important;
  height: auto !important;
  margin-bottom: 0 !important;
}

/* Back button for self-schedule tool (desktop + mobile) */
.ss-back-btn {
  display: inline-block;
  margin-bottom: 10px;
  color: #555;
  font-size: 14px;
  text-decoration: none;
}
.ss-back-btn:hover { color: #c05650; text-decoration: underline; }

/* Scallop at the top of the Guidelines grey box (all screen sizes) */
.body .volviewbody .volviewcontant {
  position: relative;
  overflow: visible !important;
}
.body .volviewbody .volviewcontant::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
  background: url(../images/step-bg.svg) center bottom no-repeat;
  background-size: auto 100%;
}

/* ── Shift row cards ── */
.body .volviewbody .greening .greentingtext3 .greentingtextlist {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.body .volviewbody .greening .greentingtext3 .greentingtextlist table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.body .volviewbody .greening .greentingtext3 .greentingtextlist table tr {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  transition: background 0.15s !important;
  cursor: pointer !important;
}
.body .volviewbody .greening .greentingtext3 .greentingtextlist table tr:hover {
  background: #fdf3f3 !important;
}
.body .volviewbody .greening .greentingtext3 .greentingtextlist table td {
  padding: 12px 10px !important;
  vertical-align: middle !important;
}
.body .volviewbody .greening .greentingtext3 .greentingtextlist input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  accent-color: #c05650 !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
}
.body .volviewbody .greening .greentingtext3 .greentingtextlist label {
  cursor: pointer !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}
/* Date section header */
.body .volviewbody .greening .greentingtext3 .texttitle {
  margin-top: 20px !important;
  margin-bottom: 6px !important;
  padding-bottom: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid #c05650 !important;
  background-image: none !important;
}
.note-from-name { display: block; }

/* Full-page department picker overlay (mobile) */
.dept-picker-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #fff;
  z-index: 9100;
  flex-direction: column;
  overflow: hidden;
}
.dept-picker-overlay.active { display: flex; }
.dept-picker-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  background: #2c2c3e;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  flex-shrink: 0;
  position: relative;
}
.dept-picker-back {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  position: absolute;
  left: 16px;
}
.dept-picker-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1;
}
.dept-picker-list li {
  border-bottom: 1px solid #eee;
}
.dept-picker-list li button {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  padding: 16px 20px;
  font-size: 16px;
  cursor: pointer;
  color: #222;
}
.dept-picker-list li button:active,
.dept-picker-list li button.selected {
  background: #f0f4ff;
  font-weight: bold;
}

/* Department chooser — reset fixed height/overflow from wet-event.css */
.body .volviewbody .volviewchoose {
  height: auto !important;
  overflow: visible !important;
}
.body .volviewbody .volviewchoose .depaetmentsbtn {
  height: auto !important;
  overflow: visible !important;
}

/* Department chooser — hide "Department:" label, center the select dropdown */
.depaetmentsbtn .dept-label-td {
  display: none !important;
}
.depaetmentsbtn .dept-select-td {
  text-align: center !important;
  width: 100% !important;
}

/* Modern department select — desktop */
#departmentID,
.depaetmentsbtn select {
  display: inline-block !important;
  margin: 0 auto !important;
  height: 48px !important;
  width: 100% !important;
  max-width: 400px !important;
  padding: 0 40px 0 16px !important;
  font-size: 16px !important;
  font-family: arialR, Arial, Helvetica, sans-serif !important;
  color: #333 !important;
  background-color: #fff !important;
  border: 2px solid #ccc !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-align-last: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}
.depaetmentsbtn select:focus {
  outline: none !important;
  border-color: #c05650 !important;
  box-shadow: 0 0 0 3px rgba(192,86,80,0.15) !important;
}

/* Desktop: reduce top whitespace on self-schedule page */
.body .volviewbody {
  margin-top: 24px !important;
}
.body .volviewbody .volviewcontant {
  margin-top: 16px !important;
}
.body .volviewbody .volviewcontant .titleBar {
  padding: 16px 0 20px !important;
}

/* Department chooser — remove background-image (contains embedded "1." badge),
   replace with clean solid card, contain all content inside */
.body .volviewbody .volviewchoose {
  background: #f3f3f3 !important;
  background-image: none !important;
  border-radius: 12px !important;
  height: auto !important;
  overflow: visible !important;
  padding: 20px 20px 40px !important;
  box-sizing: border-box !important;
}
.body .volviewbody .volviewchoose .titleBar {
  padding: 0 0 8px !important;
}
.body .volviewbody .volviewchoose .titleBar h1 {
  margin-top: 0 !important;
}
.body .volviewbody .volviewchoose .shoosetext {
  width: auto !important;
  overflow: visible !important;
}

/* Mobile: back button shown only when a dept is selected */
.dept-back-btn {
  display: none;
}

/* Desktop: center preview/confirm buttons and shift cards within .greening */
.body .volviewbody .greening .greentingpreviewbtn,
.body .volviewbody .greening .greentingconfirmbtn {
  width: 100% !important;
  text-align: center !important;
}
.body .volviewbody .greening .previewTableList {
  width: 100% !important;
  text-align: center !important;
}
.body .volviewbody .greening .tableList,
.body .volviewbody .greening .currentTableList {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.body .volviewbody .greening .tableList ul,
.body .volviewbody .greening .currentTableList ul {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 580px !important;
  max-width: 100% !important;
  text-align: left !important;
}
.body .volviewbody .greening .tableList ul li.shift-preview-card,
.body .volviewbody .greening .currentTableList ul li.shift-preview-card {
  width: 100% !important;
  height: auto !important;
  margin: 8px 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}
/* texttitle (date + location header row) — flex at all sizes */
.body .volviewbody .greening .greentingtext3 .texttitle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}
.body .volviewbody .greening .greentingtext3 .texttitle span:first-child {
  min-width: 0 !important;
  flex: 1 !important;
}
.body .volviewbody .greening .greentingtext3 .texttitle span:last-child {
  flex-shrink: 0 !important;
  float: none !important;
  margin-right: 0 !important;
}

/* Space between checkbox and shift time label */
.body .volviewbody .greening .greentingtextlist input[type="checkbox"] {
  margin-right: 6px !important;
}

@media (max-width: 1100px) {
  .body .midad {
    width: auto !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    box-sizing: border-box !important;
  }
  .body .midad img {
    max-width: 100% !important;
    height: auto !important;
  }
  .body .volviewbody {
    width: auto !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .volviewcontant,
  .body .volviewbody .volviewnote,
  .body .volviewbody .greening,
  .body .volviewbody .greening .greentingtext2,
  .body .volviewbody .greening .greentingtext3,
  .body .volviewbody .greening .greentingpreviewat,
  .body .volviewbody .greening .greentingschedulet,
  .body .volviewbody .volview-ruleslist {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .volviewchoose {
    width: auto !important;
    height: auto !important;
    background-size: 100% auto !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .volviewchoose .titleBar h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .body .volviewbody .volviewchoose .shoosetext {
    width: auto !important;
    padding: 0 15px !important;
  }
  .body .volviewbody .volviewselect {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .body .volviewbody .volviewselect .text1,
  .body .volviewbody .volviewselect .text2,
  .body .volviewbody .volviewselect .text3 {
    float: none !important;
    display: block !important;
    margin-right: 0 !important;
    height: auto !important;
  }
  /* Shift selection list */
  .body .volviewbody .greening .greentingtext3 .greentingtextlist .radioBTN-noselect,
  .body .volviewbody .greening .greentingtext3 .greentingtextlist .radioBTN-select {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Preview/Confirm button containers */
  .body .volviewbody .greening .greentingpreviewbtn,
  .body .volviewbody .greening .greentingconfirmbtn {
    width: auto !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  /* Shift preview cards — centered on mobile */
  .tableList,
  .currentTableList {
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .tableList ul,
  .currentTableList ul {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .tableList ul li,
  .currentTableList ul li {
    width: calc(100% - 24px) !important;
    max-width: 480px !important;
    margin: 6px auto !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  /* Schedule page main body text */
  .body .volviewbody .greening .greentingtext1 {
    font-size: 18px !important;
  }
  .body .volviewbody .greening .greentingtext2 {
    font-size: 15px !important;
  }
  .body .volviewbody .greening .greentingtext2 li {
    line-height: 28px !important;
  }
  .body .volviewbody .greening .greentingtext3 {
    font-size: 15px !important;
  }
  /* Department dropdown — stack label + select, both centered */
  .body .volviewbody .volviewchoose {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    height: auto !important;
    overflow: visible !important;
  }
  .body .volviewbody .volviewchoose .depaetmentsbtn {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  .body .volviewbody .volviewchoose .depaetmentsbtn table {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .body .volviewbody .volviewchoose .depaetmentsbtn table tr,
  .body .volviewbody .volviewchoose .depaetmentsbtn table td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* Hide "Department:" label — higher specificity beats display:block !important above */
  .body .volviewbody .volviewchoose .depaetmentsbtn table td.dept-label-td {
    display: none !important;
  }
  #departmentID,
  #subDepartmentID,
  .body .volviewbody .volviewchoose .depaetmentsbtn select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    font-size: 17px !important;
    margin: 10px auto 0 !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  /* Space above sub-department label + select */
  .subdept-td {
    margin-top: 20px !important;
    padding-top: 4px !important;
  }
  /* jquery.dd.js custom widget — full width, arrow no longer overlaps text */
  .body .volviewbody .volviewchoose .depaetmentsbtn .ddcommon {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px auto 0 !important;
  }
  .body .volviewbody .volviewchoose .depaetmentsbtn .ddcommon .ddTitle {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 40px !important;
  }
  .body .volviewbody .volviewchoose .depaetmentsbtn .ddcommon .ddTitleText {
    font-size: 17px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  #departmentID,
  #subDepartmentID {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* After dept selected on mobile: hide chooser, show back button */
  .dept-selected-mobile .body .volviewbody .volviewchoose,
  .dept-selected-mobile .body .volviewbody .volviewselect {
    display: none !important;
  }
  .dept-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    color: #444 !important;
    padding: 10px 0 14px !important;
    cursor: pointer !important;
    font-family: inherit !important;
  }
  .dept-back-btn::before {
    content: '←' !important;
    font-size: 20px !important;
  }
  /* texttitle: date header — larger text on mobile */
  .body .volviewbody .greening .greentingtext3 .texttitle span:first-child {
    font-size: 17px !important;
    font-weight: bold !important;
  }
  .body .volviewbody .greening .greentingtext3 .texttitle span:last-child {
    font-size: 12px !important;
    color: #777 !important;
  }
  /* Shift rows — single column: location stacks below time */
  .body .volviewbody .greening .greentingtextlist table {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Shift card row — centered card layout */
  .body .volviewbody .greening .greentingtextlist table tr {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 0 10px 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    text-align: center !important;
  }
  .body .volviewbody .greening .greentingtextlist table td {
    display: block !important;
    width: 100% !important;
    padding: 2px 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  /* First TD: checkbox absolute top-left, time label centered + large */
  .body .volviewbody .greening .greentingtextlist table td:first-child {
    padding-top: 4px !important;
    padding-bottom: 2px !important;
    font-size: 18px !important;
    font-weight: bold !important;
  }
  /* Last TD: location — smaller gray text */
  .body .volviewbody .greening .greentingtextlist table td:last-child {
    font-size: 13px !important;
    color: #666 !important;
    padding-top: 1px !important;
  }
  /* Checkbox — absolute top-left of card */
  .body .volviewbody .greening .greentingtextlist input[type="checkbox"] {
    position: absolute !important;
    left: 10px !important;
    top: 14px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }
  .body .volviewbody .greening .greentingtextlist label {
    display: block !important;
    text-align: center !important;
    padding-left: 0 !important;
  }
  /* Hide the "LOCATION" float-right header on mobile since location is now inline below time */
  .body .volviewbody .greening .greentingtext3 .texttitle span:last-child {
    display: none !important;
  }
  .body .volviewbody .greening .greentingschedulet .scheduletext {
    padding-left: 15px !important;
    font-size: 15px !important;
  }
  .body .volviewbody .greening .greentingschedulet .scheduletext li {
    line-height: 44px !important;
  }
  /* Guidelines box — tighter spacing above on mobile */
  .body .volviewbody .volviewcontant {
    margin-top: 12px !important;
  }
  /* Scallop — use 7-scallop SVG on mobile for clean edges (no half-scallops) */
  .body .volviewbody .volviewcontant::before {
    left: 0 !important;
    right: 0 !important;
    background-image: url(../images/step-bg-7.svg) !important;
  }
  /* Department chooser — override inline 700px width so it stays inside the grey box */
  .body .volviewbody .volviewchoose .depaetmentsbtn {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .volviewchoose .depaetmentsbtn table {
    width: 100% !important;
  }
  /* Reduce top padding inside Guidelines box (scallop handles the visual top) */
  .body .volviewbody .volviewcontant .titleBar {
    padding-top: 16px !important;
  }
  /* Rules list */
  .body .volviewbody .volviewcontant .volview-ruleslist li {
    height: auto !important;
  }
  /* Processing spinner overlay */
  #scheduleProcessing {
    padding-top: 120px !important;
  }
  /* Rules list — add breathing room so bullets aren't flush to the grey border */
  .body .volviewbody .volviewcontant .volview-ruleslist {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* Dialog content — centered, large readable text */
  .ui-dialog .ui-dialog-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
    padding: 32px 28px !important;
  }
  .ui-dialog .ui-dialog-content .popup-msg {
    font-size: 24px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  /* Dialog buttons — large comfortable touch targets, text centered */
  .ui-dialog .ui-dialog-buttonpane {
    text-align: center !important;
    padding: 16px 40px 32px !important;  /* 40px side padding creates the inset */
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Match wet-event.css specificity (0,3,0) — this later stylesheet wins.
     "Constant border" technique: every button always has a 2px border so
     the focused/hovered state only changes colour, never adds width. */
  .ui-dialog .ui-dialog-buttonpane .ui-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    height: 56px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    pointer-events: all !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
  }
  .ui-dialog .ui-dialog-buttonpane .ui-button:focus,
  .ui-dialog .ui-dialog-buttonpane .ui-button:focus-visible,
  .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-focus,
  .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-hover {
    border: 2px solid rgba(249,155,10,0.5) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  /* X close button — properly centered in titlebar, full touch target */
  .ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: all !important;
    z-index: 10 !important;
    margin: 0 !important;
  }
  .ui-dialog .ui-dialog-titlebar-close .ui-icon {
    pointer-events: none !important;
  }
  /* Full-page preview panel on mobile */
  .body .volviewbody .greening .previewTableList {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 9000 !important;
    overflow-y: auto !important;
    padding: 60px 15px 100px !important;
    box-sizing: border-box !important;
  }
  /* Back button — only visible on mobile */
  .preview-mobile-back {
    display: block !important;
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    color: #2980b9 !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 9001 !important;
  }
  /* Confirm button inside preview panel — visible on mobile.
     No !important so jQuery .hide()/.show() can override it. */
  .greentingconfirmbtn-mobile {
    display: block;
    text-align: center !important;
    padding: 20px 0 !important;
  }
  /* Hide desktop confirm button when preview is active (handled by JS) */
  .body .volviewbody .greening .greentingconfirmbtn {
    display: none !important;
  }

  /* Hide desktop confirm button when preview is active (handled by JS) */

  /* ── CSS-only modal fix ────────────────────────────────────────────────
     When jQuery UI creates a modal overlay (.ui-widget-overlay), the
     previewTableList (position:fixed, z-index:9000) MUST be completely
     removed so iOS doesn't route touches through it to the dialog.
     body:has(.ui-widget-overlay) fires automatically — no JS needed.
     display:none !important beats inline style="display:block" from jQuery. */
  body:has(.ui-widget-overlay) .previewTableList {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body:has(.ui-widget-overlay) .previewTableList * {
    pointer-events: none !important;
  }
  body:has(.ui-widget-overlay) .greentingconfirmbtn-mobile,
  body:has(.ui-widget-overlay) .greentingconfirmbtn-mobile * {
    pointer-events: none !important;
  }
  /* JS class backup (belt + suspenders) */
  body.wet-dialog-open .previewTableList {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.wet-dialog-open .previewTableList * { pointer-events: none !important; }
  body.wet-dialog-open .greentingconfirmbtn-mobile,
  body.wet-dialog-open .greentingconfirmbtn-mobile * { pointer-events: none !important; }

  /* ── Mobile dialog button layout — CSS guarantee ──────────────────────
     These rules use high specificity so they apply even if the JS open:
     callback hasn't run (e.g. stale compiled JSP). */
  .ui-dialog .ui-dialog-buttonpane {
    padding: 16px 20px 28px !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 12px !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  .ui-dialog .ui-dialog-buttonpane .ui-button,
  .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-default,
  .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-hover,
  .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-focus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 56px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    float: none !important;
  }

  /* Shift selection — fix 750px container width */
  .body .volviewbody .greening .greentingtext3 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .body .volviewbody .greening .greentingtext3 .greentingtextlist,
  .body .volviewbody .greening .greentingtextlist {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .greening .greentingtext3 .greentingtextlist table,
  .body .volviewbody .greening .greentingtextlist table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .greening .greentingtext3 .greentingtextlist table tbody,
  .body .volviewbody .greening .greentingtextlist table tbody {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .body .volviewbody .greening .greentingtext3 .greentingtextlist table tr,
  .body .volviewbody .greening .greentingtextlist table tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    text-align: center !important;
    padding: 12px 0 10px 0 !important;
  }
  .body .volviewbody .greening .greentingtext3 .greentingtextlist table td,
  .body .volviewbody .greening .greentingtextlist table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 2px 16px !important;
  }
  .body .volviewbody .greening .greentingtext3 .greentingtextlist .radioBTN-noselect,
  .body .volviewbody .greening .greentingtext3 .greentingtextlist .radioBTN-select {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    background-size: 0 !important;
    padding-left: 0 !important;
    height: auto !important;
  }

  /* Shift card layout — dept above sub-dept (also covers 480-768px devices) */
  .body .body-left .myschedule .schedulelist .shift-header,
  .body .body-left .myschedule .schedulelist3 .shift-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 46px 0 12px 0 !important;
    margin: 0 !important;
    position: relative !important;
    min-height: 40px !important;
  }
  .body .body-left .myschedule .schedulelist .shift-header .lefttitle,
  .body .body-left .myschedule .schedulelist3 .shift-header .lefttitle {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    transform: none !important;
    font-size: 22px !important;
    margin: 0 !important;
    height: auto !important;
    padding: 3px 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .body .body-left .event-body .myschedule .schedulelist .shift-header .pending-approval-badge,
  .body .body-left .event-body .myschedule .schedulelist3 .shift-header .pending-approval-badge {
    position: absolute !important;
    right: 8px !important;
    top: 6px !important;
    transform: none !important;
    margin: 0 !important;
    float: none !important;
    display: inline-block !important;
  }
  .body .body-left .myschedule .schedulelist .shift-header .title-header,
  .body .body-left .myschedule .schedulelist3 .shift-header .title-header {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 4px 0 2px !important;
    margin: 0 !important;
    order: unset !important;
    flex: unset !important;
  }
  .body .body-left .myschedule .schedulelist .shift-header .title-subheader,
  .body .body-left .myschedule .schedulelist3 .shift-header .title-subheader {
    width: 100% !important;
    text-align: center !important;
    margin-top: 2px !important;
    order: unset !important;
    flex: unset !important;
  }

  /* Hide guidelines, event note + dept note once shifts are loaded on mobile */
  .body .volviewbody:has(.greentingtextlist) .volviewcontant,
  .body .volviewbody:has(.greentingtextlist) .volviewnote {
    display: none !important;
  }
  .body .volviewbody:has(.greentingtextlist) .dept-note-tr {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .body .body-left .event-body .myschedule .schedulelist,
  .body .body-left .event-body .myschedule .schedulelist3 {
    padding: 18px 0 28px !important;
  }
  .body .body-left .event-body .myschedule .schedulelist .shift-body,
  .body .body-left .event-body .myschedule .schedulelist3 .shift-body {
    margin: 16px 20px 0 !important;
  }
}