/* ==========================================================================
   weboweb-erp design system — pre-launch visual refresh
   ==========================================================================
   Loaded once via sidebar.php, so it reaches every staff-facing page.

   IMPORTANT: this file is ADDITIVE ONLY. It must never redeclare
   .erp-grid / .status-pill / .toolbar-input (or any other selector a page
   already owns) with real values — sidebar.php is included mid-<body>,
   after each page's own inline <style> block in DOM order, so a same-
   specificity rule here would win and could silently change the grid's
   pixel output. New tokens and new classnames only.

   --primary-rgb is expected to be set per-page (in whatever PHP snippet
   already emits `:root{--primary:...}`) as "r, g, b" so the rgba()-based
   tokens below always match the live system_settings.primary_color value.
   The fallback (22, 8, 86 -> approx #160856, close to the live default
   #100156) only applies on pages not yet migrated to emit --primary-rgb.
   ========================================================================== */

:root {
  --primary-rgb: var(--primary-rgb, 16, 1, 86);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 8%, white);
  --primary-ring: rgba(var(--primary-rgb), 0.15);

  /* Semantic status colors — one canonical recipe per state, replacing the
     two competing "pending" treatments found across modules. */
  --success-bg: #ecfdf5;
  --success-text: #047857;
  --success-border: #a7f3d0;

  --warning-bg: #fff7ed;
  --warning-text: #c2410c;
  --warning-border: #fed7aa;

  --danger-bg: #fef2f2;
  --danger-text: #b91c1c;
  --danger-border: #fecaca;

  --neutral-bg: #f1f5f9;
  --neutral-text: #475569;
  --neutral-border: #cbd5e1;

  /* Deliberate radius scale, replacing the current 4px-24px spread */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Subtle elevation — the app today is nearly flat */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.14);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Primary button — no .btn-primary class exists anywhere today; primary
   actions repeat `style="background-color: var(--primary)"` inline per
   button. This fills that gap without touching any existing markup.
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-primary:active { transform: scale(0.97); }

/* --------------------------------------------------------------------------
   Animation primitives, driven by ERP.showModal/hideModal/toast/
   toggleBulkBar in assets/app.js. Classes only — no page markup required
   beyond what app.js toggles.
   -------------------------------------------------------------------------- */

/* Modal backdrop + panel: fade/scale in on open, reverse on close */
.modal-in { animation: erp-fade-in 180ms var(--ease-out) forwards; }
.modal-in > :first-child,
.modal-in .modal-panel {
  animation: erp-scale-in 200ms var(--ease-out) forwards;
}

.modal-out { animation: erp-fade-out 180ms var(--ease-out) forwards; }
.modal-out > :first-child,
.modal-out .modal-panel {
  animation: erp-scale-out 180ms var(--ease-out) forwards;
}

@keyframes erp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes erp-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes erp-scale-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes erp-scale-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* Toast: slide up + fade */
.toast-in { animation: erp-toast-in 220ms var(--ease-out) forwards; }
.toast-out { animation: erp-toast-out 180ms var(--ease-out) forwards; }

@keyframes erp-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes erp-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

/* Bulk action bar: slide down */
.bulkbar-in { animation: erp-slide-down 200ms var(--ease-out) forwards; }

@keyframes erp-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar submenu open/close (pairs with the existing chevron rotation) */
.submenu-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 220ms var(--ease-out), opacity 180ms var(--ease-out);
}
.submenu-body.submenu-open {
  max-height: 600px;
  opacity: 1;
}

/* Draggable column-resize handle, paired with ERP.initGridResizer() in
   app.js. New classnames only - .erp-grid itself is never redeclared here. */
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  bottom: 0;
  cursor: col-resize;
  background-color: transparent;
  z-index: 15;
}
.col-resizer:hover,
.col-resizer.active {
  background-color: var(--primary);
  opacity: 0.5;
}
body.is-dragging-col * {
  cursor: col-resize !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Sidebar mobile overlay fade */
#sidebar-overlay {
  transition: opacity 200ms var(--ease-out);
  opacity: 0;
}
#sidebar-overlay:not(.hidden) {
  opacity: 1;
}