.console-layout { display: flex; flex-direction: column; height: 100%; background: #f5f5f5; }

.console-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #1a237e; color: #fff;

  .header-info { display: flex; align-items: center; gap: 16px; font-size: 13px; }
  .operator-name,
  .shift-name { display: flex; align-items: center; gap: 4px; mat-icon { font-size: 16px; } }
  .hub-status {
    display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: 0.8;
    &.connected { color: #a5d6a7; opacity: 1; }
    mat-icon { font-size: 14px; }
  }
  .header-stats { display: flex; gap: 16px; font-size: 13px; strong { color: #fff; } }
}

.console-body { display: flex; flex: 1; overflow: hidden; }

.queue-panel {
  width: 260px; min-width: 260px; background: #fff; border-right: 1px solid #e0e0e0;
  display: flex; flex-direction: column; transition: width 0.2s, min-width 0.2s;

  &.collapsed { min-width: 40px; width: 40px; overflow: hidden; }

  .queue-toggle {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px;
    cursor: pointer; background: #f8f8f8; border-bottom: 1px solid #e0e0e0;
    font-size: 13px; font-weight: 600; color: #333; white-space: nowrap;
    mat-icon { font-size: 18px; flex-shrink: 0; }
  }

  .queue-list { flex: 1; overflow-y: auto; }

  .queue-item {
    padding: 10px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
    transition: background 0.1s;
    &:hover { background: #f5f5f5; }
    &.is-active { background: #e3f2fd; border-left: 3px solid #1565c0; padding-left: 9px; }
    .qi-number  { font-weight: 600; font-size: 12px; color: #1565c0; }
    .qi-item    { font-size: 12px; color: #333; margin: 2px 0; }
    .qi-process { font-size: 11px; color: #666; }
    .qi-qty     { font-size: 11px; color: #555; }
    .qi-status  {
      display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 8px;
      background: #eeeeee; color: #666; margin-top: 4px;
      &.active { background: #e8f5e9; color: #2e7d32; }
    }
  }

  .queue-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: #999; }
}

.task-area { flex: 1; overflow-y: auto; padding: 16px; }

.no-task {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 200px; color: #bbb;
  mat-icon { font-size: 64px; width: 64px; height: 64px; }
  p { font-size: 14px; margin-top: 12px; }
}

.task-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  .task-header {
    background: linear-gradient(135deg, #1a237e, #283593);
    padding: 16px 20px; color: #fff;
    .task-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .wo-number  { font-size: 18px; font-weight: 700; }
    .stage-badge { background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 10px; font-size: 12px; }
    .wc-badge    { background: rgba(255,255,255,0.15); padding: 2px 10px; border-radius: 10px; font-size: 12px; }
    .task-meta   { display: flex; gap: 16px; }
    .task-item   { font-size: 14px; opacity: 0.9; }
    .task-planned{ font-size: 12px; opacity: 0.75; }
  }

  .timer-section {
    display: flex; align-items: center; gap: 20px; padding: 16px 20px;
    background: #f9f9f9; border-bottom: 1px solid #eee;
    .timer-display { font-size: 40px; font-weight: 700; font-family: monospace; color: #1a237e; min-width: 100px; }
    .timer-actions { display: flex; gap: 8px; }
  }

  .qty-section {
    padding: 16px 20px;
    .qty-row {
      display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
      label       { min-width: 80px; font-size: 13px; font-weight: 500; color: #555; }
      input       { width: 100px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
      .qty-readonly { min-width: 60px; font-size: 14px; font-weight: 600; }
    }
    .qty-total { font-size: 13px; color: #666; margin-top: 4px; }
  }

  .quality-panel {
    margin: 0 20px 16px; padding: 12px; background: #fff8e1;
    border-radius: 6px; border: 1px solid #ffe082;
    h4 { margin: 0 0 10px; font-size: 13px; }
    .defect-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .defect-chip {
      padding: 4px 10px; border-radius: 12px; background: #fff;
      border: 1px solid #ccc; font-size: 11px; cursor: pointer;
      &.selected { background: #e65100; color: #fff; border-color: #e65100; }
    }
    input, textarea {
      width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px;
      font-size: 12px; margin-bottom: 6px; box-sizing: border-box;
    }
    textarea { min-height: 60px; resize: vertical; }
  }

  .quality-log {
    margin: 0 20px 16px; padding: 12px; background: #f5f5f5; border-radius: 6px;
    h4 { margin: 0 0 8px; font-size: 13px; }
    .log-entry {
      display: flex; gap: 12px; font-size: 12px; padding: 4px 0;
      border-bottom: 1px solid #e0e0e0;
      .log-defect { font-weight: 600; min-width: 140px; }
      .log-qty    { min-width: 40px; }
      .log-remarks{ color: #666; }
    }
  }

  .task-actions { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid #eee; }
}

.btn-pause     { background: #fff3e0; border: 1px solid #e65100; color: #e65100; }
.btn-stoppage  { background: #ffebee; border: 1px solid #c62828; color: #c62828; }
.btn-save      { background: #e3f2fd; border: 1px solid #1565c0; color: #1565c0; }
.btn-complete  { background: #1b5e20; border: 1px solid #1b5e20; color: #fff; }
.btn-add       { background: #fff; border: 1px solid #ccc; font-size: 11px; color: #333; }
.btn-primary   { background: #1565c0; color: #fff; border: none; }
.btn-secondary { background: #fff; color: #333; border: 1px solid #ccc; }

button {
  padding: 7px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
  mat-icon { font-size: 16px; width: 16px; height: 16px; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex;
  align-items: center; justify-content: center; z-index: 1000;

  .modal {
    background: #fff; border-radius: 10px; padding: 24px; min-width: 380px; max-width: 520px;
    h3 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 6px; mat-icon { font-size: 20px; } }
    .timestamp { font-size: 12px; color: #888; margin: 0 0 12px; }
  }

  .stoppage-modal {
    .reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .reason-chip {
      padding: 6px 12px; border-radius: 12px; background: #f5f5f5;
      border: 1px solid #ccc; font-size: 12px; cursor: pointer;
      &.selected { background: #c62828; color: #fff; border-color: #c62828; }
    }
    textarea {
      width: 100%; min-height: 80px; padding: 8px; border: 1px solid #ccc;
      border-radius: 4px; font-size: 12px; resize: vertical; box-sizing: border-box; margin-bottom: 12px;
    }
  }

  .summary-table {
    width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px;
    td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; &:first-child { color: #666; width: 130px; } }
  }

  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
}