/* ═══════════════════════════════════════════════════════════════════════════
   GATE CONTROL SYSTEM — COMPONENTS.CSS
   All reusable UI components: buttons, cards, inputs, tables, badges,
   avatars, dropdowns, stat blocks, chips, forms.
   Shared across guard.html and hr-admin.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
  user-select: none;
  text-decoration: none;
}
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); }

/* Primary — Teal */
.btn-primary {
  background: var(--color-teal);
  color: var(--text-inverse);
  border-color: var(--color-teal);
}
.btn-primary:not(:disabled):hover {
  background: var(--color-teal-dark);
  box-shadow: 0 4px 16px var(--color-teal-dim);
}

/* Outline Teal */
.btn-outline {
  background: transparent;
  color: var(--color-teal);
  border-color: var(--color-teal-border);
}
.btn-outline:not(:disabled):hover {
  background: var(--color-teal-dim);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.btn-ghost:not(:disabled):hover {
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
}

/* Danger */
.btn-danger {
  background: var(--color-red);
  color: white;
  border-color: var(--color-red);
}
.btn-danger:not(:disabled):hover {
  background: var(--color-red-dark);
  box-shadow: 0 4px 16px var(--color-red-dim);
}

/* Danger outline */
.btn-danger-outline {
  background: transparent;
  color: var(--color-red);
  border-color: var(--color-red-border);
}
.btn-danger-outline:not(:disabled):hover {
  background: var(--color-red-dim);
}

/* Amber / Visitor */
.btn-amber {
  background: var(--color-amber);
  color: var(--text-inverse);
  border-color: var(--color-amber);
}
.btn-amber:not(:disabled):hover {
  background: var(--color-amber-dark);
  box-shadow: 0 4px 16px var(--color-amber-dim);
}

/* Sizes */
.btn-sm  { padding: 6px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg  { padding: 13px var(--space-6); font-size: var(--text-md); }
.btn-xl  { padding: 15px var(--space-8); font-size: var(--text-lg); }
.btn-block { width: 100%; }

/* ── PUNCH BUTTONS (large, full-width, icon + label) ─────────────────────── */
.btn-punch {
  width: 100%;
  padding: 14px;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.02em;
}
.btn-punch:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-punch--in {
  background: var(--color-green);
  color: #0A1628;
}
.btn-punch--in:not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-green-dim);
}

.btn-punch--out {
  background: var(--color-red);
  color: white;
}
.btn-punch--out:not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-red-dim);
}

.btn-punch--neutral {
  background: var(--bg-surface-2);
  color: var(--text-muted);
  border: 1px dashed var(--border-default);
}

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.gc-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.gc-card:hover { border-color: var(--card-hover-border); }

/* Accent top bar */
.gc-card--teal::before  { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--color-teal), transparent); }
.gc-card--amber::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--color-amber), transparent); }
.gc-card--red::before   { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--color-red), transparent); }
.gc-card--green::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--color-green), transparent); }

.gc-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.gc-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.gc-card__icon--teal  { background: var(--color-teal-dim); }
.gc-card__icon--amber { background: var(--color-amber-dim); }
.gc-card__icon--red   { background: var(--color-red-dim); }
.gc-card__title { font-size: var(--text-md); font-weight: var(--weight-semi); }
.gc-card__sub   { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }

/* ── STAT BLOCK ───────────────────────────────────────────────────────────── */
.gc-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.gc-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.gc-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--text-primary);
}
.gc-stat__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.gc-stat--teal .gc-stat__value  { color: var(--color-teal); }
.gc-stat--amber .gc-stat__value { color: var(--color-amber); }
.gc-stat--red .gc-stat__value   { color: var(--color-red); }
.gc-stat--green .gc-stat__value { color: var(--color-green); }

/* ── AVATAR ───────────────────────────────────────────────────────────────── */
.gc-av {
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  user-select: none;
}
.gc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sizes */
.gc-av--sm  { width: 32px;  height: 32px;  font-size: 11px; border-radius: 6px; }
.gc-av--md  { width: 40px;  height: 40px;  font-size: 14px; border-radius: 8px; }
.gc-av--lg  { width: 56px;  height: 56px;  font-size: 18px; border-radius: 10px; }
.gc-av--xl  { width: 72px;  height: 72px;  font-size: 24px; border-radius: 12px; }
.gc-av--xxl { width: 96px;  height: 96px;  font-size: 32px; border-radius: 14px; }

/* Colors */
.gc-av--teal  { background: var(--color-teal-dim);  color: var(--color-teal);  }
.gc-av--amber { background: var(--color-amber-dim); color: var(--color-amber); }
.gc-av--navy  { background: var(--bg-surface-3);    color: var(--text-secondary); }

/* ── BADGES ───────────────────────────────────────────────────────────────── */
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.gc-badge--in       { background: var(--badge-in-bg);       color: var(--badge-in-text); }
.gc-badge--out      { background: var(--badge-out-bg);      color: var(--badge-out-text); }
.gc-badge--emp      { background: var(--badge-emp-bg);      color: var(--badge-emp-text); }
.gc-badge--vis      { background: var(--badge-vis-bg);      color: var(--badge-vis-text); }
.gc-badge--pending  { background: var(--badge-pending-bg);  color: var(--badge-pending-text); }
.gc-badge--approved { background: var(--badge-approved-bg); color: var(--badge-approved-text); }
.gc-badge--rejected { background: var(--badge-rejected-bg); color: var(--badge-rejected-text); }
.gc-badge--live     { background: var(--color-green-dim);   color: var(--color-green); }
.gc-badge--offline  { background: var(--color-amber-dim);   color: var(--color-amber); }
.gc-badge--manual   { background: var(--color-blue-dim);    color: var(--color-blue); }

/* ── FORM INPUTS ──────────────────────────────────────────────────────────── */
.gc-field { margin-bottom: var(--space-4); }
.gc-field:last-child { margin-bottom: 0; }

.gc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.gc-label .req { color: var(--color-red); margin-left: 2px; }

.gc-input,
.gc-select,
.gc-textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--input-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.gc-input::placeholder { color: var(--input-placeholder); }
.gc-input:focus,
.gc-select:focus,
.gc-textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}
.gc-input--amber:focus { border-color: var(--color-amber); box-shadow: 0 0 0 3px var(--color-amber-dim); }
.gc-input--red:focus   { border-color: var(--color-red);   box-shadow: 0 0 0 3px var(--color-red-dim); }

.gc-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.gc-select option { background: var(--bg-surface-2); color: var(--text-primary); }

.gc-textarea { resize: vertical; min-height: 80px; }

/* Search input with icon */
.gc-search-wrap { position: relative; }
.gc-search-ico {
  position: absolute;
  left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
}
.gc-search-input {
  padding-left: 40px;
  font-size: var(--text-md);
}

/* ── SEARCH DROPDOWN ──────────────────────────────────────────────────────── */
.gc-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  z-index: 500;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--dropdown-shadow);
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.gc-dropdown.open { display: block; }

.gc-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
.gc-dropdown__item:last-child { border-bottom: none; }
.gc-dropdown__item:hover,
.gc-dropdown__item.highlighted { background: var(--dropdown-hover); }

.gc-dropdown__name  { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.gc-dropdown__meta  { font-size: var(--text-xs); color: var(--text-secondary); font-family: var(--font-mono); margin-top: 2px; }
.gc-dropdown__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ── SELECTED EMPLOYEE CARD ───────────────────────────────────────────────── */
.gc-sel-card {
  display: none;
  background: var(--color-teal-dim);
  border: 1px solid var(--color-teal-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  animation: gc-fade-in 0.18s ease;
}
.gc-sel-card.show { display: flex; }

@keyframes gc-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gc-sel-card__photo {
  border: 2px solid var(--color-teal-border);
  flex-shrink: 0;
}

.gc-sel-card__name  { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.gc-sel-card__ecode {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--color-teal);
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.gc-sel-card__dept  { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 3px; }
.gc-sel-card__shift {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: var(--weight-semi);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-amber-dim);
  color: var(--color-amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gc-sel-card__clear {
  margin-left: auto;
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  line-height: 1;
}
.gc-sel-card__clear:hover { color: var(--color-red); background: var(--color-red-dim); }

/* ── OCCUPANCY CHIP ───────────────────────────────────────────────────────── */
.gc-chip {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 11px var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: border-color var(--transition-fast);
}
.gc-chip:hover { border-color: var(--card-hover-border); }
.gc-chip--emp { border-left: 3px solid var(--color-teal); }
.gc-chip--vis { border-left: 3px solid var(--color-amber); }

.gc-chip__name { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.gc-chip__meta { font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); margin-top: 2px; }
.gc-chip__time { margin-left: auto; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }

/* ── ACTIVE VISITOR ROW ───────────────────────────────────────────────────── */
.gc-av-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.gc-av-row:last-child { border-bottom: none; }
.gc-av-row__name { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.gc-av-row__meta { font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); margin-top: 2px; }
.gc-av-row__time { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }

/* ── TABLE ────────────────────────────────────────────────────────────────── */
.gc-table-wrap { overflow-x: auto; border-radius: var(--radius-md); }

.gc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.gc-table th {
  text-align: left;
  padding: 10px var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
  font-weight: var(--weight-medium);
}
.gc-table td {
  padding: 11px var(--space-4);
  border-bottom: 1px solid var(--table-border);
  vertical-align: middle;
  color: var(--text-primary);
}
.gc-table tr:nth-child(even) td { background: var(--table-row-alt); }
.gc-table tr:hover td { background: var(--table-row-hover); }
.gc-table td.mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }

/* ── LOGIN CARD ───────────────────────────────────────────────────────────── */
.gc-login-card {
  width: 380px;
  background: var(--card-bg);
  border: 1px solid var(--color-teal-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-xl), 0 0 80px var(--color-teal-glow);
  position: relative;
  z-index: 1;
}
.gc-login-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-2);
}
.gc-login-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin-bottom: 4px; }
.gc-login-sub   { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-6); }
.gc-login-err   { font-size: var(--text-xs); color: var(--color-red); text-align: center; margin-top: var(--space-3); min-height: 16px; }
.gc-login-hint  { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: var(--space-4); font-family: var(--font-mono); }

/* ── SYNC INDICATOR ───────────────────────────────────────────────────────── */
.gc-sync-indicator {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-amber);
  background: var(--color-amber-dim);
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}
.gc-sync-indicator.visible { display: flex; }

/* ── ON-DUTY NAME ─────────────────────────────────────────────────────────── */
.gc-on-duty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gc-on-duty__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
}
.gc-on-duty__input {
  background: var(--input-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  width: 140px;
  transition: border-color var(--transition-fast);
}
.gc-on-duty__input:focus {
  border-color: var(--color-teal);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-teal-dim);
}

/* ── THEME TOGGLE ─────────────────────────────────────────────────────────── */
.gc-theme-toggle {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.gc-theme-toggle:hover {
  border-color: var(--color-teal-border);
  background: var(--color-teal-dim);
}

/* ── FILTER ROW ───────────────────────────────────────────────────────────── */
.gc-filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-4);
}
.gc-filters .gc-input,
.gc-filters .gc-select {
  width: auto;
  flex: 1;
  min-width: 140px;
}

/* ── PHOTO UPLOAD ─────────────────────────────────────────────────────────── */
.gc-photo-upload {
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-default);
  background: var(--bg-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}
.gc-photo-upload:hover { border-color: var(--color-teal); }
.gc-photo-upload img { width: 100%; height: 100%; object-fit: cover; }

/* ── ALERT / INFO BANNERS ─────────────────────────────────────────────────── */
.gc-alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.gc-alert--info    { background: var(--color-teal-dim);  border: 1px solid var(--color-teal-border);  color: var(--color-teal); }
.gc-alert--warning { background: var(--color-amber-dim); border: 1px solid var(--color-amber-border); color: var(--color-amber); }
.gc-alert--danger  { background: var(--color-red-dim);   border: 1px solid var(--color-red-border);   color: var(--color-red); }
.gc-alert--success { background: var(--color-green-dim); border: 1px solid var(--color-green-border); color: var(--color-green); }

/* ── MANUAL ENTRY TABLE ───────────────────────────────────────────────────── */
.gc-manual-row {
  display: grid;
  grid-template-columns: 1fr 120px 120px 100px auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.gc-manual-row:last-child { border-bottom: none; }

@media (max-width: 768px) {
  .gc-manual-row { grid-template-columns: 1fr 1fr; }
}

/* ── HANDOVER SCREEN ──────────────────────────────────────────────────────── */
.gc-handover {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 640px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}
.gc-handover__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.gc-handover__count {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--color-teal);
  line-height: 1;
  margin: var(--space-4) 0;
}

/* ── EMERGENCY MUSTER ─────────────────────────────────────────────────────── */
.gc-emergency-mode {
  background: var(--emergency-bg) !important;
  min-height: 100%;
}
.gc-emergency-header {
  background: var(--color-red);
  color: white;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.gc-emergency-count {
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: var(--weight-bold);
  color: white;
  line-height: 1;
}
.gc-emergency-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  opacity: 0.8;
}

/* ── COLUMN TOGGLE PANEL ──────────────────────────────────────────────────── */
.gc-col-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.gc-col-toggle__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--card-bg);
  transition: all var(--transition-fast);
}
.gc-col-toggle__item.active {
  color: var(--color-teal);
  border-color: var(--color-teal-border);
  background: var(--color-teal-dim);
}

/* ── MEDICAL CARD (expandable in muster) ─────────────────────────────────── */
.gc-medical {
  background: var(--color-red-dim);
  border: 1px solid var(--color-red-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  display: none;
}
.gc-medical.open { display: block; }
.gc-medical__row { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); }
.gc-medical__label { font-weight: var(--weight-semi); color: var(--color-red); min-width: 120px; font-size: var(--text-xs); text-transform: uppercase; font-family: var(--font-mono); letter-spacing: 0.06em; }
.gc-medical__val { color: var(--text-primary); }