/*
 * Phase 5 consolidated legacy modal CSS — extracted from
 * artist-book-gigs.html, venue-create-gigs.html, public-gigs.html
 * where the rule body was byte-identical (after whitespace normalization)
 * across the pages that defined it. Page-specific .modal-* rules (mismatched
 * bodies) remain inline on each page.
 *
 * This is the legacy modal namespace (.modal, .modal-overlay, .modal-actions,
 * .modal-clean). The newer gf-modals system uses .gfm-modal-* in modals.css.
 */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.modal.day-modal {
  width: fit-content;
  max-width: 98vw;
  min-width: min(860px, 98vw);
}

.modal-separator {
  height: 3px !important;
  background: linear-gradient(90deg, #a855f7, #06b6d4, #a855f7) !important;
  margin: 0 0 24px 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4) !important;
}

.modal-warning-box {
  margin: 20px 0;
  padding: 16px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}

.modal-warning-box p {
  color: #ef4444 !important;
  margin: 0;
  line-height: 1.6;
}

.modal-warning-box strong {
  color: #ef4444 !important;
}

.modal h3 {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.modal label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 0.9rem;
}

.modal input,
.modal textarea {
  width: 100%;
  font-family: var(--font-primary);
  font-size: 0.9rem;
}

.modal-actions .btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cyan);
}

.modal-actions .btn.danger {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.modal-actions .btn.danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.modal-actions .btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.modal-actions .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cyan);
  color: var(--cyan);
}

.modal-clean .modal-row {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}

.modal-clean .modal-control {
display: flex;
align-items: center;
gap: 8px;
}

.modal-clean textarea {
width: 100%;
resize: vertical;
}

.modal-clean .checkbox-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}

.modal-clean .checkbox-row label {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}

.modal-clean .subgroup {
margin-top: 12px;
padding: 12px;
background: #12151c;
border-radius: 6px;
}

.modal-clean .band-lineups-row {
flex-wrap: nowrap;        /* prevent wrapping */
gap: 16px;
}

.modal-clean .band-lineups-row label {
margin: 0;
}

.modal-clean .modal-control > label {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
margin-bottom: 0;
}

.modal-clean input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

width: 16px;
height: 16px;
border: 1px solid #555;
border-radius: 4px; /* <-- square */
background: #0f1116;
cursor: pointer;
position: relative;
}

.modal-clean input[type="radio"]:checked {
background: #2563eb;
border-color: #2563eb;
}

.modal-clean input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.modal-clean input[type="radio"]:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

.modal-clean input[type="checkbox"],
.modal-clean input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

width: 16px;
height: 16px;
border: 1px solid #555;
border-radius: 4px; /* SQUARE */
background: #0f1116;
cursor: pointer;
position: relative;
flex-shrink: 0;
}

.modal-clean input[type="checkbox"]:checked,
.modal-clean input[type="radio"]:checked {
background: #2563eb;
border-color: #2563eb;
}

.modal-clean input[type="checkbox"]:checked::after,
.modal-clean input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.modal-clean input[type="checkbox"]:focus,
.modal-clean input[type="radio"]:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}