@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --text: #172033;
  --muted: #667085;
  --line: #e2e7ef;
  --primary: #182b49;
  --primary-hover: #243f67;
  --accent: #e0a52b;
  --danger: #b42318;
  --success: #067647;
  --radius: 16px;
  font-family: Inter, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { background: var(--primary); color: white; padding: 20px clamp(16px, 4vw, 48px); }
.brand { max-width: 1440px; margin: auto; display: flex; align-items: center; gap: 16px; }
.logo { width: 58px; height: 58px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; display: none; }
.brand-copy { min-width: 0; }
.brand h1 { font-size: clamp(18px, 3vw, 26px); margin: 0; letter-spacing: .03em; }
.brand p { margin: 6px 0 0; color: #d6deeb; font-size: 13px; }
.header-tag { margin-left: auto; border: 1px solid #61728c; padding: 8px 12px; border-radius: 999px; color: #edf2fa; font-size: 12px; white-space: nowrap; }
main { max-width: 1440px; padding: 28px clamp(14px, 3vw, 36px) 48px; margin: auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-heading h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); }
.page-heading p { margin: 0; color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 2.5vw, 24px); box-shadow: 0 5px 20px #17203308; margin-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: white; border: 1px solid var(--line); padding: 18px; border-radius: 14px; }
.stat span { color: var(--muted); font-size: 13px; }
.stat strong { display: block; font-size: 28px; margin-top: 7px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input { flex: 1 1 240px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: 13px; font-weight: 700; }
.field input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; padding: 0; margin: 0 8px 0 0; accent-color: var(--primary); vertical-align: middle; }
.field label:has(input[type="checkbox"]) { display: flex; align-items: center; min-height: 44px; }
input, select { width: 100%; border: 1px solid #cfd6e2; border-radius: 10px; padding: 12px 13px; color: var(--text); background: white; outline: none; min-height: 44px; }
input:focus, select:focus { border-color: #4e6f9d; box-shadow: 0 0 0 3px #4e6f9d20; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid .full { grid-column: 1 / -1; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.btn { border: 0; border-radius: 10px; padding: 11px 15px; min-height: 42px; font-weight: 700; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-light { background: #edf1f7; color: #24334c; }
.btn-danger { background: #fff0ef; color: var(--danger); }
.btn:disabled { opacity: .6; cursor: wait; }
.table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 760px; background: white; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { background: #f8f9fb; color: #526078; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
td .actions { flex-wrap: nowrap; }
.small-btn { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: white; font-weight: 700; font-size: 12px; }
.status { min-height: 20px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.status.error { color: var(--danger); }
.status.success { color: var(--success); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
.form-card { max-width: 720px; margin: 0 auto; }
.form-intro { color: var(--muted); line-height: 1.65; margin: 0 0 22px; }
.footer { text-align: center; padding: 0 16px 26px; color: var(--muted); font-size: 12px; }
.link { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) {
  .header-tag { display: none; }
  .stats { grid-template-columns: 1fr; gap: 9px; }
  .stat { padding: 14px; }
  .stat strong { font-size: 23px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  main { padding-top: 20px; }
}

.editor-actions { margin-top: 18px; }

/* Resumo, filtros e modais do painel */
.summary-stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat small{display:block;color:var(--muted,#64748b);margin-top:5px}
.shirt-summary{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.shirt-chip{display:inline-block;padding:5px 9px;border-radius:8px;background:#edf2f8;color:#182b49;font-weight:700;font-size:13px}
.column-filter{display:block;max-width:130px;width:100%;margin-top:6px;padding:5px;border:1px solid var(--line,#dbe3ee);border-radius:6px;background:white;color:#182b49;font-size:12px}
.modal-backdrop[hidden]{display:none!important}
.modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.modal-card{position:relative;width:min(720px,100%);max-height:90vh;overflow:auto;margin:0!important;background:#fff}
.modal-close{position:absolute;right:12px;top:10px;border:0;border-radius:5px;width:30px;height:30px;font-size:24px;line-height:1;background:#edf2f8;color:#182b49;cursor:pointer}
#editorPanel[hidden]{display:none}
@media(max-width:640px){.modal-backdrop{align-items:flex-start;padding:10px}.modal-card{padding:18px}.column-filter{max-width:100px}}


/* Correção de visibilidade e layout responsivo */
[hidden] { display: none !important; }
.shown-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.brand { flex-wrap: wrap; }
.brand-copy { flex: 1 1 240px; }
.actions { min-width: 0; }
.summary-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.toolbar > button { flex: 0 0 auto; }
.modal-backdrop { overscroll-behavior: contain; }
.modal-card { width: min(720px, 100%); max-height: min(90vh, 900px); overflow-y: auto; }
@media (max-width: 760px) {
  .topbar { padding: 14px 16px; }
  .brand { gap: 10px; }
  .brand-copy { flex: 1 1 100%; }
  .brand h1 { font-size: clamp(18px, 5vw, 24px); }
  .brand p { font-size: 12px; }
  .brand .actions { width: 100%; margin-top: 4px; }
  .header-tag { display: inline-flex; margin-left: 0; }
  main { padding: 18px 12px 30px; }
  .page-heading { align-items: stretch; }
  .page-heading > .btn { width: 100%; }
  .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat { padding: 12px; min-width: 0; }
  .stat strong { font-size: 22px; overflow-wrap: anywhere; }
  .toolbar { align-items: stretch; }
  .toolbar input { flex-basis: 100%; min-width: 0; }
  .toolbar > button { flex: 1 1 auto; }
  .shown-count { width: 100%; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 900px; }
  th, td { padding: 10px; }
  .modal-backdrop { padding: 8px; align-items: flex-start; }
  .modal-card { padding: 18px 14px; width: 100%; max-height: calc(100dvh - 16px); border-radius: 12px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .form-grid .full { grid-column: 1; }
  .editor-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .summary-stats { grid-template-columns: 1fr; }
  .header-tag { font-size: 11px; padding: 7px 9px; }
  .brand .actions .btn { min-height: 38px; padding: 9px 12px; }
}

/* Em telas pequenas, manter os cartões de resumo em duas colunas. */
@media (max-width: 760px) {
  .summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }
}
@media (max-width: 420px) {
  .summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .stat { padding: 10px; }
  .stat strong { font-size: 21px; }
}

/* Ajustes solicitados: filtros em modal, detalhes e ações por ícones */
.icon-btn { min-width: 36px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; }
.danger-icon { color: var(--danger); }
.member-name-link { border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 700; text-align: left; padding: 0; cursor: pointer; }
.member-name-link:hover { text-decoration: underline; }
.compact-modal { width: min(520px, 100%); }
.details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.detail-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; overflow-wrap: anywhere; }
.detail-item strong { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.detail-item span { font-size: 14px; }
#filterBackdrop .field select { width: 100%; }
@media(max-width:760px) {
  .table-wrap { overflow-x: visible; }
  table { min-width: 0; width: 100%; table-layout: auto; }
  thead th:not(:first-child):not(:last-child), tbody td:not(:first-child):not(:last-child) { display: none; }
  thead th:first-child, tbody td:first-child { width: auto; }
  thead th:last-child, tbody td:last-child { width: 92px; white-space: nowrap; }
  tbody tr { border-bottom: 1px solid var(--line); }
  tbody td { padding: 13px 8px; }
  .member-name-link { max-width: 100%; overflow-wrap: anywhere; }
  .table-wrap table { min-width: 0; }
  .details-grid { grid-template-columns: 1fr; }
}

/* Modal de motivo da exclusão e histórico: responsivo em desktop e celular */
.deleted-modal { width: min(760px, 100%); }
.deleted-list { display: grid; gap: 12px; max-height: min(62vh, 620px); overflow: auto; padding: 2px; }
.deleted-item { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafc; }
.deleted-item h4 { margin: 0 0 8px; color: var(--primary); overflow-wrap: anywhere; }
.deleted-meta p { margin: 5px 0; line-height: 1.45; overflow-wrap: anywhere; }
.deleted-meta strong { color: var(--muted); }
#deleteReasonForm .field, #deleteReasonForm select, #deleteReasonForm input, #deleteReasonForm textarea { width: 100%; min-width: 0; box-sizing: border-box; }
#deleteReasonForm textarea { resize: vertical; }
@media(max-width:640px) {
  .deleted-modal { width: 100%; }
  .deleted-list { max-height: calc(100dvh - 240px); }
  .deleted-item { padding: 11px; }
  #deleteReasonForm .actions { display: grid; grid-template-columns: 1fr; }
  #deleteReasonForm .actions button { width: 100%; }
}

/* Menu hamburguer do painel */
.hamburger-menu{position:relative;display:inline-flex;flex:0 0 auto}
.hamburger-dropdown{position:absolute;right:0;top:calc(100% + 7px);z-index:1200;min-width:230px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #17203320}
.hamburger-dropdown button,.hamburger-dropdown a{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;border-radius:8px;background:#fff;color:var(--text);text-align:left;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.hamburger-dropdown button:hover,.hamburger-dropdown a:hover{background:#edf1f7}
.checkbox-group{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:12px 14px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px}
.checkbox-group label{display:flex;align-items:center;gap:7px;min-height:28px;font-weight:600}
.checkbox-group input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--primary)}
.deleted-table-wrap{max-height:min(62vh,620px);overflow:auto}
.deleted-table-wrap table{min-width:780px}
.deleted-table-wrap th,.deleted-table-wrap td{vertical-align:top;overflow-wrap:anywhere}
@media(max-width:760px){.toolbar{align-items:stretch}.hamburger-menu{flex:1 1 auto}.hamburger-menu>#menuToggle{width:100%}.hamburger-dropdown{left:0;right:0;min-width:0}.checkbox-group{display:grid;grid-template-columns:1fr;gap:4px}.deleted-table-wrap{overflow-x:auto}.deleted-table-wrap table{min-width:700px}}

/* Correções responsivas: menu apenas com ícone e histórico no mesmo padrão compacto */
#menuToggle{width:44px;min-width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:0}
#menuToggle i{font-size:20px}
.hamburger-menu{flex:0 0 auto!important}
.hamburger-dropdown{width:max-content;min-width:230px;max-width:min(360px,calc(100vw - 24px));right:0;left:auto;box-sizing:border-box}
.hamburger-dropdown button,.hamburger-dropdown a{white-space:normal;overflow-wrap:anywhere;min-width:0}
@media(max-width:760px){
  .hamburger-menu{flex:0 0 auto!important}
  .hamburger-menu>#menuToggle{width:44px!important}
  .hamburger-dropdown{width:max-content;min-width:230px;max-width:calc(100vw - 24px);right:0;left:auto}
  .deleted-table-wrap{overflow:visible;border:0}
  .deleted-table-wrap table,.deleted-table-wrap tbody{display:block;width:100%;min-width:0}
  .deleted-table-wrap thead{display:none}
  .deleted-table-wrap tbody{display:grid;gap:10px}
  .deleted-table-wrap tbody tr{display:block;border:1px solid var(--line);border-radius:11px;background:#fff;padding:8px 12px;overflow:hidden}
  .deleted-table-wrap tbody td{display:grid!important;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:8px;width:100%!important;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px;white-space:normal;overflow-wrap:anywhere}
  .deleted-table-wrap tbody td:last-child{border-bottom:0}
  .deleted-table-wrap tbody td::before{content:attr(data-label);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);overflow-wrap:anywhere}
}

/* Modais: a rolagem acontece no painel de fundo para permitir percorrer a modal inteira */
.modal-backdrop{align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:18px;}
.modal-card{max-height:none;overflow:visible;flex:0 0 auto;margin:0 auto!important;}
.deleted-modal{width:min(760px,100%);min-width:0;}
.deleted-list{width:100%;max-height:min(62vh,620px);overflow-y:auto;overflow-x:hidden;min-width:0;box-sizing:border-box;}
.deleted-record-list{display:grid;gap:9px;width:100%;min-width:0;}
.deleted-record{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:0;box-sizing:border-box;}
.deleted-name-link{justify-self:start;max-width:100%;padding:0;border:0;background:transparent;color:var(--primary);font:inherit;font-weight:800;text-align:left;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;cursor:pointer;min-width:0;}
.deleted-reason{grid-column:1;grid-row:2;margin:0;color:var(--muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere;min-width:0;}
.deleted-record>.icon-btn{grid-column:2;grid-row:1 / span 2;align-self:center;}
#detailsContent,.details-grid,.detail-item{min-width:0;overflow-wrap:anywhere;}
@media(max-width:640px){
  .modal-backdrop{padding:8px;}
  .modal-card{width:100%;box-sizing:border-box;padding:18px 14px;}
  .deleted-modal{width:100%;}
  .deleted-list{max-height:calc(100dvh - 190px);overflow-y:auto;overflow-x:hidden;}
  .deleted-record{padding:10px;gap:5px 8px;}
}

.waitlist-badge{display:inline-block;margin-top:4px;padding:3px 7px;border-radius:6px;background:#fff0c2;color:#7a4b00;font-size:11px;font-weight:700}.promoted-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}.promoted-list:empty{display:none}.promoted-list h4{margin:8px 0}.promoted-link{display:block;padding:10px 12px;border:1px solid #c9d7e8;border-radius:8px;color:#14532d;font-weight:700;text-decoration:underline;background:#f0fdf4}.actions:has(#capacityBtn){flex-wrap:wrap}

/* Situação das vagas na lista principal */
.confirmed-row td{background:#effaf1!important}
.waitlist-row td{background:#fff7d6!important}
.confirmed-row:hover td{background:#e4f6e8!important}
.waitlist-row:hover td{background:#ffefb5!important}
.capacity-count{display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border-radius:10px;background:#e5f6e9;color:#176534;border:1px solid #b9e4c4;font-weight:800;white-space:nowrap}
.capacity-history-table{min-width:0;width:100%}
.capacity-history-table th,.capacity-history-table td{white-space:normal;overflow-wrap:anywhere}
@media(max-width:640px){.capacity-count{flex:1 1 100%;justify-content:center}}

/* Histórico de vagas: botão compacto apenas com ícone */
.capacity-history-icon{width:36px;height:36px;min-width:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#capacityPasswordWrap[hidden]{display:none!important}

/* Destaque do cabeçalho quando o cadastro público está em lista de espera */
.waitlist-header-tag{background:#fff0c2!important;color:#805300!important;border:1px solid #f0cf70!important;}