/*
 * UI-0001: device-console. Zelfde tokencontract (tokens.css) en dark/light-skins als de
 * bestaande interface en de schil (REQ 117, D-048). Geen nieuwe kleuren of eigen ontwerp-
 * taal: uitsluitend de bestaande tokens. Master-detail met een apparatenlijst links en het
 * detail rechts, op smalle schermen (vanaf 360px) geklapt naar twee tabbladen.
 *
 * De header-, tabbar-, badge- en focusregels volgen bewust shell.css zodat de console
 * naadloos bij de schil past.
 */
* { box-sizing: border-box; }
/* Het hidden-attribuut moet altijd verbergen, ook op elementen met een eigen display-regel
   (tabbar, console) uit de media-queries hieronder. */
[hidden] { display: none !important; }

html { height: 100%; background: var(--color-bg-base); }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  overflow-x: hidden;
}

.muted { color: var(--color-text-muted); }
a.link { cursor: pointer; text-decoration: underline; color: var(--color-text-secondary); }
a.link:hover { color: var(--color-accent); }

/* Header, identiek patroon aan shell.css. */
.shell-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  min-height: 4rem;
  padding: .75rem 1.25rem;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.shell-header-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.shell-header-title {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0;
  white-space: nowrap;
}
.shell-header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .6rem; }
.brand-logo { display: block; width: 34px; height: 34px; filter: drop-shadow(0 0 5px var(--color-accent-glow)); flex-shrink: 0; }

.preview-pill {
  padding: .1rem .55rem;
  border-radius: var(--radius-md);
  font-size: .72rem;
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg-elevated));
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  white-space: nowrap;
}

/* Operator-identiteit en uitloggen in de header (UI-0007). */
.op-identity { font-size: .8rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logout-btn { font: inherit; background: transparent; border: none; padding: 0; cursor: pointer; }

/* Aanmeldscherm (UI-0007). Zelfde tokens en kaartstijl als de rest van de console, geen nieuwe
   ontwerptaal: een gecentreerde kaart met de Microsoft-knop en het lokale-accountformulier. */
.login-gate { display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem; min-height: calc(100vh - 5.5rem); }
.login-card { width: 100%; max-width: 22rem; margin: 0; }
.login-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-heading); font-size: 1.15rem; }
.login-sub { font-size: .85rem; margin: .5rem 0 1rem; }
.login-hint { font-size: .78rem; margin: .5rem 0 0; }

.btn-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-microsoft:hover:not(:disabled) { border-color: var(--color-accent); }
.btn-microsoft:disabled { opacity: .6; cursor: default; }
.ms-logo { flex-shrink: 0; }

.login-divider { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0; color: var(--color-text-muted); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.login-form { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.login-form input {
  font: inherit;
  min-height: 44px;
  padding: .5rem .7rem;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.login-form .btn-primary { align-self: stretch; text-align: center; }

.tabbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.tabbar button {
  flex: 1;
  padding: .7rem .5rem;
  min-height: 44px;
  font: inherit;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.tabbar button:hover { background: var(--color-bg-elevated); }
.tabbar button.active {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

.console {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
}
.zone { padding: 1rem; border-right: 1px solid var(--color-border); min-height: calc(100vh - 5.5rem); }
.zone:last-child { border-right: none; }

.zone-title { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 .2rem; }
.zone-sub { font-size: .8rem; margin: 0 0 .8rem; }

/* Apparatenlijst. */
.device-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.device-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  font: inherit;
  min-height: 44px;
  padding: .5rem .7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.device-item:hover { background: var(--color-bg-elevated); }
.device-item.active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.device-item-body { display: flex; flex-direction: column; min-width: 0; }
.device-name { font-weight: 600; }
.device-meta { font-size: .75rem; }
.list-error { color: var(--color-danger); font-size: .85rem; }

.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-online { background: var(--color-success); box-shadow: 0 0 5px var(--color-success); }
.dot-stale { background: var(--color-accent); }
.dot-offline { background: var(--color-text-muted); }

/* Detailzone. */
.detail-empty { color: var(--color-text-muted); font-size: .9rem; max-width: 32rem; }

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow-card);
}
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.detail-title { font-family: var(--font-heading); font-size: 1.15rem; margin: 0; }
.card-title { font-size: .95rem; margin: 0 0 .6rem; }

.kv { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .25rem .8rem; margin: 0; font-size: .85rem; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; word-break: break-word; }

.badge {
  display: inline-block;
  padding: .08rem .5rem;
  border-radius: var(--radius-md);
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-success { color: var(--color-success); border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.badge-failed { color: var(--color-danger); border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.badge-running { color: var(--color-info); border-color: var(--color-info); background: color-mix(in srgb, var(--color-info) 14%, transparent); }
.badge-pending { color: var(--color-accent); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.badge-muted { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-bg-elevated); }

/* Controle (CMD-0024): commandotrace, diagnose, tijdlijn. Hergebruikt .device-list/.badge/.field. */
.controle-filters { margin-bottom: .5rem; max-width: 16rem; }
.controle-diagnosis-box { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .7rem .9rem; margin: .5rem 0 .9rem; background: var(--color-bg-elevated); }
.controle-diagnosis-box p { margin: .4rem 0; font-size: .85rem; }
.controle-timeline { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; }
.controle-timeline li { border-left: 2px solid var(--color-border); padding-left: .6rem; }
.controle-timeline-time { display: block; font-size: .72rem; }
.controle-evidence { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; }
.controle-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }

/* Aanwezigheids-/uptimestrip (apparaatdetail). */
.uptime-wrap { overflow-x: auto; margin: .3rem 0 .5rem; -webkit-overflow-scrolling: touch; }
.uptime-strip { display: flex; gap: 1px; width: max-content; }
.uptime-strip .blk { width: 5px; height: 20px; border-radius: 1px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); flex-shrink: 0; }
.uptime-strip .blk.on { background: var(--color-success); border-color: var(--color-success); }
.uptime-strip .blk.off { background: var(--color-danger); opacity: .5; }
.uptime-legend { font-size: .75rem; color: var(--color-text-muted); margin-bottom: .5rem; }
.uptime-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 .25rem 0 .6rem; vertical-align: middle; }
.uptime-legend .sw:first-child { margin-left: 0; }
.uptime-legend .sw.on { background: var(--color-success); }
.uptime-legend .sw.off { background: var(--color-danger); opacity: .5; }

/* Actieformulier. */
.action-form { display: flex; flex-direction: column; gap: .7rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.field > span { color: var(--color-text-secondary); }
.field-help { font-size: .78rem; margin: 0; }
.action-form select,
.action-form input,
.action-form textarea {
  font: inherit;
  min-height: 44px;
  padding: .5rem .7rem;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.action-form textarea { min-height: 5rem; resize: vertical; font-family: ui-monospace, monospace; font-size: .82rem; }
.btn-primary {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 1.2rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.form-msg { font-size: .82rem; margin: 0; min-height: 1.1rem; }
.form-msg-ok { color: var(--color-success); }
.form-msg-error { color: var(--color-danger); }

/* Goedkeuren/Weigeren voor commando's met verhoogd risiconiveau (issue #334). */
.command-approval { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .7rem; }
.key-revoke-btn {
  min-height: 32px;
  padding: .15rem .55rem;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.key-revoke-btn:hover:not(:disabled) { border-color: var(--color-danger); color: var(--color-danger); }
.key-revoke-btn:disabled { opacity: .6; cursor: default; }

/* Resultaatblok. */
.result-block { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--color-border); }
.result-title { font-size: .85rem; margin: 0 0 .5rem; }
.summary {
  font-family: ui-monospace, monospace;
  font-size: .8rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  margin: .4rem 0 0;
}
.summary.error { color: var(--color-danger); }

.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid color-mix(in srgb, var(--color-info) 40%, transparent);
  border-top-color: var(--color-info);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Tekstuele laadtoestand met spinner (bijv. detailpaneel tijdens ophalen). De spinner zelf
   blijft altijd zichtbaar als statisch rondje bij reduced-motion (regel hierboven), alleen de
   draaiing stopt. */
.loading-text { display: flex; align-items: center; gap: .45rem; }

/* Commando- en audit-lijsten. */
.cmd-list, .audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cmd-row, .audit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  font-size: .82rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}
.cmd-row:last-child, .audit-row:last-child { border-bottom: none; padding-bottom: 0; }
.cmd-action, .audit-type { font-weight: 600; }
.cmd-summary, .audit-summary { flex-basis: 100%; }
.audit-time, .cmd-time { margin-left: auto; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

#amigero-version { position: fixed; right: .5rem; bottom: .35rem; font-size: .68rem; font-family: ui-monospace, monospace; color: var(--color-text-muted); opacity: .55; pointer-events: none; z-index: 3; }

/* Mobiel vanaf 360px: twee zones als tabbladen, een tegelijk zichtbaar. */
@media (max-width: 767px) {
  .shell-header { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: .4rem; min-height: auto; padding: .6rem .8rem; }
  .shell-header-brand { gap: .5rem; }
  .shell-header-title { grid-column: 1; font-size: 1.1rem; }
  .shell-header-actions { grid-column: 1; justify-self: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
  .brand-logo { width: 28px; height: 28px; }

  .tabbar { display: flex; gap: 0; overflow-x: auto; }
  .tabbar button { flex: 1; min-width: 70px; font-size: .85rem; padding: .6rem .5rem; }

  .console { display: block; }
  .zone { display: none; border-right: none; border-bottom: 1px solid var(--color-border); min-height: calc(100vh - 10rem); padding: .75rem .8rem; }
  .zone.zone-active { display: block; }

  .zone-title { font-size: .95rem; }
  .device-list { gap: .2rem; }
  .device-item { font-size: .9rem; min-height: 40px; padding: .5rem .6rem; }

  .card { padding: .75rem .85rem; margin: 0 0 .8rem; border-radius: var(--radius-sm); }
  .detail-title { font-size: 1.05rem; }
  .card-title { font-size: .9rem; margin: 0 0 .5rem; }

  .kv { grid-template-columns: 1fr; gap: .05rem .6rem; font-size: .8rem; }
  .kv dt { margin-top: .2rem; }

  .badge { font-size: .65rem; padding: .05rem .4rem; }

  .action-form { gap: .6rem; }
  .field { font-size: .8rem; gap: .2rem; }
  .action-form input,
  .action-form select,
  .action-form textarea { min-height: 40px; padding: .4rem .6rem; font-size: .9rem; }
  .action-form textarea { min-height: 4rem; }
  .btn-primary { min-height: 40px; padding: 0 1rem; font-size: .9rem; }

  .cmd-list, .audit-list { gap: .4rem; }
  .cmd-row, .audit-row { font-size: .75rem; flex-direction: column; gap: .2rem; padding-bottom: .4rem; }
  .cmd-action, .audit-type { font-size: .8rem; }
  .audit-time, .cmd-time { margin-left: 0; font-size: .7rem; color: var(--color-text-muted); }

  .summary { font-size: .75rem; padding: .4rem .5rem; }
}