/* ============================================================
   components.css
   Reusable pieces shared by more than one panel:
   buttons, form cards, empty state, lightbox.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  background:linear-gradient(180deg,#dcb15c,var(--brass));
  border:1px solid var(--brass-dim);
  border-radius:3px;
  padding:10px 18px;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }

.btn.ghost{
  background:transparent;
  color:var(--parchment-dim);
  border:1px solid var(--walnut-500);
}
.btn.ghost:hover{ color:var(--parchment); border-color:var(--brass-dim); }

.btn.danger{
  background:transparent; color:var(--clay); border:1px solid var(--clay-dim);
  font-size:11px; padding:6px 10px;
}
.btn.danger:hover{ background:rgba(161,61,43,.15); }

.btn.approve{
  background:transparent; color:var(--sage); border:1px solid var(--sage);
  font-size:11px; padding:6px 12px;
}
.btn.approve:hover{ background:rgba(95,154,120,.15); }

.btn.deny{
  background:transparent; color:var(--clay); border:1px solid var(--clay-dim);
  font-size:11px; padding:6px 12px;
}
.btn.deny:hover{ background:rgba(193,68,58,.15); }

.btn.edit{
  background:transparent; color:var(--brass); border:1px solid var(--brass-dim);
}
.btn.edit:hover{ background:rgba(79,143,255,.12); }

/* ---------- FORM CARDS ---------- */
.form-card{
  background:var(--walnut-700);
  border:1px solid var(--walnut-500);
  border-radius:5px;
  padding:20px;
  margin-bottom:22px;
  box-shadow:var(--shadow);
}
.form-card h3{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:15px; margin:0 0 14px; color:var(--brass);
}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.form-grid.wide{ grid-template-columns:1fr; }
.form-grid label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; color:var(--parchment-dim);
  font-family:var(--font-mono); letter-spacing:.03em;
}
.form-grid input, .form-grid select, .form-grid textarea{
  font-family:var(--font-body); background:var(--walnut-800);
  border:1px solid var(--walnut-500); color:var(--parchment);
  padding:9px 10px; border-radius:3px; font-size:14px; resize:vertical;
}
.form-grid input[type="file"]{ padding:8px; font-size:12.5px; color:var(--parchment-dim); }

.form-hint{
  font-family:var(--font-mono); font-size:11px; color:var(--parchment-dim);
  opacity:.75; margin-top:2px;
}

.form-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* every text field in the board gets the same focus ring */
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--brass); outline-offset:1px;
}

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

/* ---------- ATTACHED IMAGE PREVIEW ---------- */
.media-preview{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.media-preview img{
  width:56px; height:56px; object-fit:cover;
  border-radius:4px; border:1px solid var(--walnut-500);
}
.media-preview button{
  background:none; border:none; color:var(--clay); font-family:var(--font-mono);
  font-size:11px; cursor:pointer; text-decoration:underline;
}

/* ---------- EMPTY STATE ---------- */
.empty{
  text-align:center; padding:40px 20px;
  color:var(--parchment-dim);
  font-family:var(--font-mono);
  font-size:13px;
  border:1px dashed var(--walnut-500);
  border-radius:4px;
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(2,4,8,.9);
  display:flex; align-items:center; justify-content:center;
  padding:30px; cursor:zoom-out;
}
.lightbox img{
  max-width:100%; max-height:100%;
  border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.6);
}