/* Shared component library for the authenticated app + auth screens. */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-heading); font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:filter .15s ease, transform .05s ease; line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{ background:var(--brand-primary); color:#fff; }
.btn-primary:hover:not(:disabled){ filter:brightness(1.08); }
.btn-secondary{ background:var(--brand-secondary); color:#0f3d1c; }
.btn-secondary:hover:not(:disabled){ filter:brightness(1.06); }
.btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--brand-dark); }
.btn-outline:hover:not(:disabled){ background:var(--brand-light); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled){ filter:brightness(1.08); }
.btn-ghost{ background:transparent; color:var(--brand-primary); }
.btn-ghost:hover:not(:disabled){ background:var(--brand-primary-50); }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-block{ width:100%; }
.btn-icon{ padding:9px; }

/* ---------- Cards / surfaces ---------- */
.card{
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:20px 22px; }
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border-subtle);
}
.card-header h2, .card-header h3{ margin:0; }

/* ---------- Form fields ---------- */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--font-heading); font-weight:600; font-size:13px;
  color:var(--brand-dark); margin-bottom:6px;
}
.field .hint{ font-size:12px; color:var(--text-muted); margin-top:4px; }
.field .error-text{ font-size:12px; color:var(--danger); margin-top:4px; }
.input, textarea.input, select.input{
  width:100%; padding:11px 13px; border:1.5px solid var(--border-subtle); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:15px; background:#fff; color:var(--brand-black);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, textarea.input:focus, select.input:focus{
  outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-50);
}
.input.invalid{ border-color:var(--danger); }
textarea.input{ resize:vertical; min-height:88px; }
.input-row{ display:flex; gap:12px; }
.input-row > *{ flex:1; }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-row input[type="checkbox"]{ margin-top:3px; width:18px; height:18px; accent-color:var(--brand-primary); }
.checkbox-row label{ font-size:14px; color:var(--brand-black); font-family:var(--font-body); }
.checkbox-row.disabled{ opacity:.5; }

/* ---------- Badges / tags ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; font-family:var(--font-heading);
}
.badge-primary{ background:var(--brand-primary-50); color:var(--brand-primary-600); }
.badge-secondary{ background:var(--brand-secondary-50); color:var(--brand-secondary-600); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-warning{ background:var(--warning-bg); color:var(--warning); }

/* ---------- Toast / inline alerts ---------- */
.alert{ padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:14px; }
.alert-danger{ background:var(--danger-bg); color:var(--danger); border:1px solid #f2c6c1; }
.alert-success{ background:var(--success-bg); color:var(--success); border:1px solid #bfe3c8; }
.alert-info{ background:var(--brand-primary-50); color:var(--brand-primary-600); border:1px solid var(--brand-primary-100); }

.toast-stack{ position:fixed; top:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px; }
.toast{
  min-width:280px; max-width:360px; padding:13px 16px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); font-size:14px; color:#fff; background:var(--brand-dark);
  animation:toast-in .2s ease;
}
.toast.success{ background:#1e7e34; }
.toast.error{ background:var(--danger); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* ---------- Drag/reorder ---------- */
.drag-handle{ cursor:grab; color:var(--text-muted); padding:4px; }
.drag-handle:active{ cursor:grabbing; }
.reorderable-item{ transition:box-shadow .15s ease, opacity .15s ease; }
.reorderable-item.dragging{ opacity:.4; }
.reorderable-item.drag-over-top{ box-shadow:inset 0 3px 0 var(--brand-secondary); }
.reorderable-item.drag-over-bottom{ box-shadow:inset 0 -3px 0 var(--brand-secondary); }

/* ---------- Tables ---------- */
table.data-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.data-table th{
  text-align:left; font-family:var(--font-heading); font-weight:600; color:var(--brand-dark);
  padding:10px 12px; border-bottom:2px solid var(--border-subtle); font-size:13px;
}
table.data-table td{ padding:10px 12px; border-bottom:1px solid var(--border-subtle); vertical-align:top; }
table.data-table tr:last-child td{ border-bottom:none; }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state .icon{ font-size:32px; margin-bottom:8px; }

/* ---------- Spinner ---------- */
.spinner{
  width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block;
}
.spinner.dark{ border-color:var(--border-strong); border-top-color:var(--brand-primary); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Password strength ---------- */
.strength-meter{ height:6px; border-radius:4px; background:var(--border-subtle); overflow:hidden; margin-top:8px; }
.strength-meter > span{ display:block; height:100%; width:0%; transition:width .2s ease, background .2s ease; }
.strength-label{ font-size:12px; margin-top:4px; font-family:var(--font-heading); font-weight:600; }