/* ==========================================================================
   PRINT, SALES & SETTINGS STYLES
   ========================================================================== */

/* Payment badges in Sales table */
.payment-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.payment-badge.badge-cash {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-success);
}

.payment-badge.badge-card {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.payment-badge.badge-qr {
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent-purple);
}

.payment-badge.badge-other {
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
}

.breakdown-tag {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-right: 4px;
}

.breakdown-tag.cash { background: rgba(16, 185, 129, 0.15); color: var(--accent-success); }
.breakdown-tag.card { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.breakdown-tag.qr { background: rgba(139, 92, 246, 0.15); color: var(--accent-purple); }

/* Settings View Layout */
.settings-container {
  padding: 1.5rem;
  height: 100%;
  overflow-y: auto;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.settings-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.settings-card p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}

.conn-status-msg {
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

.conn-status-msg.checking { color: var(--primary); }
.conn-status-msg.success { color: var(--accent-success); }
.conn-status-msg.error { color: var(--accent-danger); }

/* Barcode Scanner Simulator Modal */
.sim-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.sim-quick-code {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: var(--transition);
}

.sim-quick-code:hover {
  background: var(--primary);
  color: white;
}

/* @media print formatting */
@media print {
  body * {
    visibility: hidden;
  }
  #thermal-print-area, #thermal-print-area * {
    visibility: visible;
  }
  #thermal-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}