/* ============================================================
   ECOCUT CRM — INVENTORY module styles
   A faithful reproduction of the standalone Inventory Intelligence
   app's look (light theme, Roboto, blue primary, white cards),
   scoped to #page-inventory so it never affects the rest of the
   dark-themed CRM. Palette lifted from the app's index.css.
   ============================================================ */
/* Remap the CRM's dark theme tokens to light values inside the inventory island so
   any element still using CRM vars stays readable while screens are refaced. */
#page-inventory,
#invProductModal .modal, #invStockModal .modal, #invCatModal .modal, #invImportModal .modal, #invBulkModal .modal {
  --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #78716c;
  --border-subtle: #e7e5e4; --bg-card: #ffffff; --bg-elevated: #f5f5f4;
  --accent-secondary: #1e90ff; --accent-danger: #ef4444; --accent-gold: #ca8a04;
  --grad-card: none;
}
#page-inventory {
  --iv-bg: #fafafa;
  --iv-card: #ffffff;
  --iv-fg: #1c1917;
  --iv-muted: #78716c;
  --iv-muted2: #a8a29e;
  --iv-border: #e7e5e4;
  --iv-primary: #1e90ff;
  --iv-primary-h: #1478d8;
  --iv-green: #16a34a; --iv-green-bg: #dcfce7;
  --iv-red: #ef4444; --iv-red-bg: #fee2e2;
  --iv-yellow: #ca8a04; --iv-yellow-bg: #fef9c3;
  --iv-purple: #7c3aed; --iv-purple-bg: #f3e8ff;
  --iv-blue-bg: #eff6ff;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--iv-fg);
  background: var(--iv-bg);
  margin: -20px;              /* bleed to the page edges like the app */
  padding: 20px;
  min-height: 80vh;
}
#page-inventory * { box-sizing: border-box; }
/* The app supplies its own per-tab header, so hide the CRM's dark section header. */
#page-inventory > .section-header { display: none; }

/* Page header (e.g. "Product Management") */
.iv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.iv-head h1 { font-size: 26px; font-weight: 700; margin: 0; color: #0c0a09; }
.iv-head p { font-size: 13.5px; color: var(--iv-muted); margin: 2px 0 0; }
.iv-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Cards */
.iv-card { background: var(--iv-card); border: 1px solid var(--iv-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 20px; margin-bottom: 18px; }
.iv-card-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.iv-card-sub { font-size: 12.5px; color: var(--iv-muted); margin: 0 0 14px; }
.iv-count { font-size: 12px; font-weight: 600; color: var(--iv-muted); background: #f5f5f4; padding: 2px 10px; border-radius: 999px; }

/* Buttons */
.iv-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; background: #fff; color: var(--iv-fg); transition: background .12s, border-color .12s; white-space: nowrap; }
.iv-btn:hover { background: #f5f5f4; }
.iv-btn-primary { background: var(--iv-primary); color: #fff; }
.iv-btn-primary:hover { background: var(--iv-primary-h); }
.iv-btn-outline { border-color: var(--iv-border); background: #fff; }
.iv-btn-outline:hover { background: #f5f5f4; }
.iv-btn-purple { border-color: #e9d5ff; color: var(--iv-purple); background: #fff; }
.iv-btn-purple:hover { background: var(--iv-purple-bg); }
.iv-btn-sm { padding: 6px 10px; font-size: 12.5px; }
.iv-btn-icon { padding: 6px; width: 32px; height: 32px; justify-content: center; border-color: var(--iv-border); }
.iv-btn:disabled { opacity: .6; cursor: default; }

/* Inputs */
.iv-input, .iv-select, #page-inventory textarea.iv-input { width: 100%; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--iv-border); border-radius: 8px; background: #fff; color: var(--iv-fg); font-family: inherit; }
.iv-input:focus, .iv-select:focus { outline: none; border-color: var(--iv-primary); box-shadow: 0 0 0 3px rgba(30,144,255,.12); }
.iv-input::placeholder { color: var(--iv-muted2); }
.iv-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #292524; }
.iv-hint { font-size: 11px; color: var(--iv-muted); margin-top: 4px; }
.iv-field { margin-bottom: 14px; }
.iv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iv-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .iv-grid-2, .iv-grid-3 { grid-template-columns: 1fr; } }

/* Tables */
.iv-table-wrap { overflow-x: auto; }
.iv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.iv-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--iv-muted); padding: 10px 12px; border-bottom: 1px solid var(--iv-border); white-space: nowrap; }
.iv-table td { padding: 12px; border-bottom: 1px solid #f5f5f4; vertical-align: middle; }
.iv-table tbody tr:hover, .iv-table tr:hover td { background: #fafafa; }
.iv-table .r { text-align: right; } .iv-table .c { text-align: center; }
.iv-mono { font-family: 'Roboto Mono', ui-monospace, monospace; }

/* Badges / pills */
.iv-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.iv-pill-red { background: var(--iv-red); color: #fff; }
.iv-pill-yellow { background: var(--iv-yellow-bg); color: var(--iv-yellow); }
.iv-pill-green { background: var(--iv-green-bg); color: var(--iv-green); }
.iv-tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; background: #f5f5f4; color: #57534e; border: 1px solid var(--iv-border); }
.iv-thumb { width: 36px; height: 36px; min-width: 36px; border-radius: 8px; background: #f5f5f4; display: inline-flex; align-items: center; justify-content: center; color: var(--iv-muted2); }

/* Tabs (sub-nav) */
#page-inventory .page-tabs { border-bottom: 1px solid var(--iv-border); margin-bottom: 18px; gap: 4px; }
#page-inventory .page-tab { color: var(--iv-muted); font-weight: 500; }
#page-inventory .page-tab:hover { color: var(--iv-fg); }
#page-inventory .page-tab.active { color: var(--iv-primary); border-bottom-color: var(--iv-primary); }

/* Stat cards */
.iv-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 16px; margin-bottom: 18px; }
.iv-stat { background: var(--iv-card); border: 1px solid var(--iv-border); border-radius: 12px; padding: 18px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.iv-stat .l { font-size: 13px; color: var(--iv-muted); } .iv-stat .v { font-size: 26px; font-weight: 700; margin-top: 4px; }
.iv-stat .ic { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* Modal look (reuses CRM .modal-overlay/.modal positioning but light-themed) */
.iv-empty { text-align: center; color: var(--iv-muted); padding: 48px 20px; }
#invProductModal .modal, #invStockModal .modal, #invCatModal .modal, #invImportModal .modal, #invBulkModal .modal {
  background: #fff; color: var(--iv-fg); font-family: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
}
#invProductModal .modal-title, #invStockModal .modal-title, #invCatModal .modal-title, #invImportModal .modal-title, #invBulkModal .modal-title { color: #0c0a09; }
#invProductModal .modal-header, #invStockModal .modal-header, #invCatModal .modal-header, #invImportModal .modal-header, #invBulkModal .modal-header,
#invProductModal .modal-footer, #invStockModal .modal-footer, #invCatModal .modal-footer, #invImportModal .modal-footer, #invBulkModal .modal-footer { border-color: var(--iv-border); }
#invProductModal .modal-close, #invStockModal .modal-close, #invCatModal .modal-close, #invImportModal .modal-close, #invBulkModal .modal-close { color: var(--iv-muted); }
#invBulkModal .btn-secondary { background: #fff !important; color: #1c1917 !important; border: 1px solid var(--iv-border) !important; }
.iv-info { background: #f5f5f4; border: 1px solid var(--iv-border); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #57534e; }

/* Force the CRM's form controls to the light theme inside the inventory modals + page
   (they carry hardcoded dark colors that the CSS-variable remap alone doesn't override). */
#page-inventory input, #page-inventory select, #page-inventory textarea, #page-inventory .form-control,
#invProductModal .form-control, #invStockModal .form-control, #invCatModal .form-control, #invImportModal .form-control,
#invProductModal input, #invProductModal select, #invProductModal textarea,
#invStockModal input, #invStockModal select, #invStockModal textarea,
#invCatModal input, #invCatModal select, #invCatModal textarea,
#invImportModal input, #invImportModal select, #invImportModal textarea {
  background: #ffffff !important;
  color: #1c1917 !important;
  border: 1px solid var(--iv-border) !important;
  color-scheme: light;
}
#page-inventory input::placeholder, #page-inventory textarea::placeholder,
#invProductModal input::placeholder, #invStockModal input::placeholder, #invImportModal input::placeholder,
#invProductModal textarea::placeholder, #invStockModal textarea::placeholder {
  color: #a8a29e !important;
}
#invProductModal .form-label, #invStockModal .form-label, #invCatModal .form-label, #invImportModal .form-label { color: #292524 !important; }
#invProductModal option, #invStockModal option, #invCatModal option, #invImportModal option { background: #fff; color: #1c1917; }
/* Buttons inside the inventory modals */
#invProductModal .btn-secondary, #invStockModal .btn-secondary, #invCatModal .btn-secondary, #invImportModal .btn-secondary {
  background: #fff !important; color: #1c1917 !important; border: 1px solid var(--iv-border) !important;
}
#invProductModal .btn-primary, #invStockModal .btn-primary, #invCatModal .btn-primary, #invImportModal .btn-primary {
  background: var(--iv-primary) !important; color: #fff !important; border: none !important; background-image: none !important;
}