/* ================================================================
   Brollop – style.css
   ================================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  background:#f5f4f0; color:#2c2c2c; font-size:15px; line-height:1.5; min-height:100vh;
}
a { color:#5a7fa8; text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- Layout ---- */
.wrap { max-width:1100px; margin:0 auto; padding:32px 24px 60px; }
.wrap-narrow { max-width:640px; }

/* ---- Page header ---- */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.page-header h1 { font-size:26px; font-weight:700; color:#1a1a1a; }
.subtitle { font-size:14px; color:#888; margin-top:4px; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 18px; border-radius:7px; font-size:14px; font-weight:500;
  cursor:pointer; border:none; text-decoration:none;
  transition:opacity .15s; white-space:nowrap;
}
.btn:hover { opacity:.85; text-decoration:none; }
.btn-primary   { background:#2c3e50; color:#fff; }
.btn-secondary { background:#6c7a89; color:#fff; }
.btn-ghost     { background:transparent; color:#555; border:1px solid #ccc; }
.btn-delete    { background:#c0392b; color:#fff; }
.btn-edit      { background:#2980b9; color:#fff; }
.btn-card      { background:#7f6b5d; color:#fff; }
.btn-sm { padding:5px 11px; font-size:13px; border-radius:5px; }

/* ---- Stats ---- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:28px; }
.stat-card { background:#fff; border-radius:10px; padding:20px 16px; text-align:center; border:1px solid #e8e4de; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.stat-number { font-size:36px; font-weight:700; color:#2c3e50; line-height:1; }
.stat-label  { font-size:12px; color:#888; margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
.stat-groom .stat-number { color:#2980b9; }
.stat-bride .stat-number { color:#c0639a; }

/* ---- Public link bar ---- */
.public-link-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff; border:1px solid #e0dbd3; border-radius:8px;
  padding:10px 16px; margin-bottom:20px; font-size:14px;
}
.public-link-bar code {
  background:#f5f4f0; padding:3px 10px; border-radius:5px;
  font-family:monospace; font-size:13px; color:#2c3e50; flex:1;
}

/* ---- Filter bar ---- */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; align-items:center; }
.input-search, .input-select { padding:9px 13px; border:1px solid #d0cac2; border-radius:7px; font-size:14px; background:#fff; color:#333; }
.input-search { min-width:220px; }
.input-search:focus, .input-select:focus { outline:none; border-color:#7f8fa6; box-shadow:0 0 0 2px rgba(127,143,166,.2); }

/* ---- Table ---- */
.table-wrap { overflow-x:auto; border-radius:10px; border:1px solid #e0dbd3; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.res-table { width:100%; border-collapse:collapse; font-size:14px; }
.res-table thead tr { background:#f8f6f2; border-bottom:2px solid #e0dbd3; }
.res-table th { padding:12px 16px; text-align:left; font-weight:600; color:#555; font-size:13px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.res-table td { padding:11px 16px; border-bottom:1px solid #f0ece6; vertical-align:middle; }
.res-table tbody tr:last-child td { border-bottom:none; }
.res-table tbody tr:hover { background:#faf8f5; }
.td-num     { color:#aaa; width:40px; }
.td-name    { font-weight:600; }
.td-actions { white-space:nowrap; display:flex; gap:6px; flex-wrap:wrap; }

/* ---- Badges ---- */
.badge        { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.badge-groom  { background:#e8f0f8; color:#2980b9; }
.badge-bride  { background:#fce8f5; color:#c0639a; }
.badge-table  { background:#f0ece6; color:#5a4a3a; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }

/* ---- Empty state ---- */
.empty-state { text-align:center; padding:60px 24px; color:#888; }
.empty-state p { margin-bottom:16px; font-size:16px; }

/* ---- Card (form) ---- */
.card { background:#fff; border:1px solid #e0dbd3; border-radius:10px; padding:28px; box-shadow:0 1px 4px rgba(0,0,0,.05); }

/* ---- Form ---- */
.form-group { margin-bottom:20px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label       { display:block; font-size:13px; font-weight:600; color:#444; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.req        { color:#c0392b; }
.field-hint { font-size:12px; color:#999; margin-top:5px; font-weight:400; text-transform:none; letter-spacing:0; }

input[type="text"], input[type="number"] {
  width:100%; padding:10px 13px; border:1px solid #d0cac2; border-radius:7px;
  font-size:15px; background:#fff; color:#333; transition:border-color .15s;
}
input:focus { outline:none; border-color:#7f8fa6; box-shadow:0 0 0 2px rgba(127,143,166,.2); }

/* ---- Slug preview ---- */
.slug-preview { display:flex; align-items:center; background:#fff; border:1px solid #d0cac2; border-radius:7px; overflow:hidden; }
.slug-base    { padding:10px 12px; background:#f5f4f0; color:#888; font-size:13px; white-space:nowrap; border-right:1px solid #d0cac2; font-family:monospace; }
.slug-fixed   { padding:10px 12px; color:#2c3e50; font-size:15px; font-family:monospace; font-weight:600; }
.slug-preview input { border:none; border-radius:0; box-shadow:none; flex:1; }
.slug-preview input:focus { box-shadow:none; }

/* ---- Radio group ---- */
.radio-group { display:flex; gap:20px; flex-wrap:wrap; margin-top:4px; }
.radio-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:15px; font-weight:400; text-transform:none; letter-spacing:0; color:#333; }
.radio-label input[type="radio"] { display:none; }
.radio-custom { width:18px; height:18px; border-radius:50%; border:2px solid #ccc; display:inline-block; transition:border-color .15s,background .15s; }
.radio-label input:checked + .radio-custom.groom { border-color:#2980b9; background:#2980b9; }
.radio-label input:checked + .radio-custom.bride  { border-color:#c0639a; background:#c0639a; }

/* ---- Form actions ---- */
.form-actions { display:flex; gap:12px; flex-wrap:wrap; padding-top:8px; border-top:1px solid #f0ece6; margin-top:8px; }

/* ---- Alerts ---- */
.alert { padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:14px; }
.alert p { margin-bottom:4px; }
.alert p:last-child { margin-bottom:0; }
.alert-error { background:#fdf0ef; border:1px solid #f5c6c3; color:#8c2a24; }
.alert-info  { background:#f0f4f8; border:1px solid #c3d4e8; color:#2a4a6c; }

/* ---- Responsive ---- */
@media (max-width:600px) {
  .wrap { padding:16px 12px 40px; }
  .form-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .td-actions { flex-direction:column; }
  .page-header { flex-direction:column; }
  .public-link-bar { flex-direction:column; align-items:flex-start; }
}