/* components.css (novo — padrão da imagem) */

/* ===== Cards / Blocks ===== */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.card-pad{ padding:14px; }

.hr{
  height:1px;
  background: var(--line);
  border:0;
  margin:12px 0;
}

/* ===== Buttons ===== */
.btn{
  border:0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#111; /* no modelo o botão parece “amarelo com texto escuro” */
  box-shadow: 0 10px 22px rgba(245,166,35,.20);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.15s;
}

.btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
}

.btn.ghost{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn.ghost:hover{
  border-color: rgba(245,166,35,.40);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

.btn.danger{
  background: linear-gradient(90deg, #E25555, #ff6b6b);
  color:#fff;
  box-shadow: 0 10px 22px rgba(226,85,85,.18);
}

/* ===== Inputs ===== */
.input, .textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  outline:none;
  transition:.15s;
}

.textarea{ min-height: 110px; resize: vertical; }

.input::placeholder, .textarea::placeholder{
  color: rgba(107,122,136,.75);
}

.input:focus, .textarea:focus, select:focus{
  border-color: rgba(245,166,35,.55);
  box-shadow: 0 0 0 4px rgba(245,166,35,.14);
}

/* ===== Forms layout helpers ===== */
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 720px){
  .form-row{ grid-template-columns: 1fr; }
}

.label{
  display:block;
  font-size:12px;
  font-weight:900;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ===== Table (padrão do print: borda + header claro) ===== */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: var(--card);
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.table thead th{
  text-align:left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  padding: 12px 12px;
  background: #F6F8FB;
  border-bottom: 1px solid var(--line);
}

.table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.table tbody tr:hover td{
  background: rgba(245,166,35,.08);
}

.table tbody tr:last-child td{
  border-bottom: 0;
}

/* ===== Tags ===== */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: #fff;
}

.tag.validated{
  color: #0F5B45;
  background: rgba(45,190,141,.10);
  border-color: rgba(45,190,141,.35);
}

.tag.uploaded{
  color: #7A4B00;
  background: rgba(245,166,35,.12);
  border-color: rgba(245,166,35,.35);
}

.tag.error, .tag.errorlog{
  color:#7A1F1F;
  background: rgba(226,85,85,.10);
  border-color: rgba(226,85,85,.35);
}

.tag.warning{
  color:#7A4B00;
  background: rgba(245,166,35,.12);
  border-color: rgba(245,166,35,.35);
}

.tag.info{
  color: var(--muted);
  background: rgba(30,42,53,.05);
  border-color: rgba(30,42,53,.12);
}

/* ===== Links ===== */
.link{
  color: #7A4B00;
  text-decoration:none;
  font-weight:800;
}
.link:hover{ text-decoration:underline; }

/* ===== Small metric cards (tipo do dashboard da imagem) ===== */
.metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1100px){
  .metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .metrics{ grid-template-columns: 1fr; }
}

.metric{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.metric .k{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.metric .v{
  margin-top:8px;
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.metric .icon{
  width:26px; height:26px;
  border-radius:10px;
  display:grid; place-items:center;
  background: rgba(245,166,35,.14);
  border: 1px solid rgba(245,166,35,.30);
  color: #7A4B00;
  font-weight: 900;
}