/* ===== Audition Scheduler – Public Styles ===== */
:root {
    --mst-primary:   #2c5f8a;
    --mst-primary-h: #1e4566;
    --mst-danger:    #c0392b;
    --mst-success:   #27ae60;
    --mst-border:    #d0d7de;
    --mst-bg:        #f8f9fa;
    --mst-radius:    8px;
}

.mst-wrap { max-width: 820px; margin: 0 auto; padding: 24px 16px; font-size: 1rem; }
.mst-narrow { max-width: 480px; }

/* Notices */
.mst-notice { padding: 14px 18px; border-radius: var(--mst-radius); background: var(--mst-bg); border: 1px solid var(--mst-border); margin-bottom: 20px; }
.mst-notice-warning { background: #fff8e1; border-color: #f0c040; }
.mst-notice-success { background: #eafaf1; border-color: #82e0aa; color: #1d6a3a; }
.mst-notice-error   { background: #fdecea; border-color: #f1948a; color: #922b21; }

/* Buttons */
.mst-btn { display: inline-block; padding: 10px 22px; border-radius: var(--mst-radius); border: none; cursor: pointer; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: background 0.15s; }
.mst-btn-primary { background: var(--mst-primary); color: #fff; }
.mst-btn-primary:hover { background: var(--mst-primary-h); color: #fff; }
.mst-btn-danger  { background: var(--mst-danger); color: #fff; }
.mst-btn-danger:hover { background: #a93226; color: #fff; }
.mst-btn-lg { padding: 14px 32px; font-size: 1.05rem; }

/* Slots grid */
.mst-production-title { color: var(--mst-primary); }
.mst-day-group { margin-bottom: 20px; }
.mst-day-group h3 { font-size: 1rem; font-weight: 700; color: #444; border-bottom: 2px solid var(--mst-primary); padding-bottom: 4px; margin-bottom: 10px; }
.mst-slots-grid { display: flex; flex-direction: column; gap: 0; }
.mst-slot { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--mst-border); border-radius: var(--mst-radius); margin-bottom: 8px; background: #fff; }
.mst-slot-full-badge { background: #e0e0e0; color: #888; padding: 6px 14px; border-radius: var(--mst-radius); font-size: 0.85rem; font-weight: 600; }
.mst-slot-full { opacity: 0.7; }
.mst-slot-time { font-weight: 700; min-width: 90px; }
.mst-slot-avail { flex: 1; color: #555; }
.mst-resend-link { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--mst-border); font-size: 0.9rem; }

/* Form layout */
.mst-section { background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius); padding: 22px 24px; margin-bottom: 22px; }
.mst-section h3 { margin-top: 0; color: var(--mst-primary); border-bottom: 1px solid #eee; padding-bottom: 8px; }
.mst-row { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.mst-col { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.mst-col-sm { flex: 0 0 120px; min-width: 80px; }
.mst-field-group { margin-bottom: 14px; }
.mst-col label, .mst-field-group > label { font-size: 0.88rem; font-weight: 600; color: #333; margin-bottom: 4px; }
.mst-col input, .mst-col select,
.mst-field-group input, .mst-field-group select, .mst-field-group textarea,
.mst-wrap input[type="text"],
.mst-wrap input[type="email"],
.mst-wrap input[type="tel"],
.mst-wrap input[type="number"],
.mst-wrap select,
.mst-wrap textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--mst-border); border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; }
.mst-wrap input[type="file"] { padding: 4px; }
.req { color: #c0392b; }

/* Radio / checkbox groups */
.mst-radio-group, .mst-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.mst-radio-group label, .mst-checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
.mst-yn-row { margin-bottom: 14px; }
.mst-yn-row > label:first-child { display: block; font-weight: 600; margin-bottom: 4px; }
.mst-yn-row .mst-field-desc { margin-bottom: 8px; }
.mst-yn-row .mst-yn-radios { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Conflict calendar */
.mst-conflict-notes { background: #f0f4f8; border-left: 4px solid #2c5f8a; padding: 12px 16px; border-radius: 4px; margin-bottom: 14px; }
.mst-conflict-notes p:last-child { margin-bottom: 0; }
.mst-conflict-warning { background: #fff8e1; border-left: 4px solid #f0c040; padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; }
.mst-conflict-warning p, .mst-conflict-warning { margin-left: 0 !important; }
#mst-conflict-calendar { border: 1px solid var(--mst-border); border-radius: var(--mst-radius); overflow: hidden; }

/* Range bar */
#mst-cal-range-bar { background: #e8f0fb; padding: 12px 14px; border: 1px solid var(--mst-border); border-radius: var(--mst-radius) var(--mst-radius) 0 0; border-bottom: none; }
.mst-cal-range-label { font-size: 0.88rem; margin-bottom: 10px; color: #333; }
.mst-cal-range-months { color: #666; font-weight: normal; }
.mst-cal-month-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mst-cal-pill { background: #fff; border: 1px solid var(--mst-border); border-radius: 20px; padding: 6px 18px; font-size: 1.2rem; cursor: pointer; transition: all 0.15s; }
.mst-cal-pill:hover { background: #d0e4f7; border-color: var(--mst-primary); }
.mst-cal-pill-active { background: var(--mst-primary) !important; color: #fff !important; border-color: var(--mst-primary) !important; font-weight: 700; }
.mst-cal-range-bar { background: #e8f0fb; padding: 12px 14px; border: 1px solid var(--mst-border); border-radius: var(--mst-radius) var(--mst-radius) 0 0; border-bottom: none; margin-bottom: 0; }

#mst-cal-nav { display: flex; align-items: center; justify-content: space-between; background: var(--mst-primary); color: #fff; padding: 10px 16px; }
#mst-cal-nav button { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; font-size: 1.2rem; line-height: 1; }
#mst-cal-month-label { font-weight: 700; font-size: 1rem; }
#mst-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: #fff; }
.mst-cal-dow { text-align: center; font-size: 0.75rem; font-weight: 700; padding: 6px; background: #f0f4f8; color: #555; }
.mst-cal-day { position: relative; text-align: center; padding: 6px 4px 4px; font-size: 0.85rem; border: 1px solid #f0f0f0; cursor: pointer; transition: background 0.1s; min-height: 42px; }
.mst-cal-day-num { display: block; }
.mst-cal-day:hover:not(.mst-cal-day-inactive):not(.mst-cal-day-outside-range) { background: #e8f0fb; }
.mst-cal-day-inactive { color: #ccc; cursor: default; }
.mst-cal-day-outside-range { color: #ddd; cursor: default; background: #fafafa; }
.mst-cal-day-conflict { background: #fee2e2 !important; color: #991b1b; font-weight: 700; }
.mst-cal-day-active-note { outline: 2px solid var(--mst-primary); outline-offset: -2px; }
.mst-cal-conflict-x { display: block; font-size: 0.55rem; color: #c0392b; line-height: 1; margin-top: 2px; letter-spacing: 0; }

/* Note panel */
#mst-conflict-note-panel { padding: 12px 16px; background: #fef9f0; border-top: 1px solid var(--mst-border); }
.mst-conflict-note-panel { padding: 12px 16px; background: #fef9f0; border-top: 1px solid var(--mst-border); }
.mst-note-panel-inner { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.mst-note-panel-left { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; padding-left: 2px; }
.mst-note-panel-right { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-end; }
.mst-note-date-row { font-size: 0.95rem; font-weight: 600; }
.mst-conflict-panel-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mst-allday-lbl { display: flex; align-items: center; gap: 5px; font-size: 0.9rem; white-space: nowrap; cursor: pointer; }
.mst-time-fields { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.mst-time-lbl { font-size: 0.85rem; white-space: nowrap; color: #555; }
.mst-time-sel { display: inline-flex; align-items: center; gap: 2px; }
.mst-time-sel select { padding: 3px 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; background: #fff; cursor: pointer; }
.mst-time-sel select.mst-ts-h { width: 52px; }
.mst-time-sel select.mst-ts-m { width: 52px; }
.mst-time-sel select.mst-ts-ap { width: 52px; }
.mst-time-sep { color: #aaa; font-size: 1rem; line-height: 1; padding: 0 6px; }
.mst-note-lbl { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.mst-note-lbl input[type="text"] { flex: 1; }
#mst-save-note { padding: 7px 16px; background: var(--mst-primary); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.mst-btn-remove-conflict { padding: 7px 14px; background: #fff; color: var(--mst-danger); border: 1px solid var(--mst-danger); border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.mst-btn-remove-conflict:hover { background: var(--mst-danger); color: #fff; }

/* Conflict tag list */
.mst-conflict-tags-label { font-size: 0.82rem; font-weight: 600; color: #555; margin: 10px 0 6px; }
.mst-conflict-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mst-conflict-tag { display: inline-flex; align-items: center; gap: 6px; background: #fee2e2; color: #7b241c; padding: 4px 10px; border-radius: 20px; font-size: 0.82rem; }
.mst-conflict-tag button { background: none; border: none; color: #7b241c; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }

/* Form tabs */
#mst-form-tabs-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; border-bottom: 2px solid var(--mst-primary); padding-bottom: 0; }
.mst-tab-btn { background: #f0f4f8; border: 1px solid var(--mst-border); border-bottom: none; border-radius: 6px 6px 0 0; padding: 8px 18px; cursor: pointer; font-size: 0.9rem; color: #555; transition: all 0.15s; }
.mst-tab-btn:hover { background: #e0eaf5; }
.mst-tab-btn.mst-tab-active { background: #fff; border-color: var(--mst-primary); border-bottom-color: #fff; color: var(--mst-primary); font-weight: 700; margin-bottom: -2px; }
#mst-form-tabs-body { border: 1px solid var(--mst-primary); border-top: none; border-radius: 0 0 var(--mst-radius) var(--mst-radius); padding: 20px; background: #fff; }
.mst-person-tab { display: none; }
.mst-person-tab .mst-section { border: none; padding: 0 0 16px; margin-bottom: 0; border-bottom: 1px solid #eee; }
.mst-person-tab .mst-section:last-child { padding-bottom: 16px; }
.mst-person-tab h4 { color: var(--mst-primary); margin: 16px 0 10px; font-size: 0.95rem; }

/* Conflict cal inside tab */
.mst-conflict-cal { border: 1px solid var(--mst-border); border-radius: var(--mst-radius); overflow: hidden; margin-top: 8px; }
.mst-cal-nav { display: flex; align-items: center; justify-content: space-between; background: var(--mst-primary); color: #fff; padding: 10px 16px; }
.mst-cal-nav button { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.mst-cal-month-lbl { font-weight: 700; font-size: 1rem; }
.mst-cal-grid-inner { display: grid; grid-template-columns: repeat(7, 1fr); background: #fff; }

/* Role info popover — fixed position so it appears near the clicked button */
#mst-role-popover { position: fixed; z-index: 99999; background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius); padding: 14px 28px 14px 14px; width: 280px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); font-size: 0.88rem; line-height: 1.5; word-wrap: break-word; }
#mst-role-popover-close { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #666; line-height: 1; padding: 0; }
#mst-role-popover-content p { margin: 0 0 8px; }
#mst-role-popover-content p:last-child { margin-bottom: 0; }

/* Info notice */
.mst-notice-info { background: #e8f4fb; border-color: #2c5f8a; }

/* Group booking */
.mst-auditioner-row { background: #f8f9fa; border: 1px solid var(--mst-border); border-radius: var(--mst-radius); padding: 14px 16px; margin-bottom: 12px; }
.mst-auditioner-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mst-auditioner-header strong { font-size: 0.95rem; color: var(--mst-primary); }
.mst-btn-link { background: none; border: none; color: var(--mst-danger); cursor: pointer; font-size: 0.85rem; text-decoration: underline; padding: 0; }
.mst-btn-secondary { background: #fff; color: var(--mst-primary); border: 1px solid var(--mst-primary); padding: 8px 18px; border-radius: var(--mst-radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.mst-btn-secondary:hover { background: var(--mst-primary); color: #fff; }

/* Role info popover */
.mst-role-info { background: none; border: 1px solid #aaa; border-radius: 50%; width: 18px; height: 18px; font-size: 0.75rem; line-height: 16px; cursor: pointer; color: var(--mst-primary); padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; }
.mst-role-info:hover { background: var(--mst-primary); color: #fff; border-color: var(--mst-primary); }
#mst-role-popover { position: fixed; z-index: 9999; background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius); padding: 14px 16px; max-width: 280px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); font-size: 0.88rem; line-height: 1.5; }
#mst-role-popover-close { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #666; line-height: 1; }

/* Slots remaining counter */
#mst-slots-remaining { font-weight: 700; color: var(--mst-primary); }

.mst-file-existing { color: #27ae60; font-size: 0.88rem; margin: 4px 0; }
.mst-file-replace-label { font-size: 0.85rem; color: #666; font-style: italic; display: block; margin-bottom: 4px; }

/* Role list in admin */
.mst-role-row { margin-bottom: 12px; padding: 10px 12px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; }
.mst-divider { border: none; border-top: 1px solid var(--mst-border); margin: 18px 0 14px; }
.mst-section h4 { margin: 0 0 10px; color: #444; font-size: 0.95rem; }
.mst-field-dimmed { opacity: 0.5; pointer-events: none; }

/* Callback use-primary checkbox */

/* Selected slot info */
.mst-selected-slot { background: #eaf4fb; border-left: 4px solid var(--mst-primary); padding: 10px 14px; border-radius: 4px; margin-bottom: 20px; }
.mst-change-link { font-size: 0.85rem; margin-left: 8px; }

.mst-phone-owner-wrap { margin-top: 10px; }
.mst-parent-name-wrap { margin-top: 8px; }
.mst-field-note { font-size: 0.82rem; color: #666; margin: 4px 0 0; font-style: italic; }

/* Submit section */
.mst-submit-section { text-align: center; }
.mst-privacy-note { font-size: 0.8rem; color: #888; margin-top: 10px; }

/* Manage page */
.mst-booking-summary { background: var(--mst-bg); border: 1px solid var(--mst-border); border-radius: var(--mst-radius); padding: 16px 20px; margin-bottom: 24px; }
.mst-booking-summary p { margin: 6px 0; }
.mst-manage-actions h3 { color: var(--mst-primary); }

@media (max-width: 600px) {
    .mst-row { flex-direction: column; }
    .mst-col-sm { flex: 1; }
    .mst-slot { flex-wrap: wrap; }
}

/* ── New schema-driven form additions ── */
.mst-section-desc { background:#f0f4f8; border-left:3px solid var(--mst-primary,#2c5f8a); padding:10px 14px; border-radius:4px; margin-bottom:14px; font-size:.88rem; }
.mst-section-desc p:last-child { margin-bottom:0; }
.mst-field-desc { font-size:.83rem; color:#666; margin:2px 0 6px; font-style:italic; }
.mst-req { color:#c0392b; font-weight:700; }
.mst-radio-lbl { display:inline-flex; align-items:center; gap:5px; margin-right:14px; cursor:pointer; }
.mst-some-wrap { margin-top:8px; }
.mst-cond-wrap.mst-cond-hidden { display:none; }
/* File handling */
.mst-file-existing { display:flex; align-items:center; gap:14px; background:#f0faf4; border:1px solid #a8d5b5; border-radius:4px; padding:8px 12px; margin-bottom:8px; font-size:.88rem; }
.mst-file-remove-label { display:flex; align-items:center; gap:6px; cursor:pointer; color:#c0392b; font-style:normal; }
.mst-file-staged-remove { opacity:.5; text-decoration:line-through; }
.mst-replace-label { font-size:.82rem; color:#666; display:block; margin-bottom:4px; }
/* Manage page */
.mst-manage-wrap .mst-section { border-bottom:1px solid #eee; padding-bottom:20px; margin-bottom:20px; }
.mst-booking-summary { background:#f8f9fa; border:1px solid #ddd; border-radius:6px; padding:16px 20px; margin-bottom:24px; }
.mst-manage-actions { margin-top:24px; padding-top:20px; border-top:1px solid #eee; }
.mst-btn-danger { background:#e74c3c; color:#fff; border:none; }
.mst-btn-danger:hover { background:#c0392b; color:#fff; }
/* Conflict calendar tags inline */
.mst-conflict-tags { margin-top:10px; }
.mst-tags-label { font-size:.83rem; color:#666; margin-bottom:4px; }
.mst-tags { display:flex; flex-wrap:wrap; gap:6px; }
.mst-tag { background:#fde8e8; border:1px solid #f5c6cb; border-radius:12px; padding:3px 10px; font-size:.82rem; display:flex; align-items:center; gap:5px; }
.mst-tag-rm { background:none; border:none; cursor:pointer; color:#c0392b; font-size:1rem; padding:0; line-height:1; }
/* Calendar */
.mst-cal-range-bar { background: #e8f0fb; padding: 12px 14px; border: 1px solid var(--mst-border); border-radius: var(--mst-radius) var(--mst-radius) 0 0; border-bottom: none; }
.mst-pills { display:flex; flex-wrap:wrap; gap:5px; }
.mst-pill { background:#eee; border:1px solid #ddd; border-radius:12px; padding:3px 10px; font-size:.78rem; cursor:pointer; }
.mst-pill:hover,.mst-pill-active { background:var(--mst-primary,#2c5f8a); color:#fff; border-color:var(--mst-primary,#2c5f8a); }
/* Signup tabs */
#mst-tabs-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:0; }
.mst-tab-btn { background:#eee; border:1px solid #ddd; border-radius:6px 6px 0 0; padding:7px 16px; cursor:pointer; border-bottom:none; }
.mst-tab-btn.mst-tab-active { background:#fff; border-color:#ddd; border-bottom-color:#fff; font-weight:600; position:relative; z-index:1; }
#mst-tabs-body { border:1px solid #ddd; border-radius:0 6px 6px 6px; padding:20px; background:#fff; }
.mst-person-tab { display:none; }
.mst-person-tab:first-child { display:block; }

/* Signup tab sections — give them visible separation */
.mst-person-tab .mst-section {
    background: #fff;
    border: 1px solid var(--mst-border);
    border-radius: var(--mst-radius);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.mst-person-tab .mst-section h4 {
    margin-top: 0;
    color: var(--mst-primary);
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 14px;
    font-size: 1rem;
}

/* File input button fix */
input[type="file"] { display: block; width: 100%; font-size: 0.9rem; padding: 4px 0; box-sizing: border-box; }
.mst-file-input { display: block; width: 100%; }

/* Conflict warning — override any theme p margins */
.mst-conflict-warning { margin-left: 0 !important; }
.mst-conflict-warning p { margin: 0 !important; padding: 0; }

/* Manage page layout fix — ensure form doesn't break out of content area */
.mst-manage-wrap { clear: both; overflow: hidden; }
.mst-manage-wrap form { clear: both; }
.mst-section { clear: both; }

/* ===================================================
   Submission Method Selector
   =================================================== */
.mst-submission-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 4px;
}
.mst-submission-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafafa;
}
.mst-submission-option:hover {
    border-color: #aaa;
    background: #f4f4f4;
}
.mst-submission-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #2271b1;
    width: 18px;
    height: 18px;
}
.mst-submission-option:has(input:checked) {
    border-color: #2271b1;
    background: #f0f6fc;
}
.mst-submission-option-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mst-submission-option-inner strong {
    font-size: 1em;
    color: #1d2327;
}
.mst-submission-option-desc {
    font-size: 0.88em;
    color: #555;
    line-height: 1.4;
}
.mst-submission-option-desc a {
    color: #2271b1;
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(a))) {
    .mst-submission-option input:checked + .mst-submission-option-inner {
        font-weight: 600;
    }
}