body { font-family: Arial, sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; color: #333; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* CABEÇALHO NOVO */
.main-header { width: 100%; max-width: 800px; margin-bottom: 20px; }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
h1 { color: #007bff; margin: 0; }
.event-date { font-size: 1.5em; font-weight: bold; color: #555; margin-top: 5px; }

/* SELETOR DE SALÃO */
#hall-selector {
    padding: 8px 12px;
    border-radius: 5px;
    border: 2px solid #007bff;
    background-color: white;
    color: #007bff;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}
#hall-selector:hover { background-color: #007bff; color: white; }

/* LOADING E SPINNER */
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 9999; font-size: 1.2em; color: #333; }
.spinner { border: 6px solid #f3f3f3; border-top: 6px solid #007bff; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ADMIN LINK (Agora relativo ao header-top) */
.admin-link { text-decoration: none; font-weight: bold; color: #007bff; padding: 8px 15px; border: 1px solid #007bff; border-radius: 5px; transition: background-color 0.2s, color 0.2s; position: static; /* Remove position absolute antigo */ }
.admin-link:hover { background-color: #007bff; color: white; }

/* AUTH STATUS */
#auth-status { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
#login-link-btn, #logout-btn { background: none; border: 1px solid #007bff; color: #007bff; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-weight: bold; }
#login-link-btn:hover, #logout-btn:hover { background-color: #007bff; color: white; }

/* CONTAINERS GERAIS */
.search-filter-container, .export-container { width: 100%; max-width: 800px; padding: 20px; margin-bottom: 10px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 15px; align-items: center; box-sizing: border-box; }
.export-container { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 15px; }
.export-container label { font-weight: bold; }
#search-input, .export-container select { width: 100%; max-width: 400px; padding: 12px; font-size: 1em; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
.export-container select { max-width: 250px; padding: 8px; font-size: 0.9em; }

/* BOTÕES DE FILTRO */
.filter-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.filter-btn, .export-container button { padding: 8px 16px; font-size: 0.9em; border: 1px solid #ccc; border-radius: 20px; background-color: #f8f9fa; color: #333; cursor: pointer; transition: background-color 0.2s, color 0.2s; font-weight: bold; }
.filter-btn:hover, .export-container button:hover { background-color: #e2e6ea; }
.filter-btn.active { background-color: #007bff; color: white; border-color: #007bff; }

/* ESTATÍSTICAS */
.stats-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 10px; width: 100%; max-width: 800px; box-sizing: border-box; }
.stat-item { font-size: 1.1em; color: #333; padding: 8px 15px; border-radius: 20px; background-color: #e9ecef; }
.stat-item strong { font-size: 1.2em; }
.stat-item.livre { background-color: #28a745; color: white; }
.stat-item.reservada { background-color: #ffc107; color: #333; }
.stat-item.vendida { background-color: #dc3545; color: white; }
.stat-item.arrecadado { background-color: #17a2b8; color: white; }
#stat-arrecadado { display: none; }

/* LAYOUT DAS MESAS */
.layout-salão { width: 100%; max-width: 1400px; overflow-x: auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); white-space: nowrap; }
.scroll-container { display: flex; gap: 30px; padding: 10px; transition: transform 0.2s ease; }
.secao-mesas { display: flex; gap: 20px; }
.coluna-mesas { display: flex; flex-direction: column; gap: 15px; }
.mesa { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-weight: bold; font-size: 1.2em; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s; position: relative; }
.mesa:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }
.mesa.livre { background-color: #28a745; }
.mesa.reservada { background-color: #ffc107; }
.mesa.vendida { background-color: #dc3545; }
.mesa.bloqueada { background-color: #6c757d !important; cursor: not-allowed !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a5.25 5.25 0 00-5.25 5.25v3.75h-1.5a.75.75 0 00-.75.75v8.25c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75v-8.25a.75.75 0 00-.75-.75h-1.5V6.75A5.25 5.25 0 0012 1.5zm3.75 5.25V6.75a3.75 3.75 0 10-7.5 0v3.75h7.5z' clip-rule='evenodd'/%3E%3C/svg%3E") !important; background-size: 50% !important; background-position: center !important; background-repeat: no-repeat !important; }
.mesa.bloqueada:hover { transform: scale(1); }

/* LEGENDA E DIVISÓRIA */
.legenda { display: flex; justify-content: center; gap: 20px; margin-top: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.legenda-item { display: flex; align-items: center; gap: 8px; }
.legenda-cor { width: 20px; height: 20px; border-radius: 4px; }
.layout-divider { width: 5px; background-color: #b0b0b0; flex-shrink: 0; border-radius: 5px; }

/* CONTROLES DE ZOOM */
.zoom-controls { margin-top: 15px; display: flex; gap: 10px; justify-content: center; align-items: center; margin-bottom: 10px; }
.zoom-controls button { padding: 8px 12px; font-size: 1.2em; font-weight: bold; border: 1px solid #ccc; border-radius: 5px; background-color: #f8f9fa; color: #333; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.zoom-controls button:hover { background-color: #e2e6ea; }

/* MODAL E FORMULÁRIOS */
.modal { display: none; flex-direction: column; align-items: center; gap: 15px; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 90%; max-width: 350px; }
.modal label { align-self: flex-start; font-weight: bold; }
.modal input, .modal select, .modal button { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; font-size: 1em; box-sizing: border-box; }
.checkbox-container { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 5px; }
.checkbox-container input[type="checkbox"] { width: auto; }
.checkbox-container label { font-weight: normal; }
.modal button { cursor: pointer; background-color: #007bff; color: white; border: none; font-weight: bold; transition: background-color 0.2s; }
.modal button:hover { background-color: #0056b3; }
.modal .botoes-form { display: flex; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; }
.modal .botoes-form button { flex-grow: 1; }
.liberar-btn { background-color: #dc3545 !important; }
.liberar-btn:hover { background-color: #c82333 !important; }
.voltar-btn { background-color: #6c757d !important; }
.voltar-btn:hover { background-color: #545b62 !important; }
.mensagem-erro { color: #dc3545; font-size: 0.9em; display: none; align-self: flex-start; text-align: left; width: 100%; }

/* PAINEL DE INFORMAÇÕES (INFO PANEL) */
.info-panel { position: fixed; top: 0; right: -100%; width: 320px; height: 100%; background-color: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.15); padding: 25px; box-sizing: border-box; transition: right 0.4s ease-in-out; z-index: 9998; text-align: left; display: flex; flex-direction: column; }
.info-panel.visible { right: 0; }
.info-panel h3 { margin-top: 0; color: #007bff; border-bottom: 2px solid #f0f2f5; padding-bottom: 10px; }
.info-panel p { margin: 12px 0; line-height: 1.6; font-size: 1.1em; color: #555; }
.info-panel p strong { display: inline-block; width: 90px; color: #333; }
.info-panel .close-btn { position: absolute; top: 15px; right: 20px; font-size: 2em; font-weight: bold; background: none; border: none; cursor: pointer; color: #aaa; line-height: 1; }
.info-panel .close-btn:hover { color: #333; }
#info-panel-dados-restritos { border-top: 2px solid #f0f2f5; margin-top: 15px; padding-top: 10px; }
#manage-table-btn { background-color: #007bff; color: white; padding: 12px; border-radius: 5px; border: none; font-size: 1.1em; cursor: pointer; margin-top: auto; font-weight: bold; display: none; }
#manage-table-btn:hover { background-color: #0056b3; }

/* --- TELA DE SELEÇÃO DE SALÃO --- */
#hall-selection-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #007bff 0%, #6f42c1 100%); z-index: 20000; display: flex; justify-content: center; align-items: center; }
.selection-container { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); text-align: center; max-width: 500px; width: 90%; }
.selection-container h2 { margin-top: 0; color: #333; }
.hall-options { display: flex; gap: 20px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hall-card { background: #f8f9fa; border: 2px solid #ddd; border-radius: 10px; padding: 20px; width: 140px; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #555; font-weight: bold; }
.hall-card i { font-size: 2.5em; color: #007bff; }
.hall-card:hover { transform: translateY(-5px); border-color: #007bff; box-shadow: 0 5px 15px rgba(0,123,255,0.2); }

/* RESPONSIVIDADE */
@media (max-width: 767px) {
    body { padding: 10px; }
    h1 { font-size: 1.8em; }
    .event-date { font-size: 1.2em; }
    .header-top { justify-content: center; } /* Centraliza no mobile */
    .admin-link { position: static; display: block; margin: 5px 0; text-align: center; }
    .search-filter-container, .stats-container, .export-container { padding: 15px; flex-direction: column; }
    .scroll-container { flex-direction: column; align-items: center; gap: 40px; }
    .secao-mesas { flex-direction: column; gap: 30px; }
    .mesa { width: 50px; height: 50px; font-size: 1em; }
    .info-panel { width: 100%; height: 75%; top: auto; bottom: -100%; right: 0; transition: bottom 0.4s ease-in-out; }
    .info-panel.visible { bottom: 0; right: 0; }
    .layout-divider { width: 90%; height: 4px; margin: 20px auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
     .scroll-container { gap: 20px; }
     .mesa { width: 55px; height: 55px; }
}