/* Root / tokens */
:root{
  --primary: #436b95;
  --secondary: #F5F5F5;
  --text: #37474f;
  --border: #DDD;
  --hover: #436b95;
  --nav-active: #365677;
  --table-header: #CCC;
  --table-even: #F2F2F2;
  --table-odd: #E5E4E2;
  --success-color: #4CAF50;
  --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 */
.space-results {
margin-bottom:20px;
}
/* Change password panel */
#change-password-panel {
  width: 100%;
  max-width: none;
  margin: 8px 0 32px;
  display: none;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;
}
#change-password-form { margin: 0; }
#change-password-panel .field-row { margin-bottom: 4px; }
#change-password-panel label { display: block; margin: 0 0 4px 0; }
#change-password-panel input[type="password"] { width: 100%; padding: 6px; box-sizing: border-box; }
#change-password-error { display: none; margin-bottom: 6px; }
.change-password-actions { display: flex; gap: 8px; }

/* Small utility spacing classes (ensure these exist in case main stylesheet doesn't) */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* Invoice form error initial state */
#invoice-form-error { display: none; margin-top: 10px; }

/* Preview table styling used by JS preview content */
.preview-table { width: 100%; border-collapse: collapse; }
.preview-table th, .preview-table td { padding: 6px; border: 1px solid #ddd; text-align: left; }
.preview-grand-total { font-size: 1.1em; text-align: right; }

/* other small visual helpers used in preview output */
.center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }

/* You can extend this stylesheet as needed */

/* === Availability results: single centered column wrapper + uniform card widths === */
.today-badge, .viewing-badge { font-size:11px; color:#fff; padding:2px 6px; border-radius:999px; line-height:1; margin-left:6px; }
.today-badge { background:#e53e3e; }    /* red */
.viewing-badge { background:#38a169; }  /* green */

.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 */
.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 */
.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 */
.availability-course-card *,
.availability-course-card *::before,
.availability-course-card *::after {
  box-sizing: border-box !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.availability-course-card img:not(.availability-avatar) { max-width: 100% !important; height: auto !important; display: block; /* keep block for content images only */ }

.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 */
.availability-course-card .course-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.availability-course-card .course-footer {
  flex: 0 0 auto !important;
}

/* Mobile: keep single stacked column */
@media (max-width: 720px) {
  .availability-results { max-width: 100% !important; padding-left: 12px; padding-right: 12px; }
  .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) */
.availability-results .course-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.availability-results .course-footer .filter-toggle-container {
  margin: 0 !important;
  order: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.availability-results .course-footer .button-wrapper {
  margin: 0 !important;
  order: 1 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}
.availability-results .course-footer .join-waitlist-btn,
.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 */
.availability-results .availability-list + .availability-list {
  margin-top: 14px;
}

/* Shared rounding */
button,
.button,
.blue-button,
input[type="button"],
input[type="submit"],
.action-pill,
.share-button,
.join-waitlist-btn,
.filter-toggle-btn,
.start-button,
.prev,
.next,
.menu-button,
#resetFilters,
.waitlist-text a {
  border-radius: var(--button-radius) !important;
}

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Forms */
form {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  box-shadow: none;
}

legend {
  text-align: center;
}
.blue-button,
.button,
button,
input[type="button"],
input[type="submit"] {
  font-weight: normal;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
select,
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);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0.3125rem var(--primary);
  outline: none;
}

label {
  display: block;
  margin-bottom: 0.3125rem;
  font-weight: bold;
  color: var(--text);
}

/* Base */
body {
  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;
}

h1 { text-align:center; color:#000; font-size:2rem; margin:0; padding-bottom:10px; }
h2 { font-size:1.25rem; margin:0; padding:10px 0; }
h3 { font-size:1.25rem; margin:0; padding-bottom:0; }

ul { margin:0; padding-left:1.25rem; padding-bottom:0; line-height:1.8; }

p { color:var(--text); line-height:1.8; margin:0 0 20px 0; padding-left:0; }
p:last-child { padding-bottom:0; }

a { color:var(--primary); text-decoration:none; transition:color .3s ease; }
a:hover { text-decoration:underline; color:var(--hover); }

/* Header / nav */
.header { display:flex; justify-content:center; align-items:center; padding:10px; background-color:var(--white); }
.logo { max-width:300px; width:100%; }
.logo img { display:block; width:100%; height:auto; margin:0 auto; }

.nav-container { position:sticky; top:0; width:100%; z-index:1000; background-color:var(--white); }
.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;
}
.navbar { display:flex; flex-wrap:wrap; gap:.75rem; padding:.75rem; background:var(--primary); font-size:.9rem; justify-content:center; align-items:center; }
.navbar a, .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;
}
.navbar-active { background-color: rgba(255,255,255,0.1); font-weight:600; }
.navbar a:hover { background-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
.navbar a:active { transform: translateY(1px); }

/* Layout */
.main-wrapper { margin:0 auto; padding:1.25rem 0rem 1.25rem; overflow:hidden; background-color:#f8fbfd; max-width:920px;}
.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; }
.footer-section { flex:1; margin:0 auto; }
.footer-section h2 { margin-bottom:0; }
.footer-section a { color:var(--text); line-height:1.8; display:inline-block; transition:color .3s ease; }
.footer-section a:hover { color:var(--link-hover); }
.social-icons img { width:2.5rem; height:2.5rem; margin-right:.625rem; }
.social-icons img:hover { filter:brightness(1.3); }

/* Slideshow */
.slideshow-wrapper { background:var(--footer-bg); padding:1.25rem; border-radius:.625rem; margin:0 auto; max-width:37.5rem; }
.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); }
.slide { display:none; width:100%; }
.slide img { width:100%; height:auto; display:block; }
.prev, .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;
}
.next { right:.625rem; } .prev { left:.625rem; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,.8); padding:1.25rem; }

/* Tables */
table { width:100%; border-collapse:collapse; border:1px solid var(--border); }
th, td { text-align:left; padding:.71rem; border-bottom:1px solid var(--border); font-size:1.2rem; }
th { background-color:var(--table-header); font-weight:bold; }
tr:nth-child(even) { background-color:var(--table-even); }
tr:nth-child(odd) { background-color:var(--table-odd); }
tr:hover { background-color:var(--white); color:var(--primary); }

/* Shared wrappers */
.general-wrapper { background:var(--white); border:1px solid var(--border); border-radius:.625rem; margin-bottom:1.25rem; overflow:hidden; }
.general-content { display:block; background:var(--white); padding:1.25rem; margin-bottom:0; }

/* Accessible button palette:
   Primary: #1A73B8 (RGB 26,115,184)
   Hover:   #155F9E
*/

/* Register button (.blue-button) */
.blue-button {
  background-color: #1A73B8;
  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(26,115,184,0.08);
  display: inline-flex;
  align-items: center;
  gap: var(--action-gap);
  font-weight: 700;
}
.blue-button:hover { background-color: #155F9E; transform: translateY(-2px); }

/* Promo / messages */
.promo-banner { padding:.625rem 0; text-align:center; }
.error-message, .success-message { padding:.625rem; border-radius:.625rem; margin-bottom:.9375rem; border:1px solid; text-align:center; }
.error-message { background-color:#fdecea; border-color:var(--danger); margin:0 auto 20px; }
.error-header { font-size:1.25rem; font-weight:bold; color:var(--danger); }
.success-message { background-color:#e6f4ea; border-color:var(--success-color); }
.back-button { margin-bottom:20px; display:flex; justify-content:center; }
.center { margin:0 auto; text-align:center; }

/* Index / highlight */
.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; }
.index-left { position:relative; justify-self:start; }
.index-left img { width:100%; height:auto; object-fit:scale-down; border-radius:.625rem; }
.index-right { padding-right:2rem; }
.highlight-box { background: linear-gradient(135deg, #e3f2fd, #fff); padding:3rem 2rem; text-align:center; border-top:1px solid var(--border); }
.highlight-box h2 { margin-bottom:1.5rem; font-size:2rem; }
.highlight-box p { color:#000; font-size:1.2rem; margin-bottom:2rem; }

/* Start button uses same accessible blue */
.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:#1A73B8; box-shadow: 0 8px 24px rgba(26,115,184,0.08);
}
.start-button:hover { background-color:#155F9E; filter:brightness(1.03); transform:translateY(-2px); text-decoration: none; color:#FFF !important; }
.start-button:active { transform:translateY(.0625rem); }

/* Availability & course cards */
.course-card { background:var(--white); border:1px solid var(--border); border-radius:.625rem; margin-bottom:1.25rem; overflow:hidden; }
.course-header { background:var(--secondary); padding:1.25rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.course-header h2 { margin:0; padding:0; }

/* Grid / offerings */
.what-we-offer-wrapper { max-width:900px; margin:0 auto; padding:20px; }
.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; }
.grid-item { border:1px solid #ddd; border-radius:8px; overflow:hidden; text-align:center; padding:15px; background-color:#fff; }
.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; }
.grid-item img:hover { transform:scale(1.02); box-shadow:0 8px 10px rgba(0,0,0,0.15); }
.grid-item h2 { font-size:1.2em; margin:10px 0; color:#37474f; }
.button-group { display:flex; flex-direction:column; gap:10px; }

/* Lesson detail */
.lesson-detail { max-width:900px; margin:20px auto; padding:20px; border:1px solid #ddd; border-radius:8px; background-color:#fff; }
.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; }
.lesson-detail img:hover { transform:scale(1.02); }

/* Filters */
.availability-filter-header { text-align:center; font-size:1.25rem; }
.availability-filter-section-availability { padding:1rem; background:#f9f9f9; border:1px solid #ddd; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; max-width:900px; position:relative; }
.availability-filter-group { margin:.5rem; flex:1 1 30%; display:flex; flex-direction:column; min-width:160px; text-align:center; }
.availability-filter-group label { margin-bottom:.5rem; font-weight:bold; color:#333; display:flex; flex-direction:column; align-items:center; }
.availability-step-circle { background-color:#3498db; 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 */
.availability-course-card { background:var(--white); border:1px solid var(--border); border-radius:.625rem; overflow:hidden; margin:1.25rem auto; max-width:900px; }

/* Container */
.availability-container { display:flex; justify-content:center; align-items:center; height:100%; margin-top:10px; }

/* Reset Filters - made responsive (was fixed 900px before) */
#resetFilters {
  font-size:16px;
  border:none;
  background-color:#7aa5d3;
  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;
}
#resetFilters:hover { background-color:#6184a8; }

/* Instructor avatar */
.availability-instructor-section img.availability-avatar { margin-right:5px; vertical-align:middle; width:50px; height:50px; border-radius:50%; }

/* Availability messages */
.availability-options-message-positive { background-color:#e6f4ea; border:1px solid #4CAF50; color:#2e7d32; 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; }
.availability-options-message-zero { background-color:#fdecea; 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; }

.instructor-section, .spots-section { display:flex; align-items:center; gap:.625rem; }
.course-body { padding:1.25rem; }
.description { margin-bottom:.9375rem; line-height:1.8; text-align:center; }
.schedule { font-style:normal; text-align:center; color:#7f8c8d; }
.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; }
.price { color:var(--success-color); font-size:1.1em; }
.full-notice { color:var(--danger); }

/* Filter section */
.filter-section { padding:1.25rem; border-radius:.625rem; display:flex; gap:.9375rem; flex-wrap:wrap; background:var(--secondary); border:1px solid var(--border); }
.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; }
.filter-dropdown:hover, .filter-dropdown:focus { border-color:var(--primary); outline:none; }

/* Skills list */
.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 */
.register-split { display:flex; gap:1.25rem; margin:0 auto; justify-content:center; }
.form-wrapper { padding:0; margin:0 auto 20px; border:1px solid var(--border); }
.form-wrapper fieldset { border:none; margin:0; padding:0; }
.register-left .register-right { display:flex; align-items:flex-start; flex-wrap:nowrap; border:none; }
.form-field { padding:0; transition:background-color .3s ease; }
.form-field:nth-child(odd) { background-color:var(--secondary); padding:15px; }
.form-field:nth-child(even) { background-color:#fbfbfb; padding:15px; }
.form-field button { display:flex; justify-content:center; margin:0 auto; }
.register-right { flex-direction:column; align-items:flex-start; width:100%; }
.form-field span { flex:1; max-width:80%; word-wrap:break-word; overflow-wrap:break-word; vertical-align:top; }
.register-left, .register-right { flex:1; margin:0; padding:0; text-align:left; vertical-align:top; }

/* Payment */
.payment-split { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; margin:0 auto; max-width:1000px; margin-bottom:20px; }
.payment-left, .payment-right { max-width:500px; background-color:#fff; border:1px solid #ddd; border-radius:.625rem; padding:20px; text-align:center; min-height:375px; }
.payment-left img, .payment-right img { max-width:100%; height:auto; margin-top:15px; }
.payment-right a { color:var(--text); display:inline-block; text-decoration:none; transition:color .3s ease, transform .3s ease; }
.payment-right a:hover { color:var(--hover); transform:scale(1.05); }

/* Status wrapper, misc */
.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; }
.red { color:red; } .green { color:#4CAF50; } .input-medium { width:150px !important; }

/* Instructor */
.instructor { display:flex; flex-direction:row; padding:0; margin:0; align-items:flex-start; }
.instructor img { border-radius:50%; width:150px; height:150px; margin:20px; flex-shrink:0; }
.instructor-details { flex:1; padding:20px; padding-bottom:0; box-sizing:border-box; }
.instructor-skills { background-color:#f5f5f5; padding:8px 12px; border-radius:5px; margin-top:5px; margin-bottom:10px; border-left:4px solid #7aa5d3; vertical-align:middle; }

/* Checkbox / fieldset */
.checkbox-wrapper { display:inline-flex; align-items:center; margin-right:15px; }
fieldset { border:1px solid #FFF; padding:5px; }
legend { font-weight:bold; padding:0 5px; }

/* Responsive adjustments */
@media (min-width:768px) {
  .availability-filter-section { flex-wrap:nowrap; justify-content:space-around; }
}

@media screen and (max-width:48rem) {
  .blue-button, .button, button, input[type="button"], input[type="submit"] { font-weight: normal; }
  body { font-size: 1.1rem; line-height: 1.8; } /* mobile scale up */
  h2 { text-align:center; margin-top:5px; margin-bottom:5px; }
  h3 { font-size:1.25rem; margin:0; padding-bottom:0; text-align:center; }
  p:last-child { padding-bottom:0; }
  .header { flex-direction:column; align-items:center; }
  .logo { max-width:20rem; margin:0 auto; padding-bottom:0; margin-bottom:0; }
  .right-corner { max-width:100%; width:100%; text-align:center; }
  .navbar { display:none; padding:0; flex-direction:column; gap:10px; padding-bottom:15px; position:absolute; width:100%; left:0; top:100%; }
  .navbar.show { display:block; }
  .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); }
  .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); }
  .navbar-active::after, .navbar a:hover::after { display:none; }
  .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; }
  .menu-button i, .menu-button .icon, .menu-button svg { margin-right:.5rem !important; vertical-align:middle !important; }
  .main-wrapper { padding:20px; padding-bottom:0; margin:0; }
  .footer-section { flex:1 1 100%; width:100%; margin-top:10px; margin-bottom:10px; }
  .footer-section:last-child { margin-bottom:0; }
  .footer-section h2 { margin-top:0; margin-bottom:5px; text-align:left; }
  .social-icons { display:flex; justify-content:flex-start; gap:.625rem; padding-bottom:0; }
  .footer-container { padding:20px; box-sizing:border-box; }
  .slideshow-wrapper { display:none; }
  .prev, .next { padding:.75rem; }
  .prev:hover, .next:hover { padding:.875rem; }
  table { border:none; display:block; overflow-x:auto; font-size:0.9rem; }
  thead { display:none; }
  td:before { content: attr(data-label); font-weight:bold; color:var(--hover); display:block; margin-bottom:.313rem; }
  .blue-button { display:block; width:100%; text-align:center; box-sizing:border-box; margin:0; border-radius:var(--button-radius); }
  .index-split { grid-template-columns:1fr; gap:0; padding:20px; padding-bottom:0; margin:0; }
  .index-left { display:block; margin-bottom:0; padding-bottom:0; }
  .index-right { margin-top:0; padding-top:20px; }
  .offer-left { padding-left:20px; }
  .offer-left img { margin:0 auto; }
  .offer-right p { margin-top:0; padding-top:0; }
  .offer-right { margin-top:0; padding-top:0; }
  .offer-split { flex-direction:column; gap:1rem; padding:0; margin:0; }
  .grid-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); padding:0; margin:0; }
  .filter-dropdown { width:100%; min-width:unset; }
  .course-footer { flex-direction:column; text-align:center; gap:10px; }
  .description { text-align:center; }
  .instructor-section, .spots-section { justify-content:center; margin-bottom:10px; }
  .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-split { flex-direction:column; gap:0; padding:0; margin:0; }
  .register-left, .register-right { width:100%; margin:0; padding:0; }
  .register-left .register-fields { flex-direction:column; }
  .register-left .register-fields label { margin:0; padding-right:0; }
  .register-left .register-fields span { max-width:100%; }
  .payment-split { grid-template-columns:1fr; gap:1rem; }
  .payment-left, .payment-right { padding:20px; }
  .instructor { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:0; padding-bottom:0; }
  .instructor img { width:120px; height:120px; display:block; margin:0 auto; margin-top:20px; }
  .instructor-details { padding:20px; width:100%; text-align:left; }
  .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) {
  tr.details,
  tr.details.open,
  tr.details-row,
  tr.details-row.open {
    display: block !important;
    width: 100% !important;
  }
  tr.details td,
  tr.details.open td,
  tr.details-row td,
  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 */
  tr.details td:before,
  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 */
.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;
}
.availability-instructor-section .avatar-fallback {
  background-color:#1A73B8; color:#fff; font-weight:600; font-size:18px; line-height:1; text-transform:uppercase;
}

/* Course card labels */
.availability-course-card.music-camp { position:relative; border: solid 1px #3498db; padding-top:35px; }
.availability-course-card.music-camp::before { content:"Bilingual Music Camp"; position:absolute; top:0; left:0; width:100%; background-color:#3498db; color:white; padding:10px 0; text-align:center; font-size:1em; z-index:10; }
.availability-course-card.group-program { position:relative; border: solid 1px #28a745; padding-top:35px; }
.availability-course-card.group-program::before { content:"Group Program Fall 2025"; position:absolute; top:0; left:0; width:100%; background-color:#28a745; color:white; padding:10px 0; text-align:center; font-size:1em; z-index:10; }
.availability-course-card.music-camp .course-header, .availability-course-card.group-program .course-header { padding-top:40px; }

/* Filter toggle */
.filter-toggle-container { margin-top:15px; text-align:right; }
.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); }
.filter-toggle-btn:hover { background-color:#F1F1F1; transform:translateY(-1px); }
.filter-content { display:none; }
.filter-content.show { display:block; }

/* Term info / waitlist */
.term-info-container { max-width:900px; margin:0 auto 10px; padding:0 15px; font-size:1em; color:#333; line-height:1.5; }
.waitlist-text { flex:1; min-width:250px; font-weight:600; color:#1A73B8; }
.waitlist-section { display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px; flex-wrap:wrap; }

/* Course footer / button wrapper */
.course-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; }
.button-wrapper { display:flex; align-items:center; gap:10px; position:relative; }

/* Action-pill & share (use accessible primary) */
.action-pill, .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;
}
.join-waitlist-btn {
  background-color:#1A73B8; color:#fff; box-shadow:0 10px 30px rgba(26,115,184,0.08); border:0; display:inline-flex; align-items:center; gap:var(--action-gap); font-weight:700;
}
.join-waitlist-btn:hover { transform:translateY(-2px); background-color:#155F9E; color:#fff; text-decoration: none; }
.share-button { background-color:#1A73B8; color:#fff; border:0; box-shadow:0 8px 20px rgba(26,115,184,0.08); }
.share-button:hover { transform:translateY(-2px); background-color:#155F9E; box-shadow:0 10px 26px rgba(26,115,184,0.10); }

/* Icon sizing inside action buttons */
.share-button i, .blue-button i, .join-waitlist-btn i { font-size:14px; line-height:1; display:inline-block; }

/* Share options dropdown */
.share-options {
  position:absolute; bottom:110%; right:0; background:#fff; border:1px solid #ddd; 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;
}
.share-options.show { display:flex; }
.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; }
.share-option-link:hover { background:#f1f1f1; color:#000; }

/* Capacity panel (kept) */
.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;
}
.capacity-left { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:860px; }
.capacity-circles { display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; }

/* Circle stats */
.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;
}
.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); }
.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); }
.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; }
.circle:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(47,84,235,0.12); }
.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); }
.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 */
.capacity-progress { width:100%; max-width:720px; display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:6px; }
.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); }
.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; }
.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 */
.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) {
  .capacity-container { padding:14px 18px; }
  .circle { width:100px; height:100px; padding:12px; }
  .circle-number { font-size:clamp(20px,6.5vw,30px); }
  .circle-label { font-size:12px; }
  .progress-track { height:28px; }
  .progress-text { font-size:18px; padding:8px 10px; border-radius:8px; }
  .capacity-instruction { font-size:15px; padding:10px 14px; border-radius:10px; text-align:center; }
  .controls-container { flex-direction:column; align-items:stretch; gap:10px; }
  .join-waitlist-btn.action-pill, .filter-toggle-btn.action-pill { width:100%; min-width:0; }
  .availability-list, .filter-content { padding-left:12px; padding-right:12px; }
}

@media (max-width:768px) {
  .circle { width:92px; height:92px; padding:8px; }
  .circle-number { font-size:clamp(16px,7vw,24px); margin-bottom:4px; }
  .circle-label { font-size:11px; line-height:1; padding:0 6px; max-height:2.2em; overflow:hidden; }
  .progress-track { height:26px; }
  .progress-text { font-size:16px; padding:8px 8px; }
  .capacity-container { padding:10px 12px; }
  .capacity-instruction { font-size:14px; padding:10px 12px; border-radius:10px; text-align:center; }
  .main-wrapper { padding-left:15px; padding-right:15px; box-sizing:border-box; max-width:100%; overflow-x:hidden; }
  .term-info-container, .filter-content, .availability-list, .availability-container, /* #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;
  }
  .action-pill, .blue-button, .share-button, .join-waitlist-btn, .filter-toggle-btn, .term-info-container .blue-button, .waitlist-text a, #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;
  }
  .waitlist-text a { padding:12px 15px; border-radius:var(--button-radius); border:1px solid #1A73B8; background-color:transparent; color:#1A73B8; text-decoration:none; font-weight:700; line-height:normal !important; }
  .waitlist-text a:hover { background-color:#1A73B8; color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,115,184,0.10); }
  .button-wrapper, .course-footer, .controls-container, .waitlist-section, .filter-toggle-container { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important; width:100% !important; }
  .waitlist-text { flex:none !important; width:100% !important; text-align:center !important; }
  .button-wrapper > * + *, .course-footer > * + *, .controls-container > * + *, .waitlist-section > * + *, .availability-container > * + * { margin-top:8px !important; margin-left:0 !important; margin-right:0 !important; }
  .button-wrapper > *:first-child, .course-footer > *:first-child, .controls-container > *:first-child, .waitlist-section > *:first-child, .availability-container > *:first-child { margin-top:0 !important; }
  .share-options { display:none; }
  .share-options.show { display:flex; }
}

/* Controls + layout */
.controls-wrapper { max-width: var(--controls-max-width); margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; box-sizing:border-box; }
.controls-container { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:22px 0; }

/* Waitlist note */
.waitlist-note { font-size:0.95em; color:#2e5d85; margin-left:8px; }

/* Availability list width */
.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 */
.filter-content { display:none; max-width: var(--controls-max-width); margin:12px auto; padding-left:15px; padding-right:15px; box-sizing:border-box; }
.filter-content.show { display:block; }

/* Misc tweaks */
.share-options { position:absolute; bottom:110%; right:0; }
.full-notice { color: var(--danger); font-weight:normal; }

/* Accessibility focus outlines */
.action-pill:focus, .blue-button:focus, .share-button:focus, .filter-toggle-btn:focus, .join-waitlist-btn:focus, .waitlist-text a:focus, #resetFilters:focus {
  outline: 3px solid rgba(26,115,184,0.14);
  outline-offset: 2px;
}

/* Icon spacing + bold button text */
.blue-button,
.join-waitlist-btn,
.action-pill,
.share-button,
.filter-toggle-btn,
.start-button,
.waitlist-text a {
  display:inline-flex !important;
  align-items:center;
  gap: var(--action-gap);
}
.blue-button,
.join-waitlist-btn,
.action-pill,
.share-button,
.filter-toggle-btn,
.start-button,
button,
input[type="button"],
input[type="submit"],
.menu-button,
.waitlist-text a {
  font-weight: 700 !important;
}

/* Fallback icon spacing */
.blue-button i, .blue-button .icon, .join-waitlist-btn i, .join-waitlist-btn .icon, .action-pill i, .action-pill .icon, .share-button i, .share-button .icon {
  margin-right: var(--action-gap);
  line-height: 1;
  display: inline-block;
}
.blue-button .icon-after, .join-waitlist-btn .icon-after, .action-pill .icon-after, .share-button .icon-after { margin-left: var(--action-gap); }

/* Mobile button centering */
@media (max-width:768px) {
  .blue-button, .join-waitlist-btn, .action-pill, .share-button { justify-content:center; width:100%; box-sizing:border-box; }
  .join-waitlist-btn i, .join-waitlist-btn .icon, .join-waitlist-btn svg, .blue-button i, .blue-button .icon, .blue-button svg, .share-button i, .share-button .icon, .share-button svg {
    margin-right: var(--action-gap);
  }
}

/* Mobile: remove nav radius only */
@media (max-width:48rem) {
  .navbar, .navbar.show, .navbar a, .navbar-active, .menu-button { border-radius: 0 !important; }
}

/* Ensure centered text for buttons */
button, .button, .blue-button, .share-button, .join-waitlist-btn, .action-pill, .filter-toggle-btn, .start-button, input[type="button"], input[type="submit"], .menu-button, #resetFilters, .waitlist-text a, .prev, .next {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Mobile: left-align menu-button content */
@media (max-width:48rem) {
  .menu-button { display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; padding-left:.75rem !important; }
  .menu-button i, .menu-button .icon, .menu-button svg { margin-right:.5rem !important; vertical-align:middle !important; }
}

/* Specific ID styles */
#add-line-item-btn {
  background-color: #1A73B8;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: var(--button-radius);
  cursor: pointer;
}
#add-line-item-btn:hover { background-color: #155F9E; }

/* Progress track & fill (ensures full fill) */
.progress-track { background: #e6e6e6; border-radius:12px; height:30px; overflow:hidden; box-sizing:border-box; }
.progress-fill { display:block; height:100%; width:0%; transition: width 800ms ease; background: #2b90ff; border-radius:12px; }

/* Small helpers */
.capacity-circles { display:flex; gap:12px; }
.capacity-instruction { margin-top:8px; }

/* Appended fixes requested */
/* 1) Hide .hidden or #optionsMessage.hidden */
.hidden, #optionsMessage.hidden { display:none !important; margin:0 !important; padding:0 !important; height:0 !important; overflow:hidden !important; }

/* 2) Reduced vertical margins on availability messages */
.availability-options-message-positive, .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 */
.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 */
button[type="submit"].submit-button,
button.submit-button,
.blue-button.submit-button {
  display:inline-flex;
  align-items:center;
  gap:var(--action-gap);
  justify-content:center;
}

/* Icon inside button (svg or <i>) */
button.submit-button .btn-icon,
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) */
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 */
input[type="submit"].with-icon,
input[type="submit"].btn,
button[type="submit"].btn {
  background-color:#1A73B8;
  color:#fff;
  border:0;
  padding:12px 24px;
  border-radius:var(--button-radius);
  box-shadow:0 8px 24px rgba(26,115,184,0.08);
  cursor:pointer;
  font-weight:700;
}
input[type="submit"].with-icon:hover,
button[type="submit"].btn:hover { background-color:#155F9E; transform: translateY(-2px); }

/* Fallback spacing for <i> icon elements inside buttons */
.blue-button i,
.blue-button .icon,
.join-waitlist-btn i,
.join-waitlist-btn .icon,
.action-pill i,
.action-pill .icon,
.share-button i,
.share-button .icon {
  margin-right: var(--action-gap);
  line-height: 1;
  display: inline-block;
}

/* Accessibility focus outlines */
.action-pill:focus, .blue-button:focus, .share-button:focus, .filter-toggle-btn:focus, .join-waitlist-btn:focus, .waitlist-text a:focus, #resetFilters:focus {
  outline: 3px solid rgba(26,115,184,0.14);
  outline-offset: 2px;
}

/* End of stylesheet */

@media screen and (max-width:48rem) { /* Make the expanded/details row fill the full container width on mobile */
  tr.details, tr.details.open, tr.details-row, tr.details-row.open { display: block !important; width: 100% !important; }
  tr.details td, tr.details.open td, tr.details-row td, 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 */
  tr.details td:before, 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 */
.mt-8 { margin-top: 8px; }
.mr-8 { margin-right: 8px; }
.ml-auto { margin-left: auto; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.center { text-align: center; }

/* Global moderate-label spacing:
   Use a modest spacing so text labels sit comfortably above controls. */
label {
  display: block;
  margin-bottom: 6px !important;    /* <-- increased a bit */
  line-height: 1.2 !important;
}
input, textarea, select, .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> */
.no-gap-label { margin-bottom: 0 !important; }
.no-gap-control { margin-top: 0 !important; }

/* Reduce spacing inside .form-group variants while keeping label gap */
.form-group,
.form-row,
.field-row {
  margin-bottom: 8px !important;
  padding: 0;
}

/* Reduce spacing for inline help/error text that often increases gap */
.form-text,
.form-help,
.field-help,
.input-help,
.error-help,
.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) {
  .lesson-earnings-responsive table th:nth-child(7),
  .lesson-earnings-responsive table td:nth-child(7) {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Login Form */
.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; } 
.login-form h2 { font-size: 1.8em; margin-bottom: 20px; color: #333; } 
.login-form label { font-size: 1.1em; margin-bottom: 6px !important; display: block; text-align: left; color: #333; } 
.login-form input { width: 100%; padding: 12px; margin: 6px 0 10px !important; border-radius: 5px; border: 1px solid #ddd; font-size: 1em; box-sizing: border-box; transition: border 0.3s ease; } 
.login-form input:focus { border-color: #3498db; outline: none; } 
.login-form button { background-color: #3498db; color: white; padding: 12px 20px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; width: 100%; } 
.login-form button:hover { background-color: #2980b9; } 
.login-form .error, .form-message.error { color: #ff4d4d; background-color: #fff0f0; padding: 10px; border-radius: 5px; font-size: 1em; margin-bottom: 15px; border: 1px solid #ff4d4d; text-align:center;} 
.form-message.success { color: #28a745; background-color: #e6ffed; padding: 10px; border-radius: 5px; font-size: 1em; margin-bottom: 15px; border: 1px solid #28a745; text-align:center;} 

/* Panel Intro Message */ 
.panel-intro-message { background-color: #e6f7ff; border: 1px solid #91d5ff; border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } 
.panel-intro-message .welcome-message { font-size: 1.2em; font-weight: bold; color: #0050b3; margin: 0; } 

/* Instructor Selector (within intro message) */ 
.instructor-selector { display: flex; align-items: center; justify-content: center; gap: 10px; } 
.instructor-selector label { font-weight: bold; font-size: 1em; margin-right: 6px; color: #333; } 
.instructor-selector select { padding: 8px 12px; border-radius: 5px; border: 1px solid #ccc; font-size: 1em; background-color: #fff; cursor: pointer; min-width: 150px; } 
.instructor-selector select:focus { border-color: #3498db; outline: none; } 

/* Welcome Container (Buttons) */ 
.welcome-container { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } 
.welcome-container a, .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; } 
.change-password-button { background-color: #95a5a6; } 
.change-password-button:hover { background-color: #7f8c8d; } 
.print-schedule-button { background-color: #28a745; } 
.print-schedule-button:hover { background-color: #218838; } 
.logout-button { background-color: #ff4d4d; } 
.logout-button:hover { background-color: #ff1a1a; } 

/* Primary action (Submit invoice / Add line item) - unified look */ 
#add-line-item-btn, .submit-invoice-button { background-color: #0069d9; 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; } 
#add-line-item-btn { background-color: #17a2b8; } 
#add-line-item-btn:hover, .submit-invoice-button:hover { background-color: #0053a6; transform: translateY(-1px); } 
#add-line-item-btn:active, .submit-invoice-button:active { transform: translateY(0); } 
.btn-warning { background:#ffc107; color:#000; }
.btn-muted { background:#6c757d; }

/* Invoice form action group: center the Add Invoice Details / Preview / Submit buttons */
.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. */
.invoice-form-actions details { transition: all .15s ease; }
.invoice-form-actions details[open] { flex: 1 1 100%; width: 100%; margin-bottom: 12px; }

/* Ensure the action buttons do not expand/shrink unexpectedly */
.invoice-form-actions > button,
.invoice-form-actions .submit-invoice-button,
.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 */
#add-line-item-btn { margin-bottom: 14px; }

/* Change Password Form (hidden by default) */ 
.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; } 
.change-password-form input { width: 100%; padding: 12px; margin: 6px 0 10px !important; border-radius: 5px; border: 1px solid #ddd; font-size: 1em; box-sizing: border-box; } 
.change-password-form button { background-color: #3498db; color: white; padding: 12px 20px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; } 
.change-password-form button:hover { background-color: #2980b9; } 

/* Instructor Profile */ 
.instructor-profile { display: flex; align-items: flex-start; margin-bottom: 20px; background-color: #fff; padding: 20px; border-radius: 8px; border: solid 1px #CCCCCC; } 
.instructor-profile .profile-image { flex: 0 0 150px; margin-right: 20px; border-radius: 50%; overflow: hidden; width: 150px; height: 150px; flex-shrink: 0; } 
.instructor-profile .profile-image img { width: 100%; height: 100%; object-fit: cover; } 
.instructor-profile .profile-info { flex: 1; } 
.instructor-profile .profile-info h3 { margin-bottom: 10px; font-size: 1.5em; } 
.instructor-profile .profile-info p { margin: 5px 0; font-size: 1.1em; } 

/* Day Tabs */ 
.day-tabs { margin-top: 20px; margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; } 
.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; } 
.day-tab:hover { background-color: #aaa; text-decoration: none; } 
.day-tab.active { background-color: #ccc; } 
.day-tab.disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } 

/* Schedule & tables */ 
.schedule-day-heading { text-align: center; margin-bottom: 20px; } 
h2.schedule-day-heading { text-align: center; margin-bottom: 20px; font-size: 1.2em; }

table { font-size: 1em; width: 100%; border-collapse: collapse; margin-bottom: 15px; background-color: #fff; } 
th, td { font-size: 1em; padding: 8px; border: 1px solid #ddd; text-align: left; vertical-align: top; } 
th { background-color: #f4f4f4; font-weight: bold; color: #555; } 
.break { background-color: #fff7e6 !important; color: #b36b00; text-align: center; } 
.available { background-color: #d4f7d4 !important; color: #2e7d32; text-align: center; } 
.available-badge { text-transform: uppercase; pointer-events: none; } 

/* Student Details Row (expandable) */ 
.student-details-row { background-color: #f9f9f9; font-size: 0.9em; border-top: none; display: none; } 
.student-details-row td { padding: 10px 20px; border-top: none; } 
.student-details-row strong { display: inline-block; min-width: 80px; } 
.student-details-row.expanded { display: table-row; } 

/* Share Button */ 
.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; } 
.share-style-button:hover { background-color: #138496; color: white; text-decoration: none; } 

/* Payment Legend */ 
.legend { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 8px 0 16px; font-size: 0.95em; color: #333; flex-wrap: wrap; } 
.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); } 
.legend .paid-icon { display: inline-block; width: 1.1em; text-align: center; font-weight: bold; line-height: 1; font-size: 1.1em; } 
.paid-yes { color: #28a745; } 
.paid-no { color: #dc3545; } 
.paid-late{ color: #ff9800; } 

/* Lesson Logs Review Section */ 
.lesson-logs-review { margin-top: 20px; border: 1px solid #ccc; border-radius: 8px; padding: 15px; background-color: #fcfcfc; } 
.lesson-logs-review summary { font-weight: bold; font-size: 1.2em; cursor: pointer; color: #34495e; } 
.lesson-logs-review table { margin-top: 15px; font-size: 0.9em; } 
.lesson-logs-review table th, .lesson-logs-review table td { padding: 8px; border: 1px solid #e9ecef; } 
.lesson-logs-review table th { background-color: #f2f2f2; } 
.lesson-logs-review .total-row td { font-weight: bold; background-color: #e9ecef; } 

/* Utility: horizontal scroll wrapper for wide tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } 
.table-responsive table { min-width: 640px; } 

/* Support class for hiding description cell */
.hidden { display: none !important; }

/* Responsive Adjustments */ 
@media (max-width: 768px) { 
  .main-wrapper { margin: 10px; padding: 10px; } 
  h1 { font-size: 1.8em; } 
  h2 { font-size: 1.5em; } 
  h3 { font-size: 1.3em; } 
  .instructor-profile { flex-direction: column; align-items: center; padding: 15px; text-align: center; } 
  .instructor-profile .profile-image { margin: 0 0 15px 0; } 
  .instructor-profile .profile-info { width: 100%; } 
  .welcome-container { flex-direction: column; align-items: stretch; } 
  .welcome-container a, .welcome-container button { width: 100%; justify-content: center; } 
  .instructor-selector { flex-direction: column; align-items: stretch; } 
  .instructor-selector select { width: 100%; } 
  table, .lesson-logs-review table { width: 100%; } 
  table.responsive-stack thead, .lesson-logs-review table.responsive-stack thead { display: none; } 
  table.responsive-stack, table.responsive-stack tbody, table.responsive-stack tr, table.responsive-stack td { display: block; width: 100%; } 
  table.responsive-stack tbody tr { display: block; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 8px; padding: 8px; background: #fff; box-sizing: border-box; overflow: hidden; } 
  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; } 
  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; } 
  table.responsive-stack .student-details-row, .lesson-logs-review table.responsive-stack .student-details-row { display: none !important; } 
  table.responsive-stack .student-details-row.expanded, .lesson-logs-review table.responsive-stack .student-details-row.expanded { display: block !important; } 
  .student-name-toggle { display: block; width: 100%; text-align: right; } 
  .available-badge { float: left; margin-right: 10px; } 
  .share-style-button { float: right; margin-left: 0; } 
  .break td { text-align: center !important; } 
  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 */
  #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 */
  .invoice-form-actions .submit-invoice-button,
  .invoice-form-actions #toggle-invoice-extras-btn,
  .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 */
  .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 */
  .line-items-controls > #add-line-item-btn { order: 1; width: 100%; margin: 0; }
  /* Place the total under the button, centered */
  .line-items-controls > .ml-auto {
    order: 2;
    margin-left: 0 !important;
    text-align: center;
    width: 100%;
    display: block;
  }
  .line-items-controls > .ml-auto #line-items-total { display: inline-block; margin-left: 6px; }

  /* Store visual styles for line-items table when stacked */
  #line-items-table .remove-line-item { background: #ff4d4d; color: #fff; border-radius: 6px; padding: 10px; border: none; font-weight: 700; width: 100%; box-sizing: border-box; } 
  #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 */
  #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; } 
  #line-items-table thead { display: none !important; } 
  #line-items-table, #line-items-table tbody, #line-items-table tr, #line-items-table td, #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 */
  #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) */
  #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 */
  #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; } 
  #line-items-table tr td:nth-child(1):before { content: "Type" !important; }
  #line-items-table tr td:nth-child(2):before { content: "Description" !important; }
  #line-items-table tr td:nth-child(3):before { content: "Date" !important; }
  #line-items-table tr td:nth-child(4):before { content: "Rate per hour" !important; }
  #line-items-table tr td:nth-child(5):before { content: "Hours" !important; }
  #line-items-table tr td:nth-child(6):before { content: "Cost" !important; }
  #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 */
  #line-items-table td, #line-items-table td * { text-align: left !important; }

  /* Override any inline width styles added by JS */
  #line-items-table select[name="line_item_type[]"], #line-items-table input[name="line_item_rate[]"], #line-items-table input[name="line_item_quantity[]"], #line-items-table input[name="line_item_description[]"], #line-items-table input[name="line_item_date[]"], #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 */
  #line-items-table input[name="line_item_cost[]"] { display: none !important; }

  /* Keep visible cost text compact and left aligned */
  #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 */
  #line-items-table td input, #line-items-table td textarea { overflow-wrap: break-word; word-break: break-word; }

  /* Remove default number spinner to keep compact layout */
  #line-items-table input[type="number"]::-webkit-outer-spin-button, #line-items-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #line-items-table input[type="number"] { -moz-appearance: textfield; }

  /* Ensure remove button doesn't overflow */
  #line-items-table .remove-line-item { box-sizing: border-box; width: 100% !important; display: inline-block !important; }

  .legend { flex-direction: column; align-items: stretch; gap: 8px; justify-content: flex-start; }
  .legend-item { display: flex; width: 100%; justify-content: flex-start; align-items: center; padding: 10px 12px; gap: 12px; white-space: normal; }
  .legend .paid-icon { flex: 0 0 auto; margin-right: 6px; width: 1.2em; text-align: center; }
  .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 */
  .invoice-extras h4 { text-align: center !important; }
  .invoice-extras .mt-8 { text-align: center !important; } /* targets the CSV explanatory paragraph which uses .mt-8 */
  .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 */
  .invoice-extras label,
  .invoice-extras .checkbox-row label,
  .login-form label,
  .change-password-form label,
  .lesson-logs-review label {
    margin-bottom: 6px !important;
    display: block;
    line-height: 1.2 !important;
  }
  .invoice-extras input,
  .invoice-extras textarea,
  .invoice-extras select,
  .login-form input,
  .change-password-form input,
  .lesson-logs-review input,
  .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 */
#line-items-table th.hidden,
#line-items-table td.hidden,
#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) {
  .lesson-logs-review table { display: table !important; width: 100% !important; table-layout: auto !important; overflow-x: auto; }
  .lesson-logs-review table thead { display: table-header-group !important; }
  .lesson-logs-review table tbody { display: table-row-group !important; }
  .lesson-logs-review table tr { display: table-row !important; }
  .lesson-logs-review table th, .lesson-logs-review table td { display: table-cell !important; white-space: normal !important; }
  .lesson-logs-review table td::before, .lesson-logs-review table td::after { content: none !important; }
  .lesson-logs-review table.responsive-stack, .lesson-logs-review table.responsive-stack tbody, .lesson-logs-review table.responsive-stack tr, .lesson-logs-review table.responsive-stack td, .lesson-logs-review table.responsive-stack th { display: table-row-group !important; }
  .lesson-logs-review table.responsive-stack td, .lesson-logs-review table.responsive-stack th { display: table-cell !important; }
  .lesson-logs-review table .student-details-row { display: none !important; }
  .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) {
  table.preserve-headers, .preserve-headers { display: table !important; width: 100% !important; table-layout: auto !important; overflow-x: auto; }
  table.preserve-headers thead, .preserve-headers thead { display: table-header-group !important; }
  table.preserve-headers tbody, .preserve-headers tbody { display: table-row-group !important; }
  table.preserve-headers tr, .preserve-headers tr { display: table-row !important; }
  table.preserve-headers th, table.preserve-headers td, .preserve-headers th, .preserve-headers td { display: table-cell !important; white-space: normal !important; }
  table.preserve-headers td::before, table.preserve-headers td::after, .preserve-headers td::before, .preserve-headers td::after { content: none !important; }
  table.preserve-headers.responsive-stack, table.preserve-headers.responsive-stack tbody, table.preserve-headers.responsive-stack tr, table.preserve-headers.responsive-stack td, table.preserve-headers.responsive-stack th, .preserve-headers.responsive-stack, .preserve-headers.responsive-stack tbody, .preserve-headers.responsive-stack tr, .preserve-headers.responsive-stack td, .preserve-headers.responsive-stack th { display: table-row-group !important; }
  table.preserve-headers.responsive-stack td, table.preserve-headers.responsive-stack th, .preserve-headers.responsive-stack td, .preserve-headers.responsive-stack th { display: table-cell !important; }
  table.preserve-headers .student-details-row, .preserve-headers .student-details-row { display: none !important; }
  table.preserve-headers .student-details-row.expanded, .preserve-headers .student-details-row.expanded { display: table-row !important; }
}

/* Print Styles */ 
@media print { 
  body { background-color: #fff !important; } 
  .main-wrapper { margin: 0; padding: 0; box-shadow: none; border-radius: 0; } 
  .secondary-wrapper { padding: 0; } 
  .nav-container, .welcome-container, .instructor-selector, .panel-intro-message, .change-password-form, .legend, .share-button, .student_details_row, .instructor-profile .profile-image, .lesson-logs-review, .submit-invoice-button, .form-message { display: none !important; } 
  h1 { display: block !important; text-align: center; margin-bottom: 20px; font-size: 2em; } 
  h2.schedule-day-heading { display: block !important; text-align: center; margin-top: 20px; font-size: 1.5em; } 
  table { width: 100%; border-collapse: collapse; page-break-inside: auto; margin-top: 15px; } 
  tr { page-break-inside: avoid; page-break-after: auto; } 
  thead { display: table-header-group; } 
  th, td { border: 1px solid #000; padding: 8px; font-size: 0.9em; color: #000 !important; background-color: #fff !important; } 
  .break, .available { background-color: #fff !important; color: #000 !important; } 
  .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. */
.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;
}
.preview-modal.open { display: flex !important; }

/* Modal inner should be constrained to viewport height and scroll internally */
.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 */
.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) {
  .day-tab { padding:6px 8px; font-size:14px; }
  .today-badge, .viewing-badge { font-size:10px; padding:1px 5px; }
}

/* Mobile-only: make the per-lesson earnings table horizontally scrollable */
@media (max-width: 768px) {
  .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;
  }

  .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;
  }

  .lesson-earnings-responsive th,
  .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) {
  .lesson-earnings-responsive table { min-width: 560px; }
}
@media (max-width: 768px) { /* Make Schedule & Calculation Breakdown match Draft Invoice table size on mobile */ .preserve-headers, .preserve-headers table, .lesson-earnings-responsive table, .calc-breakdown-body table { font-size: 1em !important; } .preserve-headers th, .preserve-headers td, .lesson-earnings-responsive th, .lesson-earnings-responsive td, .calc-breakdown-body th, .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) {
  .lesson-logs-review table,
  .preserve-headers,
  .preserve-headers table,
  .lesson-earnings-responsive table,
  .calc-breakdown-body table {
    font-size: 0.9rem !important; /* match Draft Invoice table font-size on mobile */
  }

  .preserve-headers th,
  .preserve-headers td,
  .lesson-earnings-responsive th,
  .lesson-earnings-responsive td,
  .calc-breakdown-body th,
  .calc-breakdown-body td,
  .lesson-logs-review th,
  .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 */
.login-form input#username,
.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). */
table.preserve-headers:not(#line-items-table) tr.break,
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 */
table.preserve-headers:not(#line-items-table) tr.break:hover,
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) */
.preserve-headers,
.lesson-earnings-responsive table,
.lesson-logs-review table,
.calc-breakdown-body table {
  border-collapse: collapse !important;
}

/* Zebra rows for tbody */
.preserve-headers tbody tr:nth-child(odd),
.lesson-earnings-responsive table tbody tr:nth-child(odd),
.lesson-logs-review table tbody tr:nth-child(odd),
.calc-breakdown-body table tbody tr:nth-child(odd) {
  background-color: var(--table-odd) !important;
}
.preserve-headers tbody tr:nth-child(even),
.lesson-earnings-responsive table tbody tr:nth-child(even),
.lesson-logs-review table tbody tr:nth-child(even),
.calc-breakdown-body table tbody tr:nth-child(even) {
  background-color: var(--table-even) !important;
}

/* Make tfoot rows visually consistent with the body striping */
.preserve-headers tfoot tr,
.lesson-earnings-responsive table tfoot tr,
.lesson-logs-review table tfoot tr,
.calc-breakdown-body table tfoot tr {
  background-color: var(--table-even) !important;
}

/* Ensure header stays the lighter header stripe */
.preserve-headers thead th,
.lesson-earnings-responsive table thead th,
.lesson-logs-review table thead th,
.calc-breakdown-body table thead th {
  background-color: var(--table-even) !important;
}

/* Draft status color */
.draft-status {
  color: #4CAF50;
}

/* ---- Harmonize table text sizes on desktop ---- */
@media (min-width: 769px) {
  .preserve-headers,
  .lesson-earnings-responsive,
  .lesson-earnings-responsive table,
  .lesson-logs-review,
  .lesson-logs-review table,
  .calc-breakdown-body table {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .preserve-headers th,
  .lesson-earnings-responsive th,
  .lesson-earnings-responsive table th,
  .lesson-logs-review table th,
  .calc-breakdown-body table thead th,
  .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;
  }

  .preserve-headers td,
  .lesson-earnings-responsive td,
  .lesson-earnings-responsive table td,
  .lesson-logs-review table td,
  .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 */
  #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 */
  #line-items-table th,
  #line-items-table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #line-items-table td:last-child {
    white-space: nowrap !important; /* actions column stays compact */
  }

  /* allow description column (if present) to expand/wrap */
  #line-items-table th.description,
  #line-items-table td.description {
    white-space: normal !important;
  }
}

/* --- Base / mobile-first rules for #line-items-table --- */
.line-items-container {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.5rem;
}

#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 */
#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. */
#line-items-table thead th,
#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 */
#line-items-table:hover thead th,
#line-items-table thead th:hover,
#line-items-table thead th:focus,
#line-items-table thead th:active,
#line-items-table thead th *:hover,
#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) */
#line-items-table th,
#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" */
#line-items-table th.description,
#line-items-table td.description {
  white-space: normal !important;
  word-break: break-word !important;
}

/* actions column layout */
#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 */
#line-items-table button,
#line-items-table .btn,
#line-items-table input[type="button"],
#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 */
#line-items-table td:last-child .btn + .btn,
#line-items-table td:last-child button + button,
#line-items-table td:last-child .btn + button,
#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. */
#line-items-table thead th { background-color: var(--table-even) !important; }
#line-items-table tbody tr:nth-child(odd)  { background-color: var(--table-odd)  !important; }  /* 1st body row = darker */
#line-items-table tbody tr:nth-child(even) { background-color: var(--table-even) !important; } /* 2nd body row = lighter */

/* Hover should only affect tbody rows */
#line-items-table tbody tr:hover {
  background-color: var(--white) !important;
  color: var(--primary) !important;
}

/* Ensure cell backgrounds don't override the row stripes */
#line-items-table td,
#line-items-table th {
  background: transparent !important;
}

/* consistent padding for body cells */
#line-items-table tbody tr td {
  padding: .56rem .71rem !important;
}

/* remove any pseudo labels */
#line-items-table td::before,
#line-items-table th::before,
#line-items-table td[data-label]::before { content: none !important; display: none !important; }

/* ----- Mobile-specific adjustments (max-width: 48rem) ----- */
@media (max-width:48rem) {
  .line-items-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-right: 0.5rem; }

  #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;
  }

  #line-items-table thead  { display: table-header-group !important; visibility: visible !important; }
  #line-items-table tbody  { display: table-row-group !important; }
  #line-items-table tfoot  { display: table-row-group !important; }
  #line-items-table tr     { display: table-row !important; }

  #line-items-table th,
  #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;
  }

  #line-items-table thead th { font-size: 0.9rem !important; padding: .56rem !important; }

  #line-items-table td:last-child {
    flex-wrap: wrap !important;
    gap: .4rem !important;
    justify-content: flex-end !important;
    padding-right: .25rem !important;
  }

  #line-items-table td:last-child .btn,
  #line-items-table td:last-child button,
  #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;
  }

  #line-items-table td:last-child .btn svg,
  #line-items-table td:last-child .btn i,
  #line-items-table td:last-child button svg,
  #line-items-table td:last-child button i { margin-right: .28rem !important; }

  #line-items-table input[type="hidden"] { display: none !important; }

  #line-items-table input,
  #line-items-table select,
  #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 */
  .filter-content,
  .availability-results,
  .availability-list,
  .availability-container,
  .controls-wrapper,
  .availability-options-message-positive,
  .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 */
  #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 */
  #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) */
.availability-results .space-results > .availability-course-card:not(:last-child),
.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 */
.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 */
#groupCourses:not(:empty) {
  margin-bottom: 32px !important;   /* change 32px to adjust section separation */
}

/* Optional: center cards consistently while keeping the gap */
.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) {
  .availability-results .space-results > .availability-course-card:not(:last-child),
  .availability-results > #privateCourses > .availability-course-card:not(:last-child) {
    margin-bottom: 12px !important;
  }

  #groupCourses:not(:empty) {
    margin-bottom: 18px !important;
  }
}

/* =========================
   STUDENT PANEL
   ========================= */

/* =========================
   SUMMARY (TOP CARDS)
   ========================= */
.registration-summary-card { 
  margin: 20px 15px; 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.summary-pill,
.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;
}

.summary-next-due-date {
  color: var(--sv-blue-button);
  display: block;
  margin-top: 4px;
}

/* =========================
   TABLE (DESKTOP)
   ========================= */
.desktop-table {
  padding: 0 15px;
}

.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; 
}

.desktop-table th { 
  background: #e6eef7;
  color: #2c3e50;
  padding: 12px; 
  text-align: left; 
}

.desktop-table td { 
  padding: 12px; 
  border-bottom: 1px solid var(--sv-light); 
}

.clickable-row { 
  cursor: pointer; 
}

.clickable-row:hover { 
  background: var(--sv-light); 
}

/* =========================
   STATUS COLORS
   ========================= */
.passed-due { 
  background: #fdeeee !important; 
  border-left: 5px solid #b94a48 !important; 
}

.orange-status { 
  background: #fffaf0 !important; 
  border-left: 5px solid var(--sv-gold) !important; 
}

.status-paid-text {
  color: #4f8f55; 
  font-weight: 700;
}

/* =========================
   DETAILS / HISTORY
   ========================= */
.details-row { 
  display: none; 
}

/* container */
.details-content { 
  background: var(--sv-light); 
  padding: 15px 0; /* vertical only */
}

/* title */
.registration-summary-item p {
  text-align: left;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 14px; /* ✅ matches card padding */
}

/* list */
.registration-summary-item ul {
  list-style: none;
  padding: 0 14px; /* ✅ matches card padding */
  margin: 0;
}

/* rows */
.registration-summary-item li {
  padding: 8px 0;
  border-bottom: 1px solid var(--sv-border);
}

.registration-summary-item li:last-child {
  border-bottom: none;
}

/* =========================
   📱 MOBILE
   ========================= */
@media (max-width: 768px) {

  .registration-summary-card {
    grid-template-columns: 1fr;
    margin: 15px 12px 20px;
  }

  .desktop-table {
    padding: 0 12px 10px 12px;
  }

  /* each table = card */
  .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;
  }

  .desktop-table thead {
    display: none;
  }

  .desktop-table tbody,
  .desktop-table tr,
  .desktop-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .desktop-table td {
    border-bottom: none;
    padding: 8px 14px;
  }

  /* remove inner borders */
  .desktop-table tr.summary-row {
    border: none !important;
    margin: 0;
    padding: 10px 0;
  }

  .desktop-table tr.details-row {
    display: none;
    margin: 0;
    border: none;
  }

  /* expanded state */
  .desktop-table tr.details-row[style*="block"],
  .desktop-table tr.details-row[style*="table-row"] {
    display: block !important;
  }

  .desktop-table tr.details-row td {
    padding: 0;
    border: none;
  }

  /* divider */
  .details-content {
    padding: 15px 0;
    border-top: 1px solid var(--sv-border);
  }

  /* labels */
  .desktop-table tr.summary-row td:nth-child(1)::before { content: "Student: "; font-weight: 700; }
  .desktop-table tr.summary-row td:nth-child(2)::before { content: "Instructor: "; font-weight: 700; }
  .desktop-table tr.summary-row td:nth-child(3)::before { content: "Price: "; font-weight: 700; }
  .desktop-table tr.summary-row td:nth-child(4)::before { content: "Lessons Left: "; font-weight: 700; }
  .desktop-table tr.summary-row td:nth-child(5)::before { content: "Actions: "; font-weight: 700; }

  .desktop-table tr.summary-row td::before {
    color: #555;
    display: inline-block;
    margin-bottom: 4px;
  }
}

/* =========================
   MODAL
   ========================= */
.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;
}

.payment-modal {
  background: var(--sv-white);
  padding: 30px;
  border-radius: var(--sv-radius);
  max-width: 500px;
  width: 90%;
}

.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;
}

.payment-modal button.modal-close {
  border: none;
  background: none;
  font-size: 2rem;
  cursor: pointer;
}

</style>