/* ═══════════════════════════════════════════════════════════
   Clark & Co AI Factory — Dashboard Layout & Map Styles v1.5
   ═══════════════════════════════════════════════════════════ */

body.dashboard-body {
  overflow: hidden;
  height: 100vh;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Top bar ──────────────────────────────────────────────── */

.top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 40px;
  background: #0d0d1a;
  border-bottom: 4px solid var(--purple);
  flex-shrink: 0;
}

.bar-logo {
  color: var(--purple-l);
  font-size: 9px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.bar-sep {
  color: var(--border-2);
  font-size: 10px;
}

.bar-tokens {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7px;
  color: #ffaa00;
  white-space: nowrap;
}

.bar-tokens-label {
  color: var(--text-dim);
  font-size: 6px;
}

.bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.bar-conn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7px;
  color: var(--text-dim);
}

.bar-time {
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: 1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Main layout ──────────────────────────────────────────── */

.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Factory map area ─────────────────────────────────────── */

.map-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px 24px;
  background-color: #141824;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 16px 16px;
}

.map-area::-webkit-scrollbar       { width: 6px; }
.map-area::-webkit-scrollbar-track { background: #0a0a14; }
.map-area::-webkit-scrollbar-thumb { background: var(--border-2); }

/* ── Idle notice ──────────────────────────────────────────── */

.idle-notice {
  margin: 16px 0 12px;
  padding: 24px 16px;
  border: 2px solid var(--border-2);
  text-align: center;
  background: rgba(0,0,0,0.3);
}

.idle-notice.hidden { display: none; }

.idle-icon {
  font-size: 20px;
  color: var(--text-dim);
  margin-bottom: 14px;
  opacity: 0.4;
}

.idle-text {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.idle-sub {
  font-size: 6px;
  color: #33334a;
  margin-bottom: 6px;
}

.idle-last {
  font-size: 6px;
  color: #44446a;
  margin-bottom: 4px;
}

.idle-waiting {
  font-size: 5px;
  color: #2a2a3e;
}

/* ── Production Pipeline ──────────────────────────────────── */

.pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Conveyor belt connector ──────────────────────────────── */

.conveyor {
  display: flex;
  align-items: center;
  height: 24px;
  margin: 0;
  position: relative;
  cursor: default;
  user-select: none;
}

.conv-track {
  flex: 1;
  height: 6px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #1a1a2e;
  border-bottom: 1px solid #1a1a2e;
}

.conv-belt {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    #1e1e30 0px, #1e1e30 8px,
    #252538 8px, #252538 12px
  );
  background-size: 12px 100%;
  animation: belt-slide 0.9s linear infinite;
}

.conveyor.active .conv-belt {
  background: repeating-linear-gradient(
    90deg,
    #8a5500 0px, #8a5500 8px,
    #ffaa00 8px, #ffaa00 12px
  );
  animation: belt-slide 0.35s linear infinite;
}

@keyframes belt-slide {
  from { background-position: 0 0; }
  to   { background-position: 12px 0; }
}

.conv-node {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.conv-arrow {
  font-size: 7px;
  color: #2a2a40;
}

.conveyor.active .conv-arrow { color: #ffaa00; }

.conv-label {
  font-size: 5px;
  color: #252538;
  letter-spacing: 1px;
}

.conveyor.active .conv-label { color: #8a6600; }

/* Critic → Production feedback indicator */
.feedback-label {
  position: absolute;
  right: 8px;
  font-size: 5px;
  color: #3a1515;
  letter-spacing: 1px;
  display: none;
}

.conveyor.feedback-active .feedback-label {
  display: block;
  color: var(--red-l);
  animation: blink-slow 1.2s infinite;
}

/* ── Room (pipeline mode) ─────────────────────────────────── */

.room-pipe {
  background: var(--bg-room);
  border: 3px solid var(--border);
  outline: 2px solid var(--border-2);
  cursor: pointer;
  transition: outline-color 0.15s;
  position: relative;
}

.room-pipe:hover {
  outline-color: #4a4a6e;
}

.room-pipe:active {
  outline-color: var(--purple-l);
}

/* Room header */
.room-hdr {
  padding: 7px 10px;
  border-bottom: 3px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.room-hdr--purple { background: var(--purple); }
.room-hdr--teal   { background: var(--teal);   }
.room-hdr--blue   { background: var(--blue);   }
.room-hdr--yellow { background: var(--yellow); }
.room-hdr--red    { background: var(--red);    }
.room-hdr--green  { background: var(--green);  }
.room-hdr--pink   { background: var(--pink);   }

.room-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.room-name {
  font-size: 8px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  flex-shrink: 0;
}

.room-role {
  font-size: 5px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badge (replaces tiny status text) */
.status-badge {
  font-size: 6px;
  padding: 3px 7px;
  border: 2px solid;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: none;
}

.badge-idle    { color: #555568; border-color: #333347; background: rgba(0,0,0,0.3); }
.badge-waiting { color: #ffaa00; border-color: #7a5500; background: rgba(20,12,0,0.5); animation: blink-slow 1.8s infinite; }
.badge-working { color: #00ee44; border-color: #006622; background: rgba(0,16,5,0.6); animation: blink-fast 1s infinite; }
.badge-blocked { color: #ff3344; border-color: #880022; background: rgba(16,0,3,0.6); animation: blink-fast 0.4s infinite; }

/* Room body */
.room-body {
  display: flex;
  gap: 10px;
  padding: 8px 10px 10px;
  align-items: flex-start;
}

/* Sprite column */
.sprite-col {
  flex-shrink: 0;
  width: 54px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Worker sprite */
.sprite {
  width: 48px;
  height: 60px;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sprite svg {
  width: 48px;
  height: 60px;
  image-rendering: pixelated;
}

.sprite.idle    { animation: bob-idle 2.4s ease-in-out infinite; }
.sprite.working { animation: bob-work 0.6s ease-in-out infinite; }
.sprite.blocked { animation: shk 0.22s ease-in-out infinite;
                  filter: saturate(200%) brightness(1.2); }
.sprite.waiting { animation: bob-idle 3.8s ease-in-out infinite; opacity: 0.55; }

@keyframes bob-idle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@keyframes bob-work {
  0%, 100% { transform: translateY(0) scaleX(1); }
  30%       { transform: translateY(-7px) scaleX(0.92); }
  60%       { transform: translateY(-2px); }
}

@keyframes shk {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-3px); }
  75%       { transform: translateX(3px); }
}

/* Speech bubble */
.bubble {
  position: absolute;
  top: -6px;
  left: 58px;
  background: #fff;
  color: #000;
  font-family: var(--font);
  font-size: 5px;
  border: 2px solid #000;
  padding: 5px 7px;
  white-space: nowrap;
  z-index: 20;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 2;
  pointer-events: none;
  box-shadow: 2px 2px 0 #000;
}

.bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 6px;
  border-right: 9px solid #000;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.bubble.hidden { display: none; }

/* Info column */
.info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  padding-top: 2px;
  min-width: 0;
}

.info-task {
  font-size: 7px;
  color: var(--text);
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.info-task.dim {
  color: var(--text-dim);
  font-size: 6px;
}

.info-proj {
  font-size: 5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.info-last {
  font-size: 5px;
  color: #33334a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Token burn bar */
.burn-track {
  height: 3px;
  background: #111118;
  border: 1px solid #1a1a2e;
  overflow: hidden;
  margin-top: 6px;
}

.burn-fill {
  height: 100%;
  background: linear-gradient(90deg, #cc8800, #ffaa00);
  transition: width 0.6s ease;
  min-width: 0;
}

/* ── Completed Dock ───────────────────────────────────────── */

.dock {
  background: #0a0e14;
  border: 3px solid var(--border);
  outline: 2px solid var(--border-2);
  padding: 10px;
}

.dock-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 7px;
  color: var(--gray-l);
  border-bottom: 2px solid var(--border-2);
  padding-bottom: 8px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 #000;
}

.dock-count {
  font-size: 5px;
  color: var(--text-dim);
  margin-left: auto;
}

.dock-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.dock-empty {
  font-size: 6px;
  color: var(--text-dim);
}

/* Client cards in dock */
.client-card {
  border: 2px solid;
  padding: 8px 10px;
  min-width: 130px;
  max-width: 180px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
  transition: outline-color 0.15s;
}

.client-card.live {
  border-color: #1a6630;
  background: linear-gradient(135deg, #010e04, #001407);
}

.client-card.delivered {
  border-color: var(--border-2);
  background: #0a0d14;
}

.client-card:hover.live      { border-color: #00ee44; }
.client-card:hover.delivered { border-color: #4a4a6e; }

.client-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

.client-name {
  font-size: 7px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0,220,60,0.3);
}

.client-card.delivered .client-name {
  color: var(--text);
  text-shadow: none;
}

.client-domain {
  font-size: 5px;
  color: #336644;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-card.delivered .client-domain { color: var(--text-dim); }

.client-badge {
  font-size: 5px;
  padding: 2px 4px;
  border: 1px solid;
  align-self: flex-start;
  margin-top: 2px;
}

.client-badge.live      { color: #00ee44; border-color: #006622; background: rgba(0,20,8,0.8); }
.client-badge.delivered { color: var(--gray-l); border-color: var(--border-2); }

/* ── Activity Feed Panel ──────────────────────────────────── */

.feed-panel {
  width: 288px;
  min-width: 288px;
  background: var(--bg-panel);
  border-left: 4px solid var(--border-2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.feed-hdr {
  padding: 10px 12px;
  background: #0d0d1a;
  border-bottom: 3px solid var(--border-2);
  font-size: 7px;
  color: var(--purple-l);
  flex-shrink: 0;
  letter-spacing: 1px;
}

.feed-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.feed-list::-webkit-scrollbar       { width: 4px; }
.feed-list::-webkit-scrollbar-track { background: var(--bg-panel); }
.feed-list::-webkit-scrollbar-thumb { background: var(--border-2); }

.feed-loading,
.feed-empty {
  font-size: 6px;
  color: var(--text-dim);
  padding: 14px 12px;
  line-height: 2;
}

/* Feed events */
.feed-event {
  padding: 6px 12px;
  border-bottom: 1px solid #0e0e1c;
  cursor: default;
}

.feed-event:hover { background: #0f0f1e; }

.ev-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.ev-dept {
  font-size: 5px;
  padding: 1px 4px;
  border: 1px solid;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Department tag colors in feed */
.dept-director   .ev-dept { color: var(--purple-l); border-color: var(--purple); }
.dept-research   .ev-dept { color: var(--teal-l);   border-color: var(--teal);   }
.dept-strategist .ev-dept { color: var(--blue-l);   border-color: var(--blue);   }
.dept-production .ev-dept { color: var(--yellow-l); border-color: var(--yellow); }
.dept-critic     .ev-dept { color: var(--red-l);    border-color: var(--red);    }
.dept-knowledge  .ev-dept { color: var(--green-l);  border-color: var(--green);  }
.dept-sales      .ev-dept { color: var(--pink-l);   border-color: var(--pink);   }

.ev-summary {
  font-size: 6px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  line-height: 1.8;
}

.ev-time {
  font-size: 5px;
  color: #2e2e48;
  flex-shrink: 0;
  white-space: nowrap;
}

.ev-raw {
  font-size: 5px;
  color: #33334a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.6;
  margin-top: 1px;
}

/* ── Token panel ──────────────────────────────────────────── */

.token-panel {
  flex-shrink: 0;
  background: #08080f;
  border-top: 3px solid var(--border-2);
  padding: 10px 12px;
}

.token-panel-title {
  font-size: 6px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.token-stub {
  font-size: 5px;
  color: #33334a;
  line-height: 2;
}

.token-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.token-rows.hidden { display: none; }

.token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.token-row-key { font-size: 5px; color: var(--text-dim); }
.token-row-val { font-size: 6px; color: #ffaa00; }

/* ── Department Detail Panel ──────────────────────────────── */

.detail-panel {
  position: fixed;
  top: 44px;
  right: 288px;
  width: 256px;
  bottom: 0;
  background: #08080e;
  border-left: 4px solid var(--purple);
  border-right: 2px solid var(--border-2);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -6px 0 24px rgba(0,0,0,0.7);
}

.detail-panel.hidden { display: none; }

.detail-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #0d0d1a;
  border-bottom: 3px solid var(--purple);
  flex-shrink: 0;
}

.detail-hdr span {
  font-size: 7px;
  color: var(--purple-l);
  letter-spacing: 1px;
}

.detail-close {
  background: none;
  border: 2px solid var(--border-2);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 6px;
  padding: 3px 6px;
  cursor: pointer;
}

.detail-close:hover {
  border-color: var(--red);
  color: var(--red-l);
}

.detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-body::-webkit-scrollbar       { width: 4px; }
.detail-body::-webkit-scrollbar-track { background: #08080e; }
.detail-body::-webkit-scrollbar-thumb { background: var(--border-2); }

.detail-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid #10101c;
  padding-bottom: 7px;
}

.detail-key {
  font-size: 5px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.detail-val {
  font-size: 6px;
  color: var(--text);
  line-height: 1.8;
  word-break: break-word;
}

.detail-section-title {
  font-size: 5px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-top: 4px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-2);
}

.detail-events {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detail-event-item {
  font-size: 5px;
  color: #44446a;
  line-height: 1.8;
  border-left: 2px solid var(--border-2);
  padding-left: 6px;
}

.detail-event-item.working { border-left-color: #006622; }
.detail-event-item.blocked { border-left-color: var(--red); }