/* ===== KANBAN BOARD ===== */
.kanban-board {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  height: calc(100vh - 140px);
  padding-bottom: var(--sp-4);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.kanban-column {
  flex-shrink: 0;
  width: 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition: var(--t-fast);
}
.kanban-column:hover { border-color: rgba(255,229,0,0.15); }

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-color);
  min-height: 48px;
  flex-shrink: 0;
}
.kanban-column-header .column-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-column-header .column-count {
  display: flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px;
  background: var(--brand-yellow-soft);
  color: var(--brand-yellow);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0 6px;
}

.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  contain: layout style;
  will-change: scroll-position;
}

/* Column colors via stage */
.kanban-column[data-stage="pcp"] .kanban-column-header { border-bottom-color: var(--color-info); }
.kanban-column[data-stage="separacao"] .kanban-column-header { border-bottom-color: var(--color-cyan); }
.kanban-column[data-stage="impressao"] .kanban-column-header { border-bottom-color: var(--color-purple); }
.kanban-column[data-stage="laminacao"] .kanban-column-header { border-bottom-color: var(--color-orange); }
.kanban-column[data-stage="corte"] .kanban-column-header { border-bottom-color: var(--color-danger); }
.kanban-column[data-stage="destaque"] .kanban-column-header { border-bottom-color: var(--color-warning); }
.kanban-column[data-stage="copos"] .kanban-column-header { border-bottom-color: #EC4899; }
.kanban-column[data-stage="seladas"] .kanban-column-header { border-bottom-color: #14B8A6; }
.kanban-column[data-stage="embalagem"] .kanban-column-header { border-bottom-color: var(--color-success); }
.kanban-column[data-stage="expedicao"] .kanban-column-header { border-bottom-color: var(--brand-yellow); }
.kanban-column[data-stage="finalizado"] .kanban-column-header { border-bottom-color: var(--color-muted); }

/* Column accent bars */
.kanban-column[data-stage="pcp"] { border-top: 3px solid var(--color-info); }
.kanban-column[data-stage="separacao"] { border-top: 3px solid var(--color-cyan); }
.kanban-column[data-stage="impressao"] { border-top: 3px solid var(--color-purple); }
.kanban-column[data-stage="laminacao"] { border-top: 3px solid var(--color-orange); }
.kanban-column[data-stage="corte"] { border-top: 3px solid var(--color-danger); }
.kanban-column[data-stage="destaque"] { border-top: 3px solid var(--color-warning); }
.kanban-column[data-stage="copos"] { border-top: 3px solid #EC4899; }
.kanban-column[data-stage="seladas"] { border-top: 3px solid #14B8A6; }
.kanban-column[data-stage="embalagem"] { border-top: 3px solid var(--color-success); }
.kanban-column[data-stage="expedicao"] { border-top: 3px solid var(--brand-yellow); }
.kanban-column[data-stage="finalizado"] { border-top: 3px solid var(--color-muted); }

@media (max-width: 1024px) {
  .kanban-column { width: 260px; }
}

/* ===== OPERATOR TABLET OPTIMIZATIONS ===== */
/* Applied when body has .operator-tablet class (operator on touch device) */

/* Hide sidebar completely for operators */
.operator-tablet .sidebar {
  display: none !important;
}

/* Operator mode: simplified header with stage indicator */
.operator-topbar-actions {
  display: none;
  align-items: center; gap: var(--sp-3);
}
.operator-topbar-actions .operator-user-name {
  font-size: var(--fs-sm); color: var(--text-secondary);
  font-weight: 500;
}
.operator-tablet .operator-topbar-actions {
  display: flex;
}
.operator-tablet .topbar {
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255,229,0,0.03));
  border-bottom: 2px solid rgba(255,229,0,0.15);
}
.operator-stage-badge {
  display: none;
  align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--brand-yellow-soft);
  border: 1px solid rgba(255,229,0,0.3);
  border-radius: var(--r-full);
  font-size: 0.78rem; font-weight: 700;
  color: var(--brand-yellow);
  animation: badgePulse 3s ease-in-out infinite;
}
.operator-stage-badge .material-icons-round { font-size: 16px; }
.operator-tablet .operator-stage-badge { display: inline-flex; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,229,0,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(255,229,0,0); }
}

/* Operator's own stage column highlight */
.operator-tablet .kanban-column.my-stage {
  border-color: rgba(255,229,0,0.3);
  background: linear-gradient(180deg, rgba(255,229,0,0.04) 0%, var(--bg-secondary) 30%);
  box-shadow: 0 0 20px rgba(255,229,0,0.08);
  flex-grow: 1;
  min-width: 340px;
}
.operator-tablet .kanban-column.my-stage .kanban-column-header {
  background: rgba(255,229,0,0.06);
}
.operator-tablet .kanban-column.my-stage .column-title::before {
  content: '★ ';
  color: var(--brand-yellow);
}
/* Neighbor columns are slightly narrower */
.operator-tablet .kanban-column:not(.my-stage) {
  opacity: 0.85;
  width: 280px;
  min-width: 260px;
}

/* Kanban: bigger columns, bigger cards */
.operator-tablet .kanban-board {
  gap: var(--sp-4);
  height: calc(100vh - 130px);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}
.operator-tablet .kanban-column {
  width: 340px;
  min-width: 300px;
  border-radius: var(--r-xl);
  border-width: 2px;
}
.operator-tablet .kanban-column-header {
  padding: var(--sp-4) var(--sp-5);
  min-height: 56px;
}
.operator-tablet .kanban-column-header .column-title {
  font-size: 1rem;
  font-weight: 800;
}
.operator-tablet .kanban-column-header .column-count {
  min-width: 32px; height: 32px;
  font-size: 0.85rem;
  padding: 0 10px;
}
.operator-tablet .kanban-column-body {
  padding: var(--sp-3);
  gap: var(--sp-3);
}

/* Bigger cards with more padding */
.operator-tablet .kanban-card,
.operator-tablet .kanban-card-op {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border-width: 2px;
}
.operator-tablet .kanban-card:hover,
.operator-tablet .kanban-card-op:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255,229,0,0.15);
}
.operator-tablet .kanban-card:active,
.operator-tablet .kanban-card-op:active {
  transform: scale(0.97);
}

/* Larger card text */
.operator-tablet .card-top-bar {
  padding: 8px var(--sp-4) 8px calc(var(--sp-4) + 5px);
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3);
}
.operator-tablet .card-os-number {
  font-size: 0.82rem;
}
.operator-tablet .card-deadline-top {
  font-size: 0.78rem;
}
.operator-tablet .card-deadline-top .material-icons-round { font-size: 14px; }
.operator-tablet .card-client {
  font-size: 0.95rem;
  font-weight: 700;
}
.operator-tablet .card-product {
  font-size: 0.82rem;
  margin-bottom: var(--sp-3);
}
.operator-tablet .card-meta-item {
  font-size: 0.75rem;
  padding: 2px 6px;
  background: var(--bg-surface);
  border-radius: var(--r-sm);
}
.operator-tablet .card-meta-item .material-icons-round { font-size: 14px; }
.operator-tablet .card-status {
  font-size: 0.72rem;
  padding: 3px 10px;
}

/* OP cards */
.operator-tablet .op-card-stats { font-size: 0.85rem; }
.operator-tablet .op-stat .material-icons-round { font-size: 16px; }
.operator-tablet .op-os-chip { font-size: 0.72rem; padding: 3px 8px; }

/* Alert badges */
.operator-tablet .card-alerts { gap: var(--sp-2); margin-top: var(--sp-3); }
.operator-tablet .card-alert {
  font-size: 0.72rem;
  padding: 3px 8px;
}
.operator-tablet .card-alert .material-icons-round { font-size: 12px; }

/* Obs preview */
.operator-tablet .card-obs-preview {
  font-size: 0.75rem;
  padding: 5px 8px;
  margin-top: 6px;
}

/* ===== OPERATOR MODAL — bigger action buttons ===== */
.operator-tablet .modal-container {
  max-width: 95vw;
  border-radius: var(--r-xl);
}
.operator-tablet .modal-header {
  padding: var(--sp-5) var(--sp-6);
}
.operator-tablet .modal-header h3 {
  font-size: 1.15rem;
}
.operator-tablet .modal-body {
  padding: var(--sp-5);
}
.operator-tablet .action-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--sp-3);
}
.operator-tablet .action-btn {
  padding: var(--sp-4) var(--sp-5);
  min-height: 60px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--r-lg);
  border-width: 2px;
}
.operator-tablet .action-btn .material-icons-round { font-size: 24px; }
.operator-tablet .action-btn.btn-start {
  background: rgba(34,197,94,0.08);
  border-color: var(--color-success);
}
.operator-tablet .action-btn.btn-finish {
  background: rgba(59,130,246,0.08);
  border-color: var(--color-info);
}
.operator-tablet .action-btn.btn-pause {
  background: rgba(245,158,11,0.08);
  border-color: var(--color-warning);
}

/* Flow timeline bigger */
.operator-tablet .flow-step-dot {
  width: 32px; height: 32px;
  font-size: 13px;
}
.operator-tablet .flow-step-name {
  font-size: 0.65rem;
  max-width: 70px;
}
.operator-tablet .flow-connector {
  width: 20px; height: 3px;
  margin-top: -18px;
}

/* Detail section */
.operator-tablet .detail-section { padding: var(--sp-5); }
.operator-tablet .detail-section-title { font-size: 0.95rem; }
.operator-tablet .field-label { font-size: 0.72rem; }
.operator-tablet .field-value { font-size: 0.88rem; }

/* Forms */
.operator-tablet select,
.operator-tablet input[type="text"],
.operator-tablet input[type="number"],
.operator-tablet input[type="date"],
.operator-tablet textarea {
  font-size: 1rem !important;
  min-height: 48px;
  padding: 10px 14px;
}
.operator-tablet .form-group label {
  font-size: 0.85rem;
}

/* Larger scrollbar on tablet */
.operator-tablet ::-webkit-scrollbar { width: 10px; height: 10px; }
.operator-tablet ::-webkit-scrollbar-thumb { border-radius: 5px; }

/* Search box */
.operator-tablet .search-box {
  padding: var(--sp-3) var(--sp-5);
}
.operator-tablet .search-box input {
  font-size: 1rem;
  width: 200px;
}

/* Toast positioning for tablet */
.operator-tablet .toast-container {
  top: var(--sp-3); right: var(--sp-3); left: var(--sp-3);
}
.operator-tablet .toast {
  font-size: 0.9rem;
  padding: var(--sp-4) var(--sp-5);
  min-width: auto;
  width: 100%;
}