/* Inventory & SCM application styles -- follows Intricate Solutions CSS conventions */

/* -- Sidebar -- */
.sidebar-new {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 27rem;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: width 0.3s ease;
  overflow: hidden;
}
.sidebar-new.collapsed {
  width: 5.66rem;
}
.sidebar-new.collapsed .sidebar-label,
.sidebar-new.collapsed .sidebar-section-label {
  display: none;
}
.sidebar-toggle-row {
  display: flex;
  align-items: center;
  height: 4.5rem;
  padding: 0 var(--size-5);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar-toggle-btn {
  color: #fff;
  font-size: 1.5rem;
}
.sidebar-toggle-btn:hover { color: #FFDB9F; }
.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav-item a,
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem var(--size-6);
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.sidebar-nav-item a:hover,
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.12);
  color: #FFDB9F;
}
.sidebar-nav-item.active a,
.sidebar-nav-item.active {
  border-left-color: #FFDB9F;
  background: rgba(255,255,255,0.15);
  color: #FFDB9F;
}
.sidebar-nav-item i { font-size: 1.1rem; min-width: 1.2rem; text-align: center; }
.sidebar-section-label {
  padding: 0.75rem var(--size-6) 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--size-4) 0;
}

/* Wrapper shifts with sidebar. #mainContent is nested INSIDE #mainWrapper, so it must
   not repeat this margin -- .wrapper's fixed-position children (header/breadcrumb, which
   set no explicit `left` and so fall back to CSS "static position", inheriting this
   margin) need it, but a second margin-left on .content just doubles the gap. */
.wrapper.sidebar-collapsed { margin-left: 5.66rem; transition: margin-left 0.3s; }
.wrapper.sidebar-expanded  { margin-left: 27rem;   transition: margin-left 0.3s; }

/* -- Header overrides -- */
/* Pinned to the viewport explicitly, the way div.breadcrumb below already is.
   Without `left`/`right` a fixed element falls back to its STATIC position, which
   here sits inside .wrapper's margin-left -- so the header inherited the sidebar
   offset and then added it again through padding-left, indenting the title by
   twice the sidebar width. `width: 100%` compounded it: 100% of the viewport
   starting 27rem in put the right-hand nav 27rem past the right edge, off screen.
   Setting left/right makes the padding below the only offset, which is what it
   was always meant to be. */
.new-ui-topheader {
  background: #878a91;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding: 0 var(--size-6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  z-index: 9;
  box-sizing: border-box;
}
.new-ui-topheader.sidebar-collapsed { padding-left: calc(5.66rem + var(--size-6)); transition: padding-left 0.3s; }
.new-ui-topheader.sidebar-expanded  { padding-left: calc(27rem + var(--size-6)); transition: padding-left 0.3s; }
.new-logo { height: 2.5rem; }
#new-toprightnav { display: flex; align-items: center; gap: var(--size-5); }
.header-user-name { color: #fff; font-size: 0.9rem; }
.header-dialog-button { border:none; background:none; font-size:2rem; color:#EFEFEF; transition:color 0.3s; cursor:pointer; }
.header-dialog-button:hover { color:#fff; }
.header-icon-background { opacity: 0; color: #ACAEB3; transition: opacity 0.3s; }
.header-dialog-button:hover .header-icon-background { opacity: 1; }
.header-icon { color: #EFEFEF; }

/* Breadcrumb */
div.breadcrumb {
  background: #eee;
  font-style: italic;
  font-size: 1rem;
  color: #7F7F7F;
  height: 2.8rem;
  border-bottom: 0.075rem solid #ccc;
  display: flex;
  align-items: center;
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
  z-index: 8;
  padding-left: 5.66rem;
}
div.breadcrumb a { color: var(--primary); }

.content {
  padding-top: var(--size-6);
  min-height: calc(100vh - 7.3rem);
  padding-right: var(--size-7);
  padding-bottom: var(--size-8);
}

/* Alert overlays */
.alert-overlay {
  position: fixed;
  bottom: var(--size-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: var(--size-5) var(--size-7);
  border-radius: 0.4rem;
  box-shadow: var(--shadow);
  background: #eee;
  max-width: 36rem;
  width: 90%;
}
.alert-overlay.error { background: #fee; color: #f44; }
.alert-overlay.warning { background: #878a91; color: #fff400; }
.alert-overlay-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* -- Status/severity badges (shared shape, per-domain colors below) -- */
.badge-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Asset status colors (SCM-02 section 3) */
.status-on_order          { background: #eef1f4; color: #5b6b7a; }
.status-received           { background: #e8f4f8; color: var(--primary); }
.status-available          { background: #eafaf1; color: #1e8449; }
.status-assigned           { background: #d6eaf8; color: #1a6b9a; }
.status-in_use             { background: #d6eaf8; color: #1a6b9a; }
.status-due_for_service    { background: #fef9e7; color: #b7950b; }
.status-in_maintenance     { background: #fdf2e9; color: var(--secondary); }
.status-out_of_service     { background: #fdecea; color: #b3261e; }
.status-retired_disposed   { background: #f4f4f4; color: var(--accent); }

/* PO status colors */
.status-draft              { background: #f4f4f4; color: var(--accent); }
.status-pending_approval   { background: #fef9e7; color: #b7950b; }
.status-approved           { background: #eafaf1; color: #1e8449; }
.status-sent_to_vendor     { background: #d6eaf8; color: #1a6b9a; }
.status-partially_received { background: #fdf2e9; color: var(--secondary); }
.status-received-po        { background: #eafaf1; color: #1e8449; }
.status-cancelled          { background: #f4f4f4; color: var(--accent); }

/* Issue severity/status colors */
.severity-low       { background: #f4f4f4; color: var(--accent); }
.severity-medium    { background: #fef9e7; color: #D07B18; }
.severity-high      { background: #fdf2e9; color: var(--secondary); }
.severity-critical  { background: #fdecea; color: #f00; }
.issue-open          { background: #fdecea; color: #f00; }
.issue-in_progress   { background: #fef9e7; color: #D07B18; }
.issue-resolved      { background: #eafaf1; color: #0a0; }
.issue-closed        { background: #f4f4f4; color: var(--accent); }
.issue-wont_fix      { background: #f4f4f4; color: var(--accent); font-style: italic; }

.role-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:0.25rem; font-size:0.8rem; font-weight:bold; }

.shortage-row td { background:#fdecea !important; }
.lapsed-row td { background:#fdecea !important; }
.due-soon-row td { background:#fef9e7 !important; }

.error_message   { color:#f00; background:#fee; border:1px solid #fcc; }
.success_message { color:#0a0; background:#efe; border:1px solid #cfc; }
.in_progress_message { color:#880; background:#ffe; border:1px solid #cc0; }

.kpi-tile-row { display: flex; flex-wrap: wrap; gap: var(--size-6); margin-bottom: var(--size-7); }
.kpi-tile {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  padding: var(--size-6) var(--size-7);
  min-width: 12rem;
  flex: 1;
}
.kpi-tile .kpi-value { font-size: 2.2rem; font-weight: bold; color: var(--primary); }
.kpi-tile.kpi-warn .kpi-value { color: var(--secondary); }
.kpi-tile.kpi-danger .kpi-value { color: #f00; }
.kpi-tile .kpi-label { font-size: 0.9rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }

.detail-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--size-6); margin-bottom: var(--size-7); }
.detail-field-grid .field-label { font-size: 0.8rem; text-transform: uppercase; color: var(--accent); letter-spacing: 0.03em; }
.detail-field-grid .field-value { font-size: 1rem; color: var(--dark); font-weight: 600; }

.section-card { background: #fff; border-radius: 0.5rem; box-shadow: var(--shadow); padding: var(--size-7); margin-bottom: var(--size-7); }
.section-card h3 { margin-top: 0; }

.filter-bar { display: flex; gap: var(--size-5); margin-bottom: var(--size-6); flex-wrap: wrap; align-items: center; }
.filter-bar a.button.secondary.active { background: var(--primary-faded); border-color: var(--primary); color: var(--primary-darker); }

/* A note under a heading or a tile row.
   .content sets text-align:center for the whole app (css/new-style.css), so a
   block with a max-width and no auto margins renders LEFT-positioned with
   centre-aligned lines -- which reads as a mistake rather than as either choice.
   Centring the block is what makes the inherited alignment look deliberate. */
.page-note {
  color: var(--accent);
  max-width: 62rem;
  margin: 0 auto var(--size-6);
}
/* The action bar is centred where it sits under a centred heading. */
.filter-bar.filter-bar-centred { justify-content: center; }