/* ================= ROOT ================= */

:root{
  --bg-dark: #1a0f0d;
  --bg-soft: #2a1714;

  --accent: #ff2f6d;
  --accent-soft: #ff6b9a;

  --glass: rgba(255,255,255,0.08);

  --text: #ffffff;
  --muted: #d6cfcf;
  --gold-soft: #c6a27a;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --bg-image: url('/caminho-da-sua-imagem.jpg');
}

/* ================= BASE ================= */

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(26,15,13,0.85), rgba(26,15,13,0.92)),
    var(--bg-image) center/cover no-repeat;
}

.container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

/* ================= CARD ================= */

.card{
  width:100%;
  max-width:820px;
  background:rgba(20,10,9,0.85);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);

  display:grid;
  grid-template-columns:1fr 360px;
  gap:24px;

  transition:.3s ease;
}

@media (hover:hover){
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 80px rgba(0,0,0,0.6);
  }
}

@media (max-width:880px){
  .card{
    grid-template-columns:1fr;
    padding:24px;
  }
}

h1{
  margin:0 0 8px;
  font-size:20px;
}

.lead{
  color:var(--muted);
  margin:0 0 16px;
}

/* ================= FORM LAYOUT ================= */

.form-section{
  width:100%;
  max-width:720px;
  margin:0 auto;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 28px;
}

@media (max-width:768px){
  .form-section{
    grid-template-columns:1fr;
  }
}

/* ================= INPUT GROUP ================= */

.input-group{
  display:flex;
  flex-direction:column;
}

.input-group.full{
  grid-column:1 / -1;
}

.input-group label{
  font-size:14px;
  margin-bottom:6px;
  color:var(--muted);
}

/* Checkbox inline */
.input-group.checkbox{
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.input-group.checkbox label{
  margin:0;
}

/* Checkbox alinhado em linha única */
.input-group.checkbox-inline{
  flex-direction:row;
  align-items:center;
  gap:10px;
}

.input-group.checkbox-inline label{
  margin:0;
  white-space:nowrap;
}

.input-group.checkbox-inline input{
  width:auto;
  margin:0 4px;
}

.input-group.checkbox-inline span{
  margin:0;
}

/* ================= INPUTS ================= */

.input-group input,
.input-group select,
.input-group textarea{
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:15px;
  transition:.3s ease;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,47,109,0.25);
}

/* Melhor acessibilidade */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ================= FORM BUTTON ================= */

.form-button{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  margin-top:10px;
}

.form-button button{
  min-width:220px;
}

/* ================= RIGHT PANEL ================= */

.right-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.summary{
  padding:20px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.1);
}

/* ================= CONTROLS ================= */

.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin:14px 0;
}

.controls input#table-search{
  flex:1;
  padding:10px;
  border-radius:var(--radius-sm);
  border:none;
  background:rgba(255,255,255,0.6);
  font-size:15px;
}

.controls .filters{
  display:flex;
  gap:8px;
}

.controls select{
  padding:10px;
  border-radius:var(--radius-sm);
  border:none;
  background:rgba(255,255,255,0.6);
  font-size:14px;
}

/* ================= BUTTON ================= */

button{
  padding:14px 18px;
  border-radius:var(--radius-md);
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  color:#fff;
  font-weight:600;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(255,47,109,0.35);
  transition:.3s ease;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 40px rgba(255,47,109,0.5);
}

/* ================= LOADING ================= */

.loading{
  display:none;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
  margin-top:8px;
}

.loading.active{
  display:flex;
}

.loading::before{
  content:'';
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.2);
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* ================= MODAL ================= */

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:.25s ease;
}

.modal.open{
  opacity:1;
  pointer-events:auto;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(6px);
}

.modal-card{
  position:relative;
  z-index:2;
  background:rgba(25,12,10,0.95);
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 25px 80px rgba(0,0,0,0.6);
  padding:24px;
  max-width:420px;
  text-align:center;
}

/* ================= TABLE ================= */

.table th.sortable{
  position:relative;
}

.table th.sortable::after{
  content:'⤓';
  position:absolute;
  right:10px;
  color:rgba(255,255,255,0.4);
  font-size:12px;
}

.table th.sortable.sorted-asc::after{content:'⬆'}
.table th.sortable.sorted-desc::after{content:'⬇'}

.card .table th,
.card .table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:14px;
  color:var(--text);
}

.card .table th{
  color:var(--gold-soft);
  font-weight:600;
}

.table td{
  vertical-align:top;
}

.table tr:hover{
  background:rgba(255,255,255,0.05);
}

@media (max-width:880px){
  .card .table{
    display:block;
    overflow:auto;
    white-space:nowrap;
  }
}

/* ================= LOGO ================= */

.logo{
  display:block;
  width:100%;
  max-width:360px;
  height:auto;
  border-radius:var(--radius-md);
  margin:0 auto 15px;
  transition:.3s ease;
}

@media (min-width:880px){
  .logo{max-width:420px;}
}

@media (min-width:1200px){
  .logo{max-width:500px;}
}

/* ================= REQUIRED LABEL ================= */

label.required::after{
  content:' *';
  color:var(--accent);
}