/* ============================================================
   modal.css
   ============================================================ */

/* ======================== FORM ======================== */
.form-row { margin-bottom: 16px; }
.form-row label { display:block; font-size:12px; font-weight:700; color:var(--text-500); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-main); font-size: 13.5px;
  color: var(--text-900); background: var(--bg-card);
  outline: none; transition: border-color .2s;
  resize: vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--green-500);
}
.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-cancel {
  padding: 10px 20px; border-radius: 99px;
  border: 1.5px solid var(--border); background: none;
  font-family: var(--font-main); font-size: 13px; font-weight: 600;
  color: var(--text-500); cursor: pointer; transition: .2s;
}
.btn-cancel:hover { background: var(--bg-base); }
.btn-save {
  padding: 10px 24px; border-radius: 99px;
  background: var(--green-600); border: none; color: #fff;
  font-family: var(--font-main); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: .2s;
}
.btn-save:hover { background: var(--green-700); box-shadow: var(--shadow-md); }

/* ======================== TOAST ======================= */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--green-900); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px); opacity: 0;
  transition: all .3s ease;
  z-index: 9999; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ======================== EMPTY STATE ================= */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px; text-align: center; color: var(--text-300);
}
.empty-state svg { width: 48px; height: 48px; stroke: var(--border); fill: none; stroke-width: 1.2; margin-bottom: 14px; }
.empty-state p { font-size: 13px; }