/* ============================================================
   components.css
   Common UI components (surfaces, buttons, forms, tables)
   ============================================================ */

/* Surfaces */
.card{
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  padding: var(--pad);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  cursor:pointer;
  user-select:none;
}

.btn:hover{
  background: var(--glass2);
  border-color: var(--border2);
}

.btn:active{
  transform: translateY(1px);
}

.btn-primary,
.btn-orange{
  border-color: rgba(216,103,0,.35);
  background: rgba(216,103,0,.16);
}

.btn-primary:hover,
.btn-orange:hover{
  border-color: rgba(216,103,0,.55);
  background: rgba(216,103,0,.22);
}

/* Forms */
.field{
  display:grid;
  gap:6px;
}

.field label{
  color: var(--muted);
  font-weight:650;
}

.input, input, select, textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}

textarea{
  min-height:120px;
  resize:vertical;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(216,103,0,.55);
  box-shadow: 0 0 0 3px rgba(216,103,0,.16);
}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: var(--r16);
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
}

.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
}

.table th{
  color: var(--muted);
  font-weight:700;
}

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