:root{
  --form-bg: #fff;
  --form-border: #e9eef8;
  --control-radius: 12px;
  --muted: #6b7280;
  --accent: #3a8bff;
  --btn-small-bg: rgba(59,139,255,0.06);
}

/* Form controls */
.form-row { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.form-row.inline { flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; }
.form-control {
  padding:10px 12px;
  border-radius: var(--control-radius);
  border:1px solid var(--form-border);
  background: var(--form-bg);
  box-shadow: 0 2px 6px rgba(16,24,40,0.03);
  font-size:14px;
  outline:none;
}
.form-control:focus {
  box-shadow: 0 10px 30px rgba(59,139,255,0.08);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Action group */
.action-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* NEW: consistent grid-like action items for admin table actions */
.action-item {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
}
/* make forms inside action-item not expand table cells weirdly */
.action-item form { display:inline-flex; gap:6px; align-items:center; }

/* small buttons */
.btn.small { padding:6px 8px; font-size:13px; border-radius:10px; }

/* Select compact */
.select-compact { padding:8px 10px; border-radius:10px; border:1px solid var(--form-border); background:#fff; }

/* badges */
.badge {
  display:inline-block;
  min-width:24px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:13px;
  text-align:center;
}

/* icon styles */
.icon { width:18px; height:18px; display:inline-block; vertical-align:middle; fill:currentColor; }
.icon-sm { width:16px; height:16px; }

/* visually-hidden for accessibility */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* back-button style */
.back-button { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--form-border); background:#fff; color:var(--accent); text-decoration:none; }
.back-button .icon { margin-right:6px; }

/* table actions compact layout */
.table-actions { display:flex; gap:6px; align-items:center; }

/* modal form consistency */
.modal .form-control { width:100%; }

/* mobile hit target improvements */
@media (max-width:900px){
  .form-row.inline { flex-direction:column; align-items:stretch; }
  .btn { padding:12px 14px; }
  .icon { width:20px; height:20px; }
  .back-button { padding:10px 12px; }
}

/* --- Category spoiler (details) animation (CSS-only, performant) --- */
.category-spoiler .rooms-list{
  padding:12px 16px 18px;
  overflow:hidden;
  max-height: 0;
  transition: max-height 320ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
  opacity:0;
}
.category-spoiler[open] .rooms-list{
  max-height: 1200px; /* sufficiently large to fit content; avoids JS resizing */
  opacity:1;
}

/* Responsive tweak: reduce max-height on small screens for perceived snappier animation */
@media (max-width:600px) {
  .category-spoiler .rooms-list { transition-duration: 220ms; }
  .category-spoiler[open] .rooms-list { max-height: 900px; }
}

/* message list alignment (if needed) */
.messages { padding:18px; display:flex; flex-direction:column; gap:10px; }
.msg { padding:12px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f7fbff);box-shadow:0 6px 18px rgba(18,24,40,0.06);max-width:75% }
.msg.mine{margin-left:auto;background:linear-gradient(90deg,#dfefff,#e8f4ff)}

/* reply preview style */
.reply-preview { border-left:3px solid rgba(10,20,40,0.06); padding-left:8px; margin-bottom:6px; color:var(--muted); font-size:13px; }

/* small helper visibility */
.muted{color:var(--muted);font-size:13px}
.notice{background:#eefaf3;color:#2bb673;padding:10px;border-radius:10px}
.error{background:#fff0f0;color:#e05555;padding:10px;border-radius:10px}

/* ROLE BADGES (admin page and message badges) */
.role-badge {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.role-badge.role-admin {
  background:#e9ffef;
  color:#0a7a2a;
  border:1px solid rgba(10,122,42,0.08);
}
.role-badge.role-mod {
  background:#fff0f0;
  color:#b30000;
  border:1px solid rgba(179,0,0,0.06);
}
.role-badge.role-user {
  background:#f2f6fb;
  color:#486581;
  border:1px solid rgba(72,101,129,0.04);
}

/* warn input adjustments to ensure it's visible and not squashed */
.warn-input { min-width:180px; max-width:460px; }

/* small improvements to action-group layout so warn input remains visible */
.action-group { gap:10px; align-items:center; }

/* Accessibility focus */
:focus{outline: 3px solid rgba(59,139,255,0.14);outline-offset:3px}