/* ═══════════════════════════════════════════
   Purchase Order — Clean Minimal Theme
   ═══════════════════════════════════════════
   Mirrors the POS/Cash Sale visual language:
   neutral palette, flat surfaces, subtle borders,
   muted uppercase labels, no gradients.
   Scoped to PO tabs only (create / edit / display).
   ─────────────────────────────────────────── */

:root {
  --po-bg:        #fafafa;
  --po-surface:   #ffffff;
  --po-border:    #e5e7eb;
  --po-border-2:  #d1d5db;
  --po-text:      #111827;
  --po-muted:     #6b7280;
  --po-subtle:    #9ca3af;
  --po-accent:    #111827;
  --po-accent-fg: #ffffff;
  --po-field-alt: #f9fafb;
  --po-ok:        #16a34a;
  --po-warn:      #d97706;
  --po-err:       #dc2626;
  --po-radius:    8px;
  --po-radius-sm: 6px;
}

#purchaseOrderTab.tab-content.active,
#poEditTab.tab-content.active,
#poDisplayTab.tab-content.active {
  background: var(--po-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--po-text);
}

/* ─── Mode tabs (Create / Change / Display) ─── */
#purchaseOrderTab .mode-tabs,
#poEditTab .mode-tabs,
#poDisplayTab .mode-tabs {
  background: var(--po-surface);
  border: 1px solid var(--po-border);
  border-radius: var(--po-radius);
  padding: 4px;
  gap: 4px;
  box-shadow: none;
}

#purchaseOrderTab .mode-tab-btn,
#poEditTab .mode-tab-btn,
#poDisplayTab .mode-tab-btn {
  background: transparent;
  color: var(--po-muted);
  border: 1px solid transparent;
  border-radius: var(--po-radius-sm);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
}

#purchaseOrderTab .mode-tab-btn:hover,
#poEditTab .mode-tab-btn:hover,
#poDisplayTab .mode-tab-btn:hover {
  background: var(--po-field-alt);
  color: var(--po-text);
  box-shadow: none;
  transform: none;
}

#purchaseOrderTab .mode-tab-btn.active,
#poEditTab .mode-tab-btn.active,
#poDisplayTab .mode-tab-btn.active {
  background: var(--po-accent);
  color: var(--po-accent-fg);
  border-color: var(--po-accent);
  box-shadow: none;
  transform: none;
}

/* ─── Sections ─── */
#purchaseOrderTab .form-section,
#poEditTab .form-section,
#poDisplayTab .form-section {
  background: var(--po-surface);
  border: 1px solid var(--po-border);
  border-radius: var(--po-radius);
  box-shadow: none;
  padding: 18px 20px;
  margin-bottom: 12px;
}

#purchaseOrderTab .section-title,
#poEditTab .section-title,
#poDisplayTab .section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--po-text);
  letter-spacing: 0.01em;
  background: none;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--po-border);
  margin-bottom: 14px;
  text-transform: none;
}

#purchaseOrderTab .section-title::before,
#poEditTab .section-title::before,
#poDisplayTab .section-title::before { content: none; }

/* ─── Labels & fields ─── */
#purchaseOrderTab .form-group label,
#poEditTab .form-group label,
#poDisplayTab .form-group label {
  font-size: 10px;
  font-weight: 600;
  color: var(--po-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

#purchaseOrderTab .form-group label.required::after,
#poEditTab .form-group label.required::after,
#poDisplayTab .form-group label.required::after {
  content: " *";
  color: var(--po-err);
}

#purchaseOrderTab input[type="text"],
#purchaseOrderTab input[type="number"],
#purchaseOrderTab input[type="date"],
#purchaseOrderTab input[type="month"],
#purchaseOrderTab select,
#purchaseOrderTab textarea,
#poEditTab input[type="text"],
#poEditTab input[type="number"],
#poEditTab input[type="date"],
#poEditTab input[type="month"],
#poEditTab select,
#poEditTab textarea,
#poDisplayTab input[type="text"],
#poDisplayTab input[type="number"],
#poDisplayTab input[type="date"],
#poDisplayTab input[type="month"],
#poDisplayTab select,
#poDisplayTab textarea {
  padding: 9px 12px;
  border: 1px solid var(--po-border-2);
  border-radius: var(--po-radius-sm);
  font-size: 13px;
  font-weight: 500;
  background: var(--po-surface);
  color: var(--po-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: none;
}

#purchaseOrderTab input:focus,
#purchaseOrderTab select:focus,
#purchaseOrderTab textarea:focus,
#poEditTab input:focus,
#poEditTab select:focus,
#poEditTab textarea:focus,
#poDisplayTab input:focus,
#poDisplayTab select:focus,
#poDisplayTab textarea:focus {
  border-color: var(--po-text);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17,24,39,0.08);
}

/* Keep the readonly visual cue but match palette */
#purchaseOrderTab input[readonly],
#poEditTab input[readonly],
#poDisplayTab input[readonly] {
  background: var(--po-field-alt) !important;
  color: var(--po-muted) !important;
}

/* ─── Buttons ─── */
#purchaseOrderTab .btn,
#poEditTab .btn,
#poDisplayTab .btn {
  box-shadow: none;
  letter-spacing: 0.02em;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  border-radius: var(--po-radius-sm);
}

#purchaseOrderTab .btn:hover,
#poEditTab .btn:hover,
#poDisplayTab .btn:hover {
  transform: none;
  box-shadow: none;
}

#purchaseOrderTab .btn-primary,
#poEditTab .btn-primary,
#poDisplayTab .btn-primary {
  background: var(--po-accent);
  border-color: var(--po-accent);
  color: var(--po-accent-fg);
}
#purchaseOrderTab .btn-primary:hover,
#poEditTab .btn-primary:hover,
#poDisplayTab .btn-primary:hover { opacity: 0.88; }

#purchaseOrderTab .btn-outline,
#poEditTab .btn-outline,
#poDisplayTab .btn-outline {
  background: var(--po-surface);
  color: var(--po-text);
  border: 1px solid var(--po-border-2);
}
#purchaseOrderTab .btn-outline:hover,
#poEditTab .btn-outline:hover,
#poDisplayTab .btn-outline:hover {
  background: var(--po-field-alt);
  border-color: var(--po-text);
}

#purchaseOrderTab .add-item-btn,
#poEditTab .add-item-btn,
#poDisplayTab .add-item-btn {
  background: var(--po-accent);
  color: var(--po-accent-fg);
  border: 1px solid var(--po-accent);
  border-radius: var(--po-radius-sm);
  box-shadow: none;
  font-weight: 500;
  padding: 9px 16px;
}
#purchaseOrderTab .add-item-btn:hover,
#poEditTab .add-item-btn:hover,
#poDisplayTab .add-item-btn:hover { opacity: 0.88; transform: none; }

/* ─── Items table ─── */
#purchaseOrderTab .items-table,
#poEditTab .items-table,
#poDisplayTab .items-table,
#salesOrderTab .items-table,
#soEditTab .items-table,
#soDisplayTab .items-table {
  border: 1px solid var(--po-text);
  background: var(--po-surface);
}

#purchaseOrderTab .items-table thead th,
#poEditTab .items-table thead th,
#poDisplayTab .items-table thead th,
#salesOrderTab .items-table thead th,
#soEditTab .items-table thead th,
#soDisplayTab .items-table thead th {
  background: var(--po-field-alt);
  color: var(--po-text);
  border: 1px solid var(--po-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 10px 6px;
}

#purchaseOrderTab .items-table tbody td,
#poEditTab .items-table tbody td,
#poDisplayTab .items-table tbody td,
#salesOrderTab .items-table tbody td,
#soEditTab .items-table tbody td,
#soDisplayTab .items-table tbody td {
  border: 1px solid var(--po-text);
  background: var(--po-surface);
}

#purchaseOrderTab .items-table tbody tr:hover td,
#poEditTab .items-table tbody tr:hover td,
#poDisplayTab .items-table tbody tr:hover td {
  background: var(--po-field-alt) !important;
}

#purchaseOrderTab .items-table input,
#purchaseOrderTab .items-table select,
#poEditTab .items-table input,
#poEditTab .items-table select,
#poDisplayTab .items-table input,
#poDisplayTab .items-table select {
  border: 1px solid transparent;
  background: transparent;
}
#purchaseOrderTab .items-table input:focus,
#purchaseOrderTab .items-table select:focus,
#poEditTab .items-table input:focus,
#poEditTab .items-table select:focus,
#poDisplayTab .items-table input:focus,
#poDisplayTab .items-table select:focus {
  border-color: var(--po-text);
  background: var(--po-surface);
  box-shadow: 0 0 0 2px rgba(17,24,39,0.08);
}

/* ─── Badges / small chips ─── */
#purchaseOrderTab .badge,
#poEditTab .badge,
#poDisplayTab .badge {
  background: var(--po-accent);
  color: var(--po-accent-fg);
  box-shadow: none;
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ─── Grand total bar (if present in PO) ─── */
#purchaseOrderTab .grand-total-bar,
#poEditTab .grand-total-bar,
#poDisplayTab .grand-total-bar {
  background: var(--po-accent) !important;
  color: var(--po-accent-fg) !important;
  border-radius: var(--po-radius);
  box-shadow: none;
}

/* ─── Auto-size line-item columns based on content (PO + SO) ─── */
#purchaseOrderTab .items-table,
#poEditTab .items-table,
#poDisplayTab .items-table,
#salesOrderTab .items-table,
#soEditTab .items-table,
#soDisplayTab .items-table {
  table-layout: auto;
  width: auto;
  min-width: 100%;
}
#purchaseOrderTab .items-table tbody td,
#poEditTab .items-table tbody td,
#poDisplayTab .items-table tbody td,
#salesOrderTab .items-table tbody td,
#soEditTab .items-table tbody td,
#soDisplayTab .items-table tbody td {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
/* Readonly text inputs shrink-wrap their value, pushing the cell wider when needed */
#purchaseOrderTab .items-table input[readonly],
#poEditTab .items-table input[readonly],
#poDisplayTab .items-table input[readonly],
#salesOrderTab .items-table input[readonly],
#soEditTab .items-table input[readonly],
#soDisplayTab .items-table input[readonly] {
  field-sizing: content;
  width: auto;
  min-width: 100%;
}
/* Editable inputs still fill the cell, but may grow with long values */
#purchaseOrderTab .items-table input:not([readonly]):not([type="date"]):not([type="number"]),
#poEditTab .items-table input:not([readonly]):not([type="date"]):not([type="number"]),
#poDisplayTab .items-table input:not([readonly]):not([type="date"]):not([type="number"]),
#salesOrderTab .items-table input:not([readonly]):not([type="date"]):not([type="number"]),
#soEditTab .items-table input:not([readonly]):not([type="date"]):not([type="number"]),
#soDisplayTab .items-table input:not([readonly]):not([type="date"]):not([type="number"]) {
  field-sizing: content;
  min-width: 100%;
}