/*
  contractor-panel.css
  Extracted from contractor-panel.php inline  blocks.
  Keep this file next to contractor-panel.php unless you update the href in the PHP file.
*/

/* ---- Extracted style block 1 ---- */
/* Fixed22: Mobile-only safe fix for Invoice > Additional Line Items.
   Desktop is untouched. This keeps the section as a real table, but confines
   the left/right scrolling to the line-items table only so the whole page does not overflow. */
@media (max-width: 48rem) {.contractor-panel-page #cp-invoice-panel, .contractor-panel-page #cp-invoice-panel .cp-tab-panel, .contractor-panel-page #cp-invoice-panel .invoice-workflow, .contractor-panel-page #cp-invoice-panel .invoice-step, .contractor-panel-page #cp-invoice-panel .invoice-step-extras, .contractor-panel-page #cp-invoice-panel .invoice-step-extras > * {max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras {overflow: hidden !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-container {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    margin: 14px 0 0 0 !important;
    padding: 0 0 10px 0 !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    scrollbar-width: auto !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-container::-webkit-scrollbar {height: 12px !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-container::-webkit-scrollbar-track {background: #edf2f7 !important;
    border-radius: 999px !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-container::-webkit-scrollbar-thumb {background: #8fa9bf !important;
    border-radius: 999px !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table.preserve-headers, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table.line-items-table {display: table !important;
    width: 680px !important;
    min-width: 680px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    font-size: 0.88rem !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table thead {display: table-header-group !important;
    visibility: visible !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table tbody {display: table-row-group !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table tr, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table tbody tr, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table tbody tr.li-row {display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td {display: table-cell !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #263238 !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table thead th {background: #f4f7fa !important;
    color: #111827 !important;
    font-weight: 800 !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th::before, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td::before, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td[data-label]::before {content: none !important;
    display: none !important;}
/* Hide Description on phone to remove the empty gap between Type and Date.
     The hidden form data still remains in the row for submission. */
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(2), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(2) {display: none !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(1), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(1) {width: 120px !important; text-align: left !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(3), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(3) {width: 130px !important; text-align: left !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(4), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(4) {width: 130px !important; text-align: right !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(5), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(5) {width: 90px !important; text-align: right !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(6), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(6) {width: 105px !important; text-align: right !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:nth-child(7), .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:nth-child(7) {width: 105px !important; text-align: center !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child button, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .edit-line-item, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .remove-line-item {width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    border-radius: 7px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child button i, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child button svg {font-size: 0.82rem !important;
    margin: 0 !important;
    line-height: 1 !important;}
/* Controls below the scrollable table should never be part of the horizontal scroll. */
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-controls {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 0 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #f7fafc !important;
    box-sizing: border-box !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-controls #add-line-item-btn {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-controls .invoice-subtotal-box {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;}}
/* fixed23: clearer status badges + mobile-safe line-item actions */
.contractor-panel-page .paid-icon {display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.55em !important;
  height: 1.55em !important;
  min-width: 1.55em !important;
  border-radius: 999px !important;
  font-size: 0.82em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;}
.contractor-panel-page .paid-icon.paid-yes {background: #e8f6ec !important;
  color: #2f7d38 !important;
  border-color: #bfe5c8 !important;}
.contractor-panel-page .paid-icon.paid-no {background: #fdeeee !important;
  color: #b94a48 !important;
  border-color: #f2c5c4 !important;}
.contractor-panel-page .paid-icon.paid-late {background: #fff5db !important;
  color: #9a650f !important;
  border-color: #f2d58b !important;}
.contractor-panel-page #line-items-table .edit-line-item, .contractor-panel-page #line-items-table .remove-line-item {display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;}
.contractor-panel-page #line-items-table .li-action-icon {display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 15px !important;}
@media (max-width: 768px) {.contractor-panel-page #line-items-table th:last-child, .contractor-panel-page #line-items-table td:last-child {min-width: 96px !important;
    width: 96px !important;
    text-align: center !important;
    white-space: nowrap !important;}
.contractor-panel-page #line-items-table .edit-line-item, .contractor-panel-page #line-items-table .remove-line-item {width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 2px !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    overflow: hidden !important;}
.contractor-panel-page #line-items-table .li-action-icon {font-size: 16px !important;
    margin: 0 !important;}
.contractor-panel-page #line-items-table .li-action-text {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;}}
/* fixed24: icon contrast + single-border line items polish */
/* Remove the double-border look in the Additional Line Items area. The scroll wrapper is just a viewport; the table owns the border. */
.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-container, .contractor-panel-page #cp-invoice-panel .invoice-step-extras .table-responsive.line-items-container {border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0 12px 0 !important;
  margin-top: 14px !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table.preserve-headers, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table.line-items-table {border: 1px solid #dfe8ee !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td {border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid #dfe8ee !important;
  border-bottom: 1px solid #dfe8ee !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table th:last-child, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child {border-right: 0 !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table tbody tr:last-child td {border-bottom: 0 !important;}
/* Equal, readable Edit / Remove action buttons. */
.contractor-panel-page #line-items-table .edit-line-item, .contractor-panel-page #line-items-table .remove-line-item, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .edit-line-item, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .remove-line-item {width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 2px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  vertical-align: middle !important;}
.contractor-panel-page #line-items-table .edit-line-item {background: #f0f6fc !important;
  border: 1px solid #9fc1de !important;
  color: #214f76 !important;}
.contractor-panel-page #line-items-table .remove-line-item {background: #fff1f1 !important;
  border: 1px solid #e0a2a2 !important;
  color: #9f2f2f !important;}
.contractor-panel-page #line-items-table .edit-line-item:hover {background: #e1eff9 !important;}
.contractor-panel-page #line-items-table .remove-line-item:hover {background: #ffe2e2 !important;}
.contractor-panel-page #line-items-table .li-action-icon, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .li-action-icon {display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;}
.contractor-panel-page #line-items-table .edit-line-item .li-action-icon {transform: translateY(-1px);}
.contractor-panel-page #line-items-table .remove-line-item .li-action-icon {font-size: 26px !important; transform: translateY(-1px);}
.contractor-panel-page #line-items-table .li-action-text {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;}
/* Better payment status badges with consistent sizing and readable contrast. */
.contractor-panel-page .paid-icon {width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;}
.contractor-panel-page .paid-icon::before {display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;}
.contractor-panel-page .paid-icon.paid-yes {background: #237a3b !important; color: #fff !important; border-color: #237a3b !important;}
.contractor-panel-page .paid-icon.paid-yes::before {content: "✓" !important;}
.contractor-panel-page .paid-icon.paid-no {background: #b83b3b !important; color: #fff !important; border-color: #b83b3b !important;}
.contractor-panel-page .paid-icon.paid-no::before {content: "×" !important; font-size: 18px !important; transform: translateY(-1px);}
.contractor-panel-page .paid-icon.paid-late {background: #f4b740 !important; color: #4a3100 !important; border-color: #d99a1f !important;}
.contractor-panel-page .paid-icon.paid-late::before {content: "!" !important; font-size: 16px !important;}
@media (max-width: 768px) {.contractor-panel-page #cp-invoice-panel .invoice-step-extras .line-items-container, .contractor-panel-page #cp-invoice-panel .invoice-step-extras .table-responsive.line-items-container {overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: auto !important;
    padding-bottom: 12px !important;}
.contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table.preserve-headers, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table.line-items-table {width: 690px !important;
    min-width: 690px !important;
    max-width: none !important;}
.contractor-panel-page #line-items-table .edit-line-item, .contractor-panel-page #line-items-table .remove-line-item, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .edit-line-item, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .remove-line-item {width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border-radius: 9px !important;}
.contractor-panel-page #line-items-table .li-action-icon, .contractor-panel-page #cp-invoice-panel .invoice-step-extras #line-items-table td:last-child .li-action-icon {font-size: 20px !important;}
.contractor-panel-page #line-items-table .remove-line-item .li-action-icon {font-size: 24px !important;}
.contractor-panel-page .paid-icon {width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important;}}
/* ===== Fixed25: lighter avatar panel, clearer Interac security answer spacing, smaller desktop P/A buttons ===== */
.contractor-panel-page .instructor-profile .profile-image {background: linear-gradient(135deg, #eef6fb, #f8fbfd) !important;
  border-right: 1px solid rgba(95, 130, 163, 0.14) !important;}
.contractor-panel-page .instructor-profile .profile-image img {border-color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(67, 107, 149, 0.16) !important;}
.contractor-panel-page .invoice-payment-grid .security-answer-box, .contractor-panel-page .security-answer-box {background: #ffffff !important;
  border: 1px solid rgba(95, 130, 163, 0.18) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin: 6px 0 14px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;}
.contractor-panel-page .security-answer-box strong {display: block !important;
  margin: 0 0 8px !important;
  color: #24445f !important;}
.contractor-panel-page .security-answer-box p, .contractor-panel-page #transfer-security-answer {margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: #f7fafc !important;
  color: #37474f !important;}
.contractor-panel-page .invoice-payment-grid {gap: 18px !important;
  align-items: start !important;}
@media (min-width: 769px) {.contractor-panel-page #cp-attendance-panel table td:last-child, .contractor-panel-page #cp-attendance-panel table th:last-child {text-align: center !important;
    width: 90px !important;}
.contractor-panel-page #cp-attendance-panel table td:last-child form, .contractor-panel-page #cp-attendance-panel table td:last-child .attendance-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .absence-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .status-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .present-absent-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .pa-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .button-group {display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 auto !important;}
.contractor-panel-page #cp-attendance-panel table td:last-child a, .contractor-panel-page #cp-attendance-panel table td:last-child button, .contractor-panel-page #cp-attendance-panel table td:last-child .button, .contractor-panel-page #cp-attendance-panel table td:last-child .btn, .contractor-panel-page #cp-attendance-panel table td:last-child input[type="submit"], .contractor-panel-page #cp-attendance-panel table td:last-child input[type="button"] {width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;}}
/* ===== Fixed26: mobile invoice checkbox labels stay beside their checkboxes ===== */
@media (max-width: 768px) {.contractor-panel-page #cp-invoice-panel .checkbox-row {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label {display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    min-height: 46px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label input[type="checkbox"] {flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;}}
/* =========================================================
   Fixed27: avatar container border + mobile calculation breakdown
   Scope: visual polish only; no feature/functionality changes.
   ========================================================= */
/* Avatar/profile image panel: keep the softer background but give the avatar area a complete border. */
.contractor-panel-page .instructor-profile .profile-image {background: linear-gradient(135deg, #f8fbfd, #eef5fa) !important;
  border-right: 1px solid var(--cp-border, #d9e4ec) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 228, 236, 0.72) !important;}
.contractor-panel-page .instructor-profile .profile-image img {background: #fff !important;
  border: 5px solid #ffffff !important;
  box-shadow: 0 10px 24px rgba(31, 60, 82, 0.14) !important;}
@media (max-width: 820px) {.contractor-panel-page .instructor-profile .profile-image {border-right: 0 !important;
    border-bottom: 1px solid var(--cp-border, #d9e4ec) !important;
    box-shadow: inset 0 0 0 1px rgba(217, 228, 236, 0.72) !important;}}
/* Mobile: keep the calculation breakdown readable and contained. */
@media (max-width: 768px) {.contractor-panel-page .instructor-profile details, .contractor-panel-page .instructor-profile details[open] {width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;}
.contractor-panel-page .instructor-profile details summary, .contractor-panel-page .summary-pointer {display: block !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f5f9fc !important;
    border: 1px solid var(--cp-border, #d9e4ec) !important;
    line-height: 1.25 !important;}
.contractor-panel-page .calc-breakdown-body {width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--cp-border, #d9e4ec) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-sizing: border-box !important;}
.contractor-panel-page .calc-breakdown-body::after {content: "Swipe left/right to view full breakdown";
    display: block;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5f6f7a;
    background: #f8fbfd;
    border-top: 1px solid var(--cp-border, #d9e4ec);
    text-align: center;}
.contractor-panel-page .calc-breakdown-body table {display: table !important;
    width: max-content !important;
    min-width: 760px !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: 0.82rem !important;}
.contractor-panel-page .calc-breakdown-body th, .contractor-panel-page .calc-breakdown-body td {display: table-cell !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    padding: 8px 10px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
    border-color: #edf2f6 !important;}
.contractor-panel-page .calc-breakdown-body th:first-child, .contractor-panel-page .calc-breakdown-body td:first-child {position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    box-shadow: 1px 0 0 #edf2f6 !important;}
.contractor-panel-page .calc-breakdown-body thead th:first-child {z-index: 3 !important;
    background: #f4f7fa !important;}}
/* =========================================================
   Fixed28: remove avatar container + redo mobile calculation breakdown
   - Avatar no longer sits inside a framed/background panel.
   - Calculation breakdown uses one clean horizontal-scroll table on mobile.
   ========================================================= */
/* Remove the avatar container/panel treatment completely. */
.contractor-panel-page .instructor-profile .profile-image {background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;}
.contractor-panel-page .instructor-profile .profile-image img {background: transparent !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(31, 60, 82, 0.12) !important;
  display: block !important;}
@media (max-width: 768px) {/* Keep the details block contained without turning table rows into cards. */
.contractor-panel-page .instructor-profile details, .contractor-panel-page .instructor-profile details[open] {width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin-top: 14px !important;}
.contractor-panel-page .instructor-profile details summary, .contractor-panel-page .summary-pointer {width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #f5f9fc !important;
    border: 1px solid var(--cp-border, #d9e4ec) !important;
    color: #24445f !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;}
.contractor-panel-page .calc-breakdown-body {width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
    border: 1px solid var(--cp-border, #d9e4ec) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    box-shadow: none !important;}
.contractor-panel-page .calc-breakdown-body h4, .contractor-panel-page .calc-breakdown-body p, .contractor-panel-page .calc-breakdown-body .small-note {margin: 0 !important;
    padding: 10px 12px !important;
    text-align: center !important;
    background: #ffffff !important;
    white-space: normal !important;}
.contractor-panel-page .calc-breakdown-body h4 {font-size: 0.98rem !important;
    color: #24445f !important;
    border-bottom: 1px solid #edf2f6 !important;}
.contractor-panel-page .calc-breakdown-body table {display: table !important;
    width: max-content !important;
    min-width: 720px !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-size: 0.76rem !important;
    background: #fff !important;}
.contractor-panel-page .calc-breakdown-body thead {display: table-header-group !important;}
.contractor-panel-page .calc-breakdown-body tbody {display: table-row-group !important;}
.contractor-panel-page .calc-breakdown-body tr {display: table-row !important;}
.contractor-panel-page .calc-breakdown-body th, .contractor-panel-page .calc-breakdown-body td {display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    padding: 7px 8px !important;
    border: 1px solid #edf2f6 !important;
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;}
.contractor-panel-page .calc-breakdown-body th {background: #f4f7fa !important;
    color: #34495e !important;
    font-weight: 800 !important;}
.contractor-panel-page .calc-breakdown-body td::before, .contractor-panel-page .calc-breakdown-body th::before {content: none !important;
    display: none !important;}
.contractor-panel-page .calc-breakdown-body th:first-child, .contractor-panel-page .calc-breakdown-body td:first-child {position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    box-shadow: 1px 0 0 #edf2f6 !important;}
.contractor-panel-page .calc-breakdown-body thead th:first-child {background: #f4f7fa !important;
    z-index: 3 !important;}
.contractor-panel-page .calc-breakdown-body::after {content: "Swipe left/right to view full calculation table";
    display: block !important;
    min-width: 720px !important;
    padding: 8px 10px !important;
    border-top: 1px solid #edf2f6 !important;
    background: #f8fbfd !important;
    color: #5f6f7a !important;
    text-align: center !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;}}
/* =========================================================
   Fixed29: mobile calculation breakdown uses contained horizontal scroll
   Matches the Additional Line Items scroll behavior.
   Desktop is untouched.
   ========================================================= */
@media (max-width: 768px) {.contractor-panel-page .instructor-profile .calc-breakdown-body, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border: 1px solid var(--cp-border, #d9e4ec) !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 !important;
    margin-top: 12px !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body table, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body table {display: table !important;
    width: max-content !important;
    min-width: 860px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body thead, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body thead {display: table-header-group !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body tbody, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body tbody {display: table-row-group !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body tr, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body tr {display: table-row !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body th, .contractor-panel-page .instructor-profile .calc-breakdown-body td, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body th, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body td {display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 92px !important;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
    text-align: left !important;
    border: 1px solid #edf2f6 !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body th, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body th {background: #f4f7fa !important;
    color: #34495e !important;
    font-weight: 800 !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body td::before, .contractor-panel-page .instructor-profile .calc-breakdown-body th::before, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body td::before, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body th::before {content: none !important;
    display: none !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body::-webkit-scrollbar, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body::-webkit-scrollbar {height: 12px !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body::-webkit-scrollbar-track, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body::-webkit-scrollbar-track {background: #edf3f7 !important;
    border-radius: 999px !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body::-webkit-scrollbar-thumb, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body::-webkit-scrollbar-thumb {background: #8aa6bb !important;
    border-radius: 999px !important;
    border: 2px solid #edf3f7 !important;}
.contractor-panel-page .instructor-profile .calc-breakdown-body::after, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body::after {content: "Scroll left/right to view full calculation table" !important;
    display: block !important;
    width: 860px !important;
    min-width: 860px !important;
    box-sizing: border-box !important;
    padding: 9px 10px !important;
    border-top: 1px solid #edf2f6 !important;
    background: #f8fbfd !important;
    color: #5f6f7a !important;
    text-align: center !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;}}


/* ---- Extracted style block 2 ---- */
/* =========================================================
   Fixed30: Mobile calculation breakdown containment
   - Page/overview stays viewport-width.
   - Only the actual breakdown table scrolls left/right.
   - Desktop remains untouched.
   ========================================================= */
@media (max-width: 768px) {.contractor-panel-page, .contractor-panel-page {max-width: 100% !important;
    overflow-x: hidden !important;}
.contractor-panel-page .cp-dashboard-shell, .contractor-panel-page .cp-panel, .contractor-panel-page .cp-panel-body, .contractor-panel-page .cp-overview-grid, .contractor-panel-page .cp-card, .contractor-panel-page .instructor-profile, .contractor-panel-page .instructor-profile .profile-info, .contractor-panel-page .instructor-profile .earnings, .contractor-panel-page .calc-breakdown, .contractor-panel-page .calc-breakdown-panel, .contractor-panel-page .calc-breakdown-body {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;}
.contractor-panel-page .calc-breakdown-body, .contractor-panel-page .instructor-profile .calc-breakdown-body, .contractor-panel-page .cp-dashboard-shell .calc-breakdown-body {overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 12px !important;
    border-radius: 14px !important;}
.contractor-panel-page .calc-breakdown-body > :not(.calc-mobile-scroll):not(table) {max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;}
.contractor-panel-page .calc-mobile-scroll {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    border: 1px solid #d9e4ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;}
.contractor-panel-page .calc-mobile-scroll table, .contractor-panel-page .calc-breakdown-body > table {display: table !important;
    width: 860px !important;
    min-width: 860px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;}
.contractor-panel-page .calc-mobile-scroll thead, .contractor-panel-page .calc-breakdown-body > table thead {display: table-header-group !important;}
.contractor-panel-page .calc-mobile-scroll tbody, .contractor-panel-page .calc-breakdown-body > table tbody {display: table-row-group !important;}
.contractor-panel-page .calc-mobile-scroll tfoot, .contractor-panel-page .calc-breakdown-body > table tfoot {display: table-footer-group !important;}
.contractor-panel-page .calc-mobile-scroll tr, .contractor-panel-page .calc-breakdown-body > table tr {display: table-row !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;}
.contractor-panel-page .calc-mobile-scroll th, .contractor-panel-page .calc-mobile-scroll td, .contractor-panel-page .calc-breakdown-body > table th, .contractor-panel-page .calc-breakdown-body > table td {display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 92px !important;
    padding: 9px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
    text-align: left !important;
    border: 1px solid #edf2f6 !important;}
.contractor-panel-page .calc-mobile-scroll th, .contractor-panel-page .calc-breakdown-body > table th {background: #f4f7fa !important;
    color: #34495e !important;
    font-weight: 800 !important;}
.contractor-panel-page .calc-mobile-scroll td::before, .contractor-panel-page .calc-mobile-scroll th::before, .contractor-panel-page .calc-breakdown-body > table td::before, .contractor-panel-page .calc-breakdown-body > table th::before {content: none !important;
    display: none !important;}
.contractor-panel-page .calc-mobile-scroll::after {content: "Scroll left/right to view full calculation table";
    display: block;
    min-width: 860px;
    padding: 9px 10px;
    border-top: 1px solid #edf2f6;
    background: #f8fbfd;
    color: #5f6f7a;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 800;
    box-sizing: border-box;}
.contractor-panel-page .calc-mobile-scroll::-webkit-scrollbar {height: 12px;}
.contractor-panel-page .calc-mobile-scroll::-webkit-scrollbar-track {background: #edf3f7;
    border-radius: 999px;}
.contractor-panel-page .calc-mobile-scroll::-webkit-scrollbar-thumb {background: #8aa6bb;
    border-radius: 999px;
    border: 2px solid #edf3f7;}}


/* ---- Extracted style block 3 ---- */
/* =========================================================
   Fixed31: corrected MOBILE calculation breakdown table scroll
   - Do NOT let the whole page/panel overflow.
   - Keep the calculation breakdown as a real wide table.
   - Only the table wrapper scrolls horizontally.
   ========================================================= */
@media (max-width: 768px) {.contractor-panel-page, .contractor-panel-page {overflow-x: hidden !important;
    max-width: 100% !important;}
.contractor-panel-page .cp-dashboard-shell, .contractor-panel-page .cp-panel, .contractor-panel-page .cp-panel-body, .contractor-panel-page .cp-overview-grid, .contractor-panel-page .instructor-profile, .contractor-panel-page .instructor-profile .profile-info, .contractor-panel-page .calc-breakdown-body {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;}
/* The wrapper is the ONLY thing that may scroll left/right. */
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    box-sizing: border-box !important;
    border: 1px solid #d9e4ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;}
/* Make the table naturally wider than the phone so it scrolls instead of crushing columns. */
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive table, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll table, .contractor-panel-page .calc-breakdown-body > table {display: table !important;
    width: 980px !important;
    min-width: 980px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: #fff !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive thead, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll thead {display: table-header-group !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive tbody, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll tbody {display: table-row-group !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive tfoot, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll tfoot {display: table-footer-group !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive tr, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll tr {display: table-row !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive th, .contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive td, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll th, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll td {display: table-cell !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: none !important;
    padding: 9px 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: middle !important;
    text-align: left !important;
    border: 1px solid #e7eef4 !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive th, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll th {background: #f4f7fa !important;
    color: #34495e !important;
    font-weight: 800 !important;}
/* Wider useful columns. */
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive th:nth-child(2), .contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive td:nth-child(2), .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll th:nth-child(2), .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll td:nth-child(2) {min-width: 180px !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive th:nth-child(7), .contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive td:nth-child(7), .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll th:nth-child(7), .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll td:nth-child(7) {min-width: 260px !important;
    white-space: normal !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive td::before, .contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive th::before, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll td::before, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll th::before {content: none !important;
    display: none !important;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive::after, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll::after {content: "Scroll left/right to view full calculation table";
    display: block;
    min-width: 980px;
    padding: 9px 10px;
    border-top: 1px solid #e7eef4;
    background: #f8fbfd;
    color: #5f6f7a;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    box-sizing: border-box;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive::-webkit-scrollbar, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll::-webkit-scrollbar {height: 12px;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive::-webkit-scrollbar-track, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll::-webkit-scrollbar-track {background: #edf3f7;
    border-radius: 999px;}
.contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive::-webkit-scrollbar-thumb, .contractor-panel-page .calc-breakdown-body .calc-mobile-scroll::-webkit-scrollbar-thumb {background: #7f9bb1;
    border-radius: 999px;
    border: 2px solid #edf3f7;}}


/* ---- Extracted style block 4 ---- */
/* =========================================================
   Fixed32: Make Overview > Show calculation breakdown scroll
   exactly like Additional Line Items on mobile.
   The panel stays full width; only the earnings table scrolls.
   ========================================================= */
@media (max-width: 48rem) {.contractor-panel-page #cp-overview-panel, .contractor-panel-page #cp-overview-panel .instructor-profile, .contractor-panel-page #cp-overview-panel .profile-info, .contractor-panel-page #cp-overview-panel details, .contractor-panel-page #cp-overview-panel .calc-breakdown-body {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body {padding: 12px !important;
    border-radius: 14px !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body > p, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > h4, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > ul {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    margin: 14px 0 0 0 !important;
    padding: 0 0 10px 0 !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    scrollbar-width: auto !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive::-webkit-scrollbar {height: 12px !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive::-webkit-scrollbar-track {background: #edf2f7 !important;
    border-radius: 999px !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive::-webkit-scrollbar-thumb {background: #8fa9bf !important;
    border-radius: 999px !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table.preserve-headers, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table.table-collapsed {display: table !important;
    width: 980px !important;
    min-width: 980px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    font-size: 0.88rem !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table thead {display: table-header-group !important;
    visibility: visible !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table tbody {display: table-row-group !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table tfoot {display: table-footer-group !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table tr, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table tbody tr, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table tfoot tr {display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td {display: table-cell !important;
    max-width: none !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #263238 !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table thead th {background: #f4f7fa !important;
    color: #111827 !important;
    font-weight: 800 !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th::before, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td::before, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td[data-label]::before {content: none !important;
    display: none !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(1), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(1) {width: 150px !important; text-align: left !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(2), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(2) {width: 210px !important; text-align: left !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(3), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(3) {width: 120px !important; text-align: left !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(4), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(4) {width: 120px !important; text-align: right !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(5), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(5) {width: 140px !important; text-align: right !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(6), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(6) {width: 120px !important; text-align: right !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table th:nth-child(7), .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table td:nth-child(7) {width: 320px !important; text-align: left !important; white-space: normal !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive::after {content: "Scroll left/right to view full calculation table";
    display: block;
    min-width: 980px;
    padding: 9px 10px;
    border-top: 1px solid #dfe8ee;
    background: #f8fbfd;
    color: #5f6f7a;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    box-sizing: border-box;}}


/* ---- Extracted style block 5 ---- */
/* =========================================================
   Fixed33: mobile table cleanup
   - Tables print as tables, not cards inside cards.
   - Remove extra containers around printed tables on mobile so more content is visible.
   - Calculation breakdown scrolls like Additional Line Items, with NO sticky Time column.
   ========================================================= */
@media (max-width: 48rem) {/* Any panel that mainly exists to hold a table should not add a second card/frame on mobile. */
.contractor-panel-page .cp-dashboard-shell .table-responsive, .contractor-panel-page .cp-dashboard-shell .invoice-log-table-wrap, .contractor-panel-page .cp-dashboard-shell .lesson-logs-review, .contractor-panel-page .cp-dashboard-shell .lesson-earnings-responsive, .contractor-panel-page #cp-overview-panel .calc-breakdown-body, .contractor-panel-page #cp-invoice-panel .line-items-scroll, .contractor-panel-page #cp-invoice-panel .line-items-table-wrap, .contractor-panel-page #cp-invoice-panel .additional-line-items-table-wrap {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    box-sizing: border-box !important;}
/* Calculation summary can stay readable, but without a heavy containing card. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body {padding-top: 8px !important;
    padding-bottom: 8px !important;
    border: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body > p, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > h4, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > ul, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > .small-note {max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;}
/* The earnings table itself gets the only horizontal scroll area. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    margin: 12px 0 0 0 !important;
    padding: 0 0 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid #dfe8ee !important;
    border-bottom: 1px solid #dfe8ee !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    scrollbar-width: auto !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table.preserve-headers, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table.table-collapsed {display: table !important;
    width: 980px !important;
    min-width: 980px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: visible !important;}
/* No sticky/frozen Time column. User should scroll the whole table naturally. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive th:first-child, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive td:first-child, .contractor-panel-page .calc-breakdown-body th:first-child, .contractor-panel-page .calc-breakdown-body td:first-child {position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive th, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive td {display: table-cell !important;
    padding: 9px 10px !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive td::before, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive th::before {content: none !important;
    display: none !important;}
/* Additional Line Items should follow the same no-extra-container table rule. */
.contractor-panel-page #cp-invoice-panel #line-items-table {margin: 0 !important;
    border-radius: 0 !important;}
.contractor-panel-page #cp-invoice-panel .line-items-scroll, .contractor-panel-page #cp-invoice-panel .line-items-table-wrap, .contractor-panel-page #cp-invoice-panel .additional-line-items-table-wrap {overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 1px solid #dfe8ee !important;
    border-bottom: 1px solid #dfe8ee !important;}}


/* ---- Extracted style block 6 ---- */
/* =========================================================
   Fixed34: Mobile table border/container cleanup
   - Remove nested/double borders around printed tables on mobile.
   - Keep horizontal scrolling only on the table wrappers.
   - Do not freeze/stick the first column.
   ========================================================= */
@media (max-width: 48rem) {/* Overview calculation breakdown: text can sit normally, table wrapper is the only scroll zone. */
.contractor-panel-page #cp-overview-panel details, .contractor-panel-page #cp-overview-panel .calc-breakdown-body {width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body > p, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > h4, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > ul, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > .small-note {padding-left: 4px !important;
    padding-right: 4px !important;}
/* Remove the rounded/card shell that was creating the double-border look. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 0 !important;
    padding: 0 0 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    box-sizing: border-box !important;
    scrollbar-width: auto !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive table, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive table {width: max-content !important;
    min-width: 980px !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 0 !important;
    background: #fff !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive th, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive td, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive th, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive td, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive th, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive td {display: table-cell !important;
    border: 1px solid #dfe8ee !important;
    border-radius: 0 !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    vertical-align: middle !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive th:first-child, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive td:first-child, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive th:first-child, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive td:first-child {position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    background-clip: padding-box !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive th::before, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive td::before, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive th::before, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive td::before {content: none !important;
    display: none !important;}
/* Table wrappers elsewhere: no nested rounded frame; table itself provides the lines. */
.contractor-panel-page .cp-dashboard-shell .table-responsive, .contractor-panel-page .cp-dashboard-shell .invoice-log-table-wrap, .contractor-panel-page .cp-dashboard-shell .line-items-scroll, .contractor-panel-page .cp-dashboard-shell .line-items-table-wrap, .contractor-panel-page .cp-dashboard-shell .additional-line-items-table-wrap {border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;}}


/* ---- Extracted style block 7 ---- */
/* =========================================================
   Fixed35: Clean up stray mobile table footer/scroll artifacts
   - Removes duplicate scroll hint bars/pseudo-elements.
   - Removes empty rounded/grey blocks beneath mobile tables.
   - Keeps the calculation table horizontally scrollable only inside the table area.
   ========================================================= */
@media (max-width: 48rem) {/* Stop older mobile-table rules from printing extra helper bars under the table. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive::after, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive::after, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive::after, .contractor-panel-page .calc-breakdown-body .lesson-earnings-responsive::after, .contractor-panel-page .calc-breakdown-body .table-responsive::after, .contractor-panel-page .cp-dashboard-shell .table-responsive::after, .contractor-panel-page .cp-dashboard-shell .lesson-earnings-responsive::after {content: none !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;}
/* The breakdown body should not become its own card at the bottom. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body {padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;}
/* Only the actual table wrapper scrolls. No extra blank space after it. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive {margin: 12px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;}
/* Avoid nested table borders producing double lines at the bottom. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive table, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive table, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive table {margin-bottom: 0 !important;
    border-radius: 0 !important;}
/* If a total/summary row is inside the horizontal table, keep it on one line. */
.contractor-panel-page #cp-overview-panel .lesson-earnings-responsive tfoot td, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive tr.total-row td, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive tfoot td, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive tr.total-row td {white-space: nowrap !important;}}


/* ---- Extracted style block 8 ---- */
/* =========================================================
   Fixed36: remove stray mobile scroll-hint artifacts
   The pale blue block with a lone “S” was coming from older
   pseudo-element scroll hints still firing on nested wrappers.
   Keep the table scrollbars, but remove all hint bars/blank blocks.
   ========================================================= */
@media (max-width: 48rem) {.contractor-panel-page #cp-overview-panel .calc-breakdown-body::after, .contractor-panel-page #cp-overview-panel .lesson-earnings-responsive::after, .contractor-panel-page #cp-overview-panel .table-responsive::after, .contractor-panel-page #cp-overview-panel .calc-mobile-scroll::after, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive::after, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive::after, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .calc-mobile-scroll::after, .contractor-panel-page .calc-breakdown-body::after, .contractor-panel-page .lesson-earnings-responsive::after, .contractor-panel-page .table-responsive::after, .contractor-panel-page .calc-mobile-scroll::after, .contractor-panel-page .line-items-scroll::after, .contractor-panel-page .line-items-container::after, .contractor-panel-page .invoice-log-table-wrap::after {content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;}
/* Remove empty-looking pale panels directly under the calculation table. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body > .table-scroll-hint, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > .scroll-hint, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > .mobile-scroll-hint, .contractor-panel-page #cp-overview-panel .calc-breakdown-body > .calc-scroll-hint {display: none !important;}
/* Keep only the actual table viewport visible. */
.contractor-panel-page #cp-overview-panel .calc-breakdown-body .lesson-earnings-responsive, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .table-responsive, .contractor-panel-page #cp-overview-panel .calc-breakdown-body .calc-mobile-scroll {background: transparent !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;}
.contractor-panel-page #cp-overview-panel .calc-breakdown-body table {margin-bottom: 0 !important;}}


/* ---- Extracted style block 9 ---- */
/* =========================================================
   Fixed39: avatar top alignment + polished compact share control
   ========================================================= */
.contractor-panel-page .instructor-profile, .contractor-panel-page .cp-profile-card, .contractor-panel-page .profile-card, .contractor-panel-page .panel-profile, .contractor-panel-page .contractor-profile, .contractor-panel-page .dashboard-profile, .contractor-panel-page .overview-profile {align-items: flex-start !important;}
.contractor-panel-page .instructor-profile .profile-image, .contractor-panel-page .instructor-profile img, .contractor-panel-page .cp-profile-card .profile-image, .contractor-panel-page .contractor-avatar, .contractor-panel-page .instructor-avatar, .contractor-panel-page .profile-avatar {align-self: flex-start !important;
  flex-shrink: 0 !important;}
/* Compact share button; keep hover readable instead of turning white. */
.contractor-panel-page #cp-schedule-panel .share-button, .contractor-panel-page #cp-schedule-panel .share-style-button, .contractor-panel-page #cp-schedule-panel a.share-button.share-style-button {min-width: 0 !important;
  width: auto !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  float: none !important;
  background: #edf6fa !important;
  border: 1px solid #badde8 !important;
  color: #17475d !important;
  box-shadow: none !important;
  text-decoration: none !important;}
.contractor-panel-page #cp-schedule-panel .share-button:hover, .contractor-panel-page #cp-schedule-panel .share-style-button:hover, .contractor-panel-page #cp-schedule-panel a.share-button.share-style-button:hover {background: #dff0f6 !important;
  border-color: #9fcddd !important;
  color: #11384a !important;
  transform: none !important;
  text-decoration: none !important;}
.contractor-panel-page #cp-schedule-panel .share-button i, .contractor-panel-page #cp-schedule-panel .share-style-button i {font-size: 0.78rem !important;
  line-height: 1 !important;
  margin: 0 !important;}
.contractor-panel-page .sv-share-popover {position: absolute;
  z-index: 9999;
  width: 198px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border: 1px solid #d6e5eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(16, 42, 67, 0.16);}
.contractor-panel-page .sv-share-popover[hidden] {display: none !important;}
.contractor-panel-page .sv-share-option {width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  color: #17384a;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  cursor: pointer;
  text-align: left;}
.contractor-panel-page .sv-share-option:hover {background: #f1f7fa;
  color: #123143;}
.contractor-panel-page .sv-share-option .sv-share-icon {width: 1.15em;
  text-align: center;
  flex: 0 0 1.15em;}
@media (max-width: 768px) {.contractor-panel-page #cp-schedule-panel .share-button, .contractor-panel-page #cp-schedule-panel .share-style-button, .contractor-panel-page #cp-schedule-panel a.share-button.share-style-button {height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 0.68rem !important;
    border-radius: 8px !important;
    gap: 4px !important;}
.contractor-panel-page #cp-schedule-panel .share-button i, .contractor-panel-page #cp-schedule-panel .share-style-button i {font-size: 0.68rem !important;}
.contractor-panel-page .sv-share-popover {position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px;
    padding: 10px;}
.contractor-panel-page .sv-share-option {min-height: 46px; font-size: 1rem;}}
/* ===== Fixed40: print schedule consistency + lighter Report Your Absence label ===== */
/* Keep the secondary schedule action visually softer than Print Schedule. */
.contractor-panel-page .cp-schedule-actions .cp-report-absence-action {font-weight:400!important;}
.contractor-panel-page .cp-schedule-actions .cp-report-absence-action i {font-weight:400!important;}
/* When printing from a phone/tablet, force the schedule into the same clean printable table layout as desktop. */
@media print {.contractor-panel-page, .contractor-panel-page {background:#fff!important;
    color:#111!important;
    font-size:12px!important;
    line-height:1.35!important;
    overflow:visible!important;}
.contractor-panel-page .header, .contractor-panel-page .nav-container, .contractor-panel-page .cp-tabs, .contractor-panel-page .cp-welcome-wrap, .contractor-panel-page .cp-quick-actions, .contractor-panel-page .panel-intro-message, .contractor-panel-page .cp-section-actions, .contractor-panel-page .day-tabs, .contractor-panel-page #cp-overview-panel, .contractor-panel-page #cp-attendance-panel, .contractor-panel-page #cp-invoice-panel, .contractor-panel-page #cp-account-panel, .contractor-panel-page .footer-container, .contractor-panel-page footer {display:none!important;}
.contractor-panel-page .main-wrapper, .contractor-panel-page .secondary-wrapper, .contractor-panel-page .cp-panel-shell, .contractor-panel-page #cp-schedule-panel, .contractor-panel-page .cp-section-card, .contractor-panel-page .schedule-print-area, .contractor-panel-page .table-responsive {display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:visible!important;}
.contractor-panel-page #cp-schedule-panel {padding:0!important;}
.contractor-panel-page .cp-section-heading, .contractor-panel-page .cp-schedule-heading {display:block!important;
    text-align:center!important;
    margin:0 0 12px!important;
    padding:0!important;
    border:0!important;
    background:#fff!important;}
.contractor-panel-page .cp-section-heading h2, .contractor-panel-page .cp-schedule-heading h2, .contractor-panel-page .legacy-schedule-title, .contractor-panel-page .schedule-day-heading {display:block!important;
    text-align:center!important;
    margin:0 0 8px!important;
    padding:0!important;
    font-size:18px!important;
    color:#111!important;}
.contractor-panel-page .cp-section-heading p, .contractor-panel-page .cp-eyebrow {display:none!important;}
.contractor-panel-page table, .contractor-panel-page .schedule-table, .contractor-panel-page #cp-schedule-panel table {display:table!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    table-layout:auto!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
    margin:0 0 12px!important;
    overflow:visible!important;
    background:#fff!important;}
.contractor-panel-page thead, .contractor-panel-page tbody, .contractor-panel-page tfoot {display:table-row-group!important;}
.contractor-panel-page thead {display:table-header-group!important;}
.contractor-panel-page tr {display:table-row!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
    background:#fff!important;}
.contractor-panel-page th, .contractor-panel-page td {display:table-cell!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:5px 6px!important;
    border:1px solid #bfcbd4!important;
    font-size:11px!important;
    line-height:1.25!important;
    color:#111!important;
    background:#fff!important;
    text-align:left!important;
    vertical-align:top!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;}
.contractor-panel-page th {background:#eef3f6!important;
    font-weight:700!important;}
.contractor-panel-page td::before, .contractor-panel-page th::before {content:none!important;
    display:none!important;}
.contractor-panel-page .student-info-toggle, .contractor-panel-page .student-details-row, .contractor-panel-page .share-button, .contractor-panel-page .share-options, .contractor-panel-page .sv-share-popover {display:none!important;}
.contractor-panel-page .paid-icon {display:inline-flex!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#111!important;
    font-size:11px!important;}}


/* ---- Extracted style block 10:  ---- */
/* Fixed43: visual alignment with the main Studio Vanessa stylesheet only.
   Scope stays inside contractor-panel-page so header/nav/footer external CSS remains untouched.
   No layout, spacing, widths, table sizing, or mobile breakpoint changes. */
.contractor-panel-page {
  --primary:#436b95;
  --hover:#365677;
  --nav-active:#365677;
  --text:#37474f;
  --muted:#666;
  --border:#ddd;
  --secondary:#f9f9f9;
  --white:#fff;
  --success-color:#4f8f55;
  --danger:#b94a48;
}
.contractor-panel-page h1 {
  color:#000;
  font-size:2rem;
  font-weight:600;
}
.contractor-panel-page h2 {
  color:#000;
  font-size:1.35rem;
  font-weight:600;
}
.contractor-panel-page h3,
.contractor-panel-page .cp-section-title,
.contractor-panel-page .cp-card-title {
  color:#365677;
  font-weight:600;
}
.contractor-panel-page p,
.contractor-panel-page .cp-section-subtitle,
.contractor-panel-page .cp-muted,
.contractor-panel-page .cp-helper-text {
  color:#37474f;
}
.contractor-panel-page .cp-tab-btn,
.contractor-panel-page .day-tab {
  color:#365677;
  font-weight:500;
}
.contractor-panel-page .cp-tab-btn.active,
.contractor-panel-page .cp-tab-btn[aria-selected="true"],
.contractor-panel-page .day-tab.active {
  background:#436b95;
  color:#fff;
}
.contractor-panel-page .cp-primary-action,
.contractor-panel-page .submit-invoice-button,
.contractor-panel-page .blue-button,
.contractor-panel-page .print-schedule-button {
  background:#436b95;
  border-color:#365677;
  color:#fff;
  font-weight:500;
}
.contractor-panel-page .cp-primary-action:hover,
.contractor-panel-page .submit-invoice-button:hover,
.contractor-panel-page .blue-button:hover,
.contractor-panel-page .print-schedule-button:hover {
  background:#365677;
  border-color:#365677;
  color:#fff;
}
.contractor-panel-page .cp-secondary-action,
.contractor-panel-page .cp-schedule-actions .cp-report-absence-action {
  background:#e6ecef;
  border-color:#d3dbe0;
  color:#2f3e46;
  font-weight:400;
}
.contractor-panel-page .cp-secondary-action:hover,
.contractor-panel-page .cp-schedule-actions .cp-report-absence-action:hover {
  background:#dce3e7;
  border-color:#c6d0d6;
  color:#2f3e46;
}
.contractor-panel-page .paid-yes { color:#4f8f55; }
.contractor-panel-page .paid-no { color:#b94a48; }
.contractor-panel-page .paid-late { color:#8a6a15; }


/* ---- Extracted style block 11:  ---- */
/* Fixed44: match contractor panel heading typography to /css/styles7.css.
   Typography only: no layout, spacing, table, mobile, nav, header, or footer changes. */
.contractor-panel-page h1 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: #000 !important;
}
.contractor-panel-page h2,
.contractor-panel-page .cp-section-title {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #000 !important;
}
.contractor-panel-page h3,
.contractor-panel-page .cp-card-title,
.contractor-panel-page .invoice-step-heading h3,
.contractor-panel-page .instructor-profile .profile-info h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #365677 !important;
}
.contractor-panel-page .cp-section-subtitle,
.contractor-panel-page .cp-helper-text,
.contractor-panel-page .cp-muted {
  font-size: .95rem !important;
  color: #37474f !important;
}

/* ===== MERGED FROM contractor-panel6.css ===== */


/* Root / tokens */
.contractor-panel-page {--primary: #436b95;
  --secondary: #F5F5F5;
  --text: #37474f;
  --border: #DDD;
  --hover: #436b95;
  --nav-active: #365677;
  --table-header: #CCC;
  --table-even: #F2F2F2;
  --table-odd: #E5E4E2;
  --success-color: #4f8f55;
  --success-hover: #45a049;
  --danger: #f44336;
  --danger-hover: #da190b;
  --white: #fff;
  --footer-bg: #F5F5F5;
  --link-hover: #666;
  --nav-hover: #799ECB;
  --button-border: #DDD;
  --shadow: rgba(0,0,0,0.1);

  --controls-max-width: 920px;
  --action-height: 44px;
  --action-min-width: 170px;
  --action-radius: 8px;
  --action-gap: 8px;
  --filter-border: rgba(52,152,219,0.18);

  --button-radius: var(--action-radius);}
/* Moved inline styles into this stylesheet block */
.contractor-panel-page .space-results {margin-bottom:20px;}
/* Change password panel */
.contractor-panel-page #change-password-panel {width: 100%;
  max-width: none;
  margin: 8px 0 32px;
  display: none;
  border: 1px solid #e6ecef;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;}
.contractor-panel-page #change-password-form {margin: 0;}
.contractor-panel-page #change-password-panel .field-row {margin-bottom: 4px;}
.contractor-panel-page #change-password-panel label {display: block; margin: 0 0 4px 0;}
.contractor-panel-page #change-password-panel input[type="password"] {width: 100%; padding: 6px; box-sizing: border-box;}
.contractor-panel-page #change-password-error {display: none; margin-bottom: 6px;}
.contractor-panel-page .change-password-actions {display: flex; gap: 8px;}
/* Small utility spacing classes (ensure these exist in case main stylesheet doesn't) */
.contractor-panel-page .mt-8 {margin-top: 8px;}
.contractor-panel-page .mt-12 {margin-top: 12px;}
/* Invoice form error initial state */
.contractor-panel-page #invoice-form-error {display: none; margin-top: 10px;}
/* Preview table styling used by JS preview content */
.contractor-panel-page .preview-table {width: 100%; border-collapse: collapse;}
.contractor-panel-page .preview-table th, .contractor-panel-page .preview-table td {padding: 6px; border: 1px solid #e6ecef; text-align: left;}
.contractor-panel-page .preview-grand-total {font-size: 1.1em; text-align: right;}
/* other small visual helpers used in preview output */
.contractor-panel-page .center {text-align: center;}
.contractor-panel-page .text-right {text-align: right;}
.contractor-panel-page .font-bold {font-weight: 700;}
/* You can extend this stylesheet as needed */
/* === Availability results: single centered column wrapper + uniform card widths === */
.contractor-panel-page .today-badge, .contractor-panel-page .viewing-badge {font-size:11px; color:#fff; padding:2px 6px; border-radius:999px; line-height:1; margin-left:6px;}
.contractor-panel-page .today-badge {background:#e53e3e;}
/* red */
.contractor-panel-page .viewing-badge {background:#38a169;}
/* green */
.contractor-panel-page .availability-results {max-width: var(--controls-max-width, 920px);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;}
/* Each list uses the same container width and is stacked vertically */
.contractor-panel-page .availability-results .availability-list {width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;}
/* Each card fills the list width and is a vertical flex container */
.contractor-panel-page .availability-results .availability-course-card {width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* prevents long children from forcing wider layout */
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  margin: 0 !important;}
/* Prevent inner content from forcing overflow */
.contractor-panel-page .availability-course-card *, .contractor-panel-page .availability-course-card *::before, .contractor-panel-page .availability-course-card *::after {box-sizing: border-box !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;}
.contractor-panel-page .availability-course-card img:not(.availability-avatar) {max-width: 100% !important; height: auto !important; display: block; /* keep block for content images only */}
.contractor-panel-page .availability-course-card .availability-avatar {display: inline-flex; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; object-fit: cover; vertical-align: middle;}
/* Make the body expand so footer/buttons stay bottom-aligned */
.contractor-panel-page .availability-course-card .course-body {flex: 1 1 auto !important;
  min-width: 0 !important;}
.contractor-panel-page .availability-course-card .course-footer {flex: 0 0 auto !important;}
/* Mobile: keep single stacked column */
@media (max-width: 720px) {.contractor-panel-page .availability-results {max-width: 100% !important; padding-left: 12px; padding-right: 12px;}
.contractor-panel-page .availability-course-card {min-height: auto !important;}}
/* Fix layout: ensure left/right alignment of filter toggle and join-waitlist button within course footer (availability results) */
.contractor-panel-page .availability-results .course-footer {display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;}
.contractor-panel-page .availability-results .course-footer .filter-toggle-container {margin: 0 !important;
  order: 0 !important;
  display: flex !important;
  align-items: center !important;}
.contractor-panel-page .availability-results .course-footer .button-wrapper {margin: 0 !important;
  order: 1 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;}
.contractor-panel-page .availability-results .course-footer .join-waitlist-btn, .contractor-panel-page .availability-results .course-footer .filter-toggle-btn {flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;}
/* Add spacing between the group and private lists */
.contractor-panel-page .availability-results .availability-list + .availability-list {margin-top: 14px;}
/* Shared rounding */
.contractor-panel-page button, .contractor-panel-page .button, .contractor-panel-page .blue-button, .contractor-panel-page input[type="button"], .contractor-panel-page input[type="submit"], .contractor-panel-page .action-pill, .contractor-panel-page .share-button, .contractor-panel-page .join-waitlist-btn, .contractor-panel-page .filter-toggle-btn, .contractor-panel-page .start-button, .contractor-panel-page .prev, .contractor-panel-page .next, .contractor-panel-page .menu-button, .contractor-panel-page #resetFilters, .contractor-panel-page .waitlist-text a {border-radius: var(--button-radius) !important;}
/* Box sizing */
.contractor-panel-page *, .contractor-panel-page *::before, .contractor-panel-page *::after {box-sizing: border-box;}
/* Forms */
.contractor-panel-page form {background: transparent;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  box-shadow: none;}
.contractor-panel-page legend {text-align: center;}
.contractor-panel-page .blue-button, .contractor-panel-page .button, .contractor-panel-page button, .contractor-panel-page input[type="button"], .contractor-panel-page input[type="submit"] {font-weight: normal;}
.contractor-panel-page input[type="text"], .contractor-panel-page input[type="email"], .contractor-panel-page input[type="tel"], .contractor-panel-page input[type="date"], .contractor-panel-page input[type="password"], .contractor-panel-page select, .contractor-panel-page textarea {width: 100%;
  padding: 0.625rem;
  margin: 0.3125rem 0 0.9375rem 0;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  font-size: 1rem;
  background-color: var(--white);
  color: var(--text);}
.contractor-panel-page input[type="text"]:focus, .contractor-panel-page input[type="email"]:focus, .contractor-panel-page input[type="password"]:focus, .contractor-panel-page select:focus, .contractor-panel-page textarea:focus {border-color: var(--primary);
  box-shadow: 0 0 0.3125rem var(--primary);
  outline: none;}
.contractor-panel-page label {display: block;
  margin-bottom: 0.3125rem;
  font-weight: bold;
  color: var(--text);}
/* Base */
.contractor-panel-page {margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f8fbfd;
  font-size: 16px !important; /* RESTORED per request */
  overflow-x: hidden;
  color: var(--text);
  line-height: 1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}
.contractor-panel-page h1 {text-align:center; color:#000; font-size:2rem; margin:0; padding-bottom:10px;}
.contractor-panel-page h2 {font-size:1.25rem; margin:0; padding:10px 0;}
.contractor-panel-page h3 {font-size:1.25rem; margin:0; padding-bottom:0;}
.contractor-panel-page ul {margin:0; padding-left:1.25rem; padding-bottom:0; line-height:1.8;}
.contractor-panel-page p {color:var(--text); line-height:1.8; margin:0 0 20px 0; padding-left:0;}
.contractor-panel-page p:last-child {padding-bottom:0;}
.contractor-panel-page a {color:var(--primary); text-decoration:none; transition:color .3s ease;}
.contractor-panel-page a:hover {text-decoration:underline; color:var(--hover);}
/* Header / nav */
.contractor-panel-page .header {display:flex; justify-content:center; align-items:center; padding:10px; background-color:var(--white);}
.contractor-panel-page .logo {max-width:300px; width:100%;}
.contractor-panel-page .logo img {display:block; width:100%; height:auto; margin:0 auto;}
.contractor-panel-page .nav-container {position:sticky; top:0; width:100%; z-index:1000; background-color:var(--white);}
.contractor-panel-page .menu-button {display:none; background:var(--primary); border:none; color:var(--white); padding:0.625rem 1.25rem;
  font-size:1.7rem; cursor:pointer; width:100%; text-align:left; transition:all .3s ease;}
.contractor-panel-page .navbar {display:flex; flex-wrap:wrap; gap:.75rem; padding:.75rem; background:var(--primary); font-size:.9rem; justify-content:center; align-items:center;}
.contractor-panel-page .navbar a, .contractor-panel-page .navbar-active {color:var(--white); text-decoration:none; padding:.6rem 1.2rem; border-radius:var(--button-radius); transition:all .3s ease; text-align:center; margin:0 .25rem; position:relative; font-weight:500;}
.contractor-panel-page .navbar-active {background-color: rgba(255,255,255,0.1); font-weight:600;}
.contractor-panel-page .navbar a:hover {background-color: rgba(255,255,255,0.15); transform: translateY(-1px);}
.contractor-panel-page .navbar a:active {transform: translateY(1px);}
/* Layout */
.contractor-panel-page .main-wrapper {margin:0 auto; padding:1.25rem 0rem 1.25rem; overflow:hidden; background-color:#f8fbfd; max-width:920px;}
.contractor-panel-page .footer-container {background-color:var(--footer-bg); border-top:1px solid var(--border); padding:40px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.25rem; margin-top:0;}
.contractor-panel-page .footer-section {flex:1; margin:0 auto;}
.contractor-panel-page .footer-section h2 {margin-bottom:0;}
.contractor-panel-page .footer-section a {color:var(--text); line-height:1.8; display:inline-block; transition:color .3s ease;}
.contractor-panel-page .footer-section a:hover {color:var(--link-hover);}
.contractor-panel-page .social-icons img {width:2.5rem; height:2.5rem; margin-right:.625rem;}
.contractor-panel-page .social-icons img:hover {filter:brightness(1.3);}
/* Slideshow */
.contractor-panel-page .slideshow-wrapper {background:var(--footer-bg); padding:1.25rem; border-radius:.625rem; margin:0 auto; max-width:37.5rem;}
.contractor-panel-page .slideshow-container {position:relative; max-width:37.5rem; margin:auto; border:.3125rem solid var(--white); border-radius:.625rem; overflow:hidden; box-shadow: 0 .125rem .25rem var(--shadow);}
.contractor-panel-page .slide {display:none; width:100%;}
.contractor-panel-page .slide img {width:100%; height:auto; display:block;}
.contractor-panel-page .prev, .contractor-panel-page .next {cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); padding:1rem; color:var(--white); font-weight:bold; font-size:1.125rem;
  background-color: rgba(0,0,0,.5); border:none; border-radius:var(--button-radius); transition: background-color .3s ease, padding .3s ease;}
.contractor-panel-page .next {right:.625rem;}
.contractor-panel-page .prev {left:.625rem;}
.contractor-panel-page .prev:hover, .contractor-panel-page .next:hover {background-color: rgba(0,0,0,.8); padding:1.25rem;}
/* Tables */
.contractor-panel-page table {width:100%; border-collapse:collapse; border:1px solid var(--border);}
.contractor-panel-page th, .contractor-panel-page td {text-align:left; padding:.71rem; border-bottom:1px solid var(--border); font-size:1.2rem;}
.contractor-panel-page th {background-color:var(--table-header); font-weight:bold;}
.contractor-panel-page tr:nth-child(even) {background-color:var(--table-even);}
.contractor-panel-page tr:nth-child(odd) {background-color:var(--table-odd);}
.contractor-panel-page tr:hover {background-color:var(--white); color:var(--primary);}
/* Shared wrappers */
.contractor-panel-page .general-wrapper {background:var(--white); border:1px solid var(--border); border-radius:.625rem; margin-bottom:1.25rem; overflow:hidden;}
.contractor-panel-page .general-content {display:block; background:var(--white); padding:1.25rem; margin-bottom:0;}
/* Accessible button palette:
   Primary: #5f82a3 (RGB 26,115,184)
   Hover:   #4f708e
*/
/* Register button (.blue-button) */
.contractor-panel-page .blue-button {background-color: #5f82a3;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  font-size: 16px;
  transition: background-color .18s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 24px rgba(95,130,163,0.10);
  display: inline-flex;
  align-items: center;
  gap: var(--action-gap);
  font-weight: 700;}
.contractor-panel-page .blue-button:hover {background-color: #4f708e; transform: translateY(-2px);}
/* Promo / messages */
.contractor-panel-page .promo-banner {padding:.625rem 0; text-align:center;}
.contractor-panel-page .error-message, .contractor-panel-page .success-message {padding:.625rem; border-radius:.625rem; margin-bottom:.9375rem; border:1px solid; text-align:center;}
.contractor-panel-page .error-message {background-color:#fdeeee; border-color:var(--danger); margin:0 auto 20px;}
.contractor-panel-page .error-header {font-size:1.25rem; font-weight:bold; color:var(--danger);}
.contractor-panel-page .success-message {background-color:#e6f4ea; border-color:var(--success-color);}
.contractor-panel-page .back-button {margin-bottom:20px; display:flex; justify-content:center;}
.contractor-panel-page .center {margin:0 auto; text-align:center;}
/* Index / highlight */
.contractor-panel-page .index-split {display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; align-items:start; background:var(--white); padding:1.25rem; margin:0 auto 0;}
.contractor-panel-page .index-left {position:relative; justify-self:start;}
.contractor-panel-page .index-left img {width:100%; height:auto; object-fit:scale-down; border-radius:.625rem;}
.contractor-panel-page .index-right {padding-right:2rem;}
.contractor-panel-page .highlight-box {background: linear-gradient(135deg, #e3f2fd, #fff); padding:3rem 2rem; text-align:center; border-top:1px solid var(--border);}
.contractor-panel-page .highlight-box h2 {margin-bottom:1.5rem; font-size:2rem;}
.contractor-panel-page .highlight-box p {color:#000; font-size:1.2rem; margin-bottom:2rem;}
/* Start button uses same accessible blue */
.contractor-panel-page .start-button {display:inline-block; padding:1.2rem 2rem; color:#fff; text-decoration:none; border-radius:var(--button-radius);
  font-weight:600; font-size:1.2rem; border:none; transition:all .3s ease; text-transform:uppercase; letter-spacing:.5px;
  background-color:#5f82a3; box-shadow: 0 8px 24px rgba(95,130,163,0.10);}
.contractor-panel-page .start-button:hover {background-color:#4f708e; filter:brightness(1.03); transform:translateY(-2px); text-decoration: none; color:#FFF !important;}
.contractor-panel-page .start-button:active {transform:translateY(.0625rem);}
/* Availability & course cards */
.contractor-panel-page .course-card {background:var(--white); border:1px solid var(--border); border-radius:.625rem; margin-bottom:1.25rem; overflow:hidden;}
.contractor-panel-page .course-header {background:var(--secondary); padding:1.25rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;}
.contractor-panel-page .course-header h2 {margin:0; padding:0;}
/* Grid / offerings */
.contractor-panel-page .what-we-offer-wrapper {max-width:900px; margin:0 auto; padding:20px;}
.contractor-panel-page .grid-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:0; margin-bottom:20px;}
.contractor-panel-page .grid-item {border:1px solid #e6ecef; border-radius:8px; overflow:hidden; text-align:center; padding:15px; background-color:#fff;}
.contractor-panel-page .grid-item img {height:auto; border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:transform .3s ease, box-shadow .3s ease; margin-bottom:10px;}
.contractor-panel-page .grid-item img:hover {transform:scale(1.02); box-shadow:0 8px 10px rgba(0,0,0,0.15);}
.contractor-panel-page .grid-item h2 {font-size:1.2em; margin:10px 0; color:#37474f;}
.contractor-panel-page .button-group {display:flex; flex-direction:column; gap:10px;}
/* Lesson detail */
.contractor-panel-page .lesson-detail {max-width:900px; margin:20px auto; padding:20px; border:1px solid #e6ecef; border-radius:8px; background-color:#fff;}
.contractor-panel-page .lesson-detail img {max-width:100%; height:auto; border-radius:5px; margin:10px 0; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:transform .3s ease, box-shadow .3s ease;}
.contractor-panel-page .lesson-detail img:hover {transform:scale(1.02);}
/* Filters */
.contractor-panel-page .availability-filter-header {text-align:center; font-size:1.25rem;}
.contractor-panel-page .availability-filter-section-availability {padding:1rem; background:#f9f9f9; border:1px solid #e6ecef; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; max-width:900px; position:relative;}
.contractor-panel-page .availability-filter-group {margin:.5rem; flex:1 1 30%; display:flex; flex-direction:column; min-width:160px; text-align:center;}
.contractor-panel-page .availability-filter-group label {margin-bottom:.5rem; font-weight:bold; color:#333; display:flex; flex-direction:column; align-items:center;}
.contractor-panel-page .availability-step-circle {background-color:#5f82a3; color:#fff; width:50px; height:50px; line-height:50px; border-radius:50%; text-align:center; display:inline-block; margin-bottom:.5rem; font-weight:bold; font-size:20px;}
/* Course card styling */
.contractor-panel-page .availability-course-card {background:var(--white); border:1px solid var(--border); border-radius:.625rem; overflow:hidden; margin:1.25rem auto; max-width:900px;}
/* Container */
.contractor-panel-page .availability-container {display:flex; justify-content:center; align-items:center; height:100%; margin-top:10px;}
/* Reset Filters - made responsive (was fixed 900px before) */
.contractor-panel-page #resetFilters {font-size:16px;
  border:none;
  background-color:#7fa6c4;
  color:#fff;
  cursor:pointer;
  width:100%;
  max-width: var(--controls-max-width, 920px);
  text-align:center;
  padding:12px 24px;
  border-radius:var(--button-radius);
  margin: 0.5rem auto;
  box-sizing: border-box;}
.contractor-panel-page #resetFilters:hover {background-color:#6184a8;}
/* Instructor avatar */
.contractor-panel-page .availability-instructor-section img.availability-avatar {margin-right:5px; vertical-align:middle; width:50px; height:50px; border-radius:50%;}
/* Availability messages */
.contractor-panel-page .availability-options-message-positive {background-color:#e6f4ea; border:1px solid #4f8f55; color:#4f8f55; font-size:1rem; font-weight:600; margin:1rem auto; padding:1.2rem; text-align:center; border-radius:.625rem; max-width:900px; transition:background-color .3s ease, box-shadow .3s ease;}
.contractor-panel-page .availability-options-message-zero {background-color:#fdeeee; border:1px solid #f44336; color:#c62828; font-size:1rem; font-weight:600; margin:1rem auto; padding:1.2rem; text-align:center; border-radius:.625rem; transition:background-color .3s ease, box-shadow .3s ease;}
.contractor-panel-page .instructor-section, .contractor-panel-page .spots-section {display:flex; align-items:center; gap:.625rem;}
.contractor-panel-page .course-body {padding:1.25rem;}
.contractor-panel-page .description {margin-bottom:.9375rem; line-height:1.8; text-align:center;}
.contractor-panel-page .schedule {font-style:normal; text-align:center; color:#7f8c8d;}
.contractor-panel-page .course-footer {padding:1.25rem; background:var(--secondary); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:10px;}
.contractor-panel-page .price {color:var(--success-color); font-size:1.1em;}
.contractor-panel-page .full-notice {color:var(--danger);}
/* Filter section */
.contractor-panel-page .filter-section {padding:1.25rem; border-radius:.625rem; display:flex; gap:.9375rem; flex-wrap:wrap; background:var(--secondary); border:1px solid var(--border);}
.contractor-panel-page .filter-dropdown {flex:1; min-width:12.5rem; padding:.625rem; border:1px solid var(--border); border-radius:.625rem; background-color:var(--white); color:var(--text); font-size:1rem; cursor:pointer; transition:border-color .3s ease, outline .3s ease;}
.contractor-panel-page .filter-dropdown:hover, .contractor-panel-page .filter-dropdown:focus {border-color:var(--primary); outline:none;}
/* Skills list */
.contractor-panel-page .skills-list span {display:inline-block; background:#e0e0e0; padding:4px 12px; margin-left:3px; margin-right:3px; margin-bottom:10px; border-radius:15px; font-size:.9em; color:#333;}
/* Register layout */
.contractor-panel-page .register-split {display:flex; gap:1.25rem; margin:0 auto; justify-content:center;}
.contractor-panel-page .form-wrapper {padding:0; margin:0 auto 20px; border:1px solid var(--border);}
.contractor-panel-page .form-wrapper fieldset {border:none; margin:0; padding:0;}
.contractor-panel-page .register-left .register-right {display:flex; align-items:flex-start; flex-wrap:nowrap; border:none;}
.contractor-panel-page .form-field {padding:0; transition:background-color .3s ease;}
.contractor-panel-page .form-field:nth-child(odd) {background-color:var(--secondary); padding:15px;}
.contractor-panel-page .form-field:nth-child(even) {background-color:#fbfbfb; padding:15px;}
.contractor-panel-page .form-field button {display:flex; justify-content:center; margin:0 auto;}
.contractor-panel-page .register-right {flex-direction:column; align-items:flex-start; width:100%;}
.contractor-panel-page .form-field span {flex:1; max-width:80%; word-wrap:break-word; overflow-wrap:break-word; vertical-align:top;}
.contractor-panel-page .register-left, .contractor-panel-page .register-right {flex:1; margin:0; padding:0; text-align:left; vertical-align:top;}
/* Payment */
.contractor-panel-page .payment-split {display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; margin:0 auto; max-width:1000px; margin-bottom:20px;}
.contractor-panel-page .payment-left, .contractor-panel-page .payment-right {max-width:500px; background-color:#fff; border:1px solid #e6ecef; border-radius:.625rem; padding:20px; text-align:center; min-height:375px;}
.contractor-panel-page .payment-left img, .contractor-panel-page .payment-right img {max-width:100%; height:auto; margin-top:15px;}
.contractor-panel-page .payment-right a {color:var(--text); display:inline-block; text-decoration:none; transition:color .3s ease, transform .3s ease;}
.contractor-panel-page .payment-right a:hover {color:var(--hover); transform:scale(1.05);}
/* Status wrapper, misc */
.contractor-panel-page .status-wrapper {max-width:50rem; margin:0 auto 20px; padding:10px; background-color:var(--white); border:1px solid var(--border); border-radius:.625rem; text-align:center;}
.contractor-panel-page .red {color:red;}
.contractor-panel-page .green {color:#4f8f55;}
.contractor-panel-page .input-medium {width:150px !important;}
/* Instructor */
.contractor-panel-page .instructor {display:flex; flex-direction:row; padding:0; margin:0; align-items:flex-start;}
.contractor-panel-page .instructor img {border-radius:50%; width:150px; height:150px; margin:20px; flex-shrink:0;}
.contractor-panel-page .instructor-details {flex:1; padding:20px; padding-bottom:0; box-sizing:border-box;}
.contractor-panel-page .instructor-skills {background-color:#f5f5f5; padding:8px 12px; border-radius:5px; margin-top:5px; margin-bottom:10px; border-left:4px solid #7fa6c4; vertical-align:middle;}
/* Checkbox / fieldset */
.contractor-panel-page .checkbox-wrapper {display:inline-flex; align-items:center; margin-right:15px;}
.contractor-panel-page fieldset {border:1px solid #FFF; padding:5px;}
.contractor-panel-page legend {font-weight:bold; padding:0 5px;}
/* Responsive adjustments */
@media (min-width:768px) {.contractor-panel-page .availability-filter-section {flex-wrap:nowrap; justify-content:space-around;}}
@media screen and (max-width:48rem) {.contractor-panel-page .blue-button, .contractor-panel-page .button, .contractor-panel-page button, .contractor-panel-page input[type="button"], .contractor-panel-page input[type="submit"] {font-weight: normal;}
.contractor-panel-page {font-size: 1.1rem; line-height: 1.8;}
/* mobile scale up */
.contractor-panel-page h2 {text-align:center; margin-top:5px; margin-bottom:5px;}
.contractor-panel-page h3 {font-size:1.25rem; margin:0; padding-bottom:0; text-align:center;}
.contractor-panel-page p:last-child {padding-bottom:0;}
.contractor-panel-page .header {flex-direction:column; align-items:center;}
.contractor-panel-page .logo {max-width:20rem; margin:0 auto; padding-bottom:0; margin-bottom:0;}
.contractor-panel-page .right-corner {max-width:100%; width:100%; text-align:center;}
.contractor-panel-page .navbar {display:none; padding:0; flex-direction:column; gap:10px; padding-bottom:15px; position:absolute; width:100%; left:0; top:100%;}
.contractor-panel-page .navbar.show {display:block;}
.contractor-panel-page .navbar-active {border:1px solid var(--white); background-color:#799ECB; margin:.313rem auto; box-sizing:border-box; display:block; font-size:1rem; position:relative; width:90%; border-radius:var(--button-radius);}
.contractor-panel-page .navbar a {width:90%; margin:.313rem auto; box-sizing:border-box; display:block; font-size:1rem; position:relative; background-color:#799ECB; border-radius:var(--button-radius);}
.contractor-panel-page .navbar-active::after, .contractor-panel-page .navbar a:hover::after {display:none;}
.contractor-panel-page .menu-button {display:block; position:sticky; top:0; border-radius:var(--button-radius); display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; padding-left:.75rem !important;}
.contractor-panel-page .menu-button i, .contractor-panel-page .menu-button .icon, .contractor-panel-page .menu-button svg {margin-right:.5rem !important; vertical-align:middle !important;}
.contractor-panel-page .main-wrapper {padding:20px; padding-bottom:0; margin:0;}
.contractor-panel-page .footer-section {flex:1 1 100%; width:100%; margin-top:10px; margin-bottom:10px;}
.contractor-panel-page .footer-section:last-child {margin-bottom:0;}
.contractor-panel-page .footer-section h2 {margin-top:0; margin-bottom:5px; text-align:left;}
.contractor-panel-page .social-icons {display:flex; justify-content:flex-start; gap:.625rem; padding-bottom:0;}
.contractor-panel-page .footer-container {padding:20px; box-sizing:border-box;}
.contractor-panel-page .slideshow-wrapper {display:none;}
.contractor-panel-page .prev, .contractor-panel-page .next {padding:.75rem;}
.contractor-panel-page .prev:hover, .contractor-panel-page .next:hover {padding:.875rem;}
.contractor-panel-page table {border:none; display:block; overflow-x:auto; font-size:0.9rem;}
.contractor-panel-page thead {display:none;}
.contractor-panel-page td:before {content: attr(data-label); font-weight:bold; color:var(--hover); display:block; margin-bottom:.313rem;}
.contractor-panel-page .blue-button {display:block; width:100%; text-align:center; box-sizing:border-box; margin:0; border-radius:var(--button-radius);}
.contractor-panel-page .index-split {grid-template-columns:1fr; gap:0; padding:20px; padding-bottom:0; margin:0;}
.contractor-panel-page .index-left {display:block; margin-bottom:0; padding-bottom:0;}
.contractor-panel-page .index-right {margin-top:0; padding-top:20px;}
.contractor-panel-page .offer-left {padding-left:20px;}
.contractor-panel-page .offer-left img {margin:0 auto;}
.contractor-panel-page .offer-right p {margin-top:0; padding-top:0;}
.contractor-panel-page .offer-right {margin-top:0; padding-top:0;}
.contractor-panel-page .offer-split {flex-direction:column; gap:1rem; padding:0; margin:0;}
.contractor-panel-page .grid-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); padding:0; margin:0;}
.contractor-panel-page .filter-dropdown {width:100%; min-width:unset;}
.contractor-panel-page .course-footer {flex-direction:column; text-align:center; gap:10px;}
.contractor-panel-page .description {text-align:center;}
.contractor-panel-page .instructor-section, .contractor-panel-page .spots-section {justify-content:center; margin-bottom:10px;}
.contractor-panel-page .skills-list span {display:inline-block; background:#e0e0e0; padding:4px 12px; margin-left:3px; margin-right:3px; margin-bottom:10px; border-radius:15px; font-size:.9em; color:#333;}
.contractor-panel-page .register-split {flex-direction:column; gap:0; padding:0; margin:0;}
.contractor-panel-page .register-left, .contractor-panel-page .register-right {width:100%; margin:0; padding:0;}
.contractor-panel-page .register-left .register-fields {flex-direction:column;}
.contractor-panel-page .register-left .register-fields label {margin:0; padding-right:0;}
.contractor-panel-page .register-left .register-fields span {max-width:100%;}
.contractor-panel-page .payment-split {grid-template-columns:1fr; gap:1rem;}
.contractor-panel-page .payment-left, .contractor-panel-page .payment-right {padding:20px;}
.contractor-panel-page .instructor {display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:0; padding-bottom:0;}
.contractor-panel-page .instructor img {width:120px; height:120px; display:block; margin:0 auto; margin-top:20px;}
.contractor-panel-page .instructor-details {padding:20px; width:100%; text-align:left;}
.contractor-panel-page .instructor-skills {padding:6px 10px; margin-top:20px; margin-bottom:20px; border-left-width:3px;}}
/* Fix for the expanded/details row on mobile - corrected comment and structure so CSS remains valid */
@media screen and (max-width:48rem) {.contractor-panel-page tr.details, .contractor-panel-page tr.details.open, .contractor-panel-page tr.details-row, .contractor-panel-page tr.details-row.open {display: block !important;
    width: 100% !important;}
.contractor-panel-page tr.details td, .contractor-panel-page tr.details.open td, .contractor-panel-page tr.details-row td, .contractor-panel-page tr.details-row.open td {display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
    border: none !important;
    /* optional visual separation for stacked cells: background: #fafafa !important; */
    background: #fafafa !important;}
/* Remove the "data-label" pseudo from the details cell on mobile */
.contractor-panel-page tr.details td:before, .contractor-panel-page tr.details-row td:before {content: none !important;
    display: none !important;}}
/* Fix layout: ensure left/right alignment of filter toggle and join-waitlist button within course footer (availability results) */
/* (Already defined above, leaving as-is) */
/* Avatar fallback uses accessible primary */
.contractor-panel-page .availability-instructor-section .availability-avatar {width:50px; height:50px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; object-fit:cover; vertical-align:middle; margin-right:5px; flex:0 0 50px; box-sizing:border-box;}
.contractor-panel-page .availability-instructor-section .avatar-fallback {background-color:#5f82a3; color:#fff; font-weight:600; font-size:18px; line-height:1; text-transform:uppercase;}
/* Course card labels */
.contractor-panel-page .availability-course-card.music-camp {position:relative; border: solid 1px #5f82a3; padding-top:35px;}
.contractor-panel-page .availability-course-card.music-camp::before {content:"Bilingual Music Camp"; position:absolute; top:0; left:0; width:100%; background-color:#5f82a3; color:white; padding:10px 0; text-align:center; font-size:1em; z-index:10;}
.contractor-panel-page .availability-course-card.group-program {position:relative; border: solid 1px #4f8f55; padding-top:35px;}
.contractor-panel-page .availability-course-card.group-program::before {content:"Group Program Fall 2025"; position:absolute; top:0; left:0; width:100%; background-color:#4f8f55; color:white; padding:10px 0; text-align:center; font-size:1em; z-index:10;}
.contractor-panel-page .availability-course-card.music-camp .course-header, .contractor-panel-page .availability-course-card.group-program .course-header {padding-top:40px;}
/* Filter toggle */
.contractor-panel-page .filter-toggle-container {margin-top:15px; text-align:right;}
.contractor-panel-page .filter-toggle-btn {background-color:#fff; border:solid 1px #CCCCCC; padding:8px 16px; border-radius:var(--button-radius); cursor:pointer; color:#000; font-size:14px; transition:all .3s ease; box-shadow:0 6px 18px rgba(16,40,90,0.06);}
.contractor-panel-page .filter-toggle-btn:hover {background-color:#F1F1F1; transform:translateY(-1px);}
.contractor-panel-page .filter-content {display:none;}
.contractor-panel-page .filter-content.show {display:block;}
/* Term info / waitlist */
.contractor-panel-page .term-info-container {max-width:900px; margin:0 auto 10px; padding:0 15px; font-size:1em; color:#333; line-height:1.5;}
.contractor-panel-page .waitlist-text {flex:1; min-width:250px; font-weight:600; color:#5f82a3;}
.contractor-panel-page .waitlist-section {display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px; flex-wrap:wrap;}
/* Course footer / button wrapper */
.contractor-panel-page .course-footer {display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative;}
.contractor-panel-page .button-wrapper {display:flex; align-items:center; gap:10px; position:relative;}
/* Action-pill & share (use accessible primary) */
.contractor-panel-page .action-pill, .contractor-panel-page .share-button {display:inline-flex; align-items:center; justify-content:center; gap:var(--action-gap); height:var(--action-height); min-width:var(--action-min-width); padding:0 16px; border-radius:var(--action-radius); font-weight:700; font-size:15px; cursor:pointer; border:0; transition:transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;}
.contractor-panel-page .join-waitlist-btn {background-color:#5f82a3; color:#fff; box-shadow:0 10px 30px rgba(95,130,163,0.10); border:0; display:inline-flex; align-items:center; gap:var(--action-gap); font-weight:700;}
.contractor-panel-page .join-waitlist-btn:hover {transform:translateY(-2px); background-color:#4f708e; color:#fff; text-decoration: none;}
.contractor-panel-page .share-button {background-color:#5f82a3; color:#fff; border:0; box-shadow:0 8px 20px rgba(95,130,163,0.10);}
.contractor-panel-page .share-button:hover {transform:translateY(-2px); background-color:#4f708e; box-shadow:0 10px 26px rgba(95,130,163,0.12);}
/* Icon sizing inside action buttons */
.contractor-panel-page .share-button i, .contractor-panel-page .blue-button i, .contractor-panel-page .join-waitlist-btn i {font-size:14px; line-height:1; display:inline-block;}
/* Share options dropdown */
.contractor-panel-page .share-options {position:absolute; bottom:110%; right:0; background:#fff; border:1px solid #e6ecef; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.08); z-index:100;
  display:none; flex-direction:column; min-width:140px; padding:6px 0; margin-bottom:8px;}
.contractor-panel-page .share-options.show {display:flex;}
.contractor-panel-page .share-option-link {padding:8px 14px; font-size:14px; color:#333; text-decoration:none; display:block; background:transparent; border:0; text-align:left; cursor:pointer;}
.contractor-panel-page .share-option-link:hover {background:#f1f1f1; color:#000;}
/* Capacity panel (kept) */
.contractor-panel-page .capacity-container {position: relative; max-width: 920px; margin: 22px auto; background: linear-gradient(180deg,#ffffff,#f7fbff);
  border: 1px solid rgba(45,63,120,0.06); padding: 18px 32px; border-radius: 14px; box-shadow: 0 12px 40px rgba(33,33,98,0.06);
  display:flex; align-items:flex-start; justify-content:center; gap:14px; flex-wrap:wrap; overflow:visible;}
.contractor-panel-page .capacity-left {display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:860px;}
.contractor-panel-page .capacity-circles {display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap;}
/* Circle stats */
.contractor-panel-page .circle {width:120px; height:120px; padding:16px; box-sizing:border-box; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background: linear-gradient(180deg,#ffffff,#f6f9ff); border:2px solid rgba(120,110,255,0.12); box-shadow:0 10px 25px rgba(34,41,88,0.06), 0 2px 8px rgba(0,0,0,0.04);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease; overflow:hidden; position:relative;}
.contractor-panel-page .circle::after {content:""; position:absolute; inset:6px; border-radius:50%; pointer-events:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);}
.contractor-panel-page .circle-number {font-weight:800; line-height:1; margin:0 0 8px 0; color:#ffffff; font-size:clamp(24px,4.5vw,36px); -webkit-font-smoothing:antialiased; text-shadow: 0 2px 8px rgba(0,0,0,0.12);}
.contractor-panel-page .circle-label {font-weight:700; color: rgba(255,255,255,0.95); margin:0; padding:0 6px; font-size:clamp(11px,2.2vw,13px); line-height:1.05; max-width:100%; overflow-wrap:break-word; word-break:break-word; white-space:normal; display:block;}
.contractor-panel-page .circle:hover {transform:translateY(-6px); box-shadow:0 18px 40px rgba(47,84,235,0.12);}
.contractor-panel-page .circle-registered {background: linear-gradient(180deg,#7b61ff,#5a3df0); border-color: rgba(123,97,255,0.28); box-shadow:0 12px 35px rgba(91,63,255,0.10), 0 2px 8px rgba(0,0,0,0.06);}
.contractor-panel-page .circle-openings {background: linear-gradient(180deg,#34c47a,#1e9a5a); border-color: rgba(52,196,122,0.28); box-shadow:0 12px 35px rgba(34,150,89,0.10), 0 2px 8px rgba(0,0,0,0.06);}
/* Progress */
.contractor-panel-page .capacity-progress {width:100%; max-width:720px; display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:6px;}
.contractor-panel-page .progress-text {font-size:20px; font-weight:900; color:#0f1b4d; text-align:center; margin:0; letter-spacing:-0.01em; display:block; background: linear-gradient(90deg, rgba(123,97,255,0.06), rgba(34,150,89,0.04)); padding:8px 12px; border-radius:10px; box-shadow:0 6px 18px rgba(34,41,88,0.04);}
.contractor-panel-page .progress-track {height:36px; background: linear-gradient(90deg,#eef4ff,#f7fbff); border-radius:18px; overflow:hidden; border:2px solid rgba(45,63,120,0.08); position:relative; box-sizing:border-box;}
.contractor-panel-page .progress-fill {height:100%; background: linear-gradient(90deg,#7b61ff,#2d6efd); width:0%; transition: width 900ms cubic-bezier(.2,.9,.3,1); box-shadow: inset 0 -6px 12px rgba(255,255,255,0.12);}
/* Instruction */
.contractor-panel-page .capacity-instruction {font-size:16px; font-weight:normal; color:#12204a; max-width:920px; margin:14px auto 0; text-align:center; padding:12px 18px; border-radius:12px; background: linear-gradient(90deg,#fffef6,#fff8ee); border-left:6px solid #ffcc00; box-shadow:0 8px 30px rgba(18,32,74,0.06); line-height:1.4;}
/* Responsive tuning for availability additions */
@media (max-width:960px) {.contractor-panel-page .capacity-container {padding:14px 18px;}
.contractor-panel-page .circle {width:100px; height:100px; padding:12px;}
.contractor-panel-page .circle-number {font-size:clamp(20px,6.5vw,30px);}
.contractor-panel-page .circle-label {font-size:12px;}
.contractor-panel-page .progress-track {height:28px;}
.contractor-panel-page .progress-text {font-size:18px; padding:8px 10px; border-radius:8px;}
.contractor-panel-page .capacity-instruction {font-size:15px; padding:10px 14px; border-radius:10px; text-align:center;}
.contractor-panel-page .controls-container {flex-direction:column; align-items:stretch; gap:10px;}
.contractor-panel-page .join-waitlist-btn.action-pill, .contractor-panel-page .filter-toggle-btn.action-pill {width:100%; min-width:0;}
.contractor-panel-page .availability-list, .contractor-panel-page .filter-content {padding-left:12px; padding-right:12px;}}
@media (max-width:768px) {.contractor-panel-page .circle {width:92px; height:92px; padding:8px;}
.contractor-panel-page .circle-number {font-size:clamp(16px,7vw,24px); margin-bottom:4px;}
.contractor-panel-page .circle-label {font-size:11px; line-height:1; padding:0 6px; max-height:2.2em; overflow:hidden;}
.contractor-panel-page .progress-track {height:26px;}
.contractor-panel-page .progress-text {font-size:16px; padding:8px 8px;}
.contractor-panel-page .capacity-container {padding:10px 12px;}
.contractor-panel-page .capacity-instruction {font-size:14px; padding:10px 12px; border-radius:10px; text-align:center;}
.contractor-panel-page .main-wrapper {padding-left:15px; padding-right:15px; box-sizing:border-box; max-width:100%; overflow-x:hidden;}
.contractor-panel-page .term-info-container, .contractor-panel-page .filter-content, .contractor-panel-page .availability-list, .contractor-panel-page .availability-container, .contractor-panel-page /* #optionsMessage removed here to preserve message padding on mobile */ {padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;}
.contractor-panel-page .action-pill, .contractor-panel-page .blue-button, .contractor-panel-page .share-button, .contractor-panel-page .join-waitlist-btn, .contractor-panel-page .filter-toggle-btn, .contractor-panel-page .term-info-container .blue-button, .contractor-panel-page .waitlist-text a, .contractor-panel-page #resetFilters {display:flex !important; width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; text-align:center !important; margin-left:0 !important; margin-right:0 !important; align-items:center !important; justify-content:center !important; height:var(--action-height) !important; border-radius:var(--button-radius) !important;}
.contractor-panel-page .waitlist-text a {padding:12px 15px; border-radius:var(--button-radius); border:1px solid #5f82a3; background-color:transparent; color:#5f82a3; text-decoration:none; font-weight:700; line-height:normal !important;}
.contractor-panel-page .waitlist-text a:hover {background-color:#5f82a3; color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(95,130,163,0.12);}
.contractor-panel-page .button-wrapper, .contractor-panel-page .course-footer, .contractor-panel-page .controls-container, .contractor-panel-page .waitlist-section, .contractor-panel-page .filter-toggle-container {display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important; width:100% !important;}
.contractor-panel-page .waitlist-text {flex:none !important; width:100% !important; text-align:center !important;}
.contractor-panel-page .button-wrapper > * + *, .contractor-panel-page .course-footer > * + *, .contractor-panel-page .controls-container > * + *, .contractor-panel-page .waitlist-section > * + *, .contractor-panel-page .availability-container > * + * {margin-top:8px !important; margin-left:0 !important; margin-right:0 !important;}
.contractor-panel-page .button-wrapper > *:first-child, .contractor-panel-page .course-footer > *:first-child, .contractor-panel-page .controls-container > *:first-child, .contractor-panel-page .waitlist-section > *:first-child, .contractor-panel-page .availability-container > *:first-child {margin-top:0 !important;}
.contractor-panel-page .share-options {display:none;}
.contractor-panel-page .share-options.show {display:flex;}}
/* Controls + layout */
.contractor-panel-page .controls-wrapper {max-width: var(--controls-max-width); margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; box-sizing:border-box;}
.contractor-panel-page .controls-container {display:flex; justify-content:space-between; align-items:center; gap:12px; margin:22px 0;}
/* Waitlist note */
.contractor-panel-page .waitlist-note {font-size:0.95em; color:#2e5d85; margin-left:8px;}
/* Availability list width */
.contractor-panel-page .availability-list {max-width: var(--controls-max-width); margin:12px auto; padding-left:15px; padding-right:15px; box-sizing:border-box; display:flex; flex-direction:column; gap:14px;}
/* Filter content same width */
.contractor-panel-page .filter-content {display:none; max-width: var(--controls-max-width); margin:12px auto; padding-left:15px; padding-right:15px; box-sizing:border-box;}
.contractor-panel-page .filter-content.show {display:block;}
/* Misc tweaks */
.contractor-panel-page .share-options {position:absolute; bottom:110%; right:0;}
.contractor-panel-page .full-notice {color: var(--danger); font-weight:normal;}
/* Accessibility focus outlines */
.contractor-panel-page .action-pill:focus, .contractor-panel-page .blue-button:focus, .contractor-panel-page .share-button:focus, .contractor-panel-page .filter-toggle-btn:focus, .contractor-panel-page .join-waitlist-btn:focus, .contractor-panel-page .waitlist-text a:focus, .contractor-panel-page #resetFilters:focus {outline: 3px solid rgba(95,130,163,0.16);
  outline-offset: 2px;}
/* Icon spacing + bold button text */
.contractor-panel-page .blue-button, .contractor-panel-page .join-waitlist-btn, .contractor-panel-page .action-pill, .contractor-panel-page .share-button, .contractor-panel-page .filter-toggle-btn, .contractor-panel-page .start-button, .contractor-panel-page .waitlist-text a {display:inline-flex !important;
  align-items:center;
  gap: var(--action-gap);}
.contractor-panel-page .blue-button, .contractor-panel-page .join-waitlist-btn, .contractor-panel-page .action-pill, .contractor-panel-page .share-button, .contractor-panel-page .filter-toggle-btn, .contractor-panel-page .start-button, .contractor-panel-page button, .contractor-panel-page input[type="button"], .contractor-panel-page input[type="submit"], .contractor-panel-page .menu-button, .contractor-panel-page .waitlist-text a {font-weight: 700 !important;}
/* Fallback icon spacing */
.contractor-panel-page .blue-button i, .contractor-panel-page .blue-button .icon, .contractor-panel-page .join-waitlist-btn i, .contractor-panel-page .join-waitlist-btn .icon, .contractor-panel-page .action-pill i, .contractor-panel-page .action-pill .icon, .contractor-panel-page .share-button i, .contractor-panel-page .share-button .icon {margin-right: var(--action-gap);
  line-height: 1;
  display: inline-block;}
.contractor-panel-page .blue-button .icon-after, .contractor-panel-page .join-waitlist-btn .icon-after, .contractor-panel-page .action-pill .icon-after, .contractor-panel-page .share-button .icon-after {margin-left: var(--action-gap);}
/* Mobile button centering */
@media (max-width:768px) {.contractor-panel-page .blue-button, .contractor-panel-page .join-waitlist-btn, .contractor-panel-page .action-pill, .contractor-panel-page .share-button {justify-content:center; width:100%; box-sizing:border-box;}
.contractor-panel-page .join-waitlist-btn i, .contractor-panel-page .join-waitlist-btn .icon, .contractor-panel-page .join-waitlist-btn svg, .contractor-panel-page .blue-button i, .contractor-panel-page .blue-button .icon, .contractor-panel-page .blue-button svg, .contractor-panel-page .share-button i, .contractor-panel-page .share-button .icon, .contractor-panel-page .share-button svg {margin-right: var(--action-gap);}}
/* Mobile: remove nav radius only */
@media (max-width:48rem) {.contractor-panel-page .navbar, .contractor-panel-page .navbar.show, .contractor-panel-page .navbar a, .contractor-panel-page .navbar-active, .contractor-panel-page .menu-button {border-radius: 0 !important;}}
/* Ensure centered text for buttons */
.contractor-panel-page button, .contractor-panel-page .button, .contractor-panel-page .blue-button, .contractor-panel-page .share-button, .contractor-panel-page .join-waitlist-btn, .contractor-panel-page .action-pill, .contractor-panel-page .filter-toggle-btn, .contractor-panel-page .start-button, .contractor-panel-page input[type="button"], .contractor-panel-page input[type="submit"], .contractor-panel-page .menu-button, .contractor-panel-page #resetFilters, .contractor-panel-page .waitlist-text a, .contractor-panel-page .prev, .contractor-panel-page .next {text-align: center !important;
  justify-content: center !important;
  align-items: center !important;}
/* Mobile: left-align menu-button content */
@media (max-width:48rem) {.contractor-panel-page .menu-button {display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; padding-left:.75rem !important;}
.contractor-panel-page .menu-button i, .contractor-panel-page .menu-button .icon, .contractor-panel-page .menu-button svg {margin-right:.5rem !important; vertical-align:middle !important;}}
/* Specific ID styles */
.contractor-panel-page #add-line-item-btn {background-color: #5f82a3;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: var(--button-radius);
  cursor: pointer;}
.contractor-panel-page #add-line-item-btn:hover {background-color: #4f708e;}
/* Progress track & fill (ensures full fill) */
.contractor-panel-page .progress-track {background: #e6e6e6; border-radius:12px; height:30px; overflow:hidden; box-sizing:border-box;}
.contractor-panel-page .progress-fill {display:block; height:100%; width:0%; transition: width 800ms ease; background: #5f82a3; border-radius:12px;}
/* Small helpers */
.contractor-panel-page .capacity-circles {display:flex; gap:12px;}
.contractor-panel-page .capacity-instruction {margin-top:8px;}
/* Appended fixes requested */
/* 1) Hide .hidden or #optionsMessage.hidden */
.contractor-panel-page .hidden, .contractor-panel-page #optionsMessage.hidden {display:none !important; margin:0 !important; padding:0 !important; height:0 !important; overflow:hidden !important;}
/* 2) Reduced vertical margins on availability messages */
.contractor-panel-page .availability-options-message-positive, .contractor-panel-page .availability-options-message-zero {margin:1rem auto !important;}
/* 3) Reset button responsive -- moved earlier and made responsive */
/* (kept #resetFilters style set above) */
/* 4) Remove top margin on first visible course card */
.contractor-panel-page .availability-list > .availability-course-card:first-child {margin-top:0 !important;}
/* ---------- ICON-IN-SUBMIT SUPPORT ----------
Preferred: <button type="submit" class="blue-button submit-button"><svg class="btn-icon" ...></svg> Submit</button>
Fallback for input[type="submit"] (background SVG):
<input type="submit" class="with-icon" value="Submit">
*/
/* Submit button (preferred) supports inner icon elements */
.contractor-panel-page button[type="submit"].submit-button, .contractor-panel-page button.submit-button, .contractor-panel-page .blue-button.submit-button {display:inline-flex;
  align-items:center;
  gap:var(--action-gap);
  justify-content:center;}
/* Icon inside button (svg or <i>) */
.contractor-panel-page button.submit-button .btn-icon, .contractor-panel-page button.submit-button .icon {width:16px;
  height:16px;
  display:inline-block;
  flex:0 0 16px;
  line-height:1;}
/* Input[type="submit"] with background SVG (fallback) */
.contractor-panel-page input[type="submit"].with-icon {background-repeat: no-repeat;
  background-position: 12px center;
  padding-left: 44px; /* space for icon */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");}
/* Ensure input submit gets accessible look */
.contractor-panel-page input[type="submit"].with-icon, .contractor-panel-page input[type="submit"].btn, .contractor-panel-page button[type="submit"].btn {background-color:#5f82a3;
  color:#fff;
  border:0;
  padding:12px 24px;
  border-radius:var(--button-radius);
  box-shadow:0 8px 24px rgba(95,130,163,0.10);
  cursor:pointer;
  font-weight:700;}
.contractor-panel-page input[type="submit"].with-icon:hover, .contractor-panel-page button[type="submit"].btn:hover {background-color:#4f708e; transform: translateY(-2px);}
/* Fallback spacing for <i> icon elements inside buttons */
.contractor-panel-page .blue-button i, .contractor-panel-page .blue-button .icon, .contractor-panel-page .join-waitlist-btn i, .contractor-panel-page .join-waitlist-btn .icon, .contractor-panel-page .action-pill i, .contractor-panel-page .action-pill .icon, .contractor-panel-page .share-button i, .contractor-panel-page .share-button .icon {margin-right: var(--action-gap);
  line-height: 1;
  display: inline-block;}
/* Accessibility focus outlines */
.contractor-panel-page .action-pill:focus, .contractor-panel-page .blue-button:focus, .contractor-panel-page .share-button:focus, .contractor-panel-page .filter-toggle-btn:focus, .contractor-panel-page .join-waitlist-btn:focus, .contractor-panel-page .waitlist-text a:focus, .contractor-panel-page #resetFilters:focus {outline: 3px solid rgba(95,130,163,0.16);
  outline-offset: 2px;}
/* End of stylesheet */
@media screen and (max-width:48rem) {/* Make the expanded/details row fill the full container width on mobile */
.contractor-panel-page tr.details, .contractor-panel-page tr.details.open, .contractor-panel-page tr.details-row, .contractor-panel-page tr.details-row.open {display: block !important; width: 100% !important;}
.contractor-panel-page tr.details td, .contractor-panel-page tr.details.open td, .contractor-panel-page tr.details-row td, .contractor-panel-page tr.details-row.open td {display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 0.75rem !important; border: none !important; background: #fafafa !important;}
/* Remove the "data-label" pseudo from the details cell */
.contractor-panel-page tr.details td:before, .contractor-panel-page tr.details-row td:before {content: none !important; display: none !important;}}
/* =========================
   Consolidated stylesheet (final) -- slightly increased label -> input spacing
   (sets a modest gap between label text like "Email address required" / "Notes"
    and the following input/textarea)
   ========================= */
/* Utility & spacing */
.contractor-panel-page .mt-8 {margin-top: 8px;}
.contractor-panel-page .mr-8 {margin-right: 8px;}
.contractor-panel-page .ml-auto {margin-left: auto;}
.contractor-panel-page .text-right {text-align: right;}
.contractor-panel-page .font-bold {font-weight: 700;}
.contractor-panel-page .center {text-align: center;}
/* Global moderate-label spacing:
   Use a modest spacing so text labels sit comfortably above controls. */
.contractor-panel-page label {display: block;
  margin-bottom: 6px !important;    /* <-- increased a bit */
  line-height: 1.2 !important;}
.contractor-panel-page input, .contractor-panel-page textarea, .contractor-panel-page select, .contractor-panel-page .form-control {margin-top: 6px !important;       /* <-- matching modest gap */
  margin-bottom: 10px !important;
  box-sizing: border-box !important;}
/* Optional helper class to force minimal gap where needed:
   <label class="no-gap-label">...</label> */
.contractor-panel-page .no-gap-label {margin-bottom: 0 !important;}
.contractor-panel-page .no-gap-control {margin-top: 0 !important;}
/* Reduce spacing inside .form-group variants while keeping label gap */
.contractor-panel-page .form-group, .contractor-panel-page .form-row, .contractor-panel-page .field-row {margin-bottom: 8px !important;
  padding: 0;}
/* Reduce spacing for inline help/error text that often increases gap */
.contractor-panel-page .form-text, .contractor-panel-page .form-help, .contractor-panel-page .field-help, .contractor-panel-page .input-help, .contractor-panel-page .error-help, .contractor-panel-page .small-note {margin: 0 0 6px 0 !important;
  padding: 0;
  line-height: 1.2;
  display: block;}
/* Hide "Note" column in earnings breakdown on mobile */
@media (max-width: 768px) {.contractor-panel-page .lesson-earnings-responsive table th:nth-child(7), .contractor-panel-page .lesson-earnings-responsive table td:nth-child(7) {display: none !important;
    visibility: hidden !important;}}
/* Login Form */
.contractor-panel-page .login-form {background-color: #fff; padding: 20px; border-radius: 8px; border: solid 1px #CCCCCC !important; width: 100%; max-width: 400px; margin: 0 auto; text-align: center; margin-bottom: 25px;}
.contractor-panel-page .login-form h2 {font-size: 1.8em; margin-bottom: 20px; color: #333;}
.contractor-panel-page .login-form label {font-size: 1.1em; margin-bottom: 6px !important; display: block; text-align: left; color: #333;}
.contractor-panel-page .login-form input {width: 100%; padding: 12px; margin: 6px 0 10px !important; border-radius: 5px; border: 1px solid #e6ecef; font-size: 1em; box-sizing: border-box; transition: border 0.3s ease;}
.contractor-panel-page .login-form input:focus {border-color: #5f82a3; outline: none;}
.contractor-panel-page .login-form button {background-color: #5f82a3; color: white; padding: 12px 20px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; width: 100%;}
.contractor-panel-page .login-form button:hover {background-color: #4f708e;}
.contractor-panel-page .login-form .error, .contractor-panel-page .form-message.error {color: #b94a48; background-color: #fdeeee; padding: 10px; border-radius: 5px; font-size: 1em; margin-bottom: 15px; border: 1px solid #b94a48; text-align:center;}
.contractor-panel-page .form-message.success {color: #4f8f55; background-color: #e6ffed; padding: 10px; border-radius: 5px; font-size: 1em; margin-bottom: 15px; border: 1px solid #4f8f55; text-align:center;}
/* Panel Intro Message */
.contractor-panel-page .panel-intro-message {background-color: #f7f9fb; border: 1px solid #d9e2e8; border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;}
.contractor-panel-page .panel-intro-message .welcome-message {font-size: 1.2em; font-weight: bold; color: #0050b3; margin: 0;}
/* Instructor Selector (within intro message) */
.contractor-panel-page .instructor-selector {display: flex; align-items: center; justify-content: center; gap: 10px;}
.contractor-panel-page .instructor-selector label {font-weight: bold; font-size: 1em; margin-right: 6px; color: #333;}
.contractor-panel-page .instructor-selector select {padding: 8px 12px; border-radius: 5px; border: 1px solid #e6ecef; font-size: 1em; background-color: #fff; cursor: pointer; min-width: 150px;}
.contractor-panel-page .instructor-selector select:focus {border-color: #5f82a3; outline: none;}
/* Welcome Container (Buttons) */
.contractor-panel-page .welcome-container {display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}
.contractor-panel-page .welcome-container a, .contractor-panel-page .welcome-container button {text-decoration: none; color: white; padding: 12px 20px; border-radius: 5px; font-weight: bold; transition: background-color 0.3s; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;}
.contractor-panel-page .change-password-button {background-color: #5f6f7a;}
.contractor-panel-page .change-password-button:hover {background-color: #7f8c8d;}
.contractor-panel-page .print-schedule-button {background-color: #4f8f55;}
.contractor-panel-page .print-schedule-button:hover {background-color: #218838;}
.contractor-panel-page .logout-button {background-color: #b94a48;}
.contractor-panel-page .logout-button:hover {background-color: #ff1a1a;}
/* Primary action (Submit invoice / Add line item) - unified look */
.contractor-panel-page #add-line-item-btn, .contractor-panel-page .submit-invoice-button {background-color: #5f82a3; color: #ffffff; padding: 10px 16px; border-radius: 8px; border: none; font-weight: 700; box-shadow: 0 2px 0 rgba(0,0,0,0.06); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.12s ease, transform 0.06s ease;}
.contractor-panel-page #add-line-item-btn {background-color: #17a2b8;}
.contractor-panel-page #add-line-item-btn:hover, .contractor-panel-page .submit-invoice-button:hover {background-color: #4f708e; transform: translateY(-1px);}
.contractor-panel-page #add-line-item-btn:active, .contractor-panel-page .submit-invoice-button:active {transform: translateY(0);}
.contractor-panel-page .btn-warning {background:#ffc107; color:#000;}
.contractor-panel-page .btn-muted {background:#6c757d;}
/* Invoice form action group: center the Add Invoice Details / Preview / Submit buttons */
.contractor-panel-page .invoice-form-actions {display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px;}
/* Ensure invoice details (the <details> element) takes full row when opened so buttons sit underneath.
   This prevents the observed behavior where the action buttons move to the right of the expanded details. */
.contractor-panel-page .invoice-form-actions details {transition: all .15s ease;}
.contractor-panel-page .invoice-form-actions details[open] {flex: 1 1 100%; width: 100%; margin-bottom: 12px;}
/* Ensure the action buttons do not expand/shrink unexpectedly */
.contractor-panel-page .invoice-form-actions > button, .contractor-panel-page .invoice-form-actions .submit-invoice-button, .contractor-panel-page .invoice-form-actions #add-line-item-btn {flex: 0 0 auto;}
/* Add spacing specifically below the Add line item button so it has visual breathing room */
.contractor-panel-page #add-line-item-btn {margin-bottom: 14px;}
/* Change Password Form (hidden by default) */
.contractor-panel-page .change-password-form {background-color: #ffffff; padding: 20px; border-radius: 8px; border: solid 1px #CCCCCC; width: 100%; max-width: 400px; margin: 20px auto; text-align: center; display: none;}
.contractor-panel-page .change-password-form input {width: 100%; padding: 12px; margin: 6px 0 10px !important; border-radius: 5px; border: 1px solid #e6ecef; font-size: 1em; box-sizing: border-box;}
.contractor-panel-page .change-password-form button {background-color: #5f82a3; color: white; padding: 12px 20px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer;}
.contractor-panel-page .change-password-form button:hover {background-color: #4f708e;}
/* Instructor Profile */
.contractor-panel-page .instructor-profile {display: flex; align-items: flex-start; margin-bottom: 20px; background-color: #fff; padding: 20px; border-radius: 8px; border: solid 1px #CCCCCC;}
.contractor-panel-page .instructor-profile .profile-image {flex: 0 0 150px; margin-right: 20px; border-radius: 50%; overflow: hidden; width: 150px; height: 150px; flex-shrink: 0;}
.contractor-panel-page .instructor-profile .profile-image img {width: 100%; height: 100%; object-fit: cover;}
.contractor-panel-page .instructor-profile .profile-info {flex: 1;}
.contractor-panel-page .instructor-profile .profile-info h3 {margin-bottom: 10px; font-size: 1.5em;}
.contractor-panel-page .instructor-profile .profile-info p {margin: 5px 0; font-size: 1.1em;}
/* Day Tabs */
.contractor-panel-page .day-tabs {margin-top: 20px; margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center;}
.contractor-panel-page .day-tab {background-color: #eee; border: none; padding: 10px 15px; font-size: 1em; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; display: inline-block;}
.contractor-panel-page .day-tab:hover {background-color: #aaa; text-decoration: none;}
.contractor-panel-page .day-tab.active {background-color: #e6ecef;}
.contractor-panel-page .day-tab.disabled {cursor: not-allowed; opacity: 0.5; pointer-events: none;}
/* Schedule & tables */
.contractor-panel-page .schedule-day-heading {text-align: center; margin-bottom: 20px;}
.contractor-panel-page h2.schedule-day-heading {text-align: center; margin-bottom: 20px; font-size: 1.2em;}
.contractor-panel-page table {font-size: 1em; width: 100%; border-collapse: collapse; margin-bottom: 15px; background-color: #fff;}
.contractor-panel-page th, .contractor-panel-page td {font-size: 1em; padding: 8px; border: 1px solid #e6ecef; text-align: left; vertical-align: top;}
.contractor-panel-page th {background-color: #f4f4f4; font-weight: bold; color: #555;}
.contractor-panel-page .break {background-color: #fffdf5 !important; color: #8a6a15; text-align: center;}
.contractor-panel-page .available {background-color: #eef8f0 !important; color: #4f8f55; text-align: center;}
.contractor-panel-page .available-badge {text-transform: uppercase; pointer-events: none;}
/* Student Details Row (expandable) */
.contractor-panel-page .student-details-row {background-color: #f9f9f9; font-size: 0.9em; border-top: none; display: none;}
.contractor-panel-page .student-details-row td {padding: 10px 20px; border-top: none;}
.contractor-panel-page .student-details-row strong {display: inline-block; min-width: 80px;}
.contractor-panel-page .student-details-row.expanded {display: table-row;}
/* Share Button */
.contractor-panel-page .share-style-button {background-color: #17a2b8; color: white; padding: 4px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: background-color 0.3s ease; font-size: 0.9em; margin-left: 10px; float: right; text-decoration: none;}
.contractor-panel-page .share-style-button:hover {background-color: #138496; color: white; text-decoration: none;}
/* Payment Legend */
.contractor-panel-page .legend {display: flex; gap: 16px; align-items: center; justify-content: center; margin: 8px 0 16px; font-size: 0.95em; color: #333; flex-wrap: wrap;}
.contractor-panel-page .legend-item {display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.02); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.04);}
.contractor-panel-page .legend .paid-icon {display: inline-block; width: 1.1em; text-align: center; font-weight: bold; line-height: 1; font-size: 1.1em;}
.contractor-panel-page .paid-yes {color: #4f8f55;}
.contractor-panel-page .paid-no {color: #b94a48;}
.contractor-panel-page .paid-late {color: #8a6a15;}
/* Lesson Logs Review Section */
.contractor-panel-page .lesson-logs-review {margin-top: 20px; border: 1px solid #e6ecef; border-radius: 8px; padding: 15px; background-color: #fcfcfc;}
.contractor-panel-page .lesson-logs-review summary {font-weight: bold; font-size: 1.2em; cursor: pointer; color: #34495e;}
.contractor-panel-page .lesson-logs-review table {margin-top: 15px; font-size: 0.9em;}
.contractor-panel-page .lesson-logs-review table th, .contractor-panel-page .lesson-logs-review table td {padding: 8px; border: 1px solid #e9ecef;}
.contractor-panel-page .lesson-logs-review table th {background-color: #f2f2f2;}
.contractor-panel-page .lesson-logs-review .total-row td {font-weight: bold; background-color: #e9ecef;}
/* Utility: horizontal scroll wrapper for wide tables */
.contractor-panel-page .table-responsive {overflow-x: auto; -webkit-overflow-scrolling: touch;}
.contractor-panel-page .table-responsive table {min-width: 640px;}
/* Support class for hiding description cell */
.contractor-panel-page .hidden {display: none !important;}
/* Responsive Adjustments */
@media (max-width: 768px) {.contractor-panel-page .main-wrapper {margin: 10px; padding: 10px;}
.contractor-panel-page h1 {font-size: 1.8em;}
.contractor-panel-page h2 {font-size: 1.5em;}
.contractor-panel-page h3 {font-size: 1.3em;}
.contractor-panel-page .instructor-profile {flex-direction: column; align-items: center; padding: 15px; text-align: center;}
.contractor-panel-page .instructor-profile .profile-image {margin: 0 0 15px 0;}
.contractor-panel-page .instructor-profile .profile-info {width: 100%;}
.contractor-panel-page .welcome-container {flex-direction: column; align-items: stretch;}
.contractor-panel-page .welcome-container a, .contractor-panel-page .welcome-container button {width: 100%; justify-content: center;}
.contractor-panel-page .instructor-selector {flex-direction: column; align-items: stretch;}
.contractor-panel-page .instructor-selector select {width: 100%;}
.contractor-panel-page table, .contractor-panel-page .lesson-logs-review table {width: 100%;}
.contractor-panel-page table.responsive-stack thead, .contractor-panel-page .lesson-logs-review table.responsive-stack thead {display: none;}
.contractor-panel-page table.responsive-stack, .contractor-panel-page table.responsive-stack tbody, .contractor-panel-page table.responsive-stack tr, .contractor-panel-page table.responsive-stack td {display: block; width: 100%;}
.contractor-panel-page table.responsive-stack tbody tr {display: block; margin-bottom: 10px; border: 1px solid #e6ecef; border-radius: 8px; padding: 8px; background: #fff; box-sizing: border-box; overflow: hidden;}
.contractor-panel-page table.responsive-stack td {display: flex; justify-content: space-between; align-items: center; text-align: right; border: none; border-bottom: 1px solid #eee; padding: 8px 10px; box-sizing: border-box; word-break: break-word;}
.contractor-panel-page table.responsive-stack td::before {content: attr(data-label); font-weight: 600; color: #555; text-transform: capitalize; flex: 0 0 45%; margin-right: 12px; text-align: left;}
.contractor-panel-page table.responsive-stack .student-details-row, .contractor-panel-page .lesson-logs-review table.responsive-stack .student-details-row {display: none !important;}
.contractor-panel-page table.responsive-stack .student-details-row.expanded, .contractor-panel-page .lesson-logs-review table.responsive-stack .student-details-row.expanded {display: block !important;}
.contractor-panel-page .student-name-toggle {display: block; width: 100%; text-align: right;}
.contractor-panel-page .available-badge {float: left; margin-right: 10px;}
.contractor-panel-page .share-style-button {float: right; margin-left: 0;}
.contractor-panel-page .break td {text-align: center !important;}
.contractor-panel-page tbody tr.break td[colspan="4"] {display: block; width: 100%; box-sizing: border-box; margin: 8px 0; padding: 18px 16px; text-align: center; border-radius: 10px; background: #ffffff; color: #333; font-size: 1rem;}
/* Make primary action buttons look consistent on mobile but center them in the form */
.contractor-panel-page #add-line-item-btn {width: auto; justify-content: center; padding: 12px 14px; font-size: 1rem; border-radius: 8px; display: inline-flex; margin: 8px 0 8px 0; max-width: 420px;}
/* invoice action buttons inside the centered action group become full-width on mobile */
.contractor-panel-page .invoice-form-actions .submit-invoice-button, .contractor-panel-page .invoice-form-actions #toggle-invoice-extras-btn, .contractor-panel-page .invoice-form-actions #preview-invoice-btn {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;}
/* Compact the spacing above the Add line item button and stack total under the button */
.contractor-panel-page .line-items-controls {display: flex;
    flex-direction: column;      /* stack vertically */
    align-items: stretch;        /* fill container width */
    gap: 8px;
    margin-top: 6px;             /* reduced top spacing */
    margin-bottom: 12px;}
/* Make add button first and full width */
.contractor-panel-page .line-items-controls > #add-line-item-btn {order: 1; width: 100%; margin: 0;}
/* Place the total under the button, centered */
.contractor-panel-page .line-items-controls > .ml-auto {order: 2;
    margin-left: 0 !important;
    text-align: center;
    width: 100%;
    display: block;}
.contractor-panel-page .line-items-controls > .ml-auto #line-items-total {display: inline-block; margin-left: 6px;}
/* Store visual styles for line-items table when stacked */
.contractor-panel-page #line-items-table .remove-line-item {background: #b94a48; color: #fff; border-radius: 6px; padding: 10px; border: none; font-weight: 700; width: 100%; box-sizing: border-box;}
.contractor-panel-page #line-items-table .row-cost {font-weight: 700; display: block; width: 100%; text-align: right; box-sizing: border-box;}
/* Convert table to stacked blocks for line-items */
.contractor-panel-page #line-items-table {display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: transparent !important;}
.contractor-panel-page #line-items-table thead {display: none !important;}
.contractor-panel-page #line-items-table, .contractor-panel-page #line-items-table tbody, .contractor-panel-page #line-items-table tr, .contractor-panel-page #line-items-table td, .contractor-panel-page #line-items-table th {display: block !important; width: 100% !important; box-sizing: border-box !important;}
/* Important: avoid stacked "double" borders by removing per-cell border and using tr border */
.contractor-panel-page #line-items-table td {padding: 6px 8px !important; overflow: hidden !important; word-break: break-word !important; background: #fff !important; border: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; border-top: none !important; border-radius: 0 !important; margin-bottom: 6px; box-sizing: border-box !important;}
/* Apply single outer border on each stacked row to separate cards (prevents thick double lines) */
.contractor-panel-page #line-items-table tbody tr {border: 1px solid #e9ecef; border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fff; box-sizing: border-box;}
/* make the pseudo-labels above each input visible and styled */
.contractor-panel-page #line-items-table td::before {display: block !important; font-weight: 700 !important; color: #333 !important; margin-bottom: 6px !important; font-size: 0.95rem !important; line-height: 1.2 !important;}
.contractor-panel-page #line-items-table tr td:nth-child(1):before {content: "Type" !important;}
.contractor-panel-page #line-items-table tr td:nth-child(2):before {content: "Description" !important;}
.contractor-panel-page #line-items-table tr td:nth-child(3):before {content: "Date" !important;}
.contractor-panel-page #line-items-table tr td:nth-child(4):before {content: "Rate per hour" !important;}
.contractor-panel-page #line-items-table tr td:nth-child(5):before {content: "Hours" !important;}
.contractor-panel-page #line-items-table tr td:nth-child(6):before {content: "Cost" !important;}
.contractor-panel-page #line-items-table tr td:nth-child(7):before {content: "" !important;}
/* IMPORTANT: align labels and inputs LEFT in the stacked mobile view so Rate/Qty/Cost match Type/Description/Date */
.contractor-panel-page #line-items-table td, .contractor-panel-page #line-items-table td * {text-align: left !important;}
/* Override any inline width styles added by JS */
.contractor-panel-page #line-items-table select[name="line_item_type[]"], .contractor-panel-page #line-items-table input[name="line_item_rate[]"], .contractor-panel-page #line-items-table input[name="line_item_quantity[]"], .contractor-panel-page #line-items-table input[name="line_item_description[]"], .contractor-panel-page #line-items-table input[name="line_item_date[]"], .contractor-panel-page #line-items-table textarea[name="line_item_description[]"] {width: 100% !important; max-width: 100% !important; display: block !important; box-sizing: border-box !important;}
/* Hide the hidden cost input from layout */
.contractor-panel-page #line-items-table input[name="line_item_cost[]"] {display: none !important;}
/* Keep visible cost text compact and left aligned */
.contractor-panel-page #line-items-table .row-cost {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-weight:700; color:#111; text-align: left !important;}
/* Prevent long description text from causing overflow */
.contractor-panel-page #line-items-table td input, .contractor-panel-page #line-items-table td textarea {overflow-wrap: break-word; word-break: break-word;}
/* Remove default number spinner to keep compact layout */
.contractor-panel-page #line-items-table input[type="number"]::-webkit-outer-spin-button, .contractor-panel-page #line-items-table input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.contractor-panel-page #line-items-table input[type="number"] {-moz-appearance: textfield;}
/* Ensure remove button doesn't overflow */
.contractor-panel-page #line-items-table .remove-line-item {box-sizing: border-box; width: 100% !important; display: inline-block !important;}
.contractor-panel-page .legend {flex-direction: column; align-items: stretch; gap: 8px; justify-content: flex-start;}
.contractor-panel-page .legend-item {display: flex; width: 100%; justify-content: flex-start; align-items: center; padding: 10px 12px; gap: 12px; white-space: normal;}
.contractor-panel-page .legend .paid-icon {flex: 0 0 auto; margin-right: 6px; width: 1.2em; text-align: center;}
.contractor-panel-page .legend .legend-text {display: block; line-height: 1.2; word-break: break-word;}
/* Mobile-only: center the "Additional Line Items" heading, the CSV explanatory paragraph,
     and ensure the additional items total is centered under the Add button */
.contractor-panel-page .invoice-extras h4 {text-align: center !important;}
.contractor-panel-page .invoice-extras .mt-8 {text-align: center !important;}
/* targets the CSV explanatory paragraph which uses .mt-8 */
.contractor-panel-page .invoice-extras .line-items-controls > .ml-auto {text-align: center !important;}
/* Reduce space between labels and inputs in invoice extras, login and change-password forms */
.contractor-panel-page .invoice-extras label, .contractor-panel-page .invoice-extras .checkbox-row label, .contractor-panel-page .login-form label, .contractor-panel-page .change-password-form label, .contractor-panel-page .lesson-logs-review label {margin-bottom: 6px !important;
    display: block;
    line-height: 1.2 !important;}
.contractor-panel-page .invoice-extras input, .contractor-panel-page .invoice-extras textarea, .contractor-panel-page .invoice-extras select, .contractor-panel-page .login-form input, .contractor-panel-page .change-password-form input, .contractor-panel-page .lesson-logs-review input, .contractor-panel-page .lesson-logs-review textarea {margin-top: 6px !important;
    margin-bottom: 10px !important;}}
/* Ensure description column stays hidden on mobile AND desktop when JS adds .hidden */
.contractor-panel-page #line-items-table th.hidden, .contractor-panel-page #line-items-table td.hidden, .contractor-panel-page #line-items-table td[aria-hidden="true"] {display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;}
/* Mobile: keep Lesson Logs table as a normal table so the header prints once */
@media (max-width: 768px) {.contractor-panel-page .lesson-logs-review table {display: table !important; width: 100% !important; table-layout: auto !important; overflow-x: auto;}
.contractor-panel-page .lesson-logs-review table thead {display: table-header-group !important;}
.contractor-panel-page .lesson-logs-review table tbody {display: table-row-group !important;}
.contractor-panel-page .lesson-logs-review table tr {display: table-row !important;}
.contractor-panel-page .lesson-logs-review table th, .contractor-panel-page .lesson-logs-review table td {display: table-cell !important; white-space: normal !important;}
.contractor-panel-page .lesson-logs-review table td::before, .contractor-panel-page .lesson-logs-review table td::after {content: none !important;}
.contractor-panel-page .lesson-logs-review table.responsive-stack, .contractor-panel-page .lesson-logs-review table.responsive-stack tbody, .contractor-panel-page .lesson-logs-review table.responsive-stack tr, .contractor-panel-page .lesson-logs-review table.responsive-stack td, .contractor-panel-page .lesson-logs-review table.responsive-stack th {display: table-row-group !important;}
.contractor-panel-page .lesson-logs-review table.responsive-stack td, .contractor-panel-page .lesson-logs-review table.responsive-stack th {display: table-cell !important;}
.contractor-panel-page .lesson-logs-review table .student-details-row {display: none !important;}
.contractor-panel-page .lesson-logs-review table .student-details-row.expanded {display: table-row !important;}}
/* Mobile: keep Schedule table as a normal table so the header prints once */
@media (max-width: 768px) {.contractor-panel-page table.preserve-headers, .contractor-panel-page .preserve-headers {display: table !important; width: 100% !important; table-layout: auto !important; overflow-x: auto;}
.contractor-panel-page table.preserve-headers thead, .contractor-panel-page .preserve-headers thead {display: table-header-group !important;}
.contractor-panel-page table.preserve-headers tbody, .contractor-panel-page .preserve-headers tbody {display: table-row-group !important;}
.contractor-panel-page table.preserve-headers tr, .contractor-panel-page .preserve-headers tr {display: table-row !important;}
.contractor-panel-page table.preserve-headers th, .contractor-panel-page table.preserve-headers td, .contractor-panel-page .preserve-headers th, .contractor-panel-page .preserve-headers td {display: table-cell !important; white-space: normal !important;}
.contractor-panel-page table.preserve-headers td::before, .contractor-panel-page table.preserve-headers td::after, .contractor-panel-page .preserve-headers td::before, .contractor-panel-page .preserve-headers td::after {content: none !important;}
.contractor-panel-page table.preserve-headers.responsive-stack, .contractor-panel-page table.preserve-headers.responsive-stack tbody, .contractor-panel-page table.preserve-headers.responsive-stack tr, .contractor-panel-page table.preserve-headers.responsive-stack td, .contractor-panel-page table.preserve-headers.responsive-stack th, .contractor-panel-page .preserve-headers.responsive-stack, .contractor-panel-page .preserve-headers.responsive-stack tbody, .contractor-panel-page .preserve-headers.responsive-stack tr, .contractor-panel-page .preserve-headers.responsive-stack td, .contractor-panel-page .preserve-headers.responsive-stack th {display: table-row-group !important;}
.contractor-panel-page table.preserve-headers.responsive-stack td, .contractor-panel-page table.preserve-headers.responsive-stack th, .contractor-panel-page .preserve-headers.responsive-stack td, .contractor-panel-page .preserve-headers.responsive-stack th {display: table-cell !important;}
.contractor-panel-page table.preserve-headers .student-details-row, .contractor-panel-page .preserve-headers .student-details-row {display: none !important;}
.contractor-panel-page table.preserve-headers .student-details-row.expanded, .contractor-panel-page .preserve-headers .student-details-row.expanded {display: table-row !important;}}
/* Print Styles */
@media print {.contractor-panel-page {background-color: #fff !important;}
.contractor-panel-page .main-wrapper {margin: 0; padding: 0; box-shadow: none; border-radius: 0;}
.contractor-panel-page .secondary-wrapper {padding: 0;}
.contractor-panel-page .nav-container, .contractor-panel-page .welcome-container, .contractor-panel-page .instructor-selector, .contractor-panel-page .panel-intro-message, .contractor-panel-page .change-password-form, .contractor-panel-page .legend, .contractor-panel-page .share-button, .contractor-panel-page .student_details_row, .contractor-panel-page .instructor-profile .profile-image, .contractor-panel-page .lesson-logs-review, .contractor-panel-page .submit-invoice-button, .contractor-panel-page .form-message {display: none !important;}
.contractor-panel-page h1 {display: block !important; text-align: center; margin-bottom: 20px; font-size: 2em;}
.contractor-panel-page h2.schedule-day-heading {display: block !important; text-align: center; margin-top: 20px; font-size: 1.5em;}
.contractor-panel-page table {width: 100%; border-collapse: collapse; page-break-inside: auto; margin-top: 15px;}
.contractor-panel-page tr {page-break-inside: avoid; page-break-after: auto;}
.contractor-panel-page thead {display: table-header-group;}
.contractor-panel-page th, .contractor-panel-page td {border: 1px solid #000; padding: 8px; font-size: 0.9em; color: #000 !important; background-color: #fff !important;}
.contractor-panel-page .break, .contractor-panel-page .available {background-color: #fff !important; color: #000 !important;}
.contractor-panel-page .paid-icon {color: #000 !important;}}
/* Invoice preview modal tweaks */
/* Make the modal container scrollable if content exceeds the viewport,
   and make the inner modal content scroll vertically while staying centered. */
.contractor-panel-page .preview-modal {display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  padding: 20px; /* provide breathing room so modal doesn't touch viewport edges */
  overflow: auto; /* allow page-level scrolling inside the overlay */
  -webkit-overflow-scrolling: touch;}
.contractor-panel-page .preview-modal.open {display: flex !important;}
/* Modal inner should be constrained to viewport height and scroll internally */
.contractor-panel-page .modal-inner {width: 95%;
  max-width: 900px;
  max-height: calc(100vh - 40px); /* leave some space top/bottom */
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  overflow-y: auto; /* vertical scroll for long invoices */
  -webkit-overflow-scrolling: touch;}
/* Ensure focusable elements remain usable inside modal */
.contractor-panel-page .preview-modal.open:focus {outline: none;}
/* End of preview modal tweaks (works on desktop and mobile) */
/* Invoice preview modal tweaks (legacy incomplete block removed/merged above) */
/* End of stylesheet */
@media (max-width:480px) {.contractor-panel-page .day-tab {padding:6px 8px; font-size:14px;}
.contractor-panel-page .today-badge, .contractor-panel-page .viewing-badge {font-size:10px; padding:1px 5px;}}
/* Mobile-only: make the per-lesson earnings table horizontally scrollable */
@media (max-width: 768px) {.contractor-panel-page .lesson-earnings-responsive {width: 100%;
    max-width: 100%;
    overflow-x: auto;                    /* enable horizontal scrolling */
    -webkit-overflow-scrolling: touch;   /* smooth scrolling on iOS */
    box-sizing: border-box;}
.contractor-panel-page .lesson-earnings-responsive table {display: table !important;           /* ensure table layout */
    width: auto;                         /* allow table to be wider than container */
    min-width: 720px;                    /* adjust to suit your columns */
    border-collapse: collapse;
    margin: 0;}
.contractor-panel-page .lesson-earnings-responsive th, .contractor-panel-page .lesson-earnings-responsive td {white-space: nowrap;                 /* keep columns intact while scrolling */
    word-break: normal;}}
/* Extra small devices: reduce required min-width if needed */
@media (max-width: 480px) {.contractor-panel-page .lesson-earnings-responsive table {min-width: 560px;}}
@media (max-width: 768px) {/* Make Schedule & Calculation Breakdown match Draft Invoice table size on mobile */
.contractor-panel-page .preserve-headers, .contractor-panel-page .preserve-headers table, .contractor-panel-page .lesson-earnings-responsive table, .contractor-panel-page .calc-breakdown-body table {font-size: 1em !important;}
.contractor-panel-page .preserve-headers th, .contractor-panel-page .preserve-headers td, .contractor-panel-page .lesson-earnings-responsive th, .contractor-panel-page .lesson-earnings-responsive td, .contractor-panel-page .calc-breakdown-body th, .contractor-panel-page .calc-breakdown-body td {font-size: inherit !important; line-height: 1.4;}}
/* Final override: ensure Schedule and Calculation Breakdown tables match Draft Invoice table size on mobile */
@media (max-width: 768px) {.contractor-panel-page .lesson-logs-review table, .contractor-panel-page .preserve-headers, .contractor-panel-page .preserve-headers table, .contractor-panel-page .lesson-earnings-responsive table, .contractor-panel-page .calc-breakdown-body table {font-size: 0.9rem !important; /* match Draft Invoice table font-size on mobile */}
.contractor-panel-page .preserve-headers th, .contractor-panel-page .preserve-headers td, .contractor-panel-page .lesson-earnings-responsive th, .contractor-panel-page .lesson-earnings-responsive td, .contractor-panel-page .calc-breakdown-body th, .contractor-panel-page .calc-breakdown-body td, .contractor-panel-page .lesson-logs-review th, .contractor-panel-page .lesson-logs-review td {font-size: inherit !important;
    line-height: 1.4 !important;}}
/* =========================
   User appended CSS (these rules are appended last so they win in conflicts)
   ========================= */
/* New appended rules (from your latest style block) */
/* Login username specific tweaks */
.contractor-panel-page .login-form input#username, .contractor-panel-page .login-form input[name="username"] {margin-bottom: 1rem !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;}
/* Restore yellowish background for BREAK rows in the schedule table only.
   Exclude the #line-items-table (which also uses .preserve-headers). */
.contractor-panel-page table.preserve-headers:not(#line-items-table) tr.break, .contractor-panel-page table.preserve-headers:not(#line-items-table) tr.break td {background-color: #fff7c2 !important; /* adjust hex for desired yellow */
  color: inherit !important;}
/* Prevent hover rules from overriding the BREAK background */
.contractor-panel-page table.preserve-headers:not(#line-items-table) tr.break:hover, .contractor-panel-page table.preserve-headers:not(#line-items-table) tr.break:hover td {background-color: #fff7c2 !important;}
/* Ensure consistent zebra striping for earnings / logs / breakdown tables (including tfoot) */
.contractor-panel-page .preserve-headers, .contractor-panel-page .lesson-earnings-responsive table, .contractor-panel-page .lesson-logs-review table, .contractor-panel-page .calc-breakdown-body table {border-collapse: collapse !important;}
/* Zebra rows for tbody */
.contractor-panel-page .preserve-headers tbody tr:nth-child(odd), .contractor-panel-page .lesson-earnings-responsive table tbody tr:nth-child(odd), .contractor-panel-page .lesson-logs-review table tbody tr:nth-child(odd), .contractor-panel-page .calc-breakdown-body table tbody tr:nth-child(odd) {background-color: var(--table-odd) !important;}
.contractor-panel-page .preserve-headers tbody tr:nth-child(even), .contractor-panel-page .lesson-earnings-responsive table tbody tr:nth-child(even), .contractor-panel-page .lesson-logs-review table tbody tr:nth-child(even), .contractor-panel-page .calc-breakdown-body table tbody tr:nth-child(even) {background-color: var(--table-even) !important;}
/* Make tfoot rows visually consistent with the body striping */
.contractor-panel-page .preserve-headers tfoot tr, .contractor-panel-page .lesson-earnings-responsive table tfoot tr, .contractor-panel-page .lesson-logs-review table tfoot tr, .contractor-panel-page .calc-breakdown-body table tfoot tr {background-color: var(--table-even) !important;}
/* Ensure header stays the lighter header stripe */
.contractor-panel-page .preserve-headers thead th, .contractor-panel-page .lesson-earnings-responsive table thead th, .contractor-panel-page .lesson-logs-review table thead th, .contractor-panel-page .calc-breakdown-body table thead th {background-color: var(--table-even) !important;}
/* Draft status color */
.contractor-panel-page .draft-status {color: #4f8f55;}
/* ---- Harmonize table text sizes on desktop ---- */
@media (min-width: 769px) {.contractor-panel-page .preserve-headers, .contractor-panel-page .lesson-earnings-responsive, .contractor-panel-page .lesson-earnings-responsive table, .contractor-panel-page .lesson-logs-review, .contractor-panel-page .lesson-logs-review table, .contractor-panel-page .calc-breakdown-body table {font-size: 0.95rem !important;
    line-height: 1.35 !important;}
.contractor-panel-page .preserve-headers th, .contractor-panel-page .lesson-earnings-responsive th, .contractor-panel-page .lesson-earnings-responsive table th, .contractor-panel-page .lesson-logs-review table th, .contractor-panel-page .calc-breakdown-body table thead th, .contractor-panel-page .calc-breakdown-body table th {font-size: 0.95rem !important;
    padding: 0.5rem 0.6rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;}
.contractor-panel-page .preserve-headers td, .contractor-panel-page .lesson-earnings-responsive td, .contractor-panel-page .lesson-earnings-responsive table td, .contractor-panel-page .lesson-logs-review table td, .contractor-panel-page .calc-breakdown-body table td {font-size: 0.95rem !important;
    padding: 0.5rem 0.6rem !important;}
/* Make the line-items table full-width on desktop */
.contractor-panel-page #line-items-table {width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;}
/* Allow wrapping in cells (except actions column) so table fills width */
.contractor-panel-page #line-items-table th, .contractor-panel-page #line-items-table td {white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;}
.contractor-panel-page #line-items-table td:last-child {white-space: nowrap !important; /* actions column stays compact */}
/* allow description column (if present) to expand/wrap */
.contractor-panel-page #line-items-table th.description, .contractor-panel-page #line-items-table td.description {white-space: normal !important;}}
/* --- Base / mobile-first rules for #line-items-table --- */
.contractor-panel-page .line-items-container {display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.5rem;}
.contractor-panel-page #line-items-table {border: 1px solid var(--border) !important;
  border-collapse: collapse !important;
  background: var(--white) !important;
  font-size: 0.95rem !important;
  table-layout: auto !important; /* mobile default; overridden for desktop above */
  box-sizing: border-box !important;}
/* THEAD = first (lighter) stripe */
.contractor-panel-page #line-items-table thead th {background-color: var(--table-even) !important; /* lighter header stripe */
  font-weight: bold !important;
  padding: .71rem !important;
  border: 1px solid var(--border) !important;
  text-align: left !important;
  font-size: 0.95rem !important;
  border-bottom: 1px solid var(--border) !important;
  cursor: default !important;}
/* ---- LOCK HEADER TEXT COLOR (prevent hover/parent hover from changing it) ----
   Use a variable with sensible fallbacks; change the hex if you need a different header text color. */
.contractor-panel-page #line-items-table thead th, .contractor-panel-page #line-items-table thead th * {color: var(--line-items-header-color, #111111) !important;
  -webkit-text-fill-color: var(--line-items-header-color, #111111) !important; /* defensive for WebKit */
  background-color: var(--table-even) !important; /* reinforce background */}
/* Defensive overrides: ensure header color stays the same even when table/rows are hovered or focused */
.contractor-panel-page #line-items-table:hover thead th, .contractor-panel-page #line-items-table thead th:hover, .contractor-panel-page #line-items-table thead th:focus, .contractor-panel-page #line-items-table thead th:active, .contractor-panel-page #line-items-table thead th *:hover, .contractor-panel-page #line-items-table thead *:focus {color: var(--line-items-header-color, #111111) !important;
  -webkit-text-fill-color: var(--line-items-header-color, #111111) !important;
  background-color: var(--table-even) !important;
  cursor: default !important;}
/* cells (mobile default: nowrap; desktop overrides above allow wrapping) */
.contractor-panel-page #line-items-table th, .contractor-panel-page #line-items-table td {padding: .71rem !important;
  border: 1px solid var(--border) !important;
  font-size: 0.95rem !important;
  text-align: left !important;
  vertical-align: top !important;
  background: transparent !important;
  white-space: nowrap !important; /* mobile behavior */
  overflow: visible !important;
  word-break: normal !important;
  min-width: 0 !important;
  box-sizing: border-box !important;}
/* description column may wrap if you add class="description" */
.contractor-panel-page #line-items-table th.description, .contractor-panel-page #line-items-table td.description {white-space: normal !important;
  word-break: break-word !important;}
/* actions column layout */
.contractor-panel-page #line-items-table td:last-child {display: flex !important;
  gap: .6rem !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;}
/* buttons inside table */
.contractor-panel-page #line-items-table button, .contractor-panel-page #line-items-table .btn, .contractor-panel-page #line-items-table input[type="button"], .contractor-panel-page #line-items-table input[type="submit"] {display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  padding: .45rem .7rem !important;
  font-size: 0.95rem !important;
  min-height: 36px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: var(--btn-bg, #fff) !important;
  color: inherit !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;}
/* fallback spacing for browsers that don't support gap */
.contractor-panel-page #line-items-table td:last-child .btn + .btn, .contractor-panel-page #line-items-table td:last-child button + button, .contractor-panel-page #line-items-table td:last-child .btn + button, .contractor-panel-page #line-items-table td:last-child button + .btn {margin-left: .6rem !important;}
/* Zebra pattern:
   header (lighter) -> tbody first row (darker) -> tbody second row (lighter) -> etc. */
.contractor-panel-page #line-items-table thead th {background-color: var(--table-even) !important;}
.contractor-panel-page #line-items-table tbody tr:nth-child(odd) {background-color: var(--table-odd)  !important;}
/* 1st body row = darker */
.contractor-panel-page #line-items-table tbody tr:nth-child(even) {background-color: var(--table-even) !important;}
/* 2nd body row = lighter */
/* Hover should only affect tbody rows */
.contractor-panel-page #line-items-table tbody tr:hover {background-color: var(--white) !important;
  color: var(--primary) !important;}
/* Ensure cell backgrounds don't override the row stripes */
.contractor-panel-page #line-items-table td, .contractor-panel-page #line-items-table th {background: transparent !important;}
/* consistent padding for body cells */
.contractor-panel-page #line-items-table tbody tr td {padding: .56rem .71rem !important;}
/* remove any pseudo labels */
.contractor-panel-page #line-items-table td::before, .contractor-panel-page #line-items-table th::before, .contractor-panel-page #line-items-table td[data-label]::before {content: none !important; display: none !important;}
/* ----- Mobile-specific adjustments (max-width: 48rem) ----- */
@media (max-width:48rem) {.contractor-panel-page .line-items-container {overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-right: 0.5rem;}
.contractor-panel-page #line-items-table {display: table !important;
    width: auto !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    border: 1px solid var(--border) !important;
    background: var(--white) !important;
    min-width: max-content !important;
    font-size: 0.80rem !important;
    box-sizing: border-box !important;}
.contractor-panel-page #line-items-table thead {display: table-header-group !important; visibility: visible !important;}
.contractor-panel-page #line-items-table tbody {display: table-row-group !important;}
.contractor-panel-page #line-items-table tfoot {display: table-row-group !important;}
.contractor-panel-page #line-items-table tr {display: table-row !important;}
.contractor-panel-page #line-items-table th, .contractor-panel-page #line-items-table td {display: table-cell !important;
    text-align: left !important;
    padding: .56rem !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
    font-size: 0.80rem !important;
    white-space: nowrap !important;
    word-break: normal !important;
    min-width: 0 !important;}
.contractor-panel-page #line-items-table thead th {font-size: 0.9rem !important; padding: .56rem !important;}
.contractor-panel-page #line-items-table td:last-child {flex-wrap: wrap !important;
    gap: .4rem !important;
    justify-content: flex-end !important;
    padding-right: .25rem !important;}
.contractor-panel-page #line-items-table td:last-child .btn, .contractor-panel-page #line-items-table td:last-child button, .contractor-panel-page #line-items-table td:last-child a {flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    padding: .32rem .5rem !important;
    min-height: 32px !important;
    gap: .3rem !important;}
.contractor-panel-page #line-items-table td:last-child .btn svg, .contractor-panel-page #line-items-table td:last-child .btn i, .contractor-panel-page #line-items-table td:last-child button svg, .contractor-panel-page #line-items-table td:last-child button i {margin-right: .28rem !important;}
.contractor-panel-page #line-items-table input[type="hidden"] {display: none !important;}
.contractor-panel-page #line-items-table input, .contractor-panel-page #line-items-table select, .contractor-panel-page #line-items-table textarea {width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 0.80rem !important;}}
/* =========================
   Mobile-specific container + reset button override (ensures options/results and reset button share width)
   Appended near the end to override previous mobile-zeroing and fixed-width rules.
   ========================= */
@media (max-width: 768px) {/* Make results/message/filter containers full-width with consistent inner padding */
.contractor-panel-page .filter-content, .contractor-panel-page .availability-results, .contractor-panel-page .availability-list, .contractor-panel-page .availability-container, .contractor-panel-page .controls-wrapper, .contractor-panel-page .availability-options-message-positive, .contractor-panel-page .availability-options-message-zero {width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;}
/* Ensure #optionsMessage keeps comfortable padding and doesn't get zeroed out */
.contractor-panel-page #optionsMessage {padding: 10px 12px !important;
    box-sizing: border-box !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    max-width: calc(100% - 24px) !important;}
/* Make reset button match the container width */
.contractor-panel-page #resetFilters {display: block !important;
    width: 100% !important;
    max-width: calc(100% - 24px) !important;
    margin: 0.5rem 12px !important;
    box-sizing: border-box !important;}}
/* End of stylesheet */
/* === Availability spacing overrides ===
   Paste near the end of your stylesheet so it wins over previous rules.
*/
/* Vertical gap between stacked cards (but not after the last card in each list) */
.contractor-panel-page .availability-results .space-results > .availability-course-card:not(:last-child), .contractor-panel-page .availability-results > #privateCourses > .availability-course-card:not(:last-child) {margin-bottom: 20px !important;   /* change 20px to your preferred gap */}
/* Ensure single-card lists don't get extra bottom space from generic rules */
.contractor-panel-page .availability-results .availability-course-card:last-child {margin-bottom: 0 !important;}
/* Extra separation between the group block and the private block
   only when the group block actually contains content */
.contractor-panel-page #groupCourses:not(:empty) {margin-bottom: 32px !important;   /* change 32px to adjust section separation */}
/* Optional: center cards consistently while keeping the gap */
.contractor-panel-page .availability-results .availability-course-card {margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;}
/* Mobile: reduce spacing so things remain compact on small screens */
@media (max-width: 720px) {.contractor-panel-page .availability-results .space-results > .availability-course-card:not(:last-child), .contractor-panel-page .availability-results > #privateCourses > .availability-course-card:not(:last-child) {margin-bottom: 12px !important;}
.contractor-panel-page #groupCourses:not(:empty) {margin-bottom: 18px !important;}}
/* =========================
   STUDENT PANEL
   ========================= */
/* =========================
   SUMMARY (TOP CARDS)
   ========================= */
.contractor-panel-page .registration-summary-card {margin: 20px 15px; 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;}
.contractor-panel-page .summary-pill, .contractor-panel-page .summary-status-container {background: var(--sv-white); 
  padding: 12px 15px; 
  border-radius: 14px; 
  border: 1px solid var(--sv-border); 
  font-weight: 700; 
  text-align: center;}
.contractor-panel-page .summary-next-due-date {color: var(--sv-blue-button);
  display: block;
  margin-top: 4px;}
/* =========================
   TABLE (DESKTOP)
   ========================= */
.contractor-panel-page .desktop-table {padding: 0 15px;}
.contractor-panel-page .desktop-table table {width: 100%; 
  border-collapse: collapse; 
  margin-bottom: 25px; 
  border: 1px solid var(--sv-border); 
  border-radius: var(--sv-radius); 
  overflow: hidden; 
  background: #fff;}
.contractor-panel-page .desktop-table th {background: #e6eef7;
  color: #2c3e50;
  padding: 12px; 
  text-align: left;}
.contractor-panel-page .desktop-table td {padding: 12px; 
  border-bottom: 1px solid var(--sv-light);}
.contractor-panel-page .clickable-row {cursor: pointer;}
.contractor-panel-page .clickable-row:hover {background: var(--sv-light);}
/* =========================
   STATUS COLORS
   ========================= */
.contractor-panel-page .passed-due {background: #fdeeee !important; 
  border-left: 5px solid #b94a48 !important;}
.contractor-panel-page .orange-status {background: #fffaf0 !important; 
  border-left: 5px solid var(--sv-gold) !important;}
.contractor-panel-page .status-paid-text {color: #4f8f55; 
  font-weight: 700;}
/* =========================
   DETAILS / HISTORY
   ========================= */
.contractor-panel-page .details-row {display: none;}
/* container */
.contractor-panel-page .details-content {background: var(--sv-light); 
  padding: 15px 0; /* vertical only */}
/* title */
.contractor-panel-page .registration-summary-item p {text-align: left;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 14px; /* ✅ matches card padding */}
/* list */
.contractor-panel-page .registration-summary-item ul {list-style: none;
  padding: 0 14px; /* ✅ matches card padding */
  margin: 0;}
/* rows */
.contractor-panel-page .registration-summary-item li {padding: 8px 0;
  border-bottom: 1px solid var(--sv-border);}
.contractor-panel-page .registration-summary-item li:last-child {border-bottom: none;}
/* =========================
   📱 MOBILE
   ========================= */
@media (max-width: 768px) {.contractor-panel-page .registration-summary-card {grid-template-columns: 1fr;
    margin: 15px 12px 20px;}
.contractor-panel-page .desktop-table {padding: 0 12px 10px 12px;}
/* each table = card */
.contractor-panel-page .desktop-table table {display: block;
    width: 100%;
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
    border-collapse: separate;}
.contractor-panel-page .desktop-table thead {display: none;}
.contractor-panel-page .desktop-table tbody, .contractor-panel-page .desktop-table tr, .contractor-panel-page .desktop-table td {display: block;
    width: 100%;
    box-sizing: border-box;}
.contractor-panel-page .desktop-table td {border-bottom: none;
    padding: 8px 14px;}
/* remove inner borders */
.contractor-panel-page .desktop-table tr.summary-row {border: none !important;
    margin: 0;
    padding: 10px 0;}
.contractor-panel-page .desktop-table tr.details-row {display: none;
    margin: 0;
    border: none;}
/* expanded state */
.contractor-panel-page .desktop-table tr.details-row[style*="block"], .contractor-panel-page .desktop-table tr.details-row[style*="table-row"] {display: block !important;}
.contractor-panel-page .desktop-table tr.details-row td {padding: 0;
    border: none;}
/* divider */
.contractor-panel-page .details-content {padding: 15px 0;
    border-top: 1px solid var(--sv-border);}
/* labels */
.contractor-panel-page .desktop-table tr.summary-row td:nth-child(1)::before {content: "Student: "; font-weight: 700;}
.contractor-panel-page .desktop-table tr.summary-row td:nth-child(2)::before {content: "Instructor: "; font-weight: 700;}
.contractor-panel-page .desktop-table tr.summary-row td:nth-child(3)::before {content: "Price: "; font-weight: 700;}
.contractor-panel-page .desktop-table tr.summary-row td:nth-child(4)::before {content: "Lessons Left: "; font-weight: 700;}
.contractor-panel-page .desktop-table tr.summary-row td:nth-child(5)::before {content: "Actions: "; font-weight: 700;}
.contractor-panel-page .desktop-table tr.summary-row td::before {color: #555;
    display: inline-block;
    margin-bottom: 4px;}}
/* =========================
   MODAL
   ========================= */
.contractor-panel-page .payment-modal-overlay {position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none; 
  align-items: center;
  justify-content: center;
  z-index: 9999;}
.contractor-panel-page .payment-modal {background: var(--sv-white);
  padding: 30px;
  border-radius: var(--sv-radius);
  max-width: 500px;
  width: 90%;}
.contractor-panel-page .payment-modal .modal-header {display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sv-border);
  padding-bottom: 10px;}
.contractor-panel-page .payment-modal button.modal-close {border: none;
  background: none;
  font-size: 2rem;
  cursor: pointer;}
/* ==========================================================
   Contractor Panel Page Styles
   Moved from inline  block into this stylesheet.
   Kept at the bottom intentionally so these rules preserve
   the same override priority they had when they lived on-page.
========================================================== */
@media print {.contractor-panel-page .welcome-container, .contractor-panel-page .nav-container, .contractor-panel-page .instructor-profile, .contractor-panel-page .day-tabs, .contractor-panel-page #change-password-panel, .contractor-panel-page .invoice-form-actions, .contractor-panel-page .lesson-logs-review {display: none !important;}
.contractor-panel-page table {width: 100% !important;}}
/* ===== Contractor Panel Core UI ===== */
.contractor-panel-page .login-form {background:#fff;
  padding:20px;
  border-radius:8px;
  border:1px solid #e6ecef;
  max-width:400px;
  margin:0 auto 25px;
  text-align:center;}
.contractor-panel-page .login-form input {width:100%;
  padding:12px;
  margin:6px 0 10px;
  border:1px solid #e6ecef;
  border-radius:5px;}
.contractor-panel-page .login-form button {width:100%;
  padding:12px;
  background:#5f82a3;
  color:#fff;
  border:none;
  border-radius:5px;}
.contractor-panel-page .login-form button:hover {background:#4f708e;}
.contractor-panel-page .form-message.error, .contractor-panel-page .error-message {background:#fdeeee;
  border:1px solid #b94a48;
  color:#b94a48;
  padding:10px;
  border-radius:6px;
  text-align:center;}
.contractor-panel-page .form-message.success, .contractor-panel-page .success-message {background:#e6ffed;
  border:1px solid #4f8f55;
  color:#4f8f55;
  padding:10px;
  border-radius:6px;
  text-align:center;}
.contractor-panel-page .panel-intro-message {background:#f7f9fb;
  border:1px solid #d9e2e8;
  border-radius:8px;
  padding:15px;
  margin-bottom:20px;
  text-align:center;}
.contractor-panel-page .instructor-selector {display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;}
.contractor-panel-page .instructor-selector select {padding:8px;
  border:1px solid #e6ecef;
  border-radius:5px;}
.contractor-panel-page .welcome-container {display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;}
.contractor-panel-page .welcome-container button {padding:10px 16px;
  border-radius:6px;
  border:none;
  cursor:pointer;}
.contractor-panel-page .change-password-button {background:#5f6f7a;
  color:#fff;}
.contractor-panel-page .logout-button {background:#b94a48;
  color:#fff;}
/* ===== Schedule Tables ===== */
.contractor-panel-page .break {background:#fffdf5 !important;
  color:#8a6a15;
  text-align:center;}
.contractor-panel-page .available {background:#eef8f0 !important;
  color:#4f8f55;
  text-align:center;}
.contractor-panel-page .available-badge {font-weight:bold;
  text-transform:uppercase;}
.contractor-panel-page .paid-yes {color:#4f8f55;}
.contractor-panel-page .paid-no {color:#b94a48;}
.contractor-panel-page .paid-late {color:#8a6a15;}
/* ===== Student Info Expand Button ===== */
.contractor-panel-page .student-info-toggle, .contractor-panel-page table.preserve-headers .student-info-toggle {display:inline-block;
  margin-left:8px;
  padding:4px 10px;
  border:0 !important;
  border-radius:999px;
  background:#5f82a3 !important;
  color:#fff !important;
  font-size:0.8rem;
  line-height:1.2;
  cursor:pointer;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;}
.contractor-panel-page .student-info-toggle:hover, .contractor-panel-page .student-info-toggle:focus, .contractor-panel-page .student-info-toggle:active, .contractor-panel-page table.preserve-headers .student-info-toggle:hover, .contractor-panel-page table.preserve-headers .student-info-toggle:focus, .contractor-panel-page table.preserve-headers .student-info-toggle:active {background:#4f708e !important;
  color:#fff !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;}
.contractor-panel-page .student-details-row {display:none;
  background:#f8fbfd;}
.contractor-panel-page .student-details-row.expanded {display:table-row;}
.contractor-panel-page .student-details-card {background:#f8fbfd;
  border:1px solid #d9e2e8;
  border-radius:10px;
  padding:12px;
  text-align:left;}
.contractor-panel-page .student-detail-block + .student-detail-block {margin-top:10px;}
.contractor-panel-page .student-detail-block strong {display:block;
  color:#1f4f82;
  margin-bottom:4px;}
.contractor-panel-page .student-detail-block p {margin:0;}
/* ===== Invoice / Line Items ===== */
.contractor-panel-page #add-line-item-btn, .contractor-panel-page .submit-invoice-button {background:#5f82a3;
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  border:none;
  cursor:pointer;}
.contractor-panel-page #add-line-item-btn:hover, .contractor-panel-page .submit-invoice-button:hover {background:#4f708e;}
.contractor-panel-page .invoice-form-actions {display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;}
.contractor-panel-page .invoice-form-actions details[open] {width:100%;
  margin-bottom:10px;}
.contractor-panel-page #change-password-panel {display:none;
  border:1px solid #e6ecef;
  padding:10px;
  border-radius:6px;}
.contractor-panel-page .change-password-actions {display:flex;
  gap:8px;}
.contractor-panel-page .hidden {display:none !important;}
.contractor-panel-page .mt-8 {margin-top:8px;}
.contractor-panel-page .mt-12 {margin-top:12px;}
.contractor-panel-page .text-right {text-align:right;}
.contractor-panel-page .font-bold {font-weight:700;}
.contractor-panel-page .table-responsive {overflow-x:auto;}
.contractor-panel-page .table-responsive table {min-width:640px;}
/* ===== Line Items Table ===== */
.contractor-panel-page .line-items-container {padding-right:0 !important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;}
.contractor-panel-page #line-items-table {width:100% !important;
  border-collapse:collapse;
  table-layout:auto !important;
  font-family:inherit;
  font-size:0.95rem;}
.contractor-panel-page #line-items-table th, .contractor-panel-page #line-items-table td {padding:.56rem .71rem !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  white-space:normal !important;}
.contractor-panel-page #line-items-table td::before, .contractor-panel-page #line-items-table td::after {content:none !important;
  display:none !important;}
.contractor-panel-page .line-items-container::-webkit-scrollbar {height:8px;}
.contractor-panel-page #line-items-table th:last-child, .contractor-panel-page #line-items-table td:last-child {width:200px !important;
  box-sizing:border-box !important;}
.contractor-panel-page #line-items-table td:last-child .remove-line-item, .contractor-panel-page #line-items-table td:last-child button.remove-line-item, .contractor-panel-page #line-items-table td:last-child a.remove-line-item {background:#b94a48 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:8px !important;}
.contractor-panel-page #line-items-table .li-edit-desc, .contractor-panel-page #line-items-table .li-edit-date, .contractor-panel-page #line-items-table .li-edit-rate, .contractor-panel-page #line-items-table .li-edit-qty, .contractor-panel-page #line-items-table .li-edit-type, .contractor-panel-page #line-items-table input[type="date"].li-edit-date, .contractor-panel-page #line-items-table input[type="number"].li-edit-rate, .contractor-panel-page #line-items-table input[type="number"].li-edit-qty, .contractor-panel-page #line-items-table input[type="text"].li-edit-desc, .contractor-panel-page #line-items-table select.li-edit-type {-webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  height:38px !important;
  min-height:38px !important;
  padding:.4rem .6rem !important;
  font-size:.95rem !important;
  line-height:1 !important;
  border:1px solid #e6ecef !important;
  border-radius:8px !important;
  background:#fff !important;
  color:inherit !important;
  display:inline-block !important;
  vertical-align:middle !important;
  max-width:320px !important;}
.contractor-panel-page #line-items-table input.li-edit-date, .contractor-panel-page #line-items-table input.li-edit-rate, .contractor-panel-page #line-items-table input.li-edit-qty {width:100% !important;
  max-width:160px !important;}
.contractor-panel-page #line-items-table input.li-edit-desc, .contractor-panel-page #line-items-table select.li-edit-type {width:100% !important;
  max-width:360px !important;}
.contractor-panel-page #line-items-table input:focus, .contractor-panel-page #line-items-table select:focus {outline:none !important;
  border-color:#7fa6c4 !important;
  box-shadow:0 0 0 3px rgba(95,130,163,0.14) !important;}
.contractor-panel-page #line-items-table input[type="hidden"], .contractor-panel-page #line-items-table input[name="line_item_cost[]"] {display:none !important;}
.contractor-panel-page #line-items-table td:last-child button, .contractor-panel-page #line-items-table td:last-child a, .contractor-panel-page #line-items-table td:last-child .btn {box-sizing:border-box !important;
  font-size:.95rem !important;
  padding:.5rem .65rem !important;
  border-radius:8px !important;
  cursor:pointer !important;
  display:inline-block !important;
  text-align:center !important;
  vertical-align:middle !important;}
.contractor-panel-page #line-items-table td:last-child .cancel-edit {background:#f7f9fb !important;
  color:#37474f !important;
  border:1px solid #d0d0d0 !important;}
.contractor-panel-page #line-items-table td:last-child i.fa-solid {margin-right:.5rem !important;}
.contractor-panel-page #line-items-table td:last-child .edit-line-item {background:#5f82a3 !important;
  color:#fff !important;
  border:0 !important;}
/* ===== Hover Cleanup Without Breaking Info Button ===== */
.contractor-panel-page .preserve-headers tbody tr:hover, .contractor-panel-page .preserve-headers tbody tr:focus, .contractor-panel-page .preserve-headers tbody tr:active, .contractor-panel-page .lesson-earnings-responsive table tbody tr:hover, .contractor-panel-page .lesson-earnings-responsive table tbody tr:focus, .contractor-panel-page .lesson-logs-review table tbody tr:hover, .contractor-panel-page .lesson-logs-review table tbody tr:focus {background-color:#ffffff !important;
  background-image:none !important;
  box-shadow:none !important;
  transition:background-color .12s ease !important;}
.contractor-panel-page .preserve-headers tbody tr:hover td, .contractor-panel-page .lesson-earnings-responsive table tbody tr:hover td, .contractor-panel-page .lesson-logs-review table tbody tr:hover td {background-color:#ffffff !important;}
/* Links only — do NOT target buttons here */
.contractor-panel-page .preserve-headers a:hover, .contractor-panel-page .lesson-earnings-responsive table a:hover, .contractor-panel-page .lesson-logs-review table a:hover {background:inherit !important;
  box-shadow:none !important;
  color:inherit !important;}
.contractor-panel-page .preserve-headers tr::before, .contractor-panel-page .preserve-headers tr::after, .contractor-panel-page .preserve-headers td::before, .contractor-panel-page .preserve-headers td::after, .contractor-panel-page .lesson-earnings-responsive table tr::before, .contractor-panel-page .lesson-earnings-responsive table tr::after, .contractor-panel-page .lesson-earnings-responsive table td::before, .contractor-panel-page .lesson-earnings-responsive table td::after, .contractor-panel-page .lesson-logs-review table tr::before, .contractor-panel-page .lesson-logs-review table tr::after, .contractor-panel-page .lesson-logs-review table td::before, .contractor-panel-page .lesson-logs-review table td::after {content:none !important;
  display:none !important;
  background:none !important;}
/* ===== Desktop ===== */
@media (min-width:769px) {.contractor-panel-page #line-items-table td:last-child {display:flex !important;
    flex-direction:column !important;
    gap:.5rem !important;
    align-items:center !important;
    justify-content:center !important;
    padding:.6rem !important;
    white-space:normal !important;}
.contractor-panel-page #line-items-table td:last-child > *, .contractor-panel-page #line-items-table td:last-child button, .contractor-panel-page #line-items-table td:last-child a, .contractor-panel-page #line-items-table td:last-child .edit-line-item, .contractor-panel-page #line-items-table td:last-child .remove-line-item, .contractor-panel-page #line-items-table td:last-child .cancel-edit {display:block !important;
    width:calc(100% - 12px) !important;
    max-width:220px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    text-align:center !important;
    white-space:normal !important;}}
/* ===== Mobile ===== */
@media (max-width:768px) {.contractor-panel-page .welcome-container, .contractor-panel-page .instructor-selector, .contractor-panel-page .invoice-form-actions {flex-direction:column;}
.contractor-panel-page .login-form {max-width:100%;}
.contractor-panel-page .student-info-toggle, .contractor-panel-page table.preserve-headers .student-info-toggle {display:inline-block;
    margin-top:6px;
    margin-left:0;
    padding:6px 11px;
    font-size:0.85rem;}
.contractor-panel-page .student-details-card {font-size:0.95rem;}
.contractor-panel-page #line-items-table {table-layout:auto !important;
    min-width:640px;}
.contractor-panel-page #line-items-table th, .contractor-panel-page #line-items-table td {white-space:normal !important;}
.contractor-panel-page #line-items-table td:last-child {display:flex !important;
    flex-direction:column !important;
    gap:.45rem !important;
    align-items:center !important;
    justify-content:center !important;
    padding:.5rem !important;
    text-align:center !important;
    white-space:normal !important;}
.contractor-panel-page #line-items-table td:last-child > *, .contractor-panel-page #line-items-table td:last-child .btn, .contractor-panel-page #line-items-table td:last-child button, .contractor-panel-page #line-items-table td:last-child a, .contractor-panel-page #line-items-table td:last-child .edit-line-item, .contractor-panel-page #line-items-table td:last-child .remove-line-item, .contractor-panel-page #line-items-table td:last-child .cancel-edit {display:block !important;
    width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
    padding:.55rem .65rem !important;
    text-align:center !important;
    white-space:normal !important;
    border-radius:8px !important;}
.contractor-panel-page #line-items-table input.li-edit-date, .contractor-panel-page #line-items-table input.li-edit-rate, .contractor-panel-page #line-items-table input.li-edit-qty, .contractor-panel-page #line-items-table input.li-edit-desc, .contractor-panel-page #line-items-table select.li-edit-type {width:100% !important;
    max-width:none !important;}
.contractor-panel-page .li-edit-modal {position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    background:rgba(45,74,105,0.45);}
.contractor-panel-page .li-edit-modal .modal-inner {background:#fff;
    width:100%;
    max-width:640px;
    margin:1rem;
    border-radius:12px;
    padding:1rem;
    box-shadow:0 8px 24px rgba(45,74,105,0.14);
    max-height:calc(100vh - 2rem);
    overflow:auto;}}
.contractor-panel-page .preserve-headers tbody tr:nth-child(even):not(.available):not(.break) td {background-color: #f8f8f8 !important;}
.contractor-panel-page .preserve-headers tbody tr:nth-child(odd):not(.available):not(.break) td {background-color: #ffffff !important;}
/* ==========================================================
   Studio Vanessa Contractor Panel Theme Alignment
   Aligned to the current site stylesheet palette:
   #436b95 / #365677 / #5f82a3 / #4f708e / #f7f9fb / #e6ecef.
   Kept last intentionally so these rules win over earlier contractor rules.
========================================================== */
.contractor-panel-page {--contractor-sv-blue: #436b95;
  --contractor-sv-blue-dark: #365677;
  --contractor-sv-button: #5f82a3;
  --contractor-sv-button-hover: #4f708e;
  --contractor-sv-bg: #f8fbfd;
  --contractor-sv-card: #ffffff;
  --contractor-sv-soft: #f7f9fb;
  --contractor-sv-border: #e6ecef;
  --contractor-sv-input-border: #d9e2e8;
  --contractor-sv-text: #37474f;
  --contractor-sv-muted: #6f7f89;
  --contractor-sv-gold: #d4af37;
  --contractor-sv-success-bg: #eef8f0;
  --contractor-sv-success-border: #b8dfbd;
  --contractor-sv-success-text: #4f8f55;
  --contractor-sv-danger-bg: #fdeeee;
  --contractor-sv-danger-border: #efc0c0;
  --contractor-sv-danger-text: #b94a48;}
.contractor-panel-page .login-form, .contractor-panel-page .panel-intro-message, .contractor-panel-page .student-details-card, .contractor-panel-page .parent-history-block, .contractor-panel-page .register-note, .contractor-panel-page #change-password-panel, .contractor-panel-page #line-items-table input, .contractor-panel-page #line-items-table select, .contractor-panel-page #line-items-table textarea, .contractor-panel-page .preserve-headers, .contractor-panel-page .lesson-logs-review table, .contractor-panel-page .lesson-earnings-responsive table {border-color: var(--contractor-sv-border) !important;}
.contractor-panel-page .login-form, .contractor-panel-page .student-details-card, .contractor-panel-page .parent-history-block, .contractor-panel-page .li-edit-modal .modal-inner {background: var(--contractor-sv-card) !important;
  color: var(--contractor-sv-text) !important;}
.contractor-panel-page .panel-intro-message, .contractor-panel-page .student-details-row, .contractor-panel-page .student-details-card, .contractor-panel-page .lesson-logs-review, .contractor-panel-page .table-responsive, .contractor-panel-page .line-items-container {background: var(--contractor-sv-soft) !important;
  color: var(--contractor-sv-text) !important;}
.contractor-panel-page .login-form button, .contractor-panel-page #add-line-item-btn, .contractor-panel-page .submit-invoice-button, .contractor-panel-page .student-info-toggle, .contractor-panel-page table.preserve-headers .student-info-toggle, .contractor-panel-page #line-items-table td:last-child .edit-line-item {background: var(--contractor-sv-button) !important;
  border-color: var(--contractor-sv-button) !important;
  color: #ffffff !important;}
.contractor-panel-page .login-form button:hover, .contractor-panel-page #add-line-item-btn:hover, .contractor-panel-page .submit-invoice-button:hover, .contractor-panel-page .student-info-toggle:hover, .contractor-panel-page .student-info-toggle:focus, .contractor-panel-page .student-info-toggle:active, .contractor-panel-page table.preserve-headers .student-info-toggle:hover, .contractor-panel-page table.preserve-headers .student-info-toggle:focus, .contractor-panel-page table.preserve-headers .student-info-toggle:active, .contractor-panel-page #line-items-table td:last-child .edit-line-item:hover {background: var(--contractor-sv-button-hover) !important;
  border-color: var(--contractor-sv-button-hover) !important;
  color: #ffffff !important;}
.contractor-panel-page .student-detail-block strong, .contractor-panel-page .panel-intro-message strong {color: var(--contractor-sv-blue-dark) !important;}
.contractor-panel-page .available, .contractor-panel-page .form-message.success, .contractor-panel-page .success-message, .contractor-panel-page .parent-history-payment {background: var(--contractor-sv-success-bg) !important;
  border-color: var(--contractor-sv-success-border) !important;
  color: var(--contractor-sv-success-text) !important;}
.contractor-panel-page .break, .contractor-panel-page .parent-history-unassigned {background: #fffdf5 !important;
  border-color: #eadca3 !important;
  color: #8a6a15 !important;}
.contractor-panel-page .form-message.error, .contractor-panel-page .error-message {background: var(--contractor-sv-danger-bg) !important;
  border-color: var(--contractor-sv-danger-border) !important;
  color: var(--contractor-sv-danger-text) !important;}
.contractor-panel-page .logout-button, .contractor-panel-page #line-items-table td:last-child .remove-line-item, .contractor-panel-page #line-items-table td:last-child button.remove-line-item, .contractor-panel-page #line-items-table td:last-child a.remove-line-item {background: var(--contractor-sv-danger-text) !important;
  border-color: var(--contractor-sv-danger-text) !important;
  color: #ffffff !important;}
.contractor-panel-page .change-password-button {background: #5f6f7a !important;
  border-color: #5f6f7a !important;
  color: #ffffff !important;}
.contractor-panel-page #line-items-table .li-edit-desc, .contractor-panel-page #line-items-table .li-edit-date, .contractor-panel-page #line-items-table .li-edit-rate, .contractor-panel-page #line-items-table .li-edit-qty, .contractor-panel-page #line-items-table .li-edit-type, .contractor-panel-page #line-items-table input[type="date"].li-edit-date, .contractor-panel-page #line-items-table input[type="number"].li-edit-rate, .contractor-panel-page #line-items-table input[type="number"].li-edit-qty, .contractor-panel-page #line-items-table input[type="text"].li-edit-desc, .contractor-panel-page #line-items-table select.li-edit-type {border-color: var(--contractor-sv-input-border) !important;
  background: #ffffff !important;
  color: var(--contractor-sv-text) !important;}
.contractor-panel-page #line-items-table input:focus, .contractor-panel-page #line-items-table select:focus, .contractor-panel-page #line-items-table textarea:focus {border-color: #7fa6c4 !important;
  box-shadow: 0 0 0 3px rgba(127,166,196,0.18) !important;}
.contractor-panel-page #line-items-table td:last-child .cancel-edit {background: #f7f9fb !important;
  color: var(--contractor-sv-text) !important;
  border-color: var(--contractor-sv-border) !important;}
.contractor-panel-page .preserve-headers tbody tr:nth-child(even):not(.available):not(.break) td {background-color: #f7f9fb !important;}
.contractor-panel-page .preserve-headers tbody tr:nth-child(odd):not(.available):not(.break) td {background-color: #ffffff !important;}
.contractor-panel-page .preserve-headers tbody tr:hover, .contractor-panel-page .preserve-headers tbody tr:hover td, .contractor-panel-page .lesson-earnings-responsive table tbody tr:hover, .contractor-panel-page .lesson-earnings-responsive table tbody tr:hover td, .contractor-panel-page .lesson-logs-review table tbody tr:hover, .contractor-panel-page .lesson-logs-review table tbody tr:hover td {background-color: #ffffff !important;
  color: var(--contractor-sv-text) !important;}
.contractor-panel-page .paid-yes {color: var(--contractor-sv-success-text) !important;}
.contractor-panel-page .paid-no {color: var(--contractor-sv-danger-text) !important;}
.contractor-panel-page .paid-late {color: #8a6a15 !important;}
/* =========================================================
   Contractor Panel Redesign: card-based layout + tabs
   Paste-safe override block. Existing PHP/features remain intact.
   ========================================================= */
.contractor-panel-page {--cp-bg: #eef5f9;
  --cp-card: #ffffff;
  --cp-ink: #23313a;
  --cp-muted: #62727d;
  --cp-blue: #4f7da3;
  --cp-blue-dark: #315d82;
  --cp-green: #4f8f55;
  --cp-red: #b94a48;
  --cp-amber: #b7791f;
  --cp-border: #d8e4ea;
  --cp-soft-blue: #e8f2fa;
  --cp-shadow: 0 16px 40px rgba(31, 60, 82, 0.10);
  --cp-radius: 18px;}
.contractor-panel-page {background:
    radial-gradient(circle at top left, rgba(79,125,163,.16), transparent 34rem),
    linear-gradient(180deg, #f8fbfd 0%, var(--cp-bg) 100%);
  color: var(--cp-ink);}
.contractor-panel-page .main-wrapper {max-width: 1180px;
  padding: 24px 16px 32px;}
.contractor-panel-page .secondary-wrapper {width: 100%;}
.contractor-panel-page .secondary-wrapper > h1 {margin: 8px 0 20px;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  color: var(--cp-ink);}
.contractor-panel-page .form-message {max-width: 980px;
  margin: 0 auto 16px;
  border-radius: 14px;
  padding: 12px 16px;}
.contractor-panel-page .panel-intro-message {max-width: 980px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #ffffff, #f3f8fc);
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow);
  border-radius: var(--cp-radius);
  padding: 22px;}
.contractor-panel-page .panel-intro-message .welcome-message {color: var(--cp-blue-dark);
  font-size: 1.15rem;}
.contractor-panel-page .instructor-selector {flex-wrap: wrap;}
.contractor-panel-page .instructor-selector select {min-width: 220px;
  border-radius: 12px;
  border-color: var(--cp-border);}
.contractor-panel-page .welcome-container {max-width: 980px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;}
.contractor-panel-page .welcome-container a, .contractor-panel-page .welcome-container button {justify-content: center;
  border-radius: 14px;
  min-height: 46px;
  box-shadow: 0 8px 24px rgba(31, 60, 82, 0.08);}
.contractor-panel-page .change-password-button {background-color: #5f6f7a;}
.contractor-panel-page .print-schedule-button {background-color: var(--cp-green);}
.contractor-panel-page .logout-button {background-color: var(--cp-red);}
.contractor-panel-page .cp-dashboard-shell {max-width: 980px;
  margin: 0 auto;}
.contractor-panel-page .cp-tabs {position: sticky;
  top: 58px;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  margin-bottom: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(31, 60, 82, 0.08);
  backdrop-filter: blur(10px);}
.contractor-panel-page .cp-tab {min-height: 46px;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cp-muted);
  border-radius: 14px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800 !important;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;}
.contractor-panel-page .cp-tab:hover {background: var(--cp-soft-blue);
  color: var(--cp-blue-dark);
  transform: translateY(-1px);}
.contractor-panel-page .cp-tab.is-active {background: linear-gradient(135deg, var(--cp-blue), var(--cp-blue-dark));
  color: #fff;
  box-shadow: 0 10px 26px rgba(79,125,163,.24);}
.contractor-panel-page .cp-tab i {font-size: .95rem;}
.contractor-panel-page .cp-tab-panel {display: none;
  animation: cpFadeIn .18s ease both;}
.contractor-panel-page .cp-tab-panel.is-active {display: block;}
.contractor-panel-page .cp-tab-panel[hidden] {display: none !important;}
@keyframes cpFadeIn {from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }}
.contractor-panel-page .cp-section-card, .contractor-panel-page .instructor-profile, .contractor-panel-page .lesson-logs-review, .contractor-panel-page #change-password-panel, .contractor-panel-page #cp-logs-panel > .general-wrapper, .contractor-panel-page #cp-logs-panel > div:not(.cp-section-heading), .contractor-panel-page #cp-schedule-panel > table, .contractor-panel-page #cp-schedule-panel > .legend {background: var(--cp-card);
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius) !important;
  box-shadow: var(--cp-shadow);}
.contractor-panel-page .cp-section-card {padding: 22px;
  margin-bottom: 18px;}
.contractor-panel-page .cp-section-heading {text-align: center;
  margin: 0 auto 16px;
  padding: 22px;
  background: linear-gradient(135deg, #ffffff, #f5f9fc);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: 0 10px 26px rgba(31, 60, 82, 0.06);}
.contractor-panel-page .cp-section-heading h2 {font-size: clamp(1.45rem, 2.5vw, 2rem);
  margin: 2px 0 4px;
  padding: 0;
  color: var(--cp-ink);
  letter-spacing: -0.02em;}
.contractor-panel-page .cp-section-heading p {max-width: 700px;
  margin: 0 auto;
  color: var(--cp-muted);
  line-height: 1.5;}
.contractor-panel-page .cp-eyebrow {display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cp-soft-blue);
  color: var(--cp-blue-dark);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;}
.contractor-panel-page .instructor-profile {padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: stretch;}
.contractor-panel-page .instructor-profile .profile-image {width: auto;
  height: auto;
  min-height: 100%;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--cp-blue), var(--cp-blue-dark));
  display: flex;
  align-items: center;
  justify-content: center;}
.contractor-panel-page .instructor-profile .profile-image img {width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);}
.contractor-panel-page .instructor-profile .profile-info {padding: 24px;}
.contractor-panel-page .instructor-profile .profile-info h3 {font-size: 1.7rem;
  color: var(--cp-blue-dark);
  margin: 0 0 12px;}
.contractor-panel-page .instructor-profile .profile-info > p {margin: 0 0 10px;
  padding: 12px 14px;
  background: #f7fafc;
  border: 1px solid #edf2f6;
  border-radius: 12px;
  line-height: 1.45;}
.contractor-panel-page .instructor-profile .active-students, .contractor-panel-page .instructor-profile .hours-committed, .contractor-panel-page .instructor-profile .openings-available, .contractor-panel-page .instructor-profile .earnings {display: inline-block;
  width: calc(50% - 6px);
  vertical-align: top;}
.contractor-panel-page .instructor-profile .earnings {background: #eef8f0 !important;
  border-color: #cde8d1 !important;
  color: #245c2b;}
.contractor-panel-page .instructor-profile details {margin-top: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 14px;}
.contractor-panel-page .summary-pointer, .contractor-panel-page .lesson-logs-review summary {cursor: pointer;
  font-weight: 900;
  color: var(--cp-blue-dark);}
.contractor-panel-page .calc-breakdown-body {margin-top: 12px;}
.contractor-panel-page .lesson-logs-review {padding: 22px;
  background: #fff;}
.contractor-panel-page .lesson-logs-review details[open] > summary {margin-bottom: 16px;}
.contractor-panel-page .invoice-form-actions {display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;}
.contractor-panel-page .invoice-form-actions details[open], .contractor-panel-page .invoice-form-actions details {width: 100%;}
.contractor-panel-page .line-items-container {border: 1px solid var(--cp-border);
  border-radius: 14px;
  overflow-x: auto;
  background: #fff;}
.contractor-panel-page .line-items-controls {display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: #f7fafc;
  border-radius: 14px;}
.contractor-panel-page #invoice-grand-total, .contractor-panel-page #line-items-total {font-weight: 900;
  color: var(--cp-blue-dark);}
.contractor-panel-page .invoice-extras {padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  background: #f8fbfd;}
.contractor-panel-page .checkbox-row {display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;}
.contractor-panel-page .checkbox-row label {background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: 10px 12px;}
.contractor-panel-page #change-password-panel {display: block;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px;}
.contractor-panel-page .change-password-actions {justify-content: center;
  flex-wrap: wrap;}
.contractor-panel-page .day-tabs {background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(31, 60, 82, 0.06);
  padding: 10px;
  margin: 0 0 16px;}
.contractor-panel-page .day-tab {border-radius: 12px;
  background: #f3f7fa;
  color: var(--cp-muted);
  font-weight: 900;}
.contractor-panel-page .day-tab.active {background: var(--cp-blue);
  color: #fff;}
.contractor-panel-page .day-tab.no-data {opacity: .55;}
.contractor-panel-page .legacy-schedule-title {display: none;}
.contractor-panel-page #cp-schedule-panel > table {overflow: hidden;
  margin-bottom: 16px;}
.contractor-panel-page th {background: #e9f1f7;
  color: #27465d;}
.contractor-panel-page tr:nth-child(even), .contractor-panel-page tr:nth-child(odd) {background-color: #fff;}
.contractor-panel-page tbody tr:nth-child(even) {background-color: #f8fbfd;}
.contractor-panel-page tr:hover {background-color: #eef6fb;
  color: inherit;}
.contractor-panel-page .available {background-color: #eef8f0 !important;}
.contractor-panel-page .break {background-color: #fff8e8 !important;}
.contractor-panel-page .legend {padding: 12px;}
.contractor-panel-page .submit-invoice-button, .contractor-panel-page #add-line-item-btn, .contractor-panel-page .blue-button, .contractor-panel-page button[type="submit"].submit-button {background: var(--cp-blue);
  border-radius: 12px !important;
  min-height: 44px;}
.contractor-panel-page .submit-invoice-button:hover, .contractor-panel-page #add-line-item-btn:hover, .contractor-panel-page .blue-button:hover {background: var(--cp-blue-dark);}
.contractor-panel-page .btn-muted {background: #6c757d !important;}
.contractor-panel-page .preview-modal .modal-inner, .contractor-panel-page .li-edit-modal .modal-inner {border-radius: var(--cp-radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);}
@media (max-width: 820px) {.contractor-panel-page .main-wrapper {padding: 14px 10px 24px;
    margin: 0;}
.contractor-panel-page .welcome-container {grid-template-columns: 1fr 1fr;}
.contractor-panel-page .cp-tabs {top: 0;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    overflow-x: auto;
    justify-content: start;
    -webkit-overflow-scrolling: touch;}
.contractor-panel-page .cp-tab {white-space: nowrap;}
.contractor-panel-page .instructor-profile {grid-template-columns: 1fr;}
.contractor-panel-page .instructor-profile .profile-image {min-height: auto;
    padding: 24px;}
.contractor-panel-page .instructor-profile .profile-info {padding: 18px;}
.contractor-panel-page .instructor-profile .active-students, .contractor-panel-page .instructor-profile .hours-committed, .contractor-panel-page .instructor-profile .openings-available, .contractor-panel-page .instructor-profile .earnings {display: block;
    width: 100%;}
.contractor-panel-page .checkbox-row, .contractor-panel-page .line-items-controls {grid-template-columns: 1fr;}}
@media (max-width: 520px) {.contractor-panel-page .welcome-container {grid-template-columns: 1fr;}
.contractor-panel-page .panel-intro-message, .contractor-panel-page .cp-section-heading, .contractor-panel-page .lesson-logs-review, .contractor-panel-page #change-password-panel {padding: 16px;}
.contractor-panel-page .cp-tabs {padding: 8px;
    border-radius: 16px;}}
@media print {.contractor-panel-page .panel-intro-message, .contractor-panel-page .welcome-container, .contractor-panel-page .cp-tabs, .contractor-panel-page .cp-section-heading, .contractor-panel-page #cp-account-panel, .contractor-panel-page #cp-invoice-panel, .contractor-panel-page #cp-logs-panel {display: none !important;}
.contractor-panel-page .cp-tab-panel, .contractor-panel-page #cp-schedule-panel {display: block !important;}
.contractor-panel-page .main-wrapper, .contractor-panel-page .cp-dashboard-shell {max-width: none;
    padding: 0;
    margin: 0;}
.contractor-panel-page #cp-schedule-panel > table {box-shadow: none;}}
/* =========================
   Contractor Panel testing redesign overrides
   - One embedded style block for testing
   - No nested card borders
   - Print Schedule only appears on Schedule tab
   ========================= */
.contractor-panel-page {--cp-bg:#f4f8fb;
  --cp-surface:#ffffff;
  --cp-surface-soft:#f8fbfd;
  --cp-text:#263943;
  --cp-muted:#6d7f89;
  --cp-line:#dfe8ee;
  --cp-line-soft:#edf3f7;
  --cp-blue:#4f789c;
  --cp-blue-dark:#3f6585;
  --cp-green:#4f8f55;
  --cp-green-dark:#3f7845;
  --cp-red:#b94a48;
  --cp-amber:#b7791f;
  --cp-radius:18px;
  --cp-radius-sm:12px;
  --cp-shadow:0 18px 50px rgba(43,70,91,.08);
  --cp-shadow-sm:0 8px 24px rgba(43,70,91,.06);}
.contractor-panel-page {background:var(--cp-bg)!important; color:var(--cp-text)!important;}
.contractor-panel-page .main-wrapper {max-width:1120px!important; padding:24px 18px 36px!important; background:transparent!important;}
.contractor-panel-page .secondary-wrapper {width:100%;}
.contractor-panel-page h1 {margin:6px 0 18px!important; letter-spacing:-.03em; color:#142b38!important;}
.contractor-panel-page .panel-intro-message {border:0!important;
  background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%)!important;
  box-shadow:var(--cp-shadow-sm)!important;
  border-radius:var(--cp-radius)!important;
  padding:20px!important;
  margin:0 0 14px!important;}
.contractor-panel-page .panel-intro-message .welcome-message {color:#17394f!important;}
.contractor-panel-page .instructor-selector {flex-wrap:wrap;}
.contractor-panel-page .instructor-selector select {max-width:260px; margin:0!important;}
.contractor-panel-page .cp-quick-actions {display:flex!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin:0 0 14px!important;
  flex-wrap:wrap!important;}
.contractor-panel-page .cp-quick-actions a, .contractor-panel-page .cp-quick-actions button {min-height:42px;
  border-radius:999px!important;
  padding:10px 16px!important;
  box-shadow:none!important;}
.contractor-panel-page .cp-print-schedule-action[hidden] {display:none!important;}
.contractor-panel-page .cp-print-schedule-action.is-visible {display:inline-flex!important;}
.contractor-panel-page .cp-dashboard-shell {max-width:1080px; margin:0 auto;}
.contractor-panel-page .cp-tabs {position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  background:rgba(244,248,251,.92);
  backdrop-filter:blur(10px);
  padding:10px 0 14px;
  margin-bottom:10px;}
.contractor-panel-page .cp-tab {border:0!important;
  border-radius:999px!important;
  background:#e9f1f6!important;
  color:#315166!important;
  min-height:46px;
  padding:10px 12px!important;
  font-weight:800!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease;}
.contractor-panel-page .cp-tab:hover {background:#dcebf4!important; transform:translateY(-1px);}
.contractor-panel-page .cp-tab.is-active {background:var(--cp-blue)!important; color:#fff!important;}
.contractor-panel-page .cp-tab i {margin-right:7px;}
.contractor-panel-page .cp-tab-panel {display:none;}
.contractor-panel-page .cp-tab-panel.is-active {display:block; animation:cpFadeIn .16s ease both;}
@keyframes cpFadeIn {from{opacity:.6; transform:translateY(4px);} to{opacity:1; transform:none;}}
.contractor-panel-page .cp-section-card, .contractor-panel-page .instructor-profile, .contractor-panel-page .lesson-logs-review, .contractor-panel-page .login-form, .contractor-panel-page .change-password-form, .contractor-panel-page #change-password-panel, .contractor-panel-page .invoice-preview-content, .contractor-panel-page .cp-stat-card {background:var(--cp-surface)!important;
  border:1px solid var(--cp-line)!important;
  border-radius:var(--cp-radius)!important;
  box-shadow:var(--cp-shadow-sm)!important;}
.contractor-panel-page .cp-section-card {padding:22px!important; margin:0 0 18px!important; overflow:hidden;}
.contractor-panel-page .cp-section-heading {margin-bottom:16px;}
.contractor-panel-page .cp-section-heading h2 {text-align:left!important; font-size:1.55rem!important; line-height:1.2!important; padding:0!important; color:#17394f!important;}
.contractor-panel-page .cp-section-heading p {color:var(--cp-muted)!important; margin:6px 0 0!important;}
.contractor-panel-page .cp-eyebrow {display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:8px;
  padding:5px 10px;
  border-radius:999px;
  background:#e9f1f6;
  color:#315166;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;}
/* No cards with borders inside bordered cards. Inner regions use spacing/background only. */
.contractor-panel-page .cp-section-card .instructor-profile, .contractor-panel-page .cp-section-card .lesson-logs-review, .contractor-panel-page .cp-section-card .general-wrapper, .contractor-panel-page .cp-section-card .course-card, .contractor-panel-page .cp-section-card .form-wrapper, .contractor-panel-page .cp-section-card .status-wrapper, .contractor-panel-page .cp-section-card .payment-left, .contractor-panel-page .cp-section-card .payment-right, .contractor-panel-page .cp-section-card .grid-item, .contractor-panel-page .cp-section-card .lesson-detail, .contractor-panel-page .cp-section-card .change-password-form, .contractor-panel-page .cp-section-card #change-password-panel {border:0!important;
  box-shadow:none!important;
  background:var(--cp-surface-soft)!important;
  border-radius:var(--cp-radius-sm)!important;}
.contractor-panel-page .cp-section-card .general-content, .contractor-panel-page .cp-section-card .course-header, .contractor-panel-page .cp-section-card .course-footer {border:0!important;
  box-shadow:none!important;
  background:transparent!important;}
.contractor-panel-page .cp-stat-grid {display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;}
.contractor-panel-page .cp-stat-card {padding:18px!important;
  border:0!important;
  background:linear-gradient(180deg,#fff,#f8fbfd)!important;}
.contractor-panel-page .cp-stat-card strong, .contractor-panel-page .cp-stat-card .cp-stat-number {display:block; font-size:1.65rem; color:#17394f; line-height:1.1;}
.contractor-panel-page .cp-stat-card span, .contractor-panel-page .cp-stat-card .cp-stat-label {display:block; color:var(--cp-muted); font-weight:700; margin-top:6px;}
.contractor-panel-page .instructor-profile {align-items:center!important; gap:18px!important; padding:20px!important; margin-bottom:18px!important;}
.contractor-panel-page .instructor-profile .profile-image {margin:0!important;}
.contractor-panel-page .day-tabs {gap:8px!important; margin:10px 0 18px!important;}
.contractor-panel-page .day-tab {border-radius:999px!important;
  border:0!important;
  background:#e9f1f6!important;
  color:#315166!important;
  font-weight:800!important;
  padding:10px 14px!important;}
.contractor-panel-page .day-tab.active {background:var(--cp-blue)!important; color:#fff!important;}
.contractor-panel-page .day-tab.no-data {opacity:.45;}
.contractor-panel-page table {border:1px solid var(--cp-line)!important; border-radius:var(--cp-radius-sm)!important; overflow:hidden; background:#fff!important;}
.contractor-panel-page th {background:#eef4f8!important; color:#25485e!important;}
.contractor-panel-page th, .contractor-panel-page td {border-color:var(--cp-line-soft)!important;}
.contractor-panel-page tr:nth-child(even), .contractor-panel-page tr:nth-child(odd) {background:#fff!important;}
.contractor-panel-page tr:hover {background:#f7fbfd!important; color:inherit!important;}
.contractor-panel-page .break {background:#fff8e8!important; color:var(--cp-amber)!important;}
.contractor-panel-page .available {background:#eef8f0!important; color:var(--cp-green)!important;}
.contractor-panel-page .invoice-form-actions {background:transparent!important; border:0!important; box-shadow:none!important;}
.contractor-panel-page .invoice-form-actions details {background:var(--cp-surface-soft)!important;
  border:0!important;
  border-radius:var(--cp-radius-sm)!important;
  padding:12px!important;}
.contractor-panel-page button, .contractor-panel-page .button, .contractor-panel-page .blue-button, .contractor-panel-page input[type="submit"], .contractor-panel-page input[type="button"], .contractor-panel-page .submit-invoice-button, .contractor-panel-page #add-line-item-btn, .contractor-panel-page .print-schedule-button, .contractor-panel-page .logout-button, .contractor-panel-page .change-password-button {border-radius:999px!important;}
.contractor-panel-page .submit-invoice-button, .contractor-panel-page .blue-button, .contractor-panel-page input[type="submit"] {background:var(--cp-blue)!important;}
.contractor-panel-page .submit-invoice-button:hover, .contractor-panel-page .blue-button:hover, .contractor-panel-page input[type="submit"]:hover {background:var(--cp-blue-dark)!important;}
.contractor-panel-page .print-schedule-button {background:var(--cp-green)!important; color:#fff!important;}
.contractor-panel-page .print-schedule-button:hover {background:var(--cp-green-dark)!important; color:#fff!important; text-decoration:none!important;}
.contractor-panel-page .logout-button {background:var(--cp-red)!important; color:#fff!important;}
.contractor-panel-page #add-line-item-btn {background:#469bb0!important;}
.contractor-panel-page #change-password-panel {display:none; padding:18px!important; margin:0!important;}
.contractor-panel-page #change-password-panel .change-password-actions {justify-content:flex-start; flex-wrap:wrap;}
.contractor-panel-page .form-message {border-radius:var(--cp-radius-sm)!important; border:0!important; box-shadow:var(--cp-shadow-sm)!important;}
@media print {.contractor-panel-page .nav-container, .contractor-panel-page .header, .contractor-panel-page .cp-tabs, .contractor-panel-page .cp-quick-actions, .contractor-panel-page .panel-intro-message, .contractor-panel-page #cp-overview-panel, .contractor-panel-page #cp-attendance-panel, .contractor-panel-page #cp-invoice-panel, .contractor-panel-page #cp-account-panel {display:none!important;}
.contractor-panel-page #cp-schedule-panel {display:block!important;}
.contractor-panel-page .main-wrapper {max-width:none!important; padding:0!important; margin:0!important;}
.contractor-panel-page .cp-section-card {border:0!important; box-shadow:none!important; padding:0!important;}}
@media (max-width:860px) {.contractor-panel-page .cp-tabs {grid-template-columns:1fr; position:static;}
.contractor-panel-page .cp-tab {justify-content:center!important; width:100%;}
.contractor-panel-page .cp-stat-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.contractor-panel-page .cp-section-card {padding:16px!important;}
.contractor-panel-page .instructor-profile {flex-direction:column!important; text-align:center!important;}
.contractor-panel-page .cp-quick-actions {justify-content:stretch!important;}
.contractor-panel-page .cp-quick-actions a {width:100%; justify-content:center!important;}}
@media (max-width:520px) {.contractor-panel-page .cp-stat-grid {grid-template-columns:1fr;}}
/* ===== Testing updates: cleaner tabs/header/invoice ===== */
.contractor-panel-page .cp-welcome-bar {display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
  text-align:left!important;}
.contractor-panel-page .cp-welcome-main {flex:1 1 auto; min-width:0;}
.contractor-panel-page .cp-welcome-actions {flex:0 0 auto; display:flex; justify-content:flex-end;}
.contractor-panel-page .cp-welcome-actions .logout-button {display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:10px 16px!important; text-decoration:none!important;}
.contractor-panel-page .cp-tabs {grid-template-columns:repeat(5,minmax(0,1fr))!important;}
.contractor-panel-page .cp-tab-link {text-decoration:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important;}
.contractor-panel-page .cp-tab-link:hover {text-decoration:none!important;}
.contractor-panel-page .invoice-workflow {display:grid!important; gap:16px!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important;}
.contractor-panel-page .invoice-step {background:var(--cp-surface)!important;
  border:1px solid var(--cp-line)!important;
  border-radius:var(--cp-radius)!important;
  box-shadow:var(--cp-shadow-sm)!important;
  padding:18px!important;
  margin:0!important;}
.contractor-panel-page .invoice-step-heading {display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;}
.contractor-panel-page .invoice-step-heading h3 {text-align:left!important; margin:0!important; padding:0!important; color:#17394f!important; font-size:1.18rem!important;}
.contractor-panel-page .invoice-step-heading p {margin:4px 0 0!important; color:var(--cp-muted)!important; line-height:1.45!important;}
.contractor-panel-page .invoice-step-number {flex:0 0 34px; width:34px; height:34px; border-radius:999px; background:var(--cp-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:900;}
.contractor-panel-page .invoice-log-table-wrap, .contractor-panel-page .line-items-container {border:0!important; border-radius:0!important; background:transparent!important;}
.contractor-panel-page .invoice-step table {margin-bottom:0!important;}
.contractor-panel-page .invoice-payment-grid {display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start;}
.contractor-panel-page .security-answer-box {background:var(--cp-surface-soft); border:0!important; border-radius:var(--cp-radius-sm); padding:12px;}
.contractor-panel-page .security-answer-box p {margin:6px 0 0!important;}
.contractor-panel-page .invoice-subtotal-box {justify-self:end; text-align:right; display:grid; gap:2px;}
.contractor-panel-page .invoice-subtotal-box span, .contractor-panel-page .invoice-total-label {color:var(--cp-muted); font-weight:800; font-size:.92rem;}
.contractor-panel-page .invoice-submit-bar {display:flex!important; justify-content:space-between!important; align-items:center!important; gap:16px!important; background:linear-gradient(180deg,#ffffff,#f7fbfd)!important;}
.contractor-panel-page .invoice-submit-bar #invoice-grand-total {display:block; font-size:1.8rem; line-height:1.1;}
.contractor-panel-page .invoice-submit-actions {display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.contractor-panel-page #cp-attendance-panel details {display:block!important;}
.contractor-panel-page #cp-attendance-panel details[open], .contractor-panel-page #cp-attendance-panel details {background:transparent!important; border:0!important; box-shadow:none!important;}
.contractor-panel-page #cp-attendance-panel details.cp-details-unwrapped > summary {display:none!important;}
@media (max-width:860px) {.contractor-panel-page .cp-welcome-bar {flex-direction:column!important; align-items:stretch!important; text-align:center!important;}
.contractor-panel-page .cp-welcome-actions {justify-content:center;}
.contractor-panel-page .cp-tabs {grid-template-columns:1fr!important;}
.contractor-panel-page .invoice-payment-grid {grid-template-columns:1fr;}
.contractor-panel-page .invoice-submit-bar {flex-direction:column!important; align-items:stretch!important; text-align:center!important;}
.contractor-panel-page .invoice-submit-actions {justify-content:stretch;}
.contractor-panel-page .invoice-submit-actions .submit-invoice-button {width:100%;}
.contractor-panel-page .line-items-controls {grid-template-columns:1fr!important;}
.contractor-panel-page .invoice-subtotal-box {justify-self:stretch; text-align:center;}}
/* ===== Fix pass: Attendance visibility + no raw JS print leakage ===== */
.contractor-panel-page .attendance-action-row {display:flex;
  justify-content:flex-start;
  margin:0 0 16px!important;}
.contractor-panel-page .attendance-absence-button {display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-decoration:none!important;}
.contractor-panel-page #cp-attendance-panel.is-active, .contractor-panel-page #cp-attendance-panel.is-active *:not(script):not(style) {visibility:visible;}
.contractor-panel-page #cp-attendance-panel details {display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;}
.contractor-panel-page #cp-attendance-panel details:not([open]) > *:not(summary) {display:revert!important;}
.contractor-panel-page #cp-attendance-panel details > summary {display:none!important;}
.contractor-panel-page #cp-attendance-panel .hidden:not(#optionsMessage) {display:revert!important;
  height:auto!important;
  overflow:visible!important;}
@media (max-width:860px) {.contractor-panel-page .attendance-action-row .attendance-absence-button {width:100%;}}
/* === Fixed3 layout polish: cleaner spacing, tabs, and schedule print placement === */
.contractor-panel-page .cp-dashboard-shell {max-width:1080px!important;
  margin:24px auto 0!important;}
.contractor-panel-page .cp-tabs {padding:16px!important;
  margin:0 0 26px!important;
  gap:12px!important;
  border:1px solid var(--cp-border)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 14px 34px rgba(31,60,82,.08)!important;}
.contractor-panel-page .cp-tab {min-height:52px!important;
  padding:13px 18px!important;
  border-radius:16px!important;
  line-height:1.15!important;}
.contractor-panel-page .cp-tab i {margin-right:2px!important;}
.contractor-panel-page .cp-tab-panel {padding-top:2px!important;}
.contractor-panel-page .cp-section-heading {margin:0 0 24px!important;
  padding:24px 26px!important;}
.contractor-panel-page .cp-section-card, .contractor-panel-page .instructor-profile, .contractor-panel-page .lesson-logs-review, .contractor-panel-page .invoice-step, .contractor-panel-page #change-password-panel {margin-bottom:24px!important;}
.contractor-panel-page .cp-schedule-heading {display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:18px!important;
  text-align:left!important;}
.contractor-panel-page .cp-schedule-heading p {margin-left:0!important;
  margin-right:0!important;}
.contractor-panel-page .cp-schedule-heading .cp-eyebrow, .contractor-panel-page .cp-schedule-heading h2 {justify-content:flex-start!important;
  text-align:left!important;}
.contractor-panel-page .cp-section-actions {display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;}
.contractor-panel-page .cp-print-schedule-action {display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  text-decoration:none!important;}
.contractor-panel-page .day-tabs {padding:16px!important;
  margin:0 0 22px!important;
  background:#fff!important;
  border:1px solid var(--cp-border)!important;
  border-radius:20px!important;
  box-shadow:0 10px 26px rgba(31,60,82,.055)!important;
  gap:10px!important;}
.contractor-panel-page .day-tab {padding:11px 15px!important;
  border-radius:999px!important;}
.contractor-panel-page .legacy-schedule-title {margin:4px 0 16px!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar {margin-bottom:22px!important;}
.contractor-panel-page .invoice-step-heading {margin-bottom:18px!important;}
.contractor-panel-page .invoice-payment-grid, .contractor-panel-page .line-items-controls, .contractor-panel-page .invoice-submit-bar {gap:16px!important;}
/* Keep visual nesting clean: sections may have borders; inner helper blocks use background/shadow only. */
.contractor-panel-page .cp-section-card .cp-section-heading, .contractor-panel-page .invoice-step .cp-section-heading, .contractor-panel-page .instructor-profile details, .contractor-panel-page .calc-breakdown-body, .contractor-panel-page .security-answer-box, .contractor-panel-page .invoice-subtotal-box {border-color:transparent!important;
  box-shadow:none!important;}
@media (max-width:768px) {.contractor-panel-page .cp-dashboard-shell {margin-top:18px!important;}
.contractor-panel-page .cp-tabs {grid-template-columns:1fr!important;
    padding:14px!important;
    gap:10px!important;
    position:relative!important;
    top:auto!important;}
.contractor-panel-page .cp-tab {width:100%!important;
    min-height:50px!important;}
.contractor-panel-page .cp-section-heading, .contractor-panel-page .cp-schedule-heading {padding:20px!important;
    margin-bottom:18px!important;}
.contractor-panel-page .cp-schedule-heading {flex-direction:column!important;
    align-items:stretch!important;
    text-align:center!important;}
.contractor-panel-page .cp-schedule-heading .cp-eyebrow, .contractor-panel-page .cp-schedule-heading h2, .contractor-panel-page .cp-schedule-heading p {text-align:center!important;
    justify-content:center!important;
    margin-left:auto!important;
    margin-right:auto!important;}
.contractor-panel-page .cp-section-actions, .contractor-panel-page .cp-print-schedule-action {width:100%!important;}
.contractor-panel-page .day-tabs {padding:12px!important;
    gap:8px!important;}}
/* ===== Polish pass: prevent rounded containers from touching square sections =====
   Rule: if two blocks visually belong together, flatten the joined edge.
   If they are separate blocks, add real breathing room between them. */
.contractor-panel-page .cp-tabs {padding:16px!important;
  gap:12px!important;
  margin:0 0 28px!important;}
.contractor-panel-page .cp-tab {padding:13px 16px!important;
  min-height:52px!important;}
.contractor-panel-page .cp-tab-panel {display:none;}
.contractor-panel-page .cp-tab-panel.is-active {display:block;}
.contractor-panel-page .cp-section-heading {margin-bottom:26px!important;}
/* Generic vertical rhythm so cards/blocks do not run together. */
.contractor-panel-page .cp-tab-panel > * + *, .contractor-panel-page .invoice-workflow > * + *, .contractor-panel-page .lesson-logs-review > * + *, .contractor-panel-page .cp-section-card > * + * {margin-top:22px!important;}
/* Tables inside cards should not create odd double-rounded / double-border joins. */
.contractor-panel-page .table-responsive, .contractor-panel-page .invoice-log-table-wrap, .contractor-panel-page .line-items-container, .contractor-panel-page .lesson-earnings-responsive, .contractor-panel-page .calc-breakdown-body {border-radius:14px!important;
  overflow:auto!important;}
/* When an action strip directly follows a line-item table, make it read as the bottom of the same unit. */
.contractor-panel-page .line-items-container + .line-items-controls {margin-top:0!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
  border-top:0!important;
  padding:18px!important;}
.contractor-panel-page .line-items-container:has(+ .line-items-controls) {border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;}
/* Fallback for browsers without :has(): the table wrapper is intentionally squared at bottom. */
.contractor-panel-page .invoice-step-extras .line-items-container {border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;}
.contractor-panel-page .invoice-step-extras .line-items-controls {border:1px solid var(--cp-line, var(--cp-border))!important;
  background:#f7fafc!important;
  box-shadow:none!important;}
/* If controls are meant to be separate, this class can be added later. */
.contractor-panel-page .detached-controls {margin-top:18px!important;
  border-radius:16px!important;
  border-top:1px solid var(--cp-line, var(--cp-border))!important;}
/* Invoice submit bar is a separate final action area, so give it clear space. */
.contractor-panel-page .invoice-submit-bar {margin-top:26px!important;
  border-radius:20px!important;}
/* Payment helper boxes sit inside an invoice step, so use soft panels without strong nested borders. */
.contractor-panel-page .security-answer-box, .contractor-panel-page .checkbox-row label, .contractor-panel-page .invoice-subtotal-box {border:0!important;
  box-shadow:none!important;}
.contractor-panel-page .checkbox-row label, .contractor-panel-page .security-answer-box {background:#f7fafc!important;}
/* Instructor details and calculation breakdowns should not look like cards inside cards. */
.contractor-panel-page .instructor-profile details, .contractor-panel-page .calc-breakdown-body, .contractor-panel-page .student-details-card {border:0!important;
  box-shadow:none!important;
  background:#f7fafc!important;
  border-radius:14px!important;}
.contractor-panel-page .instructor-profile details {margin-top:18px!important;}
/* Schedule area spacing: print button belongs inside heading, day tabs/table separated cleanly. */
.contractor-panel-page .cp-schedule-heading {margin-bottom:24px!important;}
.contractor-panel-page .cp-schedule-heading + .legacy-schedule-title + .day-tabs, .contractor-panel-page .cp-schedule-heading + .day-tabs {margin-top:0!important;}
.contractor-panel-page .day-tabs {margin-bottom:24px!important;}
.contractor-panel-page #cp-schedule-panel table, .contractor-panel-page #cp-schedule-panel .preserve-headers {border-radius:16px!important;
  overflow:hidden!important;}
.contractor-panel-page #cp-schedule-panel .legend {margin-top:20px!important;
  border-radius:16px!important;}
/* Attendance: absence action is its own toolbar, not glued to content below. */
.contractor-panel-page .attendance-action-row {margin:0 0 24px!important;
  padding:0!important;}
.contractor-panel-page .attendance-action-row + * {margin-top:0!important;}
/* Welcome/header area: give selector/logout breathing room. */
.contractor-panel-page .panel-intro-message.cp-welcome-bar {padding:26px!important;
  gap:22px!important;}
.contractor-panel-page .cp-welcome-actions {padding-left:8px!important;}
/* Mobile keeps the same logic but with larger tap spacing. */
@media (max-width:768px) {.contractor-panel-page .cp-tabs {padding:16px!important;
    gap:12px!important;
    margin-bottom:24px!important;}
.contractor-panel-page .cp-tab {min-height:54px!important;}
.contractor-panel-page .line-items-container + .line-items-controls {padding:16px!important;}
.contractor-panel-page .invoice-submit-bar {margin-top:24px!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar {padding:20px!important;}}
/* ===== Fixed5: line-item curve correction + final spacing cleanup =====
   The Additional Line Items table and its action strip are separate visual blocks.
   The table stays square/flat inside the invoice card; the action strip has its own
   breathing room so rounded corners never touch a squared table edge. */
.contractor-panel-page .invoice-step-extras .line-items-container, .contractor-panel-page .invoice-step-extras .table-responsive.line-items-container {margin-top:18px!important;
  margin-bottom:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;}
.contractor-panel-page .invoice-step-extras #line-items-table {width:100%!important;
  margin:0!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:#fff!important;}
.contractor-panel-page .invoice-step-extras #line-items-table th, .contractor-panel-page .invoice-step-extras #line-items-table td, .contractor-panel-page .invoice-step-extras #line-items-table tr, .contractor-panel-page .invoice-step-extras #line-items-table thead, .contractor-panel-page .invoice-step-extras #line-items-table tbody {border-radius:0!important;}
.contractor-panel-page .invoice-step-extras #line-items-table th:first-child, .contractor-panel-page .invoice-step-extras #line-items-table th:last-child, .contractor-panel-page .invoice-step-extras #line-items-table td:first-child, .contractor-panel-page .invoice-step-extras #line-items-table td:last-child {border-radius:0!important;}
.contractor-panel-page .invoice-step-extras .line-items-container + .line-items-controls {margin-top:18px!important;
  padding:18px!important;
  border:0!important;
  border-radius:18px!important;
  background:#f7fafc!important;
  box-shadow:none!important;}
.contractor-panel-page .invoice-step-extras .line-items-controls {display:grid!important;
  grid-template-columns:auto 1fr!important;
  align-items:center!important;
  gap:16px!important;}
.contractor-panel-page .invoice-step-extras .line-items-controls .invoice-subtotal-box {justify-self:end!important;
  text-align:right!important;
  background:transparent!important;
  padding:0!important;}
@media (max-width:768px) {.contractor-panel-page .invoice-step-extras .line-items-container + .line-items-controls {margin-top:16px!important;
    padding:16px!important;}
.contractor-panel-page .invoice-step-extras .line-items-controls {grid-template-columns:1fr!important;}
.contractor-panel-page .invoice-step-extras .line-items-controls .invoice-subtotal-box {justify-self:stretch!important;
    text-align:center!important;}}
/* ===== Fixed6 refinements: centered account header + report absence workflow ===== */
.contractor-panel-page .cp-account-heading, .contractor-panel-page .cp-centered-heading {text-align:center!important;
  align-items:center!important;}
.contractor-panel-page .cp-account-heading .cp-eyebrow, .contractor-panel-page .cp-account-heading h2, .contractor-panel-page .cp-account-heading p, .contractor-panel-page .cp-centered-heading .cp-eyebrow, .contractor-panel-page .cp-centered-heading h2, .contractor-panel-page .cp-centered-heading p {text-align:center!important;
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;}
.contractor-panel-page #cp-account-panel .cp-section-card {text-align:center!important;}
.contractor-panel-page #cp-account-panel #change-password-panel {text-align:left!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:560px!important;}
.contractor-panel-page .cp-schedule-actions {gap:10px!important;
  flex-wrap:wrap!important;}
.contractor-panel-page .cp-report-absence-action, .contractor-panel-page .attendance-absence-button {display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  text-decoration:none!important;}
.contractor-panel-page .cp-report-absence-card {max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;}
.contractor-panel-page .cp-centered-actions {display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin-top:0!important;}
@media (max-width:768px) {.contractor-panel-page .cp-schedule-actions {width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;}
.contractor-panel-page .cp-report-absence-action, .contractor-panel-page .cp-print-schedule-action, .contractor-panel-page .attendance-absence-button {width:100%!important;}}
/* ===== Fixed7: restore full student absence reporting content ===== */
.contractor-panel-page #cp-attendance-panel .cp-centered-heading {text-align:center!important;
  max-width:780px;
  margin:0 auto 24px!important;}
.contractor-panel-page #cp-attendance-panel > .cp-section-heading + * {margin-top:18px!important;}
.contractor-panel-page #cp-attendance-panel form, .contractor-panel-page #cp-attendance-panel .general-wrapper, .contractor-panel-page #cp-attendance-panel .lesson-logs-review, .contractor-panel-page #cp-attendance-panel .table-responsive {max-width:100%;}
.contractor-panel-page #cp-attendance-panel .general-wrapper, .contractor-panel-page #cp-attendance-panel .lesson-logs-review {margin-top:18px!important;}
.contractor-panel-page .cp-schedule-actions .attendance-absence-button {white-space:nowrap;}
@media (max-width:768px) {.contractor-panel-page .cp-schedule-actions .attendance-absence-button, .contractor-panel-page .cp-schedule-actions .print-schedule-button {width:100%; justify-content:center;}}
/* ===== Fixed8: consistent section headers + full-width Report Absence ===== */
/* All main tab intros use the same centered presentation. */
.contractor-panel-page .cp-tab-panel > .cp-section-heading, .contractor-panel-page .cp-overview-heading, .contractor-panel-page #cp-invoice-panel > .cp-section-heading, .contractor-panel-page #cp-attendance-panel > .cp-section-heading, .contractor-panel-page .cp-account-heading {width:100%!important;
  max-width:none!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:26px 24px!important;
  margin:0 0 28px!important;}
.contractor-panel-page .cp-tab-panel > .cp-section-heading .cp-eyebrow, .contractor-panel-page .cp-tab-panel > .cp-section-heading h2, .contractor-panel-page .cp-tab-panel > .cp-section-heading p {text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;}
.contractor-panel-page .cp-tab-panel > .cp-section-heading h2 {width:100%!important;
  font-size:clamp(1.6rem, 2.8vw, 2.15rem)!important;
  line-height:1.18!important;}
.contractor-panel-page .cp-tab-panel > .cp-section-heading p {max-width:760px!important;
  line-height:1.55!important;}
/* Schedule keeps its action buttons inside the same header, but still follows the same centered rhythm. */
.contractor-panel-page .cp-schedule-heading {text-align:center!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;}
.contractor-panel-page .cp-schedule-heading > div:first-child {width:100%!important;
  text-align:center!important;}
.contractor-panel-page .cp-schedule-actions {width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:16px!important;}
.contractor-panel-page .cp-schedule-actions a, .contractor-panel-page .cp-schedule-actions button {margin:0!important;}
/* Report Absence content should occupy the same page width as Schedule/Invoice. */
.contractor-panel-page #cp-attendance-panel {width:100%!important;
  max-width:none!important;}
.contractor-panel-page #cp-attendance-panel > .cp-section-heading {max-width:none!important;}
.contractor-panel-page #cp-attendance-panel > :not(.cp-section-heading) {width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;}
.contractor-panel-page #cp-attendance-panel form, .contractor-panel-page #cp-attendance-panel .general-wrapper, .contractor-panel-page #cp-attendance-panel .lesson-logs-review, .contractor-panel-page #cp-attendance-panel .table-responsive, .contractor-panel-page #cp-attendance-panel table, .contractor-panel-page #cp-attendance-panel .form-wrapper, .contractor-panel-page #cp-attendance-panel .status-wrapper, .contractor-panel-page #cp-attendance-panel .absence-wrapper, .contractor-panel-page #cp-attendance-panel .attendance-wrapper, .contractor-panel-page #cp-attendance-panel .report-absence-wrapper {width:100%!important;
  max-width:none!important;}
/* Keep inner forms readable without making the whole tab look narrow. */
.contractor-panel-page #cp-attendance-panel input, .contractor-panel-page #cp-attendance-panel select, .contractor-panel-page #cp-attendance-panel textarea {max-width:100%!important;}
@media (max-width:768px) {.contractor-panel-page .cp-tab-panel > .cp-section-heading, .contractor-panel-page .cp-overview-heading, .contractor-panel-page #cp-invoice-panel > .cp-section-heading, .contractor-panel-page #cp-attendance-panel > .cp-section-heading, .contractor-panel-page .cp-account-heading {padding:22px 16px!important;
    margin-bottom:22px!important;}
.contractor-panel-page .cp-schedule-actions {flex-direction:column!important;
    align-items:stretch!important;}}
/* ===== Fixed9: welcome/header centering + schedule action button consistency + inline P/A controls ===== */
.contractor-panel-page .panel-intro-message.cp-welcome-bar {display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:14px!important;
  padding:24px 26px!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar .cp-welcome-main, .contractor-panel-page .panel-intro-message.cp-welcome-bar .cp-welcome-main p, .contractor-panel-page .panel-intro-message.cp-welcome-bar .welcome-message {width:100%!important;
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector {justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  margin:10px auto 0!important;
  width:100%!important;
  max-width:480px!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector label {text-align:center!important;
  margin:0!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector select {margin-left:auto!important;
  margin-right:auto!important;}
.contractor-panel-page .panel-intro-message.cp-welcome-bar .cp-welcome-actions {width:100%!important;
  justify-content:center!important;}
.contractor-panel-page .cp-schedule-actions {gap:12px!important;
  justify-content:center!important;
  flex-wrap:wrap!important;}
.contractor-panel-page .cp-schedule-actions .cp-print-schedule-action, .contractor-panel-page .cp-schedule-actions .cp-report-absence-action {width:220px!important;
  min-width:220px!important;
  max-width:220px!important;
  height:46px!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  line-height:1!important;
  margin:0!important;}
.contractor-panel-page #cp-attendance-panel table td form, .contractor-panel-page #cp-attendance-panel table td .attendance-actions, .contractor-panel-page #cp-attendance-panel table td .absence-actions, .contractor-panel-page #cp-attendance-panel table td .status-actions, .contractor-panel-page #cp-attendance-panel table td .present-absent-actions, .contractor-panel-page #cp-attendance-panel table td .pa-actions, .contractor-panel-page #cp-attendance-panel table td .button-group {display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;}
.contractor-panel-page #cp-attendance-panel table td button, .contractor-panel-page #cp-attendance-panel table td .button, .contractor-panel-page #cp-attendance-panel table td .blue-button, .contractor-panel-page #cp-attendance-panel table td .submit-invoice-button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"], .contractor-panel-page #cp-attendance-panel table td input[type="button"], .contractor-panel-page #cp-attendance-panel table td a.button {display:inline-flex!important;
  width:auto!important;
  min-width:42px!important;
  max-width:none!important;
  height:38px!important;
  padding:0 12px!important;
  margin:0 4px 0 0!important;
  align-items:center!important;
  justify-content:center!important;
  vertical-align:middle!important;
  flex:0 0 auto!important;}
.contractor-panel-page #cp-attendance-panel table td button + button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"] + input[type="submit"], .contractor-panel-page #cp-attendance-panel table td .button + .button {margin-left:4px!important;}
@media (max-width:860px) {.contractor-panel-page .cp-schedule-actions .cp-print-schedule-action, .contractor-panel-page .cp-schedule-actions .cp-report-absence-action {width:100%!important;
    max-width:360px!important;
    min-width:0!important;}
.contractor-panel-page #cp-attendance-panel table td button, .contractor-panel-page #cp-attendance-panel table td .button, .contractor-panel-page #cp-attendance-panel table td .blue-button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"], .contractor-panel-page #cp-attendance-panel table td input[type="button"] {width:auto!important;
    min-width:42px!important;}}
/* ===== Fixed10: refined absence labels + optical button centering ===== */
.contractor-panel-page button, .contractor-panel-page .button, .contractor-panel-page .blue-button, .contractor-panel-page .submit-invoice-button, .contractor-panel-page .print-schedule-button, .contractor-panel-page .logout-button, .contractor-panel-page .cp-tab, .contractor-panel-page .day-tab, .contractor-panel-page .cp-schedule-actions a, .contractor-panel-page .cp-schedule-actions button, .contractor-panel-page input[type="button"], .contractor-panel-page input[type="submit"] {display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  vertical-align:middle!important;
  gap:8px!important;}
.contractor-panel-page button i, .contractor-panel-page .button i, .contractor-panel-page .blue-button i, .contractor-panel-page .submit-invoice-button i, .contractor-panel-page .print-schedule-button i, .contractor-panel-page .logout-button i, .contractor-panel-page .cp-tab i, .contractor-panel-page .cp-schedule-actions a i, .contractor-panel-page .cp-schedule-actions button i {display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  transform:translateY(0.5px);}
.contractor-panel-page .cp-schedule-actions .cp-print-schedule-action, .contractor-panel-page .cp-schedule-actions .cp-report-absence-action {width:230px!important;
  min-width:230px!important;
  max-width:230px!important;
  height:46px!important;
  padding:0 16px!important;
  box-sizing:border-box!important;}
.contractor-panel-page .cp-tab {min-height:46px!important;
  padding-top:0!important;
  padding-bottom:0!important;}
.contractor-panel-page #cp-attendance-panel table td button, .contractor-panel-page #cp-attendance-panel table td .button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"], .contractor-panel-page #cp-attendance-panel table td input[type="button"] {line-height:1!important;
  padding-top:0!important;
  padding-bottom:0!important;}
@media (max-width:860px) {.contractor-panel-page .cp-schedule-actions .cp-print-schedule-action, .contractor-panel-page .cp-schedule-actions .cp-report-absence-action {width:100%!important;
    max-width:360px!important;
    min-width:0!important;}}
/* ===== Fixed11: protect main website nav from contractor button alignment rules ===== */
.contractor-panel-page .nav-container .menu-button {display:none !important;
  width:100% !important;
  min-height:auto !important;
  height:auto !important;
  padding:0.625rem 1.25rem !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  line-height:1.2 !important;
  gap:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;}
.contractor-panel-page .nav-container .navbar {display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:.75rem !important;
  padding:.75rem !important;
  background:var(--primary) !important;}
.contractor-panel-page .nav-container .navbar a, .contractor-panel-page .nav-container .navbar-active {display:inline-block !important;
  width:auto !important;
  min-height:auto !important;
  height:auto !important;
  padding:.6rem 1.2rem !important;
  line-height:1.25 !important;
  text-align:center !important;
  gap:0 !important;}
@media screen and (max-width:48rem) {.contractor-panel-page .nav-container .menu-button {display:flex !important;
    position:sticky !important;
    top:0 !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding-left:.75rem !important;}
.contractor-panel-page .nav-container .navbar {display:none !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:0 0 15px 0 !important;
    position:absolute !important;
    width:100% !important;
    left:0 !important;
    top:100% !important;}
.contractor-panel-page .nav-container .navbar.show {display:block !important;}
.contractor-panel-page .nav-container .navbar a, .contractor-panel-page .nav-container .navbar-active {display:block !important;
    width:90% !important;
    margin:.313rem auto !important;
    padding:.6rem 1.2rem !important;
    box-sizing:border-box !important;
    font-size:1rem !important;
    background-color:#799ECB !important;
    border-radius:0 !important;}}
/* ===== Fixed13: MOBILE-ONLY UX refinements; desktop intentionally left as fixed11 ===== */
@media screen and (max-width: 48rem) {/* Main site nav: compact, collapsible, and not screen-hogging */
.contractor-panel-page .nav-container {position: sticky !important; top: 0 !important; z-index: 3000 !important;}
.contractor-panel-page .nav-container .menu-button {min-height: 52px !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;}
.contractor-panel-page .nav-container .navbar {max-height: min(62vh, 430px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 18px 34px rgba(31, 45, 61, 0.22) !important;}
.contractor-panel-page .nav-container .navbar.show {display: block !important;}
.contractor-panel-page .nav-container .navbar a, .contractor-panel-page .nav-container .navbar-active {min-height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;}
/* App-style dashboard spacing, mobile only */
.contractor-panel-page .main-wrapper {margin: 0 !important;
    padding: 14px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;}
.contractor-panel-page .secondary-wrapper {width: 100% !important; max-width: 100% !important;}
.contractor-panel-page .cp-dashboard-shell {gap: 16px !important;}
.contractor-panel-page .panel-intro-message, .contractor-panel-page .cp-section-card, .contractor-panel-page .instructor-profile, .contractor-panel-page .invoice-step, .contractor-panel-page .lesson-logs-review, .contractor-panel-page .general-wrapper, .contractor-panel-page .status-wrapper {padding: 18px 16px !important;
    margin-bottom: 16px !important;}
.contractor-panel-page .cp-section-heading {padding: 20px 14px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    align-items: center !important;}
.contractor-panel-page .cp-section-heading h2 {font-size: 1.45rem !important; line-height: 1.2 !important;}
.contractor-panel-page .cp-section-heading p {font-size: 1.03rem !important; line-height: 1.45 !important;}
/* Contractor tabs: big, easy buttons, but mobile only */
.contractor-panel-page .cp-tabs {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    margin: 0 0 18px 0 !important;
    border-radius: 18px !important;}
.contractor-panel-page .cp-tab {width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;}
/* Schedule actions: same size, readable, mobile only */
.contractor-panel-page .cp-schedule-heading {display: flex !important; flex-direction: column !important; gap: 14px !important;}
.contractor-panel-page .cp-schedule-actions {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;}
.contractor-panel-page .cp-schedule-actions .cp-print-schedule-action, .contractor-panel-page .cp-schedule-actions .cp-report-absence-action {width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    line-height: 1 !important;}
/* Make tables readable without horizontal scrolling. */
.contractor-panel-page .cp-dashboard-shell .table-responsive, .contractor-panel-page .cp-dashboard-shell .invoice-log-table-wrap, .contractor-panel-page .cp-dashboard-shell .lesson-earnings-responsive {overflow: visible !important;
    max-width: 100% !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) thead {display: none !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tbody, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tfoot, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tr, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) td, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th {display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tbody tr, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tfoot tr {margin: 0 0 12px 0 !important;
    padding: 12px !important;
    border: 1px solid #e4ebf0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(31,45,61,0.05) !important;
    overflow: hidden !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) td, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th {border: 0 !important;
    border-bottom: 1px solid #eef3f6 !important;
    padding: 10px 4px !important;
    text-align: left !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) td:last-child, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th:last-child {border-bottom: 0 !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) td::before, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th::before {content: attr(data-label) !important;
    display: block !important;
    margin: 0 0 4px 0 !important;
    color: #5f7080 !important;
    font-weight: 800 !important;
    font-size: .83rem !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;}
/* Fallback labels for existing tables that do not provide data-label everywhere. */
.contractor-panel-page #cp-schedule-panel table:not(#line-items-table) tbody td:nth-child(1)::before {content: "Time" !important;}
.contractor-panel-page #cp-schedule-panel table:not(#line-items-table) tbody td:nth-child(2)::before {content: "Student" !important;}
.contractor-panel-page #cp-schedule-panel table:not(#line-items-table) tbody td:nth-child(3)::before {content: "Program" !important;}
.contractor-panel-page #cp-schedule-panel table:not(#line-items-table) tbody td:nth-child(4)::before {content: "Paid" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(1)::before {content: "Time" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(2)::before {content: "Student / Slot" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(3)::before {content: "Type" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(4)::before {content: "Slot Gross" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(5)::before {content: "Fee Subtracted" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(6)::before {content: "Net" !important;}
.contractor-panel-page .lesson-earnings-responsive table:not(#line-items-table) tbody td:nth-child(7)::before {content: "Note" !important;}
.contractor-panel-page #cp-attendance-panel table:not(#line-items-table) tbody td:nth-child(1)::before {content: "Date / Time" !important;}
.contractor-panel-page #cp-attendance-panel table:not(#line-items-table) tbody td:nth-child(2)::before {content: "Student" !important;}
.contractor-panel-page #cp-attendance-panel table:not(#line-items-table) tbody td:nth-child(3)::before {content: "Status" !important;}
.contractor-panel-page #cp-attendance-panel table:not(#line-items-table) tbody td:nth-child(4)::before {content: "Action" !important;}
/* Total rows should still read clearly. */
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tfoot td::before {content: none !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tfoot td {text-align: center !important; font-weight: 800 !important;}
/* Present/Absent controls stay side-by-side on mobile. */
.contractor-panel-page #cp-attendance-panel table td form, .contractor-panel-page #cp-attendance-panel table td .attendance-actions, .contractor-panel-page #cp-attendance-panel table td .absence-actions, .contractor-panel-page #cp-attendance-panel table td .status-actions, .contractor-panel-page #cp-attendance-panel table td .present-absent-actions, .contractor-panel-page #cp-attendance-panel table td .pa-actions, .contractor-panel-page #cp-attendance-panel table td .button-group {display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;}
.contractor-panel-page #cp-attendance-panel table td button, .contractor-panel-page #cp-attendance-panel table td .button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"], .contractor-panel-page #cp-attendance-panel table td input[type="button"] {flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 10px !important;
    font-size: 1rem !important;
    line-height: 1 !important;}
/* Forms/buttons: larger app-like targets on mobile only. */
.contractor-panel-page .cp-dashboard-shell input, .contractor-panel-page .cp-dashboard-shell select, .contractor-panel-page .cp-dashboard-shell textarea {min-height: 48px !important;
    font-size: 1rem !important;}
.contractor-panel-page .cp-dashboard-shell button, .contractor-panel-page .cp-dashboard-shell .button, .contractor-panel-page .cp-dashboard-shell .submit-invoice-button, .contractor-panel-page .cp-dashboard-shell .blue-button, .contractor-panel-page .cp-dashboard-shell input[type="submit"], .contractor-panel-page .cp-dashboard-shell input[type="button"] {min-height: 48px !important;
    font-size: 1rem !important;}}
/* Fixed14 mobile-only: keep REAL tables on mobile, but make them compact/readable.
   This intentionally overrides the prior stacked/card mobile table treatment. */
@media (max-width: 768px) {.contractor-panel-page .cp-dashboard-shell .table-responsive, .contractor-panel-page .cp-dashboard-shell .invoice-log-table-wrap, .contractor-panel-page .cp-dashboard-shell .lesson-earnings-responsive {overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table), .contractor-panel-page .cp-dashboard-shell table.preserve-headers, .contractor-panel-page .cp-dashboard-shell .invoice-log-table, .contractor-panel-page .cp-dashboard-shell .lesson-logs-review table, .contractor-panel-page .cp-dashboard-shell .lesson-earnings-responsive table {display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: 1px solid #e4ebf0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    font-size: 0.82rem !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) thead, .contractor-panel-page .cp-dashboard-shell table.preserve-headers thead, .contractor-panel-page .cp-dashboard-shell .invoice-log-table thead, .contractor-panel-page .cp-dashboard-shell .lesson-logs-review table thead, .contractor-panel-page .cp-dashboard-shell .lesson-earnings-responsive table thead {display: table-header-group !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tbody, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tfoot, .contractor-panel-page .cp-dashboard-shell table.preserve-headers tbody, .contractor-panel-page .cp-dashboard-shell table.preserve-headers tfoot {display: table-row-group !important;
    width: auto !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) tr, .contractor-panel-page .cp-dashboard-shell table.preserve-headers tr {display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) td, .contractor-panel-page .cp-dashboard-shell table.preserve-headers th, .contractor-panel-page .cp-dashboard-shell table.preserve-headers td {display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    border: 1px solid #e4ebf0 !important;
    padding: 7px 5px !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    background-clip: padding-box !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th, .contractor-panel-page .cp-dashboard-shell table.preserve-headers th {font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    color: #34495e !important;
    background: #f3f6f8 !important;}
.contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) td::before, .contractor-panel-page .cp-dashboard-shell table:not(#line-items-table) th::before, .contractor-panel-page .cp-dashboard-shell table.preserve-headers td::before, .contractor-panel-page .cp-dashboard-shell table.preserve-headers th::before {content: none !important;
    display: none !important;}
/* Mobile schedule table: make the important columns readable in-table. */
.contractor-panel-page #cp-schedule-panel table th:nth-child(1), .contractor-panel-page #cp-schedule-panel table td:nth-child(1) {width: 25% !important;}
.contractor-panel-page #cp-schedule-panel table th:nth-child(2), .contractor-panel-page #cp-schedule-panel table td:nth-child(2) {width: 34% !important;}
.contractor-panel-page #cp-schedule-panel table th:nth-child(3), .contractor-panel-page #cp-schedule-panel table td:nth-child(3) {width: 27% !important;}
.contractor-panel-page #cp-schedule-panel table th:nth-child(4), .contractor-panel-page #cp-schedule-panel table td:nth-child(4) {width: 14% !important; text-align: center !important;}
/* Invoice log table: compact but still a true table. */
.contractor-panel-page .invoice-log-table th:nth-child(1), .contractor-panel-page .invoice-log-table td:nth-child(1) {width: 28% !important;}
.contractor-panel-page .invoice-log-table th:nth-child(2), .contractor-panel-page .invoice-log-table td:nth-child(2) {width: 36% !important;}
.contractor-panel-page .invoice-log-table th:nth-child(3), .contractor-panel-page .invoice-log-table td:nth-child(3) {width: 16% !important; text-align: center !important;}
.contractor-panel-page .invoice-log-table th:nth-child(4), .contractor-panel-page .invoice-log-table td:nth-child(4) {width: 20% !important; text-align: right !important;}
/* Earnings table has many columns, so use an extra compact table style. */
.contractor-panel-page .lesson-earnings-responsive table th, .contractor-panel-page .lesson-earnings-responsive table td {font-size: 0.68rem !important;
    padding: 6px 3px !important;
    line-height: 1.15 !important;}
/* Keep Present / Absent controls beside each other inside the table cell. */
.contractor-panel-page #cp-attendance-panel table td form, .contractor-panel-page #cp-attendance-panel table td .attendance-actions, .contractor-panel-page #cp-attendance-panel table td .absence-actions, .contractor-panel-page #cp-attendance-panel table td .status-actions, .contractor-panel-page #cp-attendance-panel table td .present-absent-actions, .contractor-panel-page #cp-attendance-panel table td .pa-actions, .contractor-panel-page #cp-attendance-panel table td .button-group {display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;}
.contractor-panel-page #cp-attendance-panel table td button, .contractor-panel-page #cp-attendance-panel table td .button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"], .contractor-panel-page #cp-attendance-panel table td input[type="button"] {flex: 1 1 0 !important;
    min-width: 34px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 6px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;}
/* Line items already have special JS, but keep their table compact too. */
.contractor-panel-page #line-items-table {width: 100% !important;
    table-layout: fixed !important;
    font-size: 0.78rem !important;}
.contractor-panel-page #line-items-table th, .contractor-panel-page #line-items-table td {padding: 7px 4px !important;
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;}}
/* ===== Fixed26: mobile invoice checkbox labels stay beside their checkboxes ===== */
@media (max-width: 768px) {.contractor-panel-page #cp-invoice-panel .checkbox-row {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label {display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    min-height: 46px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label input[type="checkbox"] {flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;}}

/* Fixed46: center the View Schedule For label inside the full-width welcome bar. */
@media (min-width: 769px) {
  .contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector label {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector select {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* Fixed15 mobile-only: keep schedule Info details hidden until clicked, and make the Info button compact. */
@media (max-width: 768px) {.contractor-panel-page .cp-dashboard-shell .student-details-row, .contractor-panel-page .cp-dashboard-shell table.preserve-headers .student-details-row, .contractor-panel-page #cp-schedule-panel .student-details-row {display: none !important;}
.contractor-panel-page .cp-dashboard-shell .student-details-row.expanded, .contractor-panel-page .cp-dashboard-shell table.preserve-headers .student-details-row.expanded, .contractor-panel-page #cp-schedule-panel .student-details-row.expanded {display: table-row !important;}
.contractor-panel-page .cp-dashboard-shell .student-details-row td, .contractor-panel-page #cp-schedule-panel .student-details-row td {padding: 8px 10px !important;
    background: #f8fafc !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;}
.contractor-panel-page .cp-dashboard-shell .student-info-toggle, .contractor-panel-page .cp-dashboard-shell table.preserve-headers .student-info-toggle, .contractor-panel-page #cp-schedule-panel .student-info-toggle {display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 42px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    margin-left: 4px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;}}
/* ===== Fixed26: mobile invoice checkbox labels stay beside their checkboxes ===== */
@media (max-width: 768px) {.contractor-panel-page #cp-invoice-panel .checkbox-row {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label {display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    min-height: 46px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label input[type="checkbox"] {flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;}}




/* ===== Fixed16: mobile-only corrections for Info details + Report Student Absence P/A buttons ===== */
@media (max-width: 768px) {/* Keep the schedule/student Info detail rows truly hidden until the existing JS adds .expanded.
     This targets the actual table rows directly and wins over earlier mobile table rules. */
.contractor-panel-page #cp-schedule-panel table tr.student-details-row:not(.expanded), .contractor-panel-page .cp-dashboard-shell table tr.student-details-row:not(.expanded), .contractor-panel-page table.preserve-headers tr.student-details-row:not(.expanded) {display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;}
.contractor-panel-page #cp-schedule-panel table tr.student-details-row:not(.expanded) > td, .contractor-panel-page .cp-dashboard-shell table tr.student-details-row:not(.expanded) > td, .contractor-panel-page table.preserve-headers tr.student-details-row:not(.expanded) > td {display: none !important;
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important;
    max-height: 0 !important;}
.contractor-panel-page #cp-schedule-panel table tr.student-details-row.expanded, .contractor-panel-page .cp-dashboard-shell table tr.student-details-row.expanded, .contractor-panel-page table.preserve-headers tr.student-details-row.expanded {display: table-row !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;}
.contractor-panel-page #cp-schedule-panel .student-info-toggle, .contractor-panel-page .cp-dashboard-shell .student-info-toggle, .contractor-panel-page table.preserve-headers .student-info-toggle {min-width: 34px !important;
    width: auto !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 6px !important;
    margin-left: 3px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;}
/* Report Student Absence: P/A controls must stay small and inside the table cell. */
.contractor-panel-page #cp-attendance-panel table {table-layout: fixed !important;
    width: 100% !important;}
.contractor-panel-page #cp-attendance-panel table td, .contractor-panel-page #cp-attendance-panel table th {overflow-wrap: anywhere !important;}
.contractor-panel-page #cp-attendance-panel table td form, .contractor-panel-page #cp-attendance-panel table td .attendance-actions, .contractor-panel-page #cp-attendance-panel table td .absence-actions, .contractor-panel-page #cp-attendance-panel table td .status-actions, .contractor-panel-page #cp-attendance-panel table td .present-absent-actions, .contractor-panel-page #cp-attendance-panel table td .pa-actions, .contractor-panel-page #cp-attendance-panel table td .button-group {display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;}
.contractor-panel-page #cp-attendance-panel table td button, .contractor-panel-page #cp-attendance-panel table td .button, .contractor-panel-page #cp-attendance-panel table td input[type="submit"], .contractor-panel-page #cp-attendance-panel table td input[type="button"] {flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;}
.contractor-panel-page #cp-attendance-panel table td:last-child {text-align: center !important;}}
/* ===== Fixed26: mobile invoice checkbox labels stay beside their checkboxes ===== */
@media (max-width: 768px) {.contractor-panel-page #cp-invoice-panel .checkbox-row {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label {display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    min-height: 46px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label input[type="checkbox"] {flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;}}




/* ===== Fixed17: mobile-only polish for Share, P/A controls, and Additional Line Items table ===== */
@media (max-width: 768px) {/* Schedule: keep the Share button compact inside the real schedule table. */
.contractor-panel-page #cp-schedule-panel .share-button, .contractor-panel-page #cp-schedule-panel .share-style-button, .contractor-panel-page #cp-schedule-panel a.share-button.share-style-button {width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    margin-left: 6px !important;
    border-radius: 7px !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
    gap: 4px !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;}
.contractor-panel-page #cp-schedule-panel .share-button i, .contractor-panel-page #cp-schedule-panel .share-style-button i {font-size: 0.62rem !important;
    margin-right: 0 !important;}
/* Report Student Absence: make P/A controls truly tiny, even if they are links or inherit global button styles. */
.contractor-panel-page #cp-attendance-panel table {table-layout: fixed !important;
    width: 100% !important;}
.contractor-panel-page #cp-attendance-panel table th:last-child, .contractor-panel-page #cp-attendance-panel table td:last-child {width: 58px !important;
    max-width: 58px !important;
    text-align: center !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    overflow: hidden !important;}
.contractor-panel-page #cp-attendance-panel table td:last-child form, .contractor-panel-page #cp-attendance-panel table td:last-child div, .contractor-panel-page #cp-attendance-panel table td:last-child span {max-width: 100% !important;}
.contractor-panel-page #cp-attendance-panel table td:last-child form, .contractor-panel-page #cp-attendance-panel table td:last-child .attendance-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .absence-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .status-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .present-absent-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .pa-actions, .contractor-panel-page #cp-attendance-panel table td:last-child .button-group {display: inline-grid !important;
    grid-template-columns: 24px 24px !important;
    gap: 3px !important;
    width: 51px !important;
    min-width: 51px !important;
    max-width: 51px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;}
.contractor-panel-page #cp-attendance-panel table td:last-child a, .contractor-panel-page #cp-attendance-panel table td:last-child button, .contractor-panel-page #cp-attendance-panel table td:last-child .button, .contractor-panel-page #cp-attendance-panel table td:last-child .btn, .contractor-panel-page #cp-attendance-panel table td:last-child input[type="submit"], .contractor-panel-page #cp-attendance-panel table td:last-child input[type="button"] {box-sizing: border-box !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;}
/* Invoice Additional Line Items: undo older stacked-card mobile rules and keep it as a compact real table. */
.contractor-panel-page #cp-invoice-panel .line-items-container, .contractor-panel-page #cp-invoice-panel .table-responsive.line-items-container {width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: transparent !important;
    border-radius: 0 !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table, .contractor-panel-page #cp-invoice-panel #line-items-table thead, .contractor-panel-page #cp-invoice-panel #line-items-table tbody {display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table thead {display: table-header-group !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table tbody {display: table-row-group !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table tr {display: table-row !important; width: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th, .contractor-panel-page #cp-invoice-panel #line-items-table td {display: table-cell !important;
    width: auto !important;
    padding: 4px 2px !important;
    border: 1px solid #e6ecef !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    font-size: 0.58rem !important;
    line-height: 1.12 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th {background: #f3f6f8 !important;
    color: #34495e !important;
    font-weight: 800 !important;
    text-align: center !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table td::before, .contractor-panel-page #cp-invoice-panel #line-items-table th::before {content: none !important;
    display: none !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(1), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(1) {width: 18% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(2), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(2) {width: 25% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(3), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(3) {width: 16% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(4), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(4) {width: 13% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(5), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(5) {width: 10% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(6), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(6) {width: 11% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table th:nth-child(7), .contractor-panel-page #cp-invoice-panel #line-items-table td:nth-child(7) {width: 7% !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table input, .contractor-panel-page #cp-invoice-panel #line-items-table select, .contractor-panel-page #cp-invoice-panel #line-items-table textarea {width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 2px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table textarea {height: 36px !important;
    min-height: 36px !important;
    resize: vertical !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table .row-cost {display: block !important;
    width: 100% !important;
    text-align: right !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;}
.contractor-panel-page #cp-invoice-panel #line-items-table .remove-line-item, .contractor-panel-page #cp-invoice-panel #line-items-table button, .contractor-panel-page #cp-invoice-panel #line-items-table input[type="button"], .contractor-panel-page #cp-invoice-panel #line-items-table input[type="submit"] {width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;}
.contractor-panel-page #cp-invoice-panel .line-items-controls {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    margin-top: 12px !important;
    border-radius: 12px !important;}
.contractor-panel-page #cp-invoice-panel .line-items-controls #add-line-item-btn {width: 100% !important;
    min-height: 42px !important;
    font-size: 0.9rem !important;}}
/* ===== Fixed26: mobile invoice checkbox labels stay beside their checkboxes ===== */
@media (max-width: 768px) {.contractor-panel-page #cp-invoice-panel .checkbox-row {display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label {display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    min-height: 46px !important;}
.contractor-panel-page #cp-invoice-panel .checkbox-row label input[type="checkbox"] {flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;}}

/* Fixed45: restore full-width welcome/instructor selector bar on desktop only, scoped to contractor panel. */
@media (min-width: 769px) {
  .contractor-panel-page .panel-intro-message.cp-welcome-bar {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }
  .contractor-panel-page .panel-intro-message.cp-welcome-bar .cp-welcome-main {
    width: 100% !important;
    max-width: none !important;
  }
  .contractor-panel-page .panel-intro-message.cp-welcome-bar .instructor-selector {
    max-width: none !important;
  }
}

/* =========================================================
   Fixed35: Mobile Info rows stay hidden until Info is clicked
   This must stay at the very bottom of the external CSS file.
   It fixes the mobile table/card rules that can make the hidden
   student details row visible after moving styles out of PHP.
   ========================================================= */
.contractor-panel-page tr.student-details-row {
  display: none !important;
}

.contractor-panel-page tr.student-details-row.expanded {
  display: table-row !important;
}

@media (max-width: 768px) {
  .contractor-panel-page table tr.student-details-row,
  .contractor-panel-page table.responsive-stack tr.student-details-row,
  .contractor-panel-page .cp-dashboard-shell table tr.student-details-row,
  .contractor-panel-page #cp-schedule-panel table tr.student-details-row,
  .contractor-panel-page table.preserve-headers tr.student-details-row {
    display: none !important;
    visibility: collapse !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .contractor-panel-page table tr.student-details-row > td,
  .contractor-panel-page table.responsive-stack tr.student-details-row > td,
  .contractor-panel-page .cp-dashboard-shell table tr.student-details-row > td,
  .contractor-panel-page #cp-schedule-panel table tr.student-details-row > td,
  .contractor-panel-page table.preserve-headers tr.student-details-row > td {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .contractor-panel-page table tr.student-details-row.expanded,
  .contractor-panel-page table.responsive-stack tr.student-details-row.expanded,
  .contractor-panel-page .cp-dashboard-shell table tr.student-details-row.expanded,
  .contractor-panel-page #cp-schedule-panel table tr.student-details-row.expanded,
  .contractor-panel-page table.preserve-headers tr.student-details-row.expanded {
    display: table-row !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .contractor-panel-page table tr.student-details-row.expanded > td,
  .contractor-panel-page table.responsive-stack tr.student-details-row.expanded > td,
  .contractor-panel-page .cp-dashboard-shell table tr.student-details-row.expanded > td,
  .contractor-panel-page #cp-schedule-panel table tr.student-details-row.expanded > td,
  .contractor-panel-page table.preserve-headers tr.student-details-row.expanded > td {
    display: table-cell !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px !important;
    border: 1px solid var(--cp-border, #d9e4ec) !important;
    overflow: visible !important;
    background: #f8fafc !important;
  }
}

/* =========================================================
   Contractor panel: absence heading + desktop tab fit
   ========================================================= */
.contractor-panel-page .cp-centered-heading,
.contractor-panel-page .cp-centered-heading h2,
.contractor-panel-page .cp-centered-heading p,
.contractor-panel-page .cp-centered-heading .cp-eyebrow {
  text-align: center !important;
}

.contractor-panel-page .cp-centered-heading {
  align-items: center !important;
}

.contractor-panel-page .cp-centered-heading p {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contractor-panel-page .cp-panel-warning {
  max-width: 760px !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
  font-weight: 500 !important;
}

@media (min-width: 861px) {
  .contractor-panel-page .cp-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .contractor-panel-page .cp-tab {
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .contractor-panel-page .cp-tab i {
    font-size: 0.9rem !important;
  }
}