/* ═══════════════════════════════════════════════════════
   VR112 Intranet - Stylesheet
   ═══════════════════════════════════════════════════════ */

:root {
  --bg-base:     #080d18;
  --bg-primary:  #0a0f1e;
  --bg-secondary:#0e1525;
  --bg-card:     #111827;
  --bg-hover:    #162035;
  --bg-active:   #1a2d50;
  --border:      #1e2d45;
  --border-soft: #162035;

  --text-primary:   #e2e8f0;
  --text-secondary: #8b9ab5;
  --text-muted:     #4e6080;

  --blue:   #3b82f6;
  --orange: #f97316;
  --red:    #ef4444;
  --green:  #22c55e;
  --purple: #a855f7;
  --indigo: #6366f1;
  --yellow: #eab308;

  --sidebar-w: 255px;
  --topbar-h:  62px;
  --radius:    10px;
  --shadow:    0 4px 24px rgba(0,0,0,.45);
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; }
button { cursor: pointer; font-family: inherit; }
input, select { font-family: inherit; }

/* ════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59,130,246,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(249,115,22,.10) 0%, transparent 60%),
    var(--bg-base);
}

.login-container {
  width: 100%;
  max-width: 460px;
  padding: 20px;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 36px;
  box-shadow: var(--shadow), 0 0 80px rgba(59,130,246,.06);
}

/* Branding */
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo-icon {
  font-size: 52px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 22px rgba(249,115,22,.55));
}
.login-logo h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-tagline {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
  letter-spacing: .5px;
}

/* Divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Steps */
.login-info h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.login-info > p {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 18px;
}
.login-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .2s;
}
.step:hover { border-color: var(--blue); }
.step-number {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--orange), #e84d09);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(249,115,22,.4);
}
.step-text {
  display: flex;
  flex-direction: column;
}
.step-text strong { font-size: 13px; font-weight: 600; }
.step-text span   { font-size: 12px; color: var(--text-secondary); }

/* Error banner */
.error-banner {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 13px;
  margin-top: 18px;
}

.login-footer {
  text-align: center;
  margin-top: 22px;
  color: var(--text-muted);
  font-size: 11px;
}

/* Discord OAuth2 login button */
.discord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: #5865f2;
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .12s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(88,101,242,.35);
}
.discord-btn:hover  { background: #4752c4; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(88,101,242,.45); }
.discord-btn:active { transform: translateY(0); box-shadow: none; }

/* ════════════════════════════════════════════════════════
   APP SHELL LAYOUT
   ════════════════════════════════════════════════════════ */
.app {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
}
.brand-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 10px rgba(249,115,22,.6));
}
.brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.brand-sub {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .5px;
  margin-top: -2px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 10px 10px 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-item:hover:not(.disabled) { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--bg-active); color: var(--blue); }
.nav-item.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.nav-item i { width: 17px; text-align: center; font-size: 14px; flex-shrink: 0; }
.nav-item .nav-label { flex: 1; }

.badge-soon {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(249,115,22,.18);
  color: var(--orange);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Sidebar footer (user info) */
.sidebar-footer {
  padding: 11px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.s-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.s-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.s-dept {
  font-size: 10.5px;
  color: var(--text-secondary);
  display: block;
}
.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.btn-logout:hover {
  background: rgba(239,68,68,.12);
  border-color: var(--red);
  color: var(--red);
}

/* ── Main content ────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* ── Topbar ──────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-title h1 { font-size: 17px; font-weight: 600; }
.page-subtitle   { font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.topbar-right    { display: flex; align-items: center; gap: 20px; }
.live-clock      { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-secondary); font-family: 'JetBrains Mono', 'Courier New', monospace; }
.topbar-user     { display: flex; align-items: center; gap: 10px; }
.t-avatar        { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--blue); }
.t-name          { font-size: 13px; font-weight: 600; }
.t-role          { font-size: 11px; color: var(--text-secondary); }

/* ── Content wrapper ─────────────────────────────────── */
.content-wrap { padding: 24px 26px; flex: 1; }

/* ── Welcome card ────────────────────────────────────── */
.welcome-card {
  background: linear-gradient(135deg, #0a1f40 0%, #0f2a56 60%, #091828 100%);
  border: 1px solid #1e3d70;
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  position: relative;
}
.welcome-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%);
  pointer-events: none;
}
.welcome-text h2  { font-size: 21px; font-weight: 700; }
.welcome-text p   { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }

/* Department badge in welcome card */
.dept-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.dept-badge-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.dept-badge-name { font-size: 14px; font-weight: 700; }
.dept-badge-rank { font-size: 11px; color: var(--text-secondary); }

/* Dept color variants */
.d-blue   .dept-badge-icon { background: rgba(59,130,246,.2);  color: #60a5fa; }
.d-red    .dept-badge-icon { background: rgba(239,68,68,.2);   color: #f87171; }
.d-green  .dept-badge-icon { background: rgba(34,197,94,.2);   color: #4ade80; }
.d-indigo .dept-badge-icon { background: rgba(99,102,241,.2);  color: #818cf8; }
.d-purple .dept-badge-icon { background: rgba(168,85,247,.2);  color: #c084fc; }

/* ── Stats grid ──────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s, transform .15s;
}
.stat-card:hover { border-color: #2a4870; transform: translateY(-1px); }
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.stat-icon.s-blue   { background: rgba(59,130,246,.18);  color: #60a5fa; }
.stat-icon.s-orange { background: rgba(249,115,22,.18);  color: #fb923c; }
.stat-icon.s-green  { background: rgba(34,197,94,.18);   color: #4ade80; }
.stat-icon.s-purple { background: rgba(168,85,247,.18);  color: #c084fc; }
.stat-icon.s-red    { background: rgba(239,68,68,.18);   color: #f87171; }
.stat-value { font-size: 23px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }

/* ── Content grid ────────────────────────────────────── */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

/* ── Panel ───────────────────────────────────────────── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-header h3 {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-header h3 i { color: var(--orange); }
.panel-body { padding: 16px 18px; }

/* ── Announcements ───────────────────────────────────── */
.announcement {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 13px;
  margin-bottom: 10px;
  background: var(--bg-secondary);
  transition: border-color .2s;
}
.announcement:last-child { margin-bottom: 0; }
.announcement:hover { border-color: #2a4870; }
.announcement.is-high { border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.04); }
.ann-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.ann-title   { font-size: 13.5px; font-weight: 600; }
.ann-badges  { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.ann-body    { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.ann-meta    { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 11px; color: var(--text-muted); }
.ann-meta i  { margin-right: 3px; }
.ann-author  { display: flex; align-items: center; gap: 6px; }
.ann-avatar  { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ann-avatar-placeholder { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

/* ── Kleine icon-knop (bijv. + in panel-header) ────── */
.btn-icon-sm {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-icon-sm:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--blue); }

.btn-edit-user {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.btn-edit-user:hover { background: var(--bg-hover); color: var(--blue); border-color: var(--blue); }
.edit-locked { color: var(--text-muted); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }

/* ── Quick links ─────────────────────────────────────── */
.quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
  text-align: center;
  transition: all .2s;
}
.quick-link i { font-size: 20px; }
.quick-link:hover:not(.disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--blue);
}
.quick-link.disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

/* ════════════════════════════════════════════════════════
   PERSONNEL PAGE
   ════════════════════════════════════════════════════════ */
.page-header { margin-bottom: 20px; }
.page-header h2 { font-size: 22px; font-weight: 700; }
.page-header p  { color: var(--text-secondary); font-size: 13px; margin-top: 3px; }

.filter-bar  { display: flex; align-items: center; gap: 10px; }
.filter-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.filter-select:focus { border-color: var(--blue); }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  padding: 9px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-hover); }
.user-cell { display: flex; align-items: center; gap: 9px; }
.u-avatar  { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* ════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.b-blue   { background: rgba(59,130,246,.18);  color: #60a5fa; }
.b-red    { background: rgba(239,68,68,.18);   color: #f87171; }
.b-green  { background: rgba(34,197,94,.18);   color: #4ade80; }
.b-indigo { background: rgba(99,102,241,.18);  color: #818cf8; }
.b-purple { background: rgba(168,85,247,.18);  color: #c084fc; }
.b-orange { background: rgba(249,115,22,.18);  color: #fb923c; }
.b-gray   { background: rgba(100,116,139,.18); color: #94a3b8; }

/* ════════════════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════════════════ */
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-sm        { font-size: 12px; }
.text-center    { text-align: center; }
.mt-0 { margin-top: 0 !important; }

.loading-row td { padding: 28px !important; text-align: center; color: var(--text-muted); font-size: 13px; }
.loading-inline { color: var(--text-secondary); font-size: 13.5px; padding: 18px 0; }

/* ════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a4870; }

/* ════════════════════════════════════════════════════════
   MAILBOX
   ════════════════════════════════════════════════════════ */

/* Layout */
.mailbox-layout {
  display: flex;
  gap: 18px;
  height: calc(100vh - var(--topbar-h) - 48px);
  min-height: 0;
}
.mailbox-nav {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mailbox-main {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Compose button */
.btn-compose {
  width: 100%;
  padding: 11px 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s, transform .12s;
  margin-bottom: 8px;
}
.btn-compose:hover { background: #2563eb; transform: translateY(-1px); }

/* Folder buttons */
.mailbox-folders { display: flex; flex-direction: column; gap: 3px; }
.folder-btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .15s, color .15s;
}
.folder-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.folder-btn.active { background: var(--bg-active); color: var(--blue); }
.folder-btn i { width: 17px; text-align: center; flex-shrink: 0; }
.folder-btn .folder-label { flex: 1; }

/* Message list */
#msg-list {
  flex: 1;
  overflow-y: auto;
}
.msg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: background .12s;
}
.msg-item:hover            { background: var(--bg-hover); }
.msg-item:last-child       { border-bottom: none; }
.msg-unread                { background: rgba(59,130,246,.05); border-left: 2px solid var(--blue); }
.msg-unread .msg-item-name { color: var(--text-primary); font-weight: 700; }
.msg-unread .msg-item-subject { font-weight: 600; color: var(--text-primary); }
.msg-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.msg-avatar-initials {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-active);
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.msg-item-body    { flex: 1; min-width: 0; }
.msg-item-top     { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.msg-item-name    { font-size: 13.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-date    { font-size: 11px; color: var(--text-muted); flex-shrink: 0; margin-left: 10px; }
.msg-item-subject { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.msg-item-preview { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Message detail */
#msg-detail { flex: 1; overflow-y: auto; }
.msg-detail-inner { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .2s, color .2s;
  align-self: flex-start;
}
.btn-back:hover        { background: var(--bg-hover); color: var(--text-primary); }
.msg-detail-header h2  { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.msg-meta              { display: flex; gap: 20px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; }
.msg-detail-body {
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-primary);
}
.msg-detail-body p              { margin-bottom: 10px; }
.msg-detail-body p:last-child   { margin-bottom: 0; }

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow);
}
.modal-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: 15px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Form elements */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .2s;
  resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--blue); }
.form-error { font-size: 12.5px; color: #f87171; min-height: 18px; }

/* Buttons */
.btn-primary {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .2s;
}
.btn-primary:hover    { background: #2563eb; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .2s, color .2s;
}
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ════════════════════════════════════════════════════════
   Dienst-pagina's (Hero banner + tabel-avatars)
   ════════════════════════════════════════════════════════ */

.dept-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 4px;
  transition: background .3s, border-color .3s;
}
.dept-hero-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
.dept-hero-content h2 { font-size: 22px; font-weight: 700; margin: 0; }
.dept-hero-content p  { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }

/* Small avatar in table rows */
.personnel-name-cell { display: flex; align-items: center; gap: 10px; }
.row-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.row-avatar-initials {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(59,130,246,0.15);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   GMS Meldkamer
   ════════════════════════════════════════════════════════ */

.gms-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.gms-dept-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform .15s, box-shadow .15s;
}
.gms-dept-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.gms-dept-icon { font-size: 26px; flex-shrink: 0; }
.gms-dept-name { font-size: 14px; font-weight: 600; }
.gms-dept-stats { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.gms-active-dot { display: flex; align-items: center; gap: 4px; }

.gms-poc-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gms-hero {
  margin-bottom: 0;
  background: linear-gradient(130deg, #111f3a 0%, #0d2946 52%, #162031 100%);
}

.gms-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  color: #d6f2ff;
  box-shadow: inset 0 0 0 1px rgba(110,231,255,.15);
}

.gms-live-pill i {
  color: #38bdf8;
  animation: pulse 1.8s infinite;
}

.gms-main-grid {
  grid-template-columns: 1.3fr .9fr;
  align-items: start;
}

.gms-control-grid {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.gms-room-panel,
.gms-checkin-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gms-room-create,
.gms-checkin-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gms-room-create input,
.gms-checkin-form select,
.gms-assign-select {
  flex: 1;
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12.5px;
  outline: none;
}

.gms-room-create input:focus,
.gms-checkin-form select:focus,
.gms-assign-select:focus {
  border-color: var(--blue);
}

.gms-room-list,
.gms-room-units {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gms-room-item,
.gms-room-unit-row {
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 10px;
  background: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.gms-room-item.is-active {
  border-color: rgba(59,130,246,.55);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.25);
}

.gms-room-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gms-room-meta strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gms-room-meta span {
  font-size: 11px;
  color: var(--text-secondary);
}

.gms-incident-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 70vh;
  overflow-y: auto;
}

.gms-incident-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gms-incident-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.gms-incident-title {
  font-weight: 700;
  font-size: 13.5px;
}

.gms-incident-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.gms-incident-required,
.gms-incident-assigned {
  font-size: 12px;
  color: var(--text-secondary);
}

.gms-incident-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gms-assign-select {
  flex: 1;
  min-width: 170px;
}

.gms-incident-actions .btn-primary,
.gms-incident-actions .btn-secondary {
  padding: 8px 12px;
  font-size: 12px;
}

.gms-side-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gms-side-block {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,.01);
}

.gms-side-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.gms-units-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.gms-unit-row {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gms-unit-row.is-available { border-left: 3px solid var(--green); }
.gms-unit-row.is-enroute { border-left: 3px solid var(--orange); }
.gms-unit-row.is-pause { border-left: 3px solid var(--text-muted); }

.gms-unit-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gms-unit-main strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gms-unit-main span {
  font-size: 11px;
  color: var(--text-secondary);
}

.gms-unit-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.gms-unit-side small {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
  max-width: 150px;
}

.gms-timeline {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}

.gms-log-item {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary);
}

.gms-log-item span {
  font-size: 10.5px;
  color: var(--text-muted);
}

.gms-log-item p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.gms-log-item.warning { border-left: 3px solid var(--orange); }
.gms-log-item.success { border-left: 3px solid var(--green); }
.gms-log-item.danger { border-left: 3px solid var(--red); }

.gms-empty {
  padding: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
}

@keyframes pulse {
  0% { opacity: .55; }
  50% { opacity: 1; }
  100% { opacity: .55; }
}

@media (max-width: 1220px) {
  .gms-control-grid,
  .gms-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .gms-incident-actions {
    flex-direction: column;
  }

  .gms-incident-actions .btn-primary,
  .gms-incident-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .gms-unit-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .gms-unit-side {
    align-items: flex-start;
  }

  .gms-unit-side small {
    text-align: left;
    max-width: none;
  }
}

/* ── GMS Status op dienst-pagina's ───────────────────── */
.dept-gms-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dept-gms-card-single {
  flex: 0 0 220px;
}
.dept-gms-recent {
  flex: 1;
  min-width: 200px;
}
.dept-gms-recent-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.gms-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gms-recent-member {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gms-recent-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.gms-recent-time {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ════════════════════════════════════════════════════════
   Systeembeheer / Development
   ════════════════════════════════════════════════════════ */

.discord-id {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  user-select: all;
}