:root{
  --bg:#0B1222;
  --sidebar:#111827;
  --card:#1F2937;
  --card-soft:#162032;

  --accent:#00FFD1;
  --accent-blue:#3B82F6;

  --text:#E6EDF3;
  --muted:#94A3B8;

  --danger:#EF4444;
  --warning:#F59E0B;
  --success:#10B981;

  /* MOBILE (🔥 ESSENCIAL) */-----------------------------
  --mobile-nav-height: 72px;
  --mobile-safe-area: env(safe-area-inset-bottom);
}

/* RESET */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  display:flex;
  min-height:100vh;
}

/* =====================================================
   DESIGN SYSTEM • MODAL CLOSE (PADRÃO GLOBAL)
===================================================== */

.modal-close{
  position:absolute !important;
  top:16px !important;
  right:16px !important;

  width:40px !important;
  height:40px !important;
  border:none !important;
  border-radius:14px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:rgba(239,68,68,.08) !important;
  border:1px solid rgba(239,68,68,.18) !important;
  color:#F87171 !important;

  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;

  transition:.22s ease !important;
  box-shadow:none !important;
  outline:none !important;
}

.modal-close:hover{
  background:rgba(239,68,68,.14) !important;
  border-color:rgba(239,68,68,.28) !important;
  color:#FF8A8A !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(239,68,68,.10) !important;
}

.modal-close:active{
  transform:translateY(0) scale(.98) !important;
}

.modal-close:focus{
  outline:none !important;
  box-shadow:
    0 0 0 3px rgba(239,68,68,.10),
    0 10px 24px rgba(239,68,68,.08) !important;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
  width:260px;
  background:var(--sidebar);
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,0.04);
  height:100vh;
}

.logo{
  font-size:22px;
  font-weight:700;
  margin-bottom:40px;
  color:var(--accent);
}

.nav a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
  margin-bottom:8px;
  transition:.2s;
}

.nav a:hover,
.nav a.active{
  background:rgba(0,255,209,0.12);
  color:var(--accent);
}


/* =====================================================
   MAIN
===================================================== */

.main{
  flex:1;
  padding:40px 50px;
}


/* =====================================================
   HEADER PADRÃO
===================================================== */

.page-header{
  margin-bottom:25px;
}

.page-title{
  font-size:26px;
  font-weight:700;
}

.page-sub{
  color:var(--muted);
  font-size:14px;
}


/* =====================================================
   CARD BASE (🔥 CORRIGIDO)
===================================================== */

.card{
  background:linear-gradient(180deg,#0F1A2D,#0C1626);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:20px;
  padding:20px;
  backdrop-filter:blur(6px);
}


/* =====================================================
   TABELAS (🔥 AQUI FOI O PROBLEMA)
===================================================== */

.card table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}

/* HEADER */
.card thead th{
  text-align:left;
  padding:14px 12px;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.card thead tr{
  border-bottom:1px solid rgba(0,255,209,0.3);
}

/* BODY */
.card td{
  padding:16px 12px;
  font-size:14px;
}

/* 🔥 LINHAS VISÍVEIS (FIX REAL) */
.card tbody tr{
  border-bottom:1px solid rgba(255,255,255,0.12);
  transition:.2s;
}

.card tbody tr:last-child{
  border-bottom:none;
}

.card tbody tr:hover{
  background:rgba(0,255,209,0.05);
}


/* =====================================================
   UTILIDADES
===================================================== */

.text-success{ color:var(--success); }
.text-danger{ color:var(--danger); }
.text-warning{ color:var(--warning); }
.text-muted{ color:var(--muted); }


/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:900px){

  .sidebar{
    display:none;
  }

  .main{
    padding:20px;
  }

}