* { box-sizing: border-box; margin: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f0f2f5; color: #1a2233; }

header {
  display: flex; justify-content: space-between; align-items: center;
  background: #1e3a5f; color: #fff; padding: 12px 24px;
}
header h1 { font-size: 1.25rem; }
.actor-box label { font-size: .8rem; margin-right: 8px; opacity: .8; }
.actor-box select { padding: 4px 8px; border-radius: 6px; border: none; }

main {
  display: grid; grid-template-columns: 260px 1fr 340px;
  gap: 16px; padding: 16px; height: calc(100vh - 58px);
}
aside { background: #fff; border-radius: 10px; padding: 14px; overflow-y: auto; }
aside h2 { font-size: 1rem; margin-bottom: 10px; color: #1e3a5f; }
.hint { font-size: .75rem; color: #888; margin-bottom: 10px; }

#employee-list { list-style: none; padding: 0; margin-top: 12px; }
#employee-list li {
  padding: 10px; border-radius: 8px; cursor: pointer; margin-bottom: 6px;
  border: 1px solid #e2e6ec; transition: background .15s;
}
#employee-list li:hover { background: #f5f8fc; }
#employee-list li.active { background: #e3edf9; border-color: #1e3a5f; }
#employee-list .emp-name { font-weight: 600; }
#employee-list .emp-meta { font-size: .75rem; color: #777; }
.badge { font-size: .7rem; padding: 2px 7px; border-radius: 10px; color: #fff; display: inline-block; margin-top: 4px; }
.badge.onboarding { background: #2e8b57; }
.badge.offboarding { background: #d97706; }
.badge.closed { background: #94a3b8; }
.progress-text { font-size: .75rem; color: #2e8b57; }

/* kanban */
#board-section { display: flex; flex-direction: column; min-width: 0; }
#board-header {
  background: #fff; border-radius: 10px; padding: 14px 18px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
#board-header h2 { font-size: 1.1rem; color: #1e3a5f; }
#board-header .sub { font-size: .8rem; color: #777; }

#kanban { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; flex: 1; overflow: hidden; }
.column { background: #e9edf3; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.column h3 { font-size: .85rem; padding: 10px 12px; color: #444; border-bottom: 2px solid #d5dbe5; }
.column.highlight { outline: 2px dashed #1e3a5f; outline-offset: -4px; }
.cards { padding: 8px; overflow-y: auto; flex: 1; min-height: 40px; }

.card {
  background: #fff; border-radius: 8px; padding: 10px; margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: grab; font-size: .85rem;
}
.card:active { cursor: grabbing; }
.card .title { font-weight: 600; margin-bottom: 4px; }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: .72rem; }
.chip { padding: 2px 8px; border-radius: 10px; background: #eef2f7; color: #555; }
.chip.access { background: #fde8e8; color: #b91c1c; }
.chip.device { background: #e0f2fe; color: #0369a1; }
.chip.late { background: #fee2e2; color: #991b1b; font-weight: 600; }
.chip.owner { background: #dcfce7; color: #166534; }
.card.drag-over { opacity: .4; }

/* audit panel */
#audit-list { font-size: .78rem; }
.audit-event { border-left: 3px solid #1e3a5f; padding: 6px 8px; margin-bottom: 8px; background: #f8fafc; border-radius: 0 6px 6px 0; }
.audit-event.access { border-color: #b91c1c; }
.audit-event .ts { color: #888; font-size: .7rem; }
.audit-event .actor { font-weight: 600; }
.audit-event .act { color: #1e3a5f; font-weight: 600; }

/* buttons & dialogs */
button { padding: 8px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; font-size: .85rem; }
button:hover { background: #f1f5f9; }
button.primary { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
button.primary:hover { background: #2c4f7c; }
button.danger { background: #b91c1c; color: #fff; border-color: #b91c1c; }
button.danger:hover { background: #991b1b; }

dialog { border-radius: 12px; border: none; padding: 20px; min-width: 420px; }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog form, dialog div { display: flex; flex-direction: column; gap: 10px; }
dialog label { font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
dialog input, dialog select { padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1; }
dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

#offboarding-content h2 { color: #b91c1c; margin-bottom: 6px; }
#offboarding-content h3 { font-size: .9rem; margin: 10px 0 4px; }
#offboarding-content ul { padding-left: 20px; font-size: .85rem; }
#offboarding-content li.done-item { font-weight: 600; color: #b91c1c; }
#offboarding-content li.not-item { color: #888; }
.empty { color: #94a3b8; text-align: center; padding: 40px 0; }

/* ---- v2: login, tenant, reminders, users ---- */
#login-screen {
  display: flex; align-items: center; justify-content: center; height: 100vh;
  background: linear-gradient(135deg, #1e3a5f, #2c5f8a);
}
body.logged-out #app-header, body.logged-out #app-main { display: none; }
#form-login {
  background: #fff; padding: 32px; border-radius: 14px; width: 360px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#form-login h1 { font-size: 1.3rem; color: #1e3a5f; }
#form-login .sub { font-size: .8rem; color: #777; margin-top: -6px; }
#form-login label { font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
#form-login input { padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1; }
#form-login .error { color: #b91c1c; font-size: .8rem; min-height: 1em; }
.demo-creds { font-size: .78rem; color: #666; }
.demo-creds summary { cursor: pointer; }
.demo-creds ul { padding-left: 18px; margin-top: 6px; }

.tenant { font-size: .75rem; opacity: .85; display: block; }
.header-right { display: flex; align-items: center; gap: 10px; }
#user-box { font-size: .82rem; opacity: .9; }
.count { font-weight: 600; }

#reminders-content ul, #users-content ul { padding-left: 20px; font-size: .85rem; }
#reminders-content li.late-item, .late-item { color: #b91c1c; font-weight: 600; }
#reminders-content .ts { color: #888; font-size: .72rem; }
#reminders-content h3 { font-size: .9rem; margin: 10px 0 4px; }

.user-table { border-collapse: collapse; font-size: .82rem; width: 100%; }
.user-table th, .user-table td { border: 1px solid #e2e6ec; padding: 5px 8px; text-align: left; }
#form-user h3 { font-size: .9rem; margin-top: 12px; }

/* a [hidden] attribútum felülírja a display szabályokat (login/hide váltáshoz) */
[hidden] { display: none !important; }

/* ---- egyéni szerepkörök ---- */
.role-tag {
  display: inline-flex; align-items: center; gap: 4px; background: #e3edf9;
  border: 1px solid #b9cfe8; border-radius: 14px; padding: 3px 6px 3px 10px;
  font-size: .8rem; margin: 0 6px 6px 0;
}
.role-del { padding: 0 6px; border: none; background: none; color: #b91c1c; font-size: .9rem; cursor: pointer; }

/* ---- kattintható teendők az Értesítések panelben ---- */
.reminder-list { list-style: none; padding: 0; }
.reminder-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 5px;
  border: 1px solid #e2e6ec; border-radius: 8px; background: #f8fafc;
}
.reminder-item:hover { background: #e3edf9; }
.reminder-item.late-item { border-color: #f3b6b6; background: #fdf3f3; }
.reminder-item.late-item:hover { background: #f9e3e3; }
.reminder-jump { cursor: pointer; flex: 1; }
.reminder-done {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #2e8b57;
  background: #fff; color: #2e8b57; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.reminder-done:hover { background: #2e8b57; color: #fff; }
.card.flash { outline: 3px solid #d97706; outline-offset: 2px; }

/* ---- szundi gomb és outbox e-mailek ---- */
.reminder-snooze {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d97706;
  background: #fff; cursor: pointer; flex-shrink: 0; font-size: .85rem;
}
.reminder-snooze:hover { background: #d97706; }
.mail-list { padding-left: 0; list-style: none; }
.mail-list li { font-size: .82rem; margin-bottom: 4px; }
.mail-list summary { cursor: pointer; }
.mail-body {
  background: #f6f8fa; border: 1px solid #e2e6ec; border-radius: 6px;
  padding: 8px; font-size: .75rem; white-space: pre-wrap; word-break: break-all; margin-top: 6px;
}
.mail-body a { color: #1d4ed8; }

/* ---- SLA-mutatók és felhasználó-gazdálkodás ---- */
.metrics-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.metric {
  background: #f6f8fa; border: 1px solid #e2e6ec; border-radius: 8px;
  padding: 8px 12px; text-align: center; min-width: 88px;
}
.metric.m-bad { border-color: #f3b6b6; background: #fdf3f3; }
.m-val { display: block; font-size: 1.15rem; font-weight: 700; color: #1e3a5f; }
.metric.m-bad .m-val { color: #b91c1c; }
.m-lbl { font-size: .68rem; color: #888; }
.user-actions { white-space: nowrap; }
.btn-sm { padding: 4px 8px; font-size: .75rem; }

/* ---- regisztráció, számlázás, sablonok ---- */
#form-register { background:#fff; padding:32px; border-radius:14px; width:360px; display:flex; flex-direction:column; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
#form-register h1 { font-size:1.3rem; color:#1e3a5f; }
#form-register .sub { font-size:.8rem; color:#777; margin-top:-6px; }
#form-register label { font-size:.85rem; display:flex; flex-direction:column; gap:4px; }
#form-register input { padding:10px; border-radius:6px; border:1px solid #cbd5e1; }
#form-register .error { color:#b91c1c; font-size:.8rem; min-height:1em; }
#form-login .sub a { color:#1d4ed8; }

/* ---- oldalsáv import/export ---- */
.side-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ---- export időszak-választó ---- */
.export-range { display: flex; align-items: flex-end; gap: 12px; }
.export-range label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; flex: 1; }
.export-range input { padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1; }
.range-arrow { font-size: 1.2rem; color: #888; padding-bottom: 8px; }
.export-presets { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }

/* ---- osztály-kezelő ---- */
.dep-builtin { background: #eef2f7; border-color: #cbd5e1; color: #667; }

/* ---- nézetváltó és Gantt-nézet ---- */
#view-switcher { display: flex; gap: 6px; margin-bottom: 10px; }
.view-btn { border-radius: 8px; }
.view-btn.active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
#gantt-view { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.gantt-card { background: #fff; border-radius: 10px; padding: 16px; }
.gantt-card h3 { font-size: .95rem; color: #1e3a5f; margin-bottom: 8px; }
.g-head { position: relative; height: 34px; margin-bottom: 6px; border-bottom: 1px solid #e2e6ec; }
.g-months { position: relative; height: 18px; }
.g-month { position: absolute; top: 0; font-size: .72rem; font-weight: 600; color: #1e3a5f; white-space: nowrap; }
.g-ticks { position: relative; height: 8px; }
.g-tick { position: absolute; top: 0; width: 1px; height: 8px; background: #cbd5e1; }
.g-legend { position: absolute; right: 0; top: 0; display: flex; gap: 8px; font-size: .68rem; color: #777; }
.lg { padding: 1px 8px; border-radius: 8px; }
.lg-ok { background: #dcfce7; color: #166534; }
.lg-late { background: #fee2e2; color: #991b1b; }
.lg-line { border-left: 2px solid #d97706; padding-left: 4px; }
.g-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.g-row:hover { background: #f5f8fc; }
.g-label { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; }
.g-label .hint { font-size: .7rem; }
.g-track { position: relative; flex: 1; height: 26px; background: #f6f8fa; border-radius: 6px; overflow: visible; }
.g-bar {
  position: absolute; top: 4px; height: 18px; background: #dbe7f5; border-radius: 9px;
  overflow: hidden; min-width: 8px;
}
.g-bar.g-late { background: #fde2e2; }
.g-fill { position: absolute; left: 0; top: 0; height: 100%; background: #2e8b57; opacity: .85; }
.g-dates { position: absolute; left: 8px; top: 0; line-height: 18px; font-size: .68rem; color: #33475e; white-space: nowrap; }
.g-today { position: absolute; top: -4px; width: 2px; height: 34px; background: #d97706; }
.up-day { margin-bottom: 10px; }
.up-today .up-date { color: #b45309; font-weight: 700; }
.up-date { font-size: .78rem; font-weight: 600; color: #1e3a5f; }
.up-day ul { margin: 4px 0 0; padding-left: 20px; font-size: .82rem; }
.mail-status { font-size: .8rem; color: #555; margin: 8px 0; }

/* ---- trend-diagram ---- */
.trend-row { display: flex; align-items: flex-end; gap: 10px; height: 64px; padding: 6px 4px; }
.trend-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-size: .62rem; color: #777; }
.trend-bar { width: 26px; background: #2e8b57; border-radius: 3px 3px 0 0; }
.trend-bar.trend-bad { background: #b91c1c; }
#dlg-task textarea { font-family: inherit; }

/* ---- súgó gomb a fejlécben ---- */
#btn-help {
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 7px 12px; font-size: .85rem; cursor: pointer;
}
#btn-help:hover { background: rgba(255,255,255,.22); }