/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #111;
    color: #eee;
    min-height: 100dvh;
}
a { color: #ff69b4; text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Top Nav === */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #1a1a1a;
    border-bottom: 2px solid #ff69b4;
}
.brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: #ff69b4;
}
.nav-links { display: flex; gap: 1rem; }
.nav-links a { font-size: 0.9rem; color: #ccc; }
.nav-links a:hover { color: #ff69b4; }

/* === Main Content === */
main {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
h1 { font-size: 1.5rem; margin-bottom: 0.75rem; color: #ff69b4; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; color: #ddd; }
p { margin-bottom: 0.75rem; color: #bbb; line-height: 1.5; }

/* === Messages === */
.error {
    background: #3a1111;
    border: 1px solid #c44;
    color: #f88;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.success { color: #4c4; }
.info { color: #999; padding: 1rem 0; }

/* === Buttons === */
.btn {
    display: inline-block;
    background: #ff69b4;
    color: #111;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}
.btn:hover { background: #e0559e; text-decoration: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-big { width: 100%; padding: 1rem; font-size: 1.2rem; }
.btn-danger { background: #c44; color: #fff; }
.btn-danger:hover { background: #a33; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }

/* === Forms === */
label { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; color: #aaa; }
input[type="text"], input[type="tel"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #444;
    border-radius: 8px;
    background: #222;
    color: #eee;
    font-size: 1rem;
    margin-bottom: 1rem;
}
input:focus { outline: 2px solid #ff69b4; border-color: transparent; }

/* === Login / Flow Box === */
.login-box, .flow-box {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 1.5rem;
}

/* === PIN Pad === */
.pin-display {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
    color: #ff69b4;
}
.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 280px;
    margin: 0 auto 1rem;
}
.pin-btn {
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    border: 1px solid #444;
    border-radius: 8px;
    background: #222;
    color: #eee;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pin-btn:active { background: #333; }
.pin-clear { color: #c44; }
.pin-go { background: #ff69b4; color: #111; }

/* === Terms === */
.terms-box {
    background: #222;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}
.terms-box p { color: #ccc; margin-bottom: 0.5rem; }
.check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    cursor: pointer;
    color: #ddd;
}
.check-label input { width: 20px; height: 20px; accent-color: #ff69b4; }

/* === Opt-in Toggles === */
.opt-in-card {
    background: #222;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: #ddd;
    font-size: 1rem;
}
.toggle-label input { display: none; }
.toggle-switch {
    width: 48px;
    height: 26px;
    background: #444;
    border-radius: 13px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
}
.toggle-switch::after {
    content: '';
    width: 22px;
    height: 22px;
    background: #999;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s, background 0.2s;
}
.toggle-label input:checked + .toggle-switch { background: #ff69b4; }
.toggle-label input:checked + .toggle-switch::after { transform: translateX(22px); background: #111; }
.band-tag {
    display: inline-block;
    background: #333;
    color: #ff69b4;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.25rem;
}
.band-legend { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.band-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.band-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-pink { background: #ff69b4; }
.dot-green { background: #4caf50; }
.dot-yellow { background: #ffd740; }
.band-preview { margin-top: 1rem; margin-bottom: 0.5rem; transition: all 0.2s ease; }

/* === Status page === */
.status-card {
    background: #222;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.status-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #333;
}
.status-row:last-child { border-bottom: none; }
.bands { display: flex; flex-direction: column; gap: 0.5rem; }
.band {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
}
.band-pink { background: #ff69b4; color: #111; border: 2px solid #ff69b4; }
.band-green { background: #4caf50; color: #111; border: 2px solid #4caf50; }
.band-yellow { background: #ffd740; color: #111; border: 2px solid #ffd740; }
.band-a { background: #2a4a2a; color: #6c6; border: 1px solid #4a4; }
.band-c { background: #4a2a4a; color: #c6c; border: 1px solid #a4a; }
.band-white { background: #fff; color: #111; border: 2px solid #fff; }
.band-cotd { background: #2a2a2a; color: #ccc; border: 2px dashed #999; font-style: italic; }
.band-none { background: #222; color: #666; border: 1px solid #333; }
.dot-white { background: #fff; }
.dot-cotd { background: linear-gradient(135deg, #f06, #f90, #ff0, #0c0, #09f, #90f); border-radius: 50%; }
.band-preview-container { margin-top: 1rem; margin-bottom: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* === Roster === */
.roster-page { max-width: 600px; }
.roster-page h1 { display: flex; align-items: baseline; gap: 0.5rem; }
.count { font-size: 0.9rem; color: #999; font-weight: 400; }
.roster-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.roster-table th, .roster-table td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #333;
}
.roster-table th { color: #999; font-size: 0.8rem; text-transform: uppercase; }
.band-yes-pink { color: #ff69b4; font-weight: 700; }
.band-yes-green { color: #4caf50; font-weight: 700; }
.band-yes-yellow { color: #ffd740; font-weight: 700; }
.band-yes-white { color: #fff; font-weight: 700; }
.band-yes-cotd { color: #999; font-weight: 700; font-style: italic; }
.inactive td { opacity: 0.4; }

/* Band pills (roster table + mobile) */
.roster-bands-cell { display: flex; gap: 0.3rem; align-items: center; }
.band-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
}
.band-pill-pink { background: #4a1a3a; color: #ff69b4; border: 1px solid #ff69b4; }
.band-pill-green { background: #1a3a1a; color: #4caf50; border: 1px solid #4caf50; }
.band-pill-yellow { background: #3a3a1a; color: #ffd740; border: 1px solid #ffd740; }
.band-pill-white { background: #3a3a3a; color: #fff; border: 1px solid #fff; }
.band-pill-cotd { background: #2a2a2a; color: #ccc; border: 1px dashed #999; font-style: italic; }

/* Mobile roster cards (shown on small screens) */
.roster-cards { display: none; }
@media (max-width: 500px) {
    .roster-table { display: none; }
    .roster-cards { display: flex; flex-direction: column; gap: 0.5rem; }
    .roster-card {
        background: #1a1a1a;
        border-radius: 8px;
        padding: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .roster-card-name { font-weight: 700; flex: 1; }
    .roster-card-time { color: #999; font-size: 0.85rem; }
    .roster-card-bands { display: flex; gap: 0.3rem; }
}

/* === Collapsible Sections === */
details { margin-bottom: 1rem; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: '\25B6'; margin-right: 0.5rem; color: #ff69b4; font-size: 0.8rem; display: inline-block; transition: transform 0.2s; }
details[open] summary::before { transform: rotate(90deg); }

/* === Admin === */
.admin-page { max-width: 600px; }
.add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.add-form input {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0;
}
.add-form .btn { flex-shrink: 0; }

/* === File Upload === */
.file-upload {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #444;
    border-radius: 8px;
    background: #222;
    color: #eee;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.file-upload::file-selector-button {
    background: #ff69b4;
    color: #111;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-right: 0.75rem;
    cursor: pointer;
    font-weight: 700;
}
.file-upload::file-selector-button:hover { background: #e0559e; }

/* === DL Badges === */
.dl-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}
.dl-yes { background: #2a4a2a; color: #4caf50; border: 1px solid #4caf50; }
.dl-yes:hover { background: #3a5a3a; text-decoration: none; }
.dl-no { background: #4a1a1a; color: #f44; border: 1px solid #c44; }

/* === Success Message === */
.success-msg {
    background: #1a3a1a;
    border: 1px solid #4c4;
    color: #6c6;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* === TOS Container (Confirm page) === */
.tos-container {
    background: #222;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
.tos-pdf-frame {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: 6px;
    background: #fff;
}

/* === Signature Canvas === */
.sig-container {
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
.sig-container canvas {
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: crosshair;
    touch-action: none;
}

/* === TOS Admin Card === */
.tos-admin-card {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

/* === Guest Search === */
.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.search-form input {
    flex: 1;
    margin-bottom: 0;
}
.search-form .btn { flex-shrink: 0; }

/* === Session Select List === */
.session-select {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.session-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #222;
    border-radius: 8px;
    color: #ddd;
    text-decoration: none;
    transition: background 0.15s;
}
.session-link:hover { background: #2a2a2a; text-decoration: none; color: #ff69b4; }
.active-dot { color: #4caf50; font-weight: 700; }

/* === Session Record === */
.record-page { max-width: 700px; }
.record-section { margin-bottom: 1.5rem; }
.record-table {
    width: 100%;
    border-collapse: collapse;
    background: #222;
    border-radius: 8px;
    overflow: hidden;
}
.record-table th, .record-table td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid #333;
}
.record-table th { color: #999; font-size: 0.8rem; text-transform: uppercase; background: #1a1a1a; }
.record-table td { color: #ddd; }

/* === Signature Preview (Admin) === */
.sig-preview {
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem;
    display: inline-block;
}
.sig-preview img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === Hidden Admin Button === */
.admin-hidden-btn {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    opacity: 0;
    display: block;
    text-decoration: none;
}

/* === Admin Hub === */
.admin-hub { text-align: center; }
.admin-hub h1 { margin-bottom: 1.5rem; }
.admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.admin-hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    color: #eee;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.admin-hub-card:hover {
    border-color: #4a9eff;
    transform: translateY(-3px);
    text-decoration: none;
    color: #fff;
}
.hub-icon { font-size: 2rem; margin-bottom: 0.25rem; }
.hub-desc { font-size: 0.8rem; color: #999; }

/* === Admin Blue Theme === */
body.admin .topbar { border-bottom-color: #4a9eff; }
body.admin .brand { color: #4a9eff; }
body.admin .nav-links a:hover { color: #4a9eff; }
body.admin .hub-link { color: #4a9eff !important; }
body.admin h1 { color: #4a9eff; }
body.admin a { color: #4a9eff; }
body.admin a:hover { color: #6bb3ff; }
body.admin .btn {
    background: #4a9eff;
    color: #111;
}
body.admin .btn:hover {
    background: #3580d9;
}
body.admin .btn-danger {
    background: #c44;
    color: #fff;
}
body.admin .btn-danger:hover {
    background: #a33;
}
body.admin .pin-display { color: #4a9eff; }
body.admin .pin-go { background: #4a9eff; color: #111; }
body.admin input:focus { outline-color: #4a9eff; }
body.admin code { color: #4a9eff; }
body.admin .roster-table th { color: #4a9eff; }

/* === Print Styles === */
.no-print { }
@media print {
    .topbar, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    main { max-width: 100%; }
    h1, h2 { color: #000; }
    .status-card { background: #f5f5f5; border: 1px solid #ccc; }
    .status-row { border-bottom-color: #ddd; }
    .status-row span, .status-row strong { color: #000; }
    .record-table { background: #f5f5f5; }
    .record-table th { background: #e0e0e0; color: #333; }
    .record-table td { color: #000; border-bottom-color: #ddd; }
    .sig-preview { border: 1px solid #ccc; }
}

/* Password field with reveal button */
.password-field { position: relative; display: flex; align-items: stretch; margin-bottom: 1rem; }
.password-field input { flex: 1; margin: 0; }
.password-field .reveal-btn {
    background: #333; color: #fff; border: 0; border-radius: 0 6px 6px 0;
    padding: 0 0.8rem; cursor: pointer; font-size: 0.85rem;
}
.password-field input { border-radius: 6px 0 0 6px; }
.password-field .reveal-btn:hover { background: #555; }