*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background-color:#f5f5f5;padding:20px}
.container{max-width:1200px;margin:0 auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
nav{display:flex;gap:20px;margin-bottom:30px;padding-bottom:15px;border-bottom:2px solid #ddd}
nav a{text-decoration:none;color:#333;font-weight:bold;padding:10px 15px;border-radius:4px;transition:background .3s}
nav a:hover{background:#e0e0e0}

nav a.logout{
  margin-left: auto;          /* flex push to right */
  background: #2196F3;
  color: #fff;
}
nav a.logout:hover{
  background: #0b7dda;
}

/* optional: keep all items on one line */
@media (min-width: 1px){
  nav{flex-wrap: nowrap;}
}


h1{color:#333;margin-bottom:20px}
h2{color:#555;margin-bottom:15px;margin-top:20px}
h3{color:#666;margin:15px 0 10px}

/* Make the Prev/Next buttons the same size */
.month-selector button,
.calendar-controls button {
  min-width: 120px;     /* or use width: 120px; for exact equal width */
  text-align: center;
  padding: 8px 16px;    /* consistent padding */
}


/* Calendar */
.calendar-header{margin-bottom:20px}
.month-selector{display:flex;gap:10px;align-items:center;margin-top:15px}
.month-selector select{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}
.month-selector button{padding:8px 15px;background:#4CAF50;color:#fff;border:none;border-radius:4px;cursor:pointer}
.month-selector button:hover{background:#45a049}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:20px}
.day-header{font-weight:bold;text-align:center;padding:10px;background:#333;color:#fff;border-radius:4px}
.calendar-day{min-height:100px;border:1px solid #ddd;border-radius:4px;padding:8px;background:#fff}
.calendar-day.empty{background:#f9f9f9;border:1px solid #eee}
.day-number{font-weight:bold;font-size:18px;margin-bottom:5px}
.day-name{font-size:11px;color:#666;margin-bottom:8px}
.event{background:#fff6e8;padding:5px;margin-bottom:5px;border-radius:3px;font-size:12px;border-left:3px solid #ff9800}
.event.temple{background:#e3f2fd;border-left-color:#2196F3}
.event.bar-room{background:#ffebee;border-left-color:#f44336}
.event.robing-room{background:#def5da;border-left-color:#23bd04}
.event strong{display:block;margin-bottom:2px}
.event strong{display:block;margin-bottom:2px}
.event span{color:#666;font-size:11px}


/* Forms */
.form-section{background:#f9f9f9;padding:20px;border-radius:8px;margin-bottom:30px}
form{display:flex;flex-direction:column;gap:15px}
label{font-weight:bold;color:#555}
input[type="text"],input[type="date"],input[type="password"],select{padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;width:100%}

/* Row container: single line, consistent spacing */
.date-range {
  displa...(truncated 514 characters)... width: 100px;
  font-size: 16px;
  
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;  /* chrome/safari */
  border: 1px solid red;     /* visual proof */
}


.start-month, .end-month {width:100px;}
.start-day, .end-day {width:70px;margin-right:20px}





input[type="time"] { padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }



button{padding:10px 20px;background:#4CAF50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .3s}
button:hover{background:#45a049}
button[type="button"]{background:#2196F3}
button[type="button"]:hover{background:#0b7dda}
button.delete-btn{background:#f44336}
button.delete-btn:hover{background:#da190b}
.form-actions{display:flex;gap:10px;margin-top:10px}

/* Lists */
.list-section{margin-top:30px}
.business-item{background:#f9f9f9;padding:15px;border-radius:8px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:start;border-left:4px solid #4CAF50}
.business-info h3{margin-top:0;color:#333}
.business-info p{margin:5px 0;color:#666}
.business-actions{display:flex;gap:10px}
.business-actions button{padding:8px 15px;font-size:13px}

/* Preview */
#schedulePreview{margin-top:30px}
.preview-list{display:grid;gap:10px;margin-top:15px}
.preview-item{background:#fff;padding:10px;border-radius:4px;border-left:3px solid #4CAF50}
.preview-item strong{color:#333}


/* Staff assignment event box */
.event.staff-assignment {
  position: relative;
  padding: 6px 8px;
  margin: 4px 0;
  border-radius: 3px;
  font-size: 0.75rem !important;
  line-height: 1.2;
  min-height: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.15s ease;
}

.event.staff-assignment:hover {

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Left stripe */
.event.staff-assignment::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--staff-color);
  border-radius: 6px 0 0 6px;  /* match rounded corners on left */
}

/* Tinted background */
.event.staff-assignment {
  background: color-mix(in srgb, var(--staff-color, #888) 10%, #ffffff 90%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-left: none !important; 
}

/* Booking-like layout */
.event.staff-assignment .event-tag {
  display: inline-block;
  background: rgba(255,255,255,0.75);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--staff-color);
  margin-bottom: 2px;
}

.event.staff-assignment .event-room {
  font-weight: 500;
  color: #222;
  font-size: 0.7rem;
  margin-bottom: 1px;
}

.event.staff-assignment .time-chip {
  font-size: 0.7rem;
  color: #555;
  background: rgba(255,255,255,0.6);
  padding: 1px 6px;
  border-radius: 10px;
}

/* Fallback for old browsers without color-mix */
@supports not (background: color-mix(in srgb, red, white)) {
  .event.staff-assignment {
    background: rgba(136,136,136,0.1); /* grey fallback */
  }
}

@media print {
  /* Force colours to print everywhere */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide everything except the calendar */
  nav, .calendar-header, .month-selector, .calendar-controls,
  h1, h2, h3, .form-section, .list-section, .modal-overlay,
  button, .form-actions, .business-actions, #parseSummary,
  #parseErrors, #parsePreview, .notice, .intro,
  footer, header, aside, .sidebar, .top-bar {
    display: none !important;
  }

  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 10mm !important;
    box-shadow: none !important;
    background: white !important;
    border: none !important;
  }

  /* Print-only month/year header – spans full width above day headers */
  .calendar-grid::before {
    content: attr(data-month-year);
    grid-column: 1 / -1; /* span all 7 columns */
    display: block;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
    margin-bottom: 5px;
    background: #f8f8f8 !important;
    border-bottom: 2px solid #999 !important;
    color: #333 !important;
  }

  .month-year-header {
    display: block !important; /* force visible in print */
    grid-column: 1 / -1; /* span all 7 columns */
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    padding: 8px 0 12px;
    margin-bottom: 8px;
    background: #f8f8f8 !important;
    border-bottom: 2px solid #999 !important;
    color: #333 !important;
  }

  /* Ensure day headers stay below it */
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    page-break-inside: avoid;
  }

  .day-header {
    background: #eee !important;
    color: #333 !important;
    font-weight: bold;
    text-align: center;
    padding: 6px;
    border: 1px solid #999 !important;
  }

  .calendar-day {
    break-inside: avoid;
    min-height: 60px;
    border: 1px solid #ccc !important;
    background: white !important;
    padding: 6px;
    font-size: 9pt;
  }

  .calendar-day.empty {
    display: none !important;
  }

  /* Preserve all event colours */
  .event,
  .event.staff-assignment,
  .event.temple,
  .event.bar-room,
  .event.robing-room {
    background: inherit !important;
    border: inherit !important;
    border-left: inherit !important;
    box-shadow: none !important;
    color: #000 !important;
    margin: 3px 0 !important;
    padding: 3px 5px !important;
    font-size: 9pt !important;
    break-inside: avoid;
  }

  .event.staff-assignment {
    background: color-mix(in srgb, var(--staff-color, #888) 10%, #ffffff 90%) !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    border-left: 3px solid var(--staff-color) !important;
  }

  .event.staff-assignment::before {
    background: var(--staff-color) !important;
  }

  .badge {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: inherit !important;
    color: inherit !important;
  }
}

.admin-event-status {
  font-size: 9px;
  font-weight: bold;
  padding: 2px 5px;
  margin-left: 4px;
  margin-right: 2px;
  vertical-align: middle;
  color: white !important;
  display: inline-block;
  border-radius: 10px;
}

.status-moved          { background: #d9181e; } /* red - moved */
.status-time-changed   { background: #3498db; } /* blue  - time */
.status-room-changed   { background: #27ae60; } /* green - room */
.status-overridden     { background: #9b59b6; } /* purple - general override */