/**
 * VIRIX PLATFORM UI CONTRACT — COMPACT ENTERPRISE
 * Single source of truth for shared layout density.
 * Centered work canvas + controlled max-width (not edge-stretched).
 */

/* Reserve scrollbar space always — otherwise centered `main` (margin:auto)
   jumps left/right when content height crosses the overflow threshold
   (classic Sales Laturoaie ↔ Cherestea / filters expand flicker). */
html {
  scrollbar-gutter: stable;
}

:root {
  /* Bridge app legacy tokens ↔ Design System */
  --ink: var(--vds-color-text, #10271e);
  --ink-soft: var(--vds-color-text-muted, #52685e);
  --forest: var(--vds-color-primary-800, #073c2b);
  --forest-deep: var(--vds-color-primary-900, #04291e);
  --green: var(--vds-color-primary-500, #16844b);
  --paper: var(--vds-color-neutral-50, #f5f8f4);
  --white: var(--vds-color-neutral-0, #ffffff);
  --line: var(--vds-color-border, #dce8df);
  --orange: var(--vds-color-warning-500, #c66b28);
  --red: var(--vds-color-danger-500, #af4543);

  /* Compact enterprise canvas */
  --platform-work-max: 1180px;
  --platform-canvas-pad: clamp(16px, 2vw, 24px);
  --platform-header-pad-y: 18px;
  --platform-header-pad-x: 22px;
  --platform-header-radius: 18px;
  --platform-header-gap: 14px;
  --platform-header-mb: 14px;
  --platform-header-title: clamp(22px, 2.4vw, 30px);
  --platform-header-accent: rgba(183, 232, 105, 0.32);
  --platform-rail-width: 220px;
  --platform-rail-collapsed: 72px;
  --platform-section-gap: 12px;

  /* Atmosphere — centered composition for every module photo */
  --platform-atmosphere-size: cover;
  --platform-atmosphere-position: center center;
  --platform-atmosphere-repeat: no-repeat;
  --platform-atmosphere-attachment: scroll;
  --platform-atmosphere-origin: padding-box;
}

/* ── 1. COMPACT CENTERED WORK CANVAS ── */
body.platform-module-mode > main#panou,
body.platform-module-mode > main,
body[data-virix-root="platform"] > main#panou,
body[data-virix-root="platform"] > main,
body.warehouse-area:not(.operator-locked):not(.module-home) > main,
body.warehouse-operator-mode:not(.operator-locked):not(.module-home) > main,
body.maintenance-only-mode:not(.operator-locked):not(.module-home) > main {
  width: min(var(--platform-work-max), calc(100% - (var(--platform-canvas-pad) * 2))) !important;
  max-width: var(--platform-work-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 28px;
  box-sizing: border-box;
}

body.platform-module-mode .platform-module-shell,
body[data-virix-root="platform"] .platform-module-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
}

body.platform-module-mode #platform-module-content,
body[data-virix-root="platform"] #platform-module-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  display: grid;
  gap: var(--platform-section-gap);
}

/* Personal: same canvas width; rail lives inside the compact shell */
body.personal-module-mode > main#panou,
body.personal-module-mode > main {
  width: min(var(--platform-work-max), calc(100% - (var(--platform-canvas-pad) * 2))) !important;
  max-width: var(--platform-work-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.personal-module-mode .personal-shell {
  width: 100%;
  max-width: none;
  border-radius: var(--platform-header-radius);
  overflow: hidden;
  min-height: min(720px, calc(100vh - var(--app-topbar-offset, 72px) - 24px));
}

/* Topbar aligns to the same work column */
body.platform-module-mode .topbar,
body.warehouse-area:not(.operator-locked):not(.module-home) .topbar,
body.warehouse-operator-mode:not(.operator-locked):not(.module-home) .topbar,
body.maintenance-only-mode:not(.operator-locked):not(.module-home) .topbar {
  padding-inline: max(
    var(--platform-canvas-pad),
    calc((100% - var(--platform-work-max)) / 2)
  ) !important;
}

/* ── 2. ATMOSPHERE — center/center crop (no lateral drift) ── */
body.warehouse-area:not(.operator-locked),
body.warehouse-operator-mode:not(.module-home):not(.operator-locked),
body.maintenance-only-mode:not(.module-home):not(.operator-locked),
body.sales-module-mode,
body.sales-module-mode:not(.operator-locked),
body.primary-cutting-mode,
body.primary-cutting-mode:not(.operator-locked),
body.incidents-module-mode,
body.incidents-module-mode:not(.operator-locked),
body.coordination-module-mode,
body.coordination-module-mode:not(.operator-locked),
body.dashboard-module-mode,
body.dashboard-module-mode:not(.operator-locked),
body.stocks-module-mode,
body.stocks-module-mode:not(.operator-locked),
body.internal-logistics-mode,
body.internal-logistics-mode:not(.operator-locked),
body:not(.operator-locked):not(.module-home):not(.platform-module-mode) {
  background-repeat: var(--platform-atmosphere-repeat) !important;
  background-size: var(--platform-atmosphere-size) !important;
  background-position: var(--platform-atmosphere-position) !important;
  background-attachment: var(--platform-atmosphere-attachment) !important;
  background-origin: var(--platform-atmosphere-origin) !important;
}

#virix-warehouse-backdrop,
#virix-blades-backdrop,
#virix-sales-backdrop,
#virix-incidents-backdrop,
#virix-coordination-backdrop,
#virix-dashboard-backdrop,
#virix-primary-cutting-backdrop,
#virix-finished-products-backdrop,
#virix-internal-logistics-backdrop {
  background-repeat: var(--platform-atmosphere-repeat) !important;
  background-size: var(--platform-atmosphere-size) !important;
  background-position: var(--platform-atmosphere-position) !important;
  background-origin: var(--platform-atmosphere-origin) !important;
}
#virix-warehouse-backdrop,
#virix-blades-backdrop {
  background-attachment: var(--platform-atmosphere-attachment) !important;
}

#virix-blades-backdrop::before {
  inset: 0 !important;
  background-position: var(--platform-atmosphere-position) !important;
  background-size: var(--platform-atmosphere-size) !important;
  background-repeat: var(--platform-atmosphere-repeat) !important;
}

/* Kill module CSS that re-forces center top / wrong crop after contract */
body.incidents-module-mode,
body.sales-module-mode,
body.primary-cutting-mode,
body.internal-logistics-mode,
#virix-sales-backdrop {
  background-position: var(--platform-atmosphere-position) !important;
  background-size: var(--platform-atmosphere-size) !important;
}

/* ── 2b. MAGAZIE INTERNAL NAV (pill rail in module canvas — never full-bleed bar) ── */
body.warehouse-operator-mode:not(.module-home):not(.operator-locked) main#panou > #warehouse-module-nav:not([hidden]) {
  box-sizing: border-box;
  /* Width/visual owned by warehouse.css (max-content pill). Contract only anchors spacing. */
  margin-bottom: var(--platform-header-mb) !important;
}

/* ── 3. COMPACT MODULE HEADER ── */
.platform-module-header,
.admin-module-header,
.sales-topbar,
.sales-hero-strip,
.page-intro,
.warehouse-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: var(--platform-header-gap) !important;
  margin: 0 0 var(--platform-header-mb) !important;
  padding: var(--platform-header-pad-y) var(--platform-header-pad-x) !important;
  overflow: hidden;
  color: #fff !important;
  border-radius: var(--platform-header-radius) !important;
  border: 0 !important;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 88% 0%, var(--platform-header-accent), transparent 12rem),
    linear-gradient(135deg, #043b2a, #0e7547) !important;
  box-shadow: 0 12px 28px rgba(4, 59, 42, 0.14);
}

.platform-module-header h1,
.admin-module-header h1,
.sales-topbar h1,
.sales-hero-strip h2,
.page-intro h1,
.warehouse-hero h1 {
  margin: 0 !important;
  max-width: none !important;
  color: #fff !important;
  font-size: var(--platform-header-title) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  font-weight: 750;
}

.platform-module-header p:not(.eyebrow),
.admin-module-header p:not(.eyebrow),
.sales-topbar p:not(.eyebrow),
.sales-hero-strip p,
.page-intro .muted,
.page-intro p:not(.eyebrow),
.warehouse-hero .muted,
.warehouse-hero p:not(.eyebrow) {
  max-width: 62ch;
  margin: 6px 0 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
  line-height: 1.4;
}

.platform-module-header .eyebrow,
.admin-module-header .eyebrow,
.sales-topbar .eyebrow,
.sales-hero-strip .eyebrow,
.page-intro .eyebrow,
.warehouse-hero .eyebrow {
  margin: 0 0 4px !important;
  color: #c5ed88 !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.incidents-module-mode { --platform-header-accent: rgba(242, 178, 108, 0.26); }
body.coordination-module-mode { --platform-header-accent: rgba(183, 232, 105, 0.22); }
body.primary-cutting-mode { --platform-header-accent: rgba(212, 184, 130, 0.2); }
body.sales-module-mode { --platform-header-accent: rgba(143, 210, 74, 0.2); }
body.blades-module-mode { --platform-header-accent: rgba(105, 218, 138, 0.26); }
body.personal-module-mode { --platform-header-accent: rgba(183, 232, 105, 0.26); }
body.finished-products-mode { --platform-header-accent: rgba(232, 196, 120, 0.24); }
body.stocks-module-mode { --platform-header-accent: rgba(232, 196, 120, 0.2); }
body.internal-logistics-mode { --platform-header-accent: rgba(196, 154, 86, 0.24); }

@media (max-width: 720px) {
  :root {
    --platform-work-max: 100%;
    --platform-header-pad-y: 16px;
    --platform-header-pad-x: 16px;
    --platform-header-radius: 16px;
    --platform-header-title: clamp(20px, 6vw, 26px);
  }
}

/* ── 4. MODULE RAIL ── */
.platform-module-rail,
.personal-rail,
.admin-rail {
  --platform-rail: var(--platform-rail-width);
  box-sizing: border-box;
  min-width: 0;
}

.personal-shell {
  --personal-rail: var(--platform-rail-width);
  --personal-rail-collapsed: var(--platform-rail-collapsed);
}

.personal-shell.is-rail-collapsed {
  --personal-rail: var(--platform-rail-collapsed);
}

/* No redundant VIRIX tree/logo in module sidebars — global topbar owns brand */
.personal-brand img,
.personal-rail .personal-brand > img {
  display: none !important;
}

.personal-brand {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px;
  padding: 4px 2px 10px;
}

.personal-brand-label {
  margin: 0;
}

/* ── 5. DENSITY — shared controls + panels ── */
.primary-button,
.secondary-button,
.ghost-button {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel,
.platform-module-entry {
  border-radius: 14px;
  border-color: var(--vds-color-border, var(--line));
}

.platform-module-mode table {
  width: 100%;
}

.platform-module-form,
.platform-user-management > .panel {
  max-width: min(920px, 100%);
}

/* Compact personal chrome densify */
body.personal-module-mode .personal-chrome {
  padding: 12px 16px !important;
  min-height: 0;
}

body.personal-module-mode .personal-main {
  padding: 14px 16px 22px !important;
}

body.personal-module-mode .personal-chrome-copy h1 {
  font-size: clamp(18px, 1.8vw, 24px) !important;
}