/* style_bs5.css — loaded once in base_bs5.html */

/* =========================================================
   Layout / Dashboard
   ========================================================= */
.dashboard-wrapper {
  padding: 2rem;
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* Sidebar layout and transitions */
#sidebar-wrapper {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #343a40;   /* Dark sidebar */
  color: white;
  transition: left 0.3s ease;
  z-index: 1040;
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
#wrapper.sidebar-visible #sidebar-wrapper { left: 0; }
#wrapper.sidebar-visible #page-content-wrapper { margin-left: 250px; }

/* Sidebar chevron rotation (CSS-only, driven by aria-expanded) */
#sidebar-wrapper [data-bs-toggle="collapse"] .rotate-icon {
  transition: transform .2s ease;
}
#sidebar-wrapper [data-bs-toggle="collapse"][aria-expanded="true"] .rotate-icon {
  transform: rotate(180deg);
}

/* Responsive tweaks for mobile view */
@media (max-width: 768px) {
  #wrapper.sidebar-visible #page-content-wrapper { margin-left: 0; }
  #sidebar-wrapper { width: 200px; }
}

/* =========================================================
   Cards
   ========================================================= */
.card-hover { transition: all 0.2s ease-in-out; }
.card-hover:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}
.card-icon { font-size: 3rem; color: #2a76e2; }
.card-title { font-weight: 600; margin-top: 10px; }
.text-muted-small { font-size: 0.8rem; color: #777; }

/* =========================================================
   DataTables (Bootstrap 5 skin + dark mode)
   ========================================================= */

/* Table borders respect theme */
.table { --bs-table-border-color: var(--bs-border-color); }
.table thead th,
.table tfoot th { border-color: var(--bs-border-color); }

/* Wrapper labels (“entries per page”, “Search”, info text) */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { color: var(--bs-body-color); }

/* Inputs inside labels */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}
.dataTables_wrapper .dataTables_paginate .pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Scroller regions (no fixed heights here!) */
.dataTables_scroll { position: relative; }
.dataTables_scrollBody {
  overflow-x: auto;
  overflow-y: auto;
  background-color: var(--bs-body-bg);
}
.dataTables_scrollFoot {
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 1px;
  width: 100%;
}


/* =========================================================
   Modals / Forms (theme-aware)
   ========================================================= */
.modal-content { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.modal-header, .modal-footer { border-color: var(--bs-border-color); }

.form-control, .form-select {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.form-control::placeholder { color: var(--bs-secondary-color); }

/* =========================================================
   Dropdown / Context menu
   ========================================================= */
.dropdown-menu {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.dropdown-item { color: var(--bs-body-color); }
.dropdown-item:hover { background-color: var(--bs-tertiary-bg); }

/* ==== Context menu (right-click) — shared look, theme-aware ==== */
:root{
  --ctx-bg: var(--bs-body-bg);
  --ctx-fg: var(--bs-body-color);
  --ctx-border: var(--bs-border-color);
  --ctx-hover-bg: rgba(255,255,255,.10);   /* overridden in light theme */
  --ctx-hover-fg: #fff;
}
[data-bs-theme="light"]{
  --ctx-hover-bg: rgba(0,0,0,.05);
  --ctx-hover-fg: var(--bs-body-color);
}
#context-menu.dropdown-menu,
.context-menu.dropdown-menu{
  background-color: var(--ctx-bg);
  color: var(--ctx-fg);
  border: 1px solid var(--ctx-border);
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: .25rem 0;
}
#context-menu .dropdown-item,
.context-menu .dropdown-item { color: var(--ctx-fg); }
#context-menu .dropdown-item:hover,
#context-menu .dropdown-item:focus,
.context-menu .dropdown-item:hover,
.context-menu .dropdown-item:focus{
  background-color: var(--ctx-hover-bg);
  color: var(--ctx-hover-fg);
}
#context-menu .dropdown-item.disabled,
#context-menu .dropdown-item:disabled,
.context-menu .dropdown-item.disabled,
.context-menu .dropdown-item:disabled{
  color: rgba(255,255,255,.55);
  pointer-events: none;
}
#context-menu .dropdown-submenu,
.context-menu .dropdown-submenu { position: relative; }
#context-menu .dropdown-submenu .submenu,
.context-menu .dropdown-submenu .submenu{
  top: 0; left: 100%;
  margin-top: 0; margin-left: -1px;
  background-color: var(--ctx-bg);
  color: var(--ctx-fg);
  border: 1px solid var(--ctx-border);
  border-radius: .5rem;
}

/* =========================================================
   Utility
   ========================================================= */
.table-header { margin: 20px 0; }
.ml-2 { margin-left: 10px; }
.editing { background-color: #f0f8ff; border: 1px solid #add8e6; } /* cell editing highlight */

/* =========================================================
   Global
   ========================================================= */
body { overflow-x: hidden; }

/* =========================================================
   Sidebar (dark theme support)
   ========================================================= */
#sidebar-wrapper .list-group-item {
  background: transparent;
  color: white;
  border: none;
}
#sidebar-wrapper .list-group-item:hover { background-color: #495057; }
.sidebar-heading { font-size: 1.3rem; }
.dropdown-toggle::after { display: none; } /* remove caret */

.submenu-item {
  padding-left: 2.5rem;
  margin-left: 0.5rem;
  border-left: 2px solid rgba(255,255,255,0.2);
  font-size: 0.95rem;
  color: #dcdcdc;
}
.submenu-item:hover { color: white; background-color: #495057; }
.hierarchy-item {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  margin-bottom: 0 !important;
}
#sidebar-wrapper .collapse { display: none; }
#sidebar-wrapper .collapse.show { display: block; }

/* =========================================================
   Dropzone / File Upload
   ========================================================= */
#drop-area {
  background-color: #f9f9f9;
  color: #212529; /* force readable dark text */
  border: 2px dashed var(--bs-primary);
}
#drop-area p, #drop-area strong { color: #212529; }
#drop-area small { color: #6c757d; }

/* =========================================================
   Inventory table layout helpers (scoped)
   ========================================================= */

/* Card fills viewport; content managed via JS */
.js-fillvh { overflow: hidden; }
.js-fillvh > .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Make the DataTables wrapper behave as a flex column */
/* Parent that fills space (OK to be flex) */
#dt-holder {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* Let the wrapper grow, but do NOT make it a flex container */
#dt-holder .dataTables_wrapper {
  min-height: 0;
  display: block;         /* important */
}

/* Critical: scroll containers must NOT be flex */
#dt-holder .dataTables_scroll,
#dt-holder .dt-scroll {
  display: block;         /* important */
  min-height: 0;
  min-width: 0;
}

/* Body scroll settings are fine; remove flex here (not a flex child anymore) */
#dt-holder .dataTables_scrollBody,
#dt-holder .dt-scroll-body {
  overflow-y: auto;
  overflow-x: auto;
  height: auto;           /* JS/DT will set exact px height if you do that */
  max-height: none;
  min-height: 120px;
  /* flex: 1 1 auto;     <- delete if present */
}

/* DT v2 inner scroll tables */
#dt-holder .dt-scroll-headInner > table,
#dt-holder .dt-scroll-body > table {
  table-layout: auto !important;
  width: max-content !important;
}



/* Footer controls must not shrink in flex */
#dt-holder .dataTables_info,
#dt-holder .dataTables_paginate,
#dt-holder .dt-info,
#dt-holder .dt-paging { flex: 0 0 auto; display: block !important;
}

/* Keep pagination UI visible even when only one page */
#dt-holder .dataTables_paginate,
#dt-holder .dt-paging {
  display: block !important;
}

/* DT v2 wrapper uses .dt-container */
#dt-holder .dt-container {
  display: block;        /* same as .dataTables_wrapper */
  min-height: 0;
}

/* remove default bottom gap for both wrappers */
#dt-holder .dt-container,
#dt-holder .dataTables_wrapper {
  margin-bottom: 0 !important;
}


/* Hide/Show Columns: grey label when switch is off */
#columnToggleModal .form-check-input:not(:checked) + .form-check-label {
  opacity: .55;
}

/* Let DT’s header + body tables grow to content width so horizontal scroll appears */
#dt-holder .dataTables_scrollHead table,
#dt-holder .dataTables_scrollBody table {
  table-layout: auto !important;
  width: max-content !important;   /* allow table to grow beyond card */
}

/* Ensure main table itself isn't stretched */
#dataTable { width: auto !important; }

/* Columns: nowrap + safe minimum so they don’t crush */
#dataTable th,
#dataTable td {
  white-space: nowrap;
  min-width: 160px;
  box-sizing: border-box;
}

/* Give thead cells a bit of room for the sort icon so text doesn’t push widths */
table.dataTable thead th,
table.dataTable thead td {
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* Keep body cells in the same sizing model */
table.dataTable tbody th,
table.dataTable tbody td {
  box-sizing: border-box;
}

/* ---------- DataTables + Bootstrap table tokens (dark only) ---------- */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table.dataTable {
  /* body */
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-color: var(--bs-body-color);

  /* borders */
  --bs-table-border-color: var(--bs-border-color);

  /* stripes & hover states tuned for dark */
  --bs-table-striped-bg: rgba(255,255,255,.045);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(255,255,255,.075);
  --bs-table-hover-color: var(--bs-body-color);
}

/* Make sure Bootstrap’s hover wins over DT row classes */
[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover > * {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

/* Borders inside bordered tables stay visible in dark */
[data-bs-theme="dark"] .table.table-bordered > :not(caption) > * > * {
  border-color: var(--bs-table-border-color) !important;
}

/* Header: keep contrast even when DT applies sorting classes */
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td {
  color: var(--bs-white);
  background-color: #212529; /* like .table-dark */
  border-color: var(--bs-border-color);
}

/* DataTables sort indicators (v1 & v2) — make them visible in dark */
[data-bs-theme="dark"] table.dataTable thead .sorting,
[data-bs-theme="dark"] table.dataTable thead .sorting_asc,
[data-bs-theme="dark"] table.dataTable thead .sorting_desc,
[data-bs-theme="dark"] table.dataTable thead .dt-orderable-asc,
[data-bs-theme="dark"] table.dataTable thead .dt-orderable-desc {
  color: var(--bs-white);
}
[data-bs-theme="dark"] table.dataTable thead .sorting:before,
[data-bs-theme="dark"] table.dataTable thead .sorting:after,
[data-bs-theme="dark"] table.dataTable thead .sorting_asc:before,
[data-bs-theme="dark"] table.dataTable thead .sorting_desc:after {
  opacity: .85;
}
[data-bs-theme="dark"] table.dataTable thead th .dt-column-order {
  opacity: .9;
}

/* Filter placeholder contrast (dark) */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--bs-secondary-color);
}

/* -------- Status dot tokens + classes (light/dark aware) -------- */
:root {
  --st-critical: #ff0000;   /* CRITICAL */
  --st-alarm:    #ffa500;   /* ALARM */
  --st-optimal:  #198754;   /* OPTIMAL */
  --st-excess:   #0d6efd;   /* EXCESS */
  --st-muted:    #6c757d;   /* Not enough data / default */
  --st-empty:    #000000;   /* EMPTY (light) */
}
:root[data-bs-theme="dark"] {
  --st-empty: #e9ecef;      /* EMPTY (visible on dark) */
}

/* Map state classes to tokens; !important beats any stray inline color */
.status-icon.status--critical { color: var(--st-critical) !important; }
.status-icon.status--alarm    { color: var(--st-alarm)    !important; }

.status-icon.status--optimal  { color: var(--st-optimal)  !important; }
.status-icon.status--excess   { color: var(--st-excess)   !important; }
.status-icon.status--muted    { color: var(--st-muted)    !important; }
.status-icon.status--empty    { color: var(--st-empty)    !important; }

/* If JS set inline black for EMPTY, force a readable color in dark theme */
[data-bs-theme="dark"] .status-icon[data-empty="true"] {
  color: var(--st-empty) !important;
}