// ==========================================================================
// GoodBooks Production — Work Order Dashboard
// Theme: Light / Purple (matched to Account Master design system)
// ==========================================================================

$purple:            #8347D0;
$purple-dark:        #6E36BE;
$purple-soft:        #F3F2F8;
$purple-tint:        #F4EFFE;
$purple-border:      #D5C9EF;

$red:                #FE1A1A;
$red-soft:            #FDEAEA;
$red-border:          #F7B9B9;

$green:              #1E9E5A;
$green-soft:          #E7F6EE;
$green-border:        #B9E4CC;

$amber:              #B9770E;
$amber-soft:          #FBF1DF;
$amber-border:        #F0D69C;

$bg-page:            #F9FAFB;
$bg-white:           #FFFFFF;
$bg-panel:           #FFFFFF;
$bg-input:           #FFFFFF;
$bg-hero:            #FFFFFF;

$border-default:     #E9EAEB;
$border-soft:        #ECECEE;

$text-primary:       #1A1A1A;
$text-secondary:     #5B5B60;
$text-muted:         #838383;
$text-placeholder:   #B0B0B8;

$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;

$font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Arial, sans-serif;
$font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

$shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
$shadow-panel: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);

@mixin badge($bg, $fg, $bd) {
  background: $bg;
  color: $fg;
  border: 1px solid $bd;
  border-radius: $radius-sm;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

// ---- Root container -----------------------------------------------------
// Normal document flow — no position:fixed/absolute here. The queue and
// console render inline, inside whatever content area the GB5 layout
// already gives this component (the same area the console correctly uses),
// so the left sidebar/topbar chrome outside this component is never touched.
.pd-console-root {
  width: 100%;
}

.FormOverView {
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;

  * ,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

// ---- Top bar -----------------------------------------------------------------
.pd-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  row-gap: 10px;
  padding: 14px 24px;
  background: $bg-white;
  border-bottom: 1px solid $border-default;
  width: 100%;

  &__brand {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    flex-shrink: 0;

    .brand-good { color: $text-primary; }
    .brand-books { color: $purple; }
    .brand-sub {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: $text-muted;
      margin-top: 2px;
    }
  }

  &__operator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    padding-left: 24px;
    border-left: 1px solid $border-default;
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
  }

  &__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    row-gap: 8px;
    flex-shrink: 0;
  }
}

.pd-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: $purple-soft;
  color: $purple;
  border: 1px solid $purple-border;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.pd-operator-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;

  .op-name {
    font-size: 13px;
    font-weight: 600;
    color: $text-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: block;

    .op-code {
      font-weight: 500;
      color: $text-muted;
      margin-left: 4px;
    }
  }

  .op-shift {
    font-size: 11.5px;
    color: $text-secondary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.pd-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;

  .meta-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: $text-muted;
    white-space: nowrap;
  }

  .meta-value {
    font-size: 13px;
    font-weight: 600;
    color: $text-primary;
    transition: color 0.15s ease;
    white-space: nowrap;
  }

  &--clickable {
    cursor: pointer;

    &:hover .meta-value { color: $purple; }
  }
}

.pd-btn-back {
  background: $bg-white;
  border: 1px solid $border-default;
  color: $text-primary;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: $radius-md;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  margin-right: 4px;
  white-space: nowrap;

  &:hover {
    background: $purple-soft;
    border-color: $purple-border;
    color: $purple;
  }
}

.pd-btn-scan {
  background: $bg-white;
  border: 1px solid $border-default;
  color: $text-primary;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: $radius-md;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;

  &:hover {
    background: $purple-soft;
    border-color: $purple-border;
  }
}

// ---- Body layout ---------------------------------------------------------------
.pd-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
}

// ---- Main panel --------------------------------------------------------------
.pd-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  min-width: 0;
}

.pd-workorder {
  background: $bg-hero;
  border: 1px solid $border-default;
  border-radius: $radius-lg;
  box-shadow: $shadow-panel;
  padding: 20px 24px 24px;
  width: 100%;
}

.pd-workorder__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
  gap: 16px;
  flex-wrap: wrap;

  .wo-code {
    font-size: 12px;
    font-weight: 600;
    color: $text-muted;
    letter-spacing: 0.03em;
  }

  .wo-targets {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
  }
}

.pd-target {
  text-align: right;

  .target-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: $text-muted;
    display: block;
    margin-bottom: 2px;
  }

  .target-value {
    font-size: 17px;
    font-weight: 700;
    color: $text-primary;
  }
}

.pd-workorder__title {
  font-size: 24px;
  font-weight: 700;
  color: $text-primary;
  margin: 2px 0 4px;
  word-break: break-word;
}

.pd-workorder__subtitle {
  font-size: 13px;
  color: $text-secondary;
  margin-bottom: 14px;
  word-break: break-word;
}

.pd-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.pd-badge {
  &--stage    { @include badge($purple-soft, $purple, $purple-border); }
  &--wc       { @include badge(#F5F5F6, $text-secondary, $border-default); }
  &--running  { @include badge($green-soft, $green, $green-border); }

  &__sub {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.7;
    padding-left: 6px;
    margin-left: 6px;
    border-left: 1px solid currentColor;
  }
}

// ---- Timer -------------------------------------------------------------------
.pd-timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid $border-default;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

.pd-timer {
  font-family: $font-mono;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: $text-primary;
}

.pd-timer-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.pd-btn {
  border-radius: $radius-md;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;

  &:hover { filter: brightness(0.98); }

  &--ghost {
    background: $bg-white;
    border-color: $border-default;
    color: $text-primary;

    &:hover { background: #F5F5F6; }
  }

  &--danger-outline {
    background: $bg-white;
    border-color: $red-border;
    color: $red;

    &:hover { background: $red-soft; }
  }

  &--danger {
    background: $red;
    border-color: $red;
    color: #fff;
  }

  &--primary {
    background: $bg-white;
    border-color: $border-default;
    color: $text-primary;

    &:hover { background: #F5F5F6; }
  }

  &--success {
    background: $purple;
    border-color: $purple;
    color: #fff;
    font-weight: 700;

    &:hover { background: $purple-dark; }
  }
}

// ---- Quantities -----------------------------------------------------------------
.pd-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: $text-muted;
  margin-bottom: 12px;
}

.pd-quantities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
  width: 100%;
}

// ---- Remarks ---------------------------------------------------------------------
.pd-remarks {
  width: 100%;
  min-height: 84px;
  background: $bg-input;
  border: 1px solid $border-default;
  border-radius: $radius-md;
  padding: 12px 14px;
  color: $text-primary;
  font-size: 13px;
  font-family: $font-ui;
  resize: vertical;
  margin-bottom: 20px;

  &::placeholder { color: $text-placeholder; }

  &:focus {
    outline: none;
    border-color: $purple;
    box-shadow: 0 0 0 3px $purple-tint;
  }
}

// ---- Footer actions -----------------------------------------------------------------
.pd-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;

  .pd-btn--save    { flex: 1; min-width: 120px; }
  .pd-btn--complete { flex: 2; text-align: center; min-width: 160px; }
  .pd-btn--issue   { flex: 1; min-width: 120px; }
}

.pd-required-flag {
  color: $red;
  font-size: 12px;
  font-weight: 600;
}

// ---- Empty / loading states -----------------------------------------------------------
.pd-empty-state {
  font-size: 12.5px;
  color: $text-muted;
  padding: 12px 6px;
  text-align: center;

  &--main {
    padding: 60px 20px;
    background: $bg-white;
    border: 1px dashed $border-default;
    border-radius: $radius-lg;
  }
}

// ---- Responsive ------------------------------------------------------------------------
@media (max-width: 900px) {
  .pd-quantities { grid-template-columns: repeat(2, 1fr); }
  .pd-timer { font-size: 30px; }
}

@media (max-width: 560px) {
  .pd-main { padding: 14px; }
  .pd-workorder { padding: 16px; }
  .pd-quantities { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pd-timer-row { flex-direction: column; align-items: flex-start; }
  .pd-actions { flex-direction: column; }
  .pd-actions .pd-btn--save,
  .pd-actions .pd-btn--complete,
  .pd-actions .pd-btn--issue { flex: 1 1 100%; }
}

// ==========================================================================
// Popups — Mark Stage Complete / Confirm & Next, Stoppage Reason
// These use position: fixed intentionally — they're meant to center over
// the whole browser viewport as true modal dialogs, and only ever show
// while the console (not the queue) is on screen, so they don't conflict
// with the sidebar-visibility issue the queue had.
// ==========================================================================

$modal-bg:             #141B2E;
$modal-bg-elevated:    #1B2338;
$modal-border:         #2A3350;
$modal-text-primary:   #EAEDF5;
$modal-text-secondary: #9AA3BD;
$modal-text-muted:     #6E7794;

$modal-green:          #34C77B;
$modal-green-soft:     rgba(52, 199, 123, 0.12);

$modal-red:            #FF5C5C;

$modal-amber:          #F2B84B;
$modal-amber-soft:     rgba(242, 184, 75, 0.12);

$modal-blue:           #4C7CF2;
$modal-blue-soft:      rgba(76, 124, 242, 0.14);

@keyframes pd-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pd-modal-scale-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 18, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: pd-modal-fade-in 0.18s ease;

  &--nested {
    z-index: 1100;
    background: rgba(6, 9, 18, 0.72);
  }
}

.pd-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: $modal-bg;
  border: 1px solid $modal-border;
  border-radius: 14px;
  padding: 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: pd-modal-scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;

  &--stoppage {
    width: 460px;
  }

  &__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: $modal-text-muted;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;

    &:hover { color: $modal-text-primary; }
  }

  &__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 13px;
    flex-shrink: 0;

    &--success { background: $modal-green-soft; color: $modal-green; }
    &--warning { background: $modal-amber-soft; color: $modal-amber; }
  }

  &__title {
    font-size: 16px;
    font-weight: 700;
    color: $modal-text-primary;
    margin: 0;
  }

  &__subtitle {
    font-size: 12.5px;
    color: $modal-text-secondary;
    margin: 0 0 18px;
  }

  &__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: $modal-text-muted;
    margin: 18px 0 10px;
  }

  &__rows {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    border-top: 1px solid $modal-border;
  }

  &__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid $modal-border;
    gap: 12px;

    .row-label { font-size: 12.5px; color: $modal-text-secondary; flex-shrink: 0; }

    .row-value {
      font-size: 13px;
      font-weight: 600;
      color: $modal-text-primary;
      text-align: right;

      &--mono     { font-family: $font-mono; }
      &--good     { color: $modal-green; }
      &--rejected { color: $modal-red; }
      &--rework   { color: $modal-amber; }
      &--link     { color: $modal-blue; }
    }

    &--link {
      cursor: pointer;
      &:hover .row-value--link { text-decoration: underline; }
    }
  }

  &__textarea {
    width: 100%;
    min-height: 76px;
    background: $modal-bg-elevated;
    border: 1px solid $modal-border;
    border-radius: 8px;
    padding: 10px 12px;
    color: $modal-text-primary;
    font-size: 13px;
    font-family: $font-ui;
    resize: vertical;
    margin-bottom: 6px;

    &::placeholder { color: $modal-text-muted; }

    &:focus {
      outline: none;
      border-color: $modal-blue;
      box-shadow: 0 0 0 3px $modal-blue-soft;
    }
  }

  &__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  .pd-btn {
    flex: 1;

    &--ghost {
      background: $modal-bg-elevated;
      border-color: $modal-border;
      color: $modal-text-primary;
    }

    &--success {
      background: $modal-green;
      border-color: $modal-green;
      color: #0B1120;

      &:hover { filter: brightness(1.05); }
    }
  }
}

.pd-reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.pd-reason-chip {
  background: $modal-bg-elevated;
  border: 1px solid $modal-border;
  color: $modal-text-secondary;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

  &:hover {
    border-color: $modal-blue;
    color: $modal-text-primary;
  }

  &.is-selected {
    background: $modal-blue-soft;
    border-color: $modal-blue;
    color: $modal-blue;
  }
}

.pd-btn--info {
  background: $modal-blue;
  border-color: $modal-blue;
  color: #fff;

  &:hover { filter: brightness(1.05); }
}

@media (max-width: 480px) {
  .pd-modal {
    width: calc(100vw - 24px);
    padding: 18px;
  }

  .pd-modal__actions {
    flex-direction: column;
  }
}

// ==========================================================================
// Full-screen Work Order Queue — LIGHT theme, full-width horizontal rows.
// Renders in NORMAL DOCUMENT FLOW (no position: fixed/absolute) so it sits
// inside the same content area the console screen correctly occupies —
// the sidebar and topbar outside this component are never covered.
// ==========================================================================
.pd-queue-fullscreen {
  width: 100%;
  min-height: 600px;
  background: $bg-page;
  display: flex;
  flex-direction: column;
  animation: pd-modal-fade-in 0.18s ease;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: $bg-white;
    border-bottom: 1px solid $border-default;
    flex-shrink: 0;
  }

  &__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: $text-muted;
  }

  &__close {
    background: none;
    border: none;
    color: $text-muted;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;

    &:hover { color: $text-primary; }
  }

  &__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    width: 100%;
  }

  &__list {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  &__completed {
    margin-top: 8px;
    padding: 18px 28px 0;
    border-top: 1px solid $border-default;
  }
}

.pd-queue__completed-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: $text-muted;
  margin-bottom: 10px;
}

// ---- Horizontal, full-width, stacked rows -------------------------------------
.pd-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 28px;
  background: $bg-white;
  border-bottom: 1px solid $border-default;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-wrap: wrap;
  row-gap: 8px;

  &:hover { background: $purple-tint; }

  &.is-active {
    background: $purple-soft;
    box-shadow: inset 4px 0 0 $purple;
  }

  &__main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex-wrap: wrap;
  }

  &__code {
    font-size: 15px;
    font-weight: 700;
    color: $text-primary;
    flex-shrink: 0;
  }

  &__desc {
    font-size: 14px;
    font-weight: 600;
    color: $text-primary;
  }

  &__meta {
    font-size: 12.5px;
    color: $text-secondary;
  }

  &__side {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  &__status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 12px;
    border-radius: 999px;

    &.status-active  { background: $green-soft; color: $green; border: 1px solid $green-border; }
    &.status-pending { background: $amber-soft; color: $amber; border: 1px solid $amber-border; }
  }

  &__arrow {
    font-size: 20px;
    color: $text-muted;
  }

  &--done {
    cursor: default;
    opacity: 0.65;
    padding: 14px 28px;

    &:hover { background: $bg-white; }

    .pd-queue-row__code { font-size: 13px; }
    .pd-queue-row__desc { font-size: 13px; font-weight: 500; }
  }

  &__check {
    color: $green;
    font-size: 14px;
    flex-shrink: 0;
  }
}