/* ═══════════════════════════════════════════
   KARATEKAI BASEL — Design System
   ═══════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────── */
:root {
  --bg:          #ffffff;
  --surface:     #f7f7f5;
  --surface2:    #efefed;
  --surface3:    #e3e3e0;
  --red:         #e03131;
  --red-dim:     rgba(224,49,49,0.07);
  --green:       #2f9e44;
  --green-dim:   rgba(47,158,68,0.08);
  --text:        #111111;
  --text-dim:    #888888;
  --text-mid:    #444444;
  --border:      rgba(0,0,0,0.1);
  --border-hover:rgba(0,0,0,0.22);
  --r:           6px;
  --font-head:   'Barlow Condensed', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;
  --card-pad:    18px;
}

/* ── RESET ───────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── LOADING ─────────────────────────────── */
#loader {
  position:fixed; inset:0;
  background:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:20px; z-index:999;
}
.loader-logo {
  font-family:var(--font-head);
  font-size:3.5rem; font-weight:900;
  letter-spacing:6px; color:#111;
  text-transform:uppercase;
}
.loader-bar-wrap { width:200px; height:1px; background:var(--surface3); overflow:hidden; }
.loader-bar { height:100%; background:#111; transition:width 0.4s ease; width:0%; }
.loader-status { font-size:0.75rem; color:var(--text-dim); font-family:var(--font-mono); letter-spacing:0.5px; }

/* ── NAV ─────────────────────────────────── */
nav {
  position:sticky; top:0; z-index:100;
  height:52px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 24px; gap:2px;
}
.nav-brand {
  font-family:var(--font-head);
  font-size:1.4rem; font-weight:900;
  letter-spacing:4px; color:#111;
  text-transform:uppercase;
  margin-right:16px;
  display:flex; flex-direction:column; gap:0; line-height:1;
}
.nav-sep { width:1px; height:20px; background:var(--border); margin:0 10px; }
.nav-btn {
  padding:7px 16px;
  font-family:var(--font-body); font-size:0.85rem; font-weight:400;
  color:var(--text-dim);
  background:transparent;
  border:1px solid transparent;
  border-radius:100px;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  white-space:nowrap;
}
.nav-btn:hover { color:var(--text); border-color:var(--border); }
.nav-btn.active { color:#fff; background:#111; border-color:#111; font-weight:500; }
.nav-clock { margin-left:auto; font-family:var(--font-mono); font-size:0.85rem; color:var(--text-dim); }

/* ── VIEWS ───────────────────────────────── */
.view { display:none; padding:24px; max-width:1440px; margin:0 auto; }
.view.active { display:block; }
.page-title { font-family:var(--font-head); font-size:2.2rem; font-weight:900; letter-spacing:0.5px; text-transform:uppercase; color:#111; }
.page-sub { color:var(--text-dim); font-size:0.875rem; margin-top:4px; }
.page-head { margin-bottom:24px; }
.dash-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.export-btns { display:flex; gap:8px; }

/* ── CARDS ───────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:var(--card-pad);
}
.card-label {
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--text-dim);
  margin-bottom:14px;
  font-weight:500;
}
.chart-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:var(--card-pad);
}
.chart-box h3 {
  font-size:0.68rem; text-transform:uppercase;
  letter-spacing:1.3px; color:var(--text-dim);
  font-weight:600; margin-bottom:14px;
}
.empty { text-align:center; padding:28px 0; color:var(--text-dim); font-size:0.875rem; }
.alert { padding:12px 16px; border-radius:8px; font-size:0.82rem; line-height:1.55; }
.alert-info { background:rgba(80,120,255,0.07); border:1px solid rgba(80,120,255,0.18); color:#5580cc; }
.alert-warn { background:rgba(224,49,49,0.06); border:1px solid rgba(224,49,49,0.2); color:var(--red); }

/* ── BUTTONS ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px;
  padding:11px 24px;
  border-radius:100px;
  font-family:var(--font-body);
  font-size:0.875rem; font-weight:500;
  cursor:pointer;
  border:1px solid transparent;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing:0.2px;
  line-height:1.4;
  white-space:nowrap;
}
.btn-red    { background:#111; color:#fff; border-color:#111; }
.btn-red:hover   { background:#333; border-color:#333; }
.btn-red:active  { background:#000; border-color:#000; }
.btn-red:disabled{ opacity:0.28; cursor:not-allowed; }
.btn-outline     { background:transparent; color:#111; border-color:var(--border-hover); }
.btn-outline:hover  { border-color:#111; }
.btn-outline:active { background:var(--surface2); }
.btn-block { display:flex; width:100%; }

/* ── INPUTS ──────────────────────────────── */
input[type=text],
input[type=password],
input[type=date],
input[type=time] {
  width:100%;
  padding:11px 16px;
  font-family:var(--font-body); font-size:0.875rem;
  background:#fff; color:#111;
  border:1px solid var(--border-hover);
  border-radius:100px;
  outline:none;
  transition:border-color 0.15s;
  line-height:1.4;
}
input[type=date],
input[type=time] { padding:10px 14px; cursor:pointer; -webkit-appearance:none; }
input:focus { border-color:#111; }
select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:34px !important;
}

/* ── WIDGET GRID ─────────────────────────── */
/*
  All admin/dash widgets live in a flat CSS grid.
  Each widget is a direct grid child.
  is-full-width spans all columns.

  KEY RULE: widgets do NOT have overflow:auto.
  Height is determined purely by content.
  Long cards (plan, sheets) have their inner
  list containers scrollable, not the card itself.
  This keeps grid rows tight.
*/
.widget-grid {
  column-count: 3;
  column-gap: 12px;
}
/* Each widget breaks cleanly across columns */
[data-widget-id] {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  vertical-align: top;
}
[data-widget-id].is-full-width {
  column-span: all;
  -webkit-column-span: all;
}
[data-widget-id].wdrag-over { box-shadow:0 0 0 2px #111 inset; border-radius:6px; }
[data-widget-id].drag-ghost { opacity:0.25; pointer-events:none; }

/* Widget card base */
.card.admin-widget,
.card.dash-widget,
.chart-box.dash-widget {
  padding: 0 var(--card-pad) var(--card-pad);
  position: relative;
}

/* Drag handle spans full width via negative margin top+sides */
.drag-handle {
  display: flex; align-items: center; gap: 8px;
  padding: 11px var(--card-pad) 10px;
  margin: 0 calc(-1 * var(--card-pad));
  border-bottom: 1px solid var(--border);
  user-select: none;
  background: var(--surface);
  border-radius: var(--r) var(--r) 0 0;
}
/* First element after drag-handle gets top spacing */
.drag-handle + * { margin-top: var(--card-pad) !important; }
.drag-grip {
  cursor:grab; color:var(--text-dim); flex-shrink:0;
  padding:3px; border-radius:4px;
  touch-action:none; line-height:0;
  -webkit-user-select:none; user-select:none;
  transition:color 0.15s, background 0.15s;
}
.drag-grip:active { cursor:grabbing; }
.drag-grip:hover  { color:#111; background:var(--surface2); }
.drag-handle .card-label { margin-bottom:0; flex:1; padding-right:24px; }

/* Expand button — absolute top-right of card */
.expand-btn {
  position:absolute; top:8px; right:8px;
  background:none; border:none;
  cursor:pointer; padding:4px; border-radius:4px;
  color:var(--text-dim); line-height:0; z-index:1;
  transition:color 0.15s, background 0.15s;
}
.expand-btn:hover { color:#111; background:var(--surface2); }

/* Scrollable inner lists */
.widget-scroll      { max-height:300px; overflow-y:auto; }
.widget-scroll.tall { max-height:440px; overflow-y:auto; }


/* ── KPI ROW ─────────────────────────────── */
.kpi-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-bottom:20px;
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.kpi { background:var(--surface); padding:20px 22px; }
.kpi + .kpi { border-left:1px solid var(--border); }
.kpi-val { font-family:var(--font-head); font-size:2.4rem; font-weight:800; color:#111; line-height:1; }
.kpi-lbl { font-size:0.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-top:6px; }

/* ── TERMINAL ────────────────────────────── */
.terminal-layout {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:20px;
}
.side-stack { display:flex; flex-direction:column; gap:14px; }

.cam-wrap {
  position:relative;
  background:#1a1a1a;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/10;
}
#termVideo { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:block; }
.cam-hud { position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; }
.cam-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
.cam-dot-wrap { display:flex; align-items:center; gap:7px; }
.cam-dot { width:6px; height:6px; border-radius:50%; background:#69db7c; animation:blip 2.5s ease-in-out infinite; }
@keyframes blip { 0%,100%{opacity:1} 50%{opacity:0.2} }
.cam-label { font-size:0.7rem; color:rgba(255,255,255,0.5); font-family:var(--font-mono); letter-spacing:0.5px; }
.cam-bottom {
  margin-top:auto; padding:14px 18px;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  display:flex; align-items:center; justify-content:space-between;
}
.cam-training-pill {
  padding:5px 14px;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  border-radius:100px; font-size:0.75rem; font-weight:500;
  color:rgba(255,255,255,0.85); letter-spacing:0.5px;
}

/* Scan line */
.scan-line {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation:scanLine 3s ease-in-out infinite;
  pointer-events:none; opacity:0; transition:opacity 0.5s;
}
.cam-wrap.cam-active .scan-line { opacity:1; }
@keyframes scanLine { 0%{top:20%} 50%{top:80%} 100%{top:20%} }

/* Scan frame */
.scan-frame {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:190px; height:190px; pointer-events:none;
}
.scan-corner {
  position:absolute; width:26px; height:26px;
  border-color:rgba(255,255,255,0.18); border-style:solid;
  transition:border-color 0.2s;
}
.sc-tl { top:0; left:0;     border-width:2px 0 0 2px; }
.sc-tr { top:0; right:0;    border-width:2px 2px 0 0; }
.sc-bl { bottom:0; left:0;  border-width:0 0 2px 2px; }
.sc-br { bottom:0; right:0; border-width:0 2px 2px 0; }
.scan-frame.detected  .scan-corner { border-color:rgba(255,255,255,0.85); animation:cornerPulse 1s ease-in-out infinite; }
.scan-frame.recognized .scan-corner { border-color:#69db7c; }
.scan-frame.recognized { animation:framePop 0.35s cubic-bezier(.175,.885,.32,1.275) forwards; }
@keyframes cornerPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes framePop { 0%{transform:translate(-50%,-50%) scale(1)} 40%{transform:translate(-50%,-50%) scale(1.08)} 100%{transform:translate(-50%,-50%) scale(1)} }

/* Camera border flash */
@keyframes greenFlash { 0%{box-shadow:inset 0 0 0 2px transparent} 20%{box-shadow:inset 0 0 0 2px #69db7c} 100%{box-shadow:inset 0 0 0 2px transparent} }
@keyframes redFlash   { 0%{box-shadow:inset 0 0 0 2px transparent} 20%{box-shadow:inset 0 0 0 2px #e03131} 100%{box-shadow:inset 0 0 0 2px transparent} }
.cam-wrap.flash-ok   { animation:greenFlash 0.6s ease forwards; }
.cam-wrap.flash-warn { animation:redFlash   0.5s ease forwards; }

/* Recognition overlay */
.recog-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:row;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s ease; z-index:10;
}
.recog-overlay.show { opacity:1; pointer-events:auto; }
.recog-cam-half { flex:1; }
.recog-text-half {
  width:46%;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:28px 32px;
  transform:translateX(20px);
  transition:transform 0.3s cubic-bezier(.175,.885,.32,1.275);
}
.recog-overlay.show .recog-text-half { transform:translateX(0); }
.state-ok   .recog-text-half { background:#fff; border-top:3px solid #2f9e44; }
.state-warn .recog-text-half { background:#fff; border-top:3px solid #e03131; }
.recog-name {
  font-family:var(--font-head);
  font-size:4.5rem; font-weight:900;
  letter-spacing:-1px; line-height:0.9; color:#111;
  animation:slideUp 0.3s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes slideUp { from{transform:translateY(16px) scale(0.97);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
.recog-sub { font-size:0.8rem; color:var(--text-dim); margin-top:8px; letter-spacing:0.3px; animation:slideUp 0.3s ease 0.07s both; }
.recog-bar-wrap { margin-top:20px; width:100%; height:1px; background:var(--border); }
.recog-bar { height:100%; width:100%; transform-origin:left; }
.state-ok   .recog-bar { background:#2f9e44; }
.state-warn .recog-bar { background:var(--red); }
.recog-bar.animate { animation:drainBar var(--dur,4s) linear forwards; }
@keyframes drainBar { from{transform:scaleX(1)} to{transform:scaleX(0)} }
.recog-hint { font-size:0.68rem; color:var(--text-dim); font-family:var(--font-mono); margin-top:10px; letter-spacing:1px; text-transform:uppercase; }
.recog-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:20px;
  font-size:0.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  margin-top:10px; animation:slideUp 0.3s ease 0.15s both;
}

/* Check-in feed */
.training-chips { display:flex; flex-direction:column; gap:5px; }
.chip {
  padding:10px 14px; border-radius:8px;
  font-size:0.85rem; font-weight:500;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-mid); cursor:pointer;
  transition:all 0.15s;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.chip:hover { border-color:#111; color:#111; background:#fff; }
.chip.active { background:#111; border-color:#111; color:#fff; font-weight:500; }
.chip-time { font-family:var(--font-mono); font-size:0.72rem; opacity:0.55; flex-shrink:0; }

.checkin-feed { display:flex; flex-direction:column; max-height:320px; overflow-y:auto; }
.feed-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 0; border-bottom:1px solid var(--border);
  animation:feedIn 0.3s ease;
}
.feed-item:last-child { border-bottom:none; }
@keyframes feedIn { 0%{opacity:0;transform:translateY(-8px) scale(0.98)} 70%{transform:translateY(1px) scale(1.005)} 100%{opacity:1;transform:none} }
.feed-avatar { width:30px; height:30px; border-radius:50%; background:#111; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:600; color:#fff; flex-shrink:0; }
.feed-name { font-size:0.85rem; font-weight:500; color:#111; }
.feed-sub  { font-size:0.7rem; color:var(--text-dim); }
.feed-time { margin-left:auto; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-dim); white-space:nowrap; }

.privacy-note {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px; font-size:0.72rem; color:var(--text-dim);
  line-height:1.55; border-top:1px solid var(--border);
  background:var(--surface2); border-radius:0 0 var(--r) var(--r);
}
.privacy-note svg { flex-shrink:0; margin-top:1px; }

/* ── REGISTRATION ────────────────────────── */
.reg-wrap { max-width:520px; margin:0 auto; }
.steps-row { display:flex; gap:6px; margin-bottom:28px; }
.step-item {
  flex:1; padding:9px 10px; text-align:center;
  border-radius:8px; font-size:0.78rem; font-weight:600;
  background:var(--surface2); border:1px solid var(--border); color:var(--text-dim);
  transition:all 0.2s;
}
.step-item.active { background:rgba(224,49,49,0.07); border-color:rgba(224,49,49,0.25); color:var(--red); }
.step-item.done   { background:rgba(47,158,68,0.07);  border-color:rgba(47,158,68,0.25);  color:var(--green); }
.reg-cam-wrap {
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:4/3; background:var(--surface2);
  border:1px solid var(--border); margin-bottom:14px;
}
#regVideo { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:block; }
.dots-row { display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.dot { width:11px; height:11px; border-radius:50%; background:var(--surface3); border:1px solid var(--border); transition:all 0.25s; }
.dot.done   { background:var(--green); border-color:var(--green); }
.dot.active { background:#d4af37; border-color:#d4af37; animation:blip 1s infinite; }
.cap-status { text-align:center; font-size:0.85rem; color:var(--text-dim); margin-bottom:14px; min-height:20px; }
.done-panel { text-align:center; padding:48px 24px; }
.done-icon { width:48px; height:48px; border-radius:50%; background:#111; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
.done-title { font-family:var(--font-head); font-size:2rem; font-weight:800; margin-bottom:6px; }
.done-sub   { color:var(--text-dim); margin-bottom:32px; }

/* ── DASHBOARD ───────────────────────────── */
.tbl-filter-bar {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--border);
  align-items:center; background:var(--surface2);
}
.tbl-filter-input {
  padding:7px 12px; border:1px solid var(--border-hover);
  border-radius:100px; font-family:var(--font-body); font-size:0.82rem;
  background:#fff; color:#111; outline:none; min-width:0; flex:1;
}
.tbl-filter-input:focus { border-color:#111; }
.tbl-filter-select {
  padding:7px 12px; border:1px solid var(--border-hover);
  border-radius:100px; font-family:var(--font-body); font-size:0.82rem;
  background:#fff; color:#111; outline:none; cursor:pointer;
}
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { color:var(--text); }
.sort-icon { margin-left:4px; opacity:0.4; font-size:0.65rem; }
th.sort-asc .sort-icon, th.sort-desc .sort-icon { opacity:1; color:#111; }
.tbl-count { font-size:0.75rem; color:var(--text-dim); white-space:nowrap; margin-left:auto; }

/* ── ADMIN ───────────────────────────────── */
.training-admin-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--border); font-size:0.875rem;
}
.member-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.member-av { width:34px; height:34px; border-radius:50%; background:#111; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:600; color:#fff; flex-shrink:0; }
.member-info-name { font-size:0.875rem; font-weight:500; color:#111; }
.member-info-date { font-size:0.7rem; color:var(--text-dim); }
.del-btn { margin-left:auto; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:0.85rem; padding:4px 8px; border-radius:100px; transition:all 0.15s; }
.del-btn:hover { color:var(--red); }
.danger-btn {
  display:flex; width:100%; align-items:center; gap:8px;
  padding:11px 16px; border-radius:100px;
  background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:0.875rem;
  transition:all 0.15s; margin-bottom:8px;
  border:1px solid var(--border-hover); color:var(--text-dim);
}
.danger-btn:hover { border-color:var(--red); color:var(--red); }

/* Toggle switch */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.toggle-label { font-size:0.875rem; font-weight:500; color:#111; }
.toggle-sub   { font-size:0.75rem; color:var(--text-dim); margin-top:2px; }
.toggle-switch { position:relative; width:44px; height:26px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0; border-radius:13px;
  background:var(--surface3); border:1px solid var(--border-hover);
  transition:background 0.2s, border-color 0.2s;
}
.toggle-thumb {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2);
  transition:transform 0.2s;
}
.toggle-switch input:checked ~ .toggle-track { background:#111; border-color:#111; }
.toggle-switch input:checked ~ .toggle-thumb { transform:translateX(18px); }

/* ── TABLES ──────────────────────────────── */
.data-table { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.dt-head { padding:16px 20px; border-bottom:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
th { padding:10px 20px; font-size:0.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); text-align:left; font-weight:600; border-bottom:1px solid var(--border); }
td { padding:11px 20px; font-size:0.875rem; border-bottom:1px solid rgba(0,0,0,0.04); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(0,0,0,0.015); }
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.72rem; font-weight:600; background:var(--surface2); color:var(--text-mid); border:1px solid var(--border-hover); }

/* ── BADGES ──────────────────────────────── */
.badge-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; border-radius:20px; font-size:0.7rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; white-space:nowrap; }
.badge-bronze { background:#f5ebe0; border:1px solid #c9956c; color:#8b5e3c; }
.badge-silver { background:#f0f0f2; border:1px solid #a8a9ad; color:#5a5c63; }
.badge-gold   { background:#fdf6e3; border:1px solid #d4af37; color:#8a6d00; }
.badge-platin { background:linear-gradient(135deg,#f8f8ff,#e8e8f5); border:1px solid #b8b8d4; color:#4a4a7a; }
.badge-dot    { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.badge-bronze .badge-dot { background:#c9956c; }
.badge-silver .badge-dot { background:#a8a9ad; }
.badge-gold   .badge-dot { background:#d4af37; }
.badge-platin .badge-dot { background:#b8b8d4; }
.recog-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:10px; animation:slideUp 0.3s ease 0.15s both; }
.recog-badge.bronze { background:#f5ebe0; border:1px solid #c9956c; color:#8b5e3c; }
.recog-badge.silver { background:#f0f0f2; border:1px solid #a8a9ad; color:#5a5c63; }
.recog-badge.gold   { background:#fdf6e3; border:1px solid #d4af37; color:#8a6d00; }
.recog-badge.platin { background:linear-gradient(135deg,#f0f0ff,#e0e0f5); border:1px solid #b8b8d4; color:#4a4a7a; }
.recog-badge .badge-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.recog-badge.bronze .badge-dot { background:#c9956c; }
.recog-badge.silver .badge-dot { background:#a8a9ad; }
.recog-badge.gold   .badge-dot { background:#d4af37; }
.recog-badge.platin .badge-dot { background:#b8b8d4; }

/* ── LEADERBOARD ─────────────────────────── */
.leaderboard-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.leaderboard-row:last-child { border-bottom:none; }
.lb-rank { font-family:var(--font-head); font-size:1.3rem; font-weight:900; color:var(--text-dim); width:28px; text-align:center; flex-shrink:0; }
.lb-rank.r1 { color:#d4af37; } .lb-rank.r2 { color:#a8a9ad; } .lb-rank.r3 { color:#c9956c; }
.lb-av { width:30px; height:30px; border-radius:50%; background:#111; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; color:#fff; flex-shrink:0; }
.lb-name { font-size:0.875rem; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-count { font-family:var(--font-mono); font-size:0.78rem; color:var(--text-dim); flex-shrink:0; }

/* ── MODALS ──────────────────────────────── */
.pin-modal, .name-modal, .group-modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.35); backdrop-filter:blur(8px);
  z-index:600; display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.15s ease; padding:20px;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.pin-box, .name-box, .group-box {
  background:#fff; border-radius:16px;
  width:100%; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.12);
}
.pin-box { max-width:320px; }
.name-box { max-width:380px; }
.group-box { max-width:400px; }
.pin-box-head, .name-box-head, .group-box-head { padding:20px 22px 14px; border-bottom:1px solid var(--border); }
.pin-box-title, .name-box-title, .group-box-title { font-family:var(--font-head); font-size:1.3rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:#111; }
.group-box-sub { font-size:0.8rem; color:var(--text-dim); margin-top:3px; }
.pin-box-body, .name-box-body { padding:18px 22px; }
.pin-box-foot, .name-box-foot, .group-box-foot { padding:12px 14px; border-top:1px solid var(--border); display:flex; gap:8px; }
.pin-dots { display:flex; gap:10px; justify-content:center; margin-bottom:20px; }
.pin-dot-ind { width:12px; height:12px; border-radius:50%; background:var(--surface3); border:1px solid var(--border-hover); transition:all 0.15s; }
.pin-dot-ind.filled { background:#111; border-color:#111; }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pin-key { padding:16px; border-radius:10px; border:1px solid var(--border-hover); background:#fff; font-family:var(--font-head); font-size:1.4rem; font-weight:700; cursor:pointer; transition:all 0.1s; color:#111; text-align:center; }
.pin-key:hover { background:var(--surface2); } .pin-key:active { transform:scale(0.95); }
.pin-key.del { font-size:1rem; }
.group-list { max-height:320px; overflow-y:auto; padding:8px; }
.group-option { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; cursor:pointer; transition:background 0.1s; border:1.5px solid transparent; }
.group-option:hover { background:var(--surface); }
.group-option.selected { background:#111; border-color:#111; }
.group-option.selected .go-name { color:#fff; }
.group-option.selected .go-level { color:rgba(255,255,255,0.5); }
.group-option.none-opt { opacity:0.5; }
.group-option.none-opt.selected { background:var(--surface2); border-color:var(--border-hover); }
.group-option.none-opt.selected .go-name { color:var(--text-mid); }
.go-dot { width:8px; height:8px; border-radius:50%; border:1.5px solid var(--border-hover); flex-shrink:0; transition:all 0.15s; }
.group-option.selected .go-dot { background:#fff; border-color:#fff; }
.go-name { font-size:0.875rem; font-weight:500; color:#111; }
.go-level { font-size:0.72rem; color:var(--text-dim); margin-top:1px; }

/* Sheets status */
.sheets-status-row { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:0.8rem; }
.sync-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sync-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:100px;
  font-size:0.68rem; font-weight:500;
  font-family:var(--font-mono);
  transition:all 0.3s; cursor:default; letter-spacing:0.3px;
}
.sync-badge.idle    { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
.sync-badge.ok      { background:transparent; color:#2f9e44;          border:1px solid rgba(47,158,68,0.3); }
.sync-badge.pending { background:transparent; color:#e67700;          border:1px solid rgba(230,119,0,0.3); }
.sync-badge.error   { background:transparent; color:var(--red);       border:1px solid rgba(224,49,49,0.3); }
.sync-badge.syncing { background:transparent; color:#1971c2;          border:1px solid rgba(25,113,194,0.3); }

/* PIN modal — Klassen wie im HTML referenziert */
.pin-title { font-family:var(--font-head); font-size:1.8rem; font-weight:900; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; color:#111; text-align:center; }
.pin-sub   { color:var(--text-dim); font-size:0.8rem; margin-bottom:22px; text-align:center; }
.pin-numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.pin-dot-disp { width:10px; height:10px; border-radius:50%; background:var(--surface3); border:1px solid var(--border-hover); transition:all 0.15s; }
.pin-dot-disp.filled { background:#111; border-color:#111; }
.pin-dot-disp.error  { background:var(--red); border-color:var(--red); animation:shake 0.3s ease; }
.pin-cancel { font-size:0.8rem; color:var(--text-dim); background:none; border:none; cursor:pointer; font-family:var(--font-body); padding:6px; transition:color 0.15s; }
.pin-cancel:hover { color:#111; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* Bar-Chart (Top-Members im Dashboard) */
.bar-chart-row  { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-chart-name { font-size:0.82rem; min-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111; }
.bar-chart-bar  { flex:1; height:2px; background:var(--surface3); overflow:hidden; }
.bar-chart-fill { height:100%; background:#111; transition:width 0.6s cubic-bezier(.4,0,.2,1); }
.bar-chart-num  { font-size:0.78rem; color:var(--text-dim); font-family:var(--font-mono); white-space:nowrap; }

/* Recog overlay icon container */
.recog-icon { font-size:1.2rem; line-height:1; margin-bottom:10px; }

/* Dashboard widget innen-padding */
.dash-widget-inner { padding:0; }

/* Sheets-Config Card-Spacing */
.sheets-config input { margin-bottom:10px; }

/* Kiosk */
.kiosk nav { display:none; }
.kiosk .view:not(#view-terminal) { display:none !important; }
#view-terminal.kiosk-active { display:block !important; }
.kiosk-lock-btn {
  display:none; padding:6px 14px;
  border-radius:100px; border:1px solid var(--border-hover);
  background:transparent; cursor:pointer; font-family:var(--font-body);
  font-size:0.8rem; color:var(--text-dim); transition:all 0.15s;
}
.kiosk .kiosk-lock-btn { display:inline-flex; align-items:center; gap:6px; }
.kiosk-lock-btn:hover { border-color:#111; color:#111; }

/* ── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; }

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:1100px) {
  .widget-grid { column-count:2; }
  .kpi-row { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px) {
  nav { padding:0 16px; gap:0; }
  .nav-brand { margin-right:10px; font-size:1.2rem; letter-spacing:2px; }
  .nav-sep { margin:0 6px; }
  .nav-btn { padding:7px 12px; font-size:0.8rem; min-height:44px; }
  .nav-clock { font-size:0.78rem; }
  .view { padding:16px; }
  .page-title { font-size:1.8rem; }
  .terminal-layout { grid-template-columns:1fr; gap:14px; }
  .cam-wrap { aspect-ratio:4/3; }
  .training-chips { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; gap:8px; }
  .training-chips::-webkit-scrollbar { height:2px; }
  .chip { white-space:nowrap; flex-shrink:0; }
  .checkin-feed { max-height:220px; }
  .dash-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .export-btns { flex-wrap:wrap; gap:6px; }
  .widget-grid { column-count:1 !important; }
  .tbl-filter-bar { flex-wrap:wrap; gap:6px; padding:10px 14px; }
  .reg-wrap { max-width:100%; }
  .steps-row .step-item { padding:8px 6px; font-size:0.72rem; }
  .recog-text-half { width:55%; padding:18px 20px; }
  .recog-name { font-size:3.2rem !important; }
  .btn { min-height:44px; }
  .chip { min-height:44px; }
  input, select { min-height:44px; }
}
@media(max-width:480px) {
  nav { padding:0 12px; }
  .nav-btn { padding:6px 9px; font-size:0.75rem; }
  .nav-brand { font-size:1rem; letter-spacing:1px; margin-right:6px; }
  .nav-sep { display:none; }
  .view { padding:12px; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .kpi { padding:14px 16px; }
  .kpi-val { font-size:1.7rem; }
  .recog-text-half { width:60%; padding:14px 16px; }
  .recog-name { font-size:2.4rem !important; }
  .page-title { font-size:1.5rem; }
}