/* Firepage – AdminLTE 4 + custom overrides */
:root {
  --firepage-primary: #c73e1d;
  --firepage-primary-dark: #a63418;
}
body {
  min-height: 100vh;
}
/* Bootstrap primary = Firepage red */
.btn-primary { background-color: var(--firepage-primary); border-color: var(--firepage-primary); }
.btn-primary:hover { background-color: var(--firepage-primary-dark); border-color: var(--firepage-primary-dark); }
.text-primary { color: var(--firepage-primary) !important; }
.bg-primary { background-color: var(--firepage-primary) !important; }
a { color: var(--firepage-primary); }
a:hover { color: var(--firepage-primary-dark); }

/* Firepage brand in sidebar (AdminLTE 4 uses .brand-link inside .sidebar-brand) */
.app-sidebar .brand-link { color: inherit; }
.app-sidebar .brand-text.fw-light { font-weight: 600; }

/* Content area: cards and layout (AdminLTE 4 .app-content) */
.app-content { padding: 1rem 0; }

/* Content cards (Bootstrap .card with AdminLTE feel) */
.app-content .card {
  box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
  border-radius: .25rem;
  margin-bottom: 1.5rem;
}
.app-content .card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.125);
  padding: .75rem 1rem;
  font-weight: 600;
  font-size: 1rem;
}
.app-content .card-body { padding: 1rem; }
.app-content .page-desc { color: #6c757d; margin-bottom: 1rem; font-size: .9375rem; }

/* Small box / stat cards (AdminLTE style) */
.small-box {
  border-radius: .25rem;
  box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
  display: block;
  padding: 1rem;
  position: relative;
  text-decoration: none !important;
  color: inherit;
  transition: transform .15s;
}
.small-box:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 0 1px rgba(0,0,0,.125), 0 4px 12px rgba(0,0,0,.15); }
.small-box .inner { padding: .25rem 0; }
.small-box h3 { font-size: 2rem; font-weight: 700; margin: 0; }
.small-box p { margin: .25rem 0 0; font-size: 1rem; }
.small-box .small-box-footer {
  display: block;
  padding: .25rem 0 0;
  font-size: .875rem;
  color: var(--firepage-primary);
  font-weight: 600;
}
.small-box.bg-white { background: #fff; border: 1px solid #dee2e6; }
.small-box.bg-white .small-box-footer { color: var(--firepage-primary); }

/* Forms in content */
.app-content label { font-weight: 500; margin-bottom: .25rem; }
.app-content .form-control:focus { border-color: var(--firepage-primary); box-shadow: 0 0 0 .2rem rgba(199, 62, 29, .25); }
.form-msg { margin: .5rem 0; font-size: .9rem; }
.form-msg.error { color: #dc3545; }
.form-msg.ok { color: #198754; }

/* Sortable list (keep existing behaviour, style with Bootstrap) */
.sortable-list { list-style: none; padding: 0; margin: 0; }
.sortable-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  margin-bottom: .35rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  transition: box-shadow .15s;
}
.sortable-item:hover { box-shadow: 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08); }
.sortable-item.dragging { opacity: .8; }
.sortable-item .content { flex: 1; }
.sortable-item .actions { display: flex; gap: .5rem; }
.sortable-item .actions a { color: var(--firepage-primary); text-decoration: none; font-weight: 500; }
.sortable-item .drag-handle { cursor: grab; color: #6c757d; padding: .25rem; }
.drag-handle:active { cursor: grabbing; }

/* Drag-and-drop */
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.drop-over { background: rgba(199, 62, 29, .08) !important; border: 2px dashed var(--firepage-primary) !important; }
.drop-zone-chips .chip { cursor: pointer; }

/* Rol badges / chips */
.rol-badges, .chip-pool { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rol-badge, .chip {
  padding: .35rem .75rem;
  border-radius: 50rem;
  background: #e9ecef;
  font-size: .875rem;
  font-weight: 500;
  cursor: grab;
  user-select: none;
}
.rol-badge.admin { background: var(--firepage-primary); color: #fff; }
.user-rollen, .drop-zone-chips { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }

/* User row (gebruikers) */
.user-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  margin-bottom: .35rem;
  background: #fff;
}
.user-row.drop-over { background: rgba(199, 62, 29, .08); border: 2px dashed var(--firepage-primary); }
.user-email { flex: 1; font-weight: 500; }

/* Post rows (personen) */
.post-rij {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #dee2e6;
  border-radius: .25rem;
  background: #fff;
}
.post-rij.drop-over { background: rgba(199, 62, 29, .08); border: 2px dashed var(--firepage-primary); }
.post-rij .rollen label.chip { background: rgba(199, 62, 29, .15); color: var(--firepage-primary); }
.post-rij .rollen label:not(.chip) { background: #e9ecef; color: #6c757d; }

/* List plain */
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: .5rem 0; border-bottom: 1px solid #dee2e6; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.list-plain li:last-child { border-bottom: none; }
.list-plain .actions { margin-left: auto; }
.list-plain .actions a { color: var(--firepage-primary); text-decoration: none; }
.btn-link { background: none; border: none; cursor: pointer; padding: 0; color: var(--firepage-primary); font-weight: 500; }
.btn-link.danger { color: #dc3545; }
.muted { color: #6c757d; font-style: italic; }

/* Login page (standalone, no sidebar) */
body.login-page { background: #f4f6f9; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-box {
  background: #fff;
  padding: 2rem;
  border-radius: .25rem;
  box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
  width: 100%;
  max-width: 360px;
  border: 1px solid #dee2e6;
}
.login-box .btn-primary { width: 100%; padding: .6rem; }

/* Sidebar active link accent (Firepage red) */
.app-sidebar .sidebar-menu .nav-link.active { border-left: 3px solid var(--firepage-primary); }