/* CS Media — ProDash Forms (SCOPED) */
/* Sve unutar .pd-forms — visoka specifičnost da pregazi stari style.css */

:root{
  --f-text:#1f2937;
  --f-muted:#6b7280;
  --f-line:#e5e7eb;
  --f-card:#ffffff;
  --f-bg:#f2f4f8;
  --f-shadow:0 10px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --f-primary:#3b82f6;
  --f-primary-600:#2563eb;
  --f-success:#10b981;
  --f-danger:#ef4444;
  --f-radius:12px;
}

/* ===== PAGE WRAPPER ===== */
.pd-forms{ display:flex; flex-direction:column; gap:14px; }
.pd-forms > .pd-title{ margin:0 0 4px; font-size:22px; font-weight:800; }

/* ===== CARD ===== */
.pd-forms .form-card{
  background:var(--f-card); border:1px solid var(--f-line); border-radius:var(--f-radius);
  box-shadow:var(--f-shadow); padding:14px 16px 16px;
}

/* ===== GRID ===== */
.pd-forms .form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:10px;
}
@media (max-width: 960px){ .pd-forms .form-grid{ grid-template-columns: 1fr; } }

/* ===== FIELD ===== */
.pd-forms .form-field{ display:flex; flex-direction:column; gap:6px; }
.pd-forms .form-field > label{ font-size:12px; color:var(--f-muted); }

.pd-forms .input, .pd-forms .select, .pd-forms .textarea{
  width:100%; padding:10px 12px; border:1px solid var(--f-line); border-radius:10px;
  background:#fff; color:var(--f-text); outline:none;
}
.pd-forms .textarea{ min-height:110px; resize:vertical; }
.pd-forms .input:focus, .pd-forms .select:focus, .pd-forms .textarea:focus{
  border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

/* ===== ACTIONS ===== */
.pd-forms .form-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.pd-forms .btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--f-line); background:#fff; color:var(--f-text); text-decoration:none; cursor:pointer;
}
.pd-forms .btn i{ width:16px; text-align:center; }
.pd-forms .btn.secondary{ background:#eef2f7; border-color:#eef2f7; }
.pd-forms .btn.success{ background:var(--f-success); border-color:var(--f-success); color:#fff; }
.pd-forms .btn.danger{ background:#fff; border-color:var(--f-danger); color:var(--f-danger); }
.pd-forms .btn:hover{ border-color:#d1d5db; }

/* ===== ALERTS ===== */
.pd-forms .alert{ padding:10px 12px; border-radius:10px; border:1px solid transparent; }
.pd-forms .alert.danger{ background:#fff1f2; border-color:#fecdd3; color:#991b1b; }

/* ===== CUSTOM FIELDS ===== */
.pd-forms .cf-box{
  margin-top:8px; border:1px solid var(--f-line); border-radius:12px; padding:10px 12px 12px; background:#fff;
}
.pd-forms .cf-box legend{ font-weight:800; font-size:14px; padding:0 6px; color:#111827; }
.pd-forms .cf-list{ position:relative; display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.pd-forms .cf-row{ display:grid; grid-template-columns: 1.2fr 2fr auto auto; gap:8px; align-items:center; }
@media (max-width: 880px){ .pd-forms .cf-row{ grid-template-columns: 1fr 1fr auto auto; } }

.pd-forms .cf-row .cf-label,
.pd-forms .cf-row .cf-value{
  width:100%; padding:10px 12px; border:1px solid var(--f-line); border-radius:10px; background:#fff; outline:none;
}
.pd-forms .cf-row .cf-label:focus,
.pd-forms .cf-row .cf-value:focus{ border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(59,130,246,.12); }

.pd-forms .cf-actions{ margin-top:8px; display:flex; justify-content:flex-end; }
.pd-forms .cf-actions .btn{ padding:8px 10px; border-radius:10px; border:1px solid var(--f-line); background:#f3f4f6; color:#111827; }
.pd-forms .cf-actions .btn i{ width:16px; text-align:center; }

.pd-forms .cf-del{ padding:8px 10px; border-radius:10px; border:1px solid #ef4444; background:#fff; color:#ef4444; cursor:pointer; }
.pd-forms .cf-drag{ padding:8px 10px; border-radius:10px; border:1px solid var(--f-line); background:#f3f4f6; color:#111827; cursor:grab; }
.pd-forms .cf-drag:active{ cursor:grabbing; }

/* Drag vizual */
.pd-forms .cf-row.dragging{ opacity:.96; box-shadow:0 10px 24px rgba(0,0,0,.10); }
.pd-forms .cf-placeholder{ visibility:hidden; }