/* ? -------  Trouble shoot checking section --------- */

/* * {
  background-color: rgb(0 100 0 / 0.1);
} */

/* *--------------------- Reset ---------------------* */

*,
*::after,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

/* @media screen and (min-width: 2000px) {
  .container {
    max-width: 1500px;
    margin: 0rem auto;
  }
} */

html, body {
  height: 100%;
}

body {
  background-color: var(--color-background-grey);
  color: var(--color-fonts);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button,
a,
input {
  color: var(--color-fonts);
}

.disableScroll {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.--hidden {
  display: none;
}

/* Ensure hidden overlays never block clicks */
.sideBar-ontoggle.--hidden,
.sideBar-ontoggle-backdrop.--hidden,
.addProSection.--hidden,
.EditCategorySection.--hidden {
  display: none !important;
  pointer-events: none !important;
}

.--selectedBtnUi {
  background-color: #e8f1ff;
  color: var(--color-primary-color) !important;
  border-radius: 10px;
}

/* *--------------------- Root ---------------------* */

:root {
  --color-primary-color: #1570ef;
  --color-primary-shadow: #1570ef52;
  --color-sec-shadow: #c8c0c051;

  --color-background: #fff;
  --color-background-grey: #e3e8f0;

  --color-fonts: #000000;
  --color-fonts-grey: #5d6679;
}

.main {
  position: relative;
  min-height: 0;
}

.app-loading {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(227, 232, 240, 0.72);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.app-loading.app-loading--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loading__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 2.4rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.12);
  min-width: 220px;
}

.app-loading__spinner {
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid #d0d5dd;
  border-top-color: var(--color-primary-color);
  border-radius: 50%;
  animation: appLoadingSpin 0.7s linear infinite;
}

.app-loading__title {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
}

.app-loading__text {
  margin: 0;
  font-size: 0.82rem;
  color: #667085;
}

@keyframes appLoadingSpin {
  to { transform: rotate(360deg); }
}

/* *------------------ Typography -------------------* */

body {
  font-size: 62.5%;
  /* 1rem = 10px */
}

h1 {
  font-size: 2rem;
  font-weight: 500;
}

h2 {
  font-size: 1.2rem;
  font-weight: 500;
}

p {
  font-size: 1rem;
  font-weight: 300;
}

input,
a,
button {
  font-size: 1rem;
}

@media screen and (min-width: 1000px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.4rem;
    font-weight: 500;
  }

  p {
    font-size: 1.2rem;
    font-weight: 300;
  }
}

/* ------------------------ App Layout --------------------------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.sideBar {
  display: none;
}

.header {
  height: 100px;
  background-color: var(--color-background);
}

.app {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .app {
    display: flex;
    flex-direction: column;
    margin-left: 280px;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    width: auto;
  }

  .sideBar-ontoggle-backdrop {
    display: none !important;
  }

  .sideBar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--color-background);
    overflow: visible;
    padding: 1.25rem 1.5rem;
    z-index: 100;
    box-sizing: border-box;
  }

  .sideBar__brand {
    flex: 0 0 auto;
  }

  .sideBar__icons {
    flex: 1 1 0%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .sideBar__user {
    flex: 0 0 auto;
    margin-top: 0;
    overflow: visible;
  }

  .sideBar__user .notif {
    overflow: visible;
  }

  .header {
    display: none;
  }

  .main {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
  }
}

svg use {
  pointer-events: none;
}

/* ----------------------------- Header ------------------------------- */

.header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-shadow: 5px 12px 10px rgba(107, 106, 106, 0.23);
  z-index: 1150;
}

@media screen and (min-width: 1024px) {
  .header {
    display: none !important;
  }
}

.header__search__form {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.header__search .icon {
  width: 50px;
  height: 50px;
  padding: 0px 10px 0px 20px;
}

.header__search {
  width: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-left: 32px; */
  border: 1px solid rgb(203, 203, 203);
  border-radius: 8px;
}

.header__search input {
  height: 100%;
  padding: 1rem 1rem 1rem 0rem;
  width: 100%;
  border: 0px;
  border-radius: 8px;
  outline: none;
}

.header img {
  margin-right: 0;
  cursor: pointer;
  width: 50px;
  height: 50px;
  padding: 10px 0px 10px 10px;
}

/* sidebar on toggle */
.sideBar-ontoggle {
  z-index: 1200;
  position: fixed;
  left: 0;
  top: 0;
  width: min(280px, 86vw);
  height: 100%;
  height: 100dvh;
  box-shadow: 0 0 20px rgba(184, 184, 184, 0.514);
  background-color: var(--color-background);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

@media screen and (min-width: 400px) {
  .header__search {
    width: 250px;
  }
}
.sideBar-ontoggle-backdrop {
  width: 100%;
  height: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(16, 24, 40, 0.45);
  z-index: 1180;
  pointer-events: none;
}

.sideBar-ontoggle-backdrop:not(.--hidden) {
  pointer-events: auto;
}

@media screen and (min-width: 1024px) {
  .header img {
    display: none;
  }
  .sideBar-ontoggle,
  .sideBar-ontoggle--display {
    display: none !important;
  }

  .sideBar-ontoggle-backdrop {
    display: none !important;
  }
}

/* -------------------------------- Sidebar ------------------------------- */

.sideBar__icon :first-child,
.sideBar__icon :last-child {
  pointer-events: none;
}

.sideBar-ontoggle {
  padding: 1.25rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100dvh;
  height: 100dvh;
}

.sideBar-ontoggle .sideBar__brand {
  flex: 0 0 auto;
  position: static;
  padding-right: 0;
}

.sideBar-ontoggle .sideBar__logo-container {
  margin-bottom: 0.85rem;
  align-items: center;
  gap: 0.7rem;
}

.sideBar-ontoggle .water-logo {
  width: 44px;
  height: 44px;
}

.sideBar-ontoggle .sideBar__logo-text {
  font-size: 0.98rem;
  line-height: 1.2;
}

.sideBar-ontoggle .sideBar__icons {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sideBar-ontoggle > .sideBar__user {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: 0.85rem;
  width: 100%;
}

.sideBar__brand {
  flex: 0 0 auto;
}

.sideBar__icon svg,
.sideBar__icon img {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  flex-shrink: 0;
}

.sideBar__icons {
  color: var(--color-fonts-grey);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 0.25rem;
}

.sideBar__icon {
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

.sideBar__icon:hover {
  background-color: #f5f7fa;
  color: #344054 !important;
}

.sideBar__icon p {
  font-weight: 400;
  margin: 0;
}

.sideBar__logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  flex-shrink: 0;
  text-decoration: none !important;
  color: inherit;
}

.water-logo {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0;
  flex-shrink: 0;
  object-fit: contain;
}

.sideBar__logo-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1570ef;
  line-height: 1.25;
}

.sideBar__inventory-switch {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.85rem;
}

.sideBar__inventory-switch-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #98a2b3;
}

.inventorySwitch {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #101828;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.65rem;
  outline: none;
  cursor: pointer;
}

.inventorySwitch:focus {
  border-color: #1570ef;
}

.page-title-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  min-width: 0;
}

.inventory-context-name {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #e8f1ff;
  color: #1570ef;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.sideBar__setting:hover {
  filter: invert(39%) sepia(62%) saturate(6335%) hue-rotate(207deg)
    brightness(99%) contrast(90%);
}

.sideBar__user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid #e9edf3;
  width: 100%;
  background-color: var(--color-background);
}

.sideBar__user-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sideBar__user-card:hover {
  background: #f8fafc;
  border-color: #e4e7ec;
}

.sideBar__user-card:focus-visible {
  outline: none;
  border-color: #84caff;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.sideBar__user-avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #eff4ff;
  color: #175cd3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.sideBar__user-avatar-img,
.sideBar__user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sideBar__user-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.sideBar__user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #101828;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sideBar__user-role {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  color: #1570ef;
  background: #e8f1ff;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  margin-top: 0.15rem;
}

.sideBar__user-dept {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6rem;
  color: #98a2b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sideBar__logout-btn {
  background: none;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.45rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667085;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sideBar__logout-btn svg {
  width: 18px;
  height: 18px;
  margin: 0;
}

.sideBar__logout-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

.sideBar__user .notif__panel {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
  right: auto;
  width: 420px;
  min-width: 420px;
  max-height: 560px;
}

.--hidden {
  display: none;
}

/* --------------------- Inventory App ----------------------------- */
.main {
  width: 100%;
  padding: 2rem;
  margin-bottom: 0;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.inventory-app,
.forecastUi,
.users-page,
.activity-logs-page,
.procurement-page,
.dashboardUi,
.reports-page,
.calendar-page {
  padding: 1.5rem 1.25rem;
  width: 100%;
  background-color: var(--color-background);
  border-radius: 14px;
  border: 1px solid #e9edf3;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.module-body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.product-section__header,
.dashboardUi__header,
.reports-page__header,
.calendar-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: #fff;
}

.product-section {
  width: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.inventory-app .product-section,
.users-page .product-section,
.activity-logs-page .product-section,
.procurement-page .product-section {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  margin-top: 0.25rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #98a2b3 #f2f4f7;
}

/* Forecasting & Reports: page scrolls; content is not locked in a clipped pane */
.main:has(.forecastUi),
.main:has(.reports-page) {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.forecastUi,
.reports-page {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0;
  overflow: visible !important;
}

.forecastUi .module-body,
.reports-page .module-body {
  flex: 0 0 auto;
  overflow: visible;
  min-height: 0;
}

.forecastUi .product-section {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.users-page .users-panel,
.activity-logs-page .activity-logs-panel {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.users-page .users-panel.--hidden,
.activity-logs-page .activity-logs-panel.--hidden {
  display: none !important;
}

.users-page .table-pagination-container,
.activity-logs-page .table-pagination-container,
.procurement-page .table-pagination-container {
  flex: 0 0 auto;
}

.users-page .table__title td,
.activity-logs-page .table__title td {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
}

.inventory-app > .table-pagination-container {
  flex: 0 0 auto;
  margin-top: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px solid #eef2f6;
  background: #fff;
  position: relative;
  z-index: 1;
}

.inventory-app .product-section::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.inventory-app .product-section::-webkit-scrollbar-track {
  background: #f2f4f7;
  border-radius: 999px;
}

.inventory-app .product-section::-webkit-scrollbar-thumb {
  background: #98a2b3;
  border-radius: 999px;
}

.inventory-app .product-section::-webkit-scrollbar-thumb:hover {
  background: #667085;
}

.product-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.product-section__header__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.product-section__header h1 {
  font-size: 1.35rem;
  font-weight: 650;
  color: #101828;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.inventory-search__form {
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  max-width: 280px;
}

.inventory-search {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
}

.inventory-search .icon {
  width: 40px;
  height: 40px;
  padding: 0 8px 0 12px;
  flex-shrink: 0;
}

.inventory-search input {
  height: 100%;
  padding: 0.65rem 0.85rem 0.65rem 0;
  width: 100%;
  border: 0;
  border-radius: 8px;
  outline: none;
  font-size: 0.85rem;
  background: transparent;
}

.inventory-search:focus-within {
  border-color: #98a2b3;
}

.product-section__header__buttons {
  perspective: 2500px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  position: relative;
  z-index: 8;
}

.addProBtn {
  position: relative;
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
  color: white;
  padding: 0.7rem 1.1rem;
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--color-primary-color);
  margin-right: 0;
  font-size: 0.78rem;
  font-weight: 600;
}

.editToggleBtn {
  cursor: pointer;
  color: #344054;
  padding: 0.7rem 1rem;
  border: 1px solid #d0d5dd;
  outline: none;
  border-radius: 8px;
  background: #ffffff;
  margin-right: 0;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.editToggleBtn.--active {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

.downloadDropdown {
  position: relative;
}

.downloadBtn {
  cursor: pointer;
  color: #344054;
  padding: 0.7rem 1rem;
  border: 1px solid #d0d5dd;
  outline: none;
  border-radius: 8px;
  background: #ffffff;
  margin-right: 0;
  font-size: 0.78rem;
  font-weight: 600;
}

.downloadMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 170px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
  z-index: 25;
  padding: 0.3rem;
}

.downloadMenu.--hidden {
  display: none !important;
}

.downloadOptionBtn {
  display: block;
  width: 100%;
  border: 0;
  background: #ffffff;
  color: #344054;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.72rem;
}

.downloadOptionBtn:hover {
  background: #f2f4f7;
}

.filterBtn {
  cursor: pointer;
  color: #344054;
  padding: 0.7rem 1rem;
  border: 1px solid #d0d5dd;
  outline: none;
  border-radius: 8px;
  background: #ffffff;
  margin-right: 0;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.filterBtn img {
  width: 14px;
  height: 14px;
  margin-right: 0;
}

.filterBtn p {
  margin: 0;
  font-size: inherit;
}

.filterBtn.--active {
  background: #e8f1ff;
  border-color: #1570ef;
  color: #1570ef;
}

.filterDropdown {
  position: relative;
}

.inventoryFilterPanel {
  margin-bottom: 0;
  padding: 0.75rem;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 320px;
  max-width: min(420px, calc(100vw - 2rem));
  z-index: 20;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

.filterGroup--columns {
  flex: 1 1 100%;
  border-top: 1px solid #eef2f6;
  padding-top: 0.75rem;
}

.filterGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.filterGroupHeader .filterGroupTitle {
  margin: 0;
}

.filterGroupHeaderActions {
  display: flex;
  gap: 0.5rem;
}

.filterLinkBtn {
  border: none;
  background: transparent;
  color: #1570ef;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.filterLinkBtn:hover {
  text-decoration: underline;
}

.filterGroupHint {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  color: #667085;
  line-height: 1.35;
}

.filterOptionBtn[data-locked="true"] {
  cursor: default;
}

.inventoryFilterPanel.--hidden {
  display: none !important;
}

.filterGroupTitle {
  margin: 0 0 0.35rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475467;
}

.filterGroupOptions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.filterOptionBtn {
  border: 1px solid #d0d5dd;
  background: #ffffff;
  color: #344054;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  font-size: 0.7rem;
}

.filterOptionBtn.--active {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

.inventory-app table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.forecastUi table {
  overflow-x: auto;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.inventory-app table tr td {
  padding: 0.85rem 0.75rem;
  font-size: 0.88rem;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  color: #344054;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}

.forecastUi table tr td {
  margin-right: 20px;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  text-align: center;
}

/* Zebra rows: first data row grey, then white (header may share tbody) */
.inventory-app table tr.inventory-row:nth-child(even) td,
.forecastUi table tr:not(.table__title):nth-child(even) td {
  background-color: #eef1f4;
}

.inventory-app table tr.inventory-row:nth-child(odd) td,
.forecastUi table tr:not(.table__title):nth-child(odd) td {
  background-color: #ffffff;
}

.inventory-app table tr:not(.table__title):hover td {
  background-color: #e4e9ef;
}

.forecastUi table tr:not(.table__title):hover td {
  background-color: #e4e9ef;
}

.inventory-app tr.table__title td {
  position: sticky;
  top: 0;
  z-index: 4;
}

.forecastUi tr.table__title td {
  position: relative;
}

.col-resize-handle {
  position: absolute;
  top: 20%;
  right: 0;
  width: 6px;
  height: 60%;
  cursor: col-resize;
  z-index: 12;
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s ease;
}

.col-resize-handle:hover,
.col-resize-handle:active,
.col-resize-handle.is-dragging {
  background: #1570ef;
}

.inventory-app .table__title td {
  position: sticky;
  top: 0;
  z-index: 4;
  font-weight: 700;
  font-size: 0.72rem;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
  padding: 0.8rem 0.75rem;
  user-select: none;
}

.forecastUi .table__title td {
  text-align: center;
}

.inventory-app table .icon {
  width: 18px;
  height: 18px;
}

.inventory-app .table__actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.inventory-app .table__icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.inventory-app table tr.inventory-row {
  cursor: pointer;
}

.inventory-app.--editMode {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04), inset 0 0 0 1px #b2ddff;
}

.inventory-app.--editMode tr:not(.table__title) td {
  background: #fcfdff;
}

.inventory-app.--editMode tr:not(.table__title):hover td {
  background: #f0f7ff;
}

.inventory-app.--editMode .editTableSection {
  background: #f5f9ff !important;
}

.inventory-app .row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inventory-app .row-action svg,
.inventory-app .row-action img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  display: block;
}

.inventory-app .row-action:hover {
  border-color: #b2ddff;
  background: #eff8ff;
  color: #1570ef;
}

.inventory-app .row-action.--edit:hover {
  border-color: #b2ddff;
  background: #eff8ff;
  color: #1570ef;
}

.inventory-app .row-action.--delete {
  color: #b42318;
}

.inventory-app .row-action.--delete:hover {
  border-color: #fecdca;
  background: #fef3f2;
  color: #b42318;
}

/* Keep item-name columns left aligned */
.inventory-app table tr td:nth-child(2) {
  text-align: left;
  font-weight: 550;
  color: #101828;
}

.forecastUi table tr td:nth-child(1) {
  text-align: left;
  min-width: 220px;
}

.inventory-app .editTableSection {
  width: 9rem;
}

.inventory-app .stockTableSection {
  width: 11rem;
  min-width: 11rem;
}

.trigger-pill {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.trigger-pill.--ok {
  background-color: #d1fadf;
  color: #027a48;
}

.trigger-pill.--need {
  background-color: #fee4e2;
  color: #b42318;
}

.deleteIcon,
.editIcon,
.viewIcon {
  margin: 0;
}
@media screen and (min-width: 1024px) {
  .inventory-app .table__title td {
    font-weight: 700;
    font-size: 0.78rem;
  }

  .inventory-app, .forecastUi, .users-page, .activity-logs-page, .procurement-page {
    padding: 2rem 2.25rem;
  }

  .addProBtn {
    font-size: 0.88rem;
    padding: 0.8rem 1.35rem;
  }

  .editToggleBtn {
    font-size: 0.88rem;
    padding: 0.8rem 1.15rem;
  }

  .downloadBtn {
    font-size: 0.88rem;
    padding: 0.8rem 1.15rem;
  }

  .filterBtn {
    font-size: 0.88rem;
    padding: 0.8rem 1.15rem;
  }

  .filterOptionBtn {
    font-size: 0.85rem;
  }

  .addProBtn:hover {
    box-shadow: 0 0 15px var(--color-primary-shadow);
  }

  .product-section__header h1 {
    font-size: 1.75rem;
    font-weight: 650;
  }

  .inventory-app table tr td,
  .users-page table tr td,
  .activity-logs-page table tr td {
    padding: 0.95rem 0.85rem;
    font-size: 0.92rem;
  }

  .users-page .table__title td,
  .activity-logs-page .table__title td {
    font-size: 0.78rem;
  }

  .users-tab {
    font-size: 0.88rem;
    padding: 0.6rem 1.1rem;
  }

  .forecastUi table tr td {
    margin-right: 20px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
  }
}

/* --------------------------- Add Product Modal ------------------------------------- */
.addProSection {
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.116);
  backdrop-filter: blur(2px);
  z-index: 1200;
  pointer-events: auto;
}

.addProModal {
  overflow-y: auto;

  margin: 0 auto;
  margin-top: 75px;
  width: 70%;
  background-color: white;
  padding: 1rem;
  border-radius: 5px;
}

.addProModal__title {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.addProModal__form__inputs {
  margin-bottom: 1rem;
}

.addProModal__form__inputs input {
  border: 1px solid var(--color-background-grey);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  outline: none;
}

.addProModal__form__inputs select,
.addProModal__form__inputs option {
  border: 1px solid var(--color-background-grey);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  outline: none;
  background: var(--color-background);
}

.addProModal__form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.addProModal__form__inputs p {
  display: none;
}

.addProModal__form__buttons {
  margin-top: 0.5rem;
  align-self: flex-end;
}

.addProModal__form__buttons button {
  margin-left: 0.5rem;
  cursor: pointer;
  outline: none;
  border: 0 solid;
  border-radius: 5px;
  padding: 0.5rem;
  font-size: 0.8rem;
}

.addProModal__form__buttons :last-child {
  color: white;
  background-color: var(--color-primary-color);
}

@media screen and (min-width: 1024px) {
  .addProModal__form__inputs p {
    display: block;
    font-size: 1rem;
  }
  .addProModal__form__inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .addProModal__form__inputs input,
  .addProModal__form__inputs select {
    width: 82%;
  }
  .addProModal {
    width: 800px;
    padding: 2rem;
  }
  .addProModal__form__buttons button {
    font-size: 1rem;
  }
}

.deleteIcon img {
  pointer-events: none;
}
/* ------------------------------ Category Section --------------------------------------- */

.categoryUi {
  background-color: var(--color-background);
  width: 100%;
  padding: 2rem;
  border-radius: 7px;
}

.category__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.categoryUi h1 {
  font-size: 1.3rem;
}

.addCategoryBtn {
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background-color: var(--color-primary-color);
  border: 0 solid;
  color: white;
  border-radius: 5px;
}

.category__item {
  margin-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category__item p {
  font-size: 0.9rem;
}

.deleteBtnCategory {
  margin-right: 0;
  margin-left: 5px;
  width: 25px;
  height: 25px;
  padding: 5px;
  cursor: pointer;
}

.deleteBtnCategory:hover {
  filter: invert(29%) sepia(94%) saturate(1395%) hue-rotate(340deg)
    brightness(92%) contrast(89%);
}

.category__item__text h2 {
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}

.category__item__text .description {
  font-size: 0.8rem;
}

.editCategoryIcon {
  width: 25px;
  height: 25px;
  padding: 5px;
  margin-left: 5px;
  cursor: pointer;
}

.editCategoryIcon svg {
  pointer-events: none;
}

.category__item__icons {
  display: flex;
  align-self: center;
}

.editCategoryIcon:hover {
  filter: invert(39%) sepia(62%) saturate(6335%) hue-rotate(207deg)
    brightness(99%) contrast(90%);
}

@media screen and (min-width: 1024px) {
  .editCategoryIcon,
  .deleteBtnCategory {
    width: 30px;
    height: 30px;
    padding: 5px;
    margin-left: 5px;
    cursor: pointer;
  }

  .categoryUi h1 {
    font-weight: 600;
    font-size: 1.8rem;
  }

  .category__item__text h2 {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
  }

  .category__item__text .description {
    font-size: 1rem;
  }

  .addCategoryBtn {
    font-size: 0.9rem;
    cursor: pointer;
    padding: 1rem 2rem;
    background-color: var(--color-primary-color);
    border: 0 solid;
    color: white;
    border-radius: 5px;
  }
}

/* Edit Section */

.EditCategorySection {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.192);
  backdrop-filter: blur(2px);
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 4;
  pointer-events: auto;
}

.EditCatMod__title {
  font-size: 1.2rem;
}

.EditCatMod {
  padding: 1rem;
  background-color: white;
  width: 70%;
  margin: 0 auto;
  position: relative;
  top: 180px;
  border-radius: 8px;
}

.EditCatMod__form {
  display: flex;
  flex-direction: column;
}

.EditCatMod__form input {
  border: 1px solid var(--color-background-grey);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  outline: none;
  margin-top: 1rem;
}

.EditCatMod__btns {
  margin-top: 1.5rem;
  align-self: flex-end;
}

.EditCatMod__btns button {
  margin-left: 0.5rem;
  cursor: pointer;
  outline: none;
  border: 0 solid;
  border-radius: 5px;
  padding: 0.5rem;
  font-size: 0.8rem;
}

.submitBtnEdit {
  color: white;
  background-color: var(--color-primary-color);
}

@media screen and (min-width: 1024px) {
  .EditCatMod__form input {
    width: 100%;
  }
  .EditCatMod {
    padding: 1.5rem;
    width: 700px;
  }
  .EditCatMod__btns button {
    font-size: 1rem;
    padding: 0.7rem 1rem;
  }
}

/* ---------------------------------- dashboardUi ----------------------------------- */
.dashboardUi {
  padding: 1.25rem 1rem;
  width: 100%;
  background-color: var(--color-background);
  border-radius: 12px;
  border: 1px solid #e9edf3;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
}

.dashboardUi__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.dashboardUi__header h1 {
  font-size: 1.2rem;
}

.dashboardUi__summary {
  grid-template-columns: repeat(1, 1fr);
}

@media screen and (min-width: 500px) {
  .dashboardUi__summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 900px) {
  .dashboardUi__summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .dashboardUi__summary {
    grid-template-columns: repeat(4, 1fr);
  }
}

.reports-summary__card-icon--cost {
  background: #fff4ed;
  color: #c2410c;
}

.reports-summary__card-icon--restock {
  background: #fef3c7;
  color: #b54708;
}

.reports-summary__card-icon--leadtime {
  background: #e0f2fe;
  color: #0369a1;
}

.reports-summary__card-icon--half {
  background: #fce7f3;
  color: #9d174d;
}

@media screen and (min-width: 1024px) {
  .dashboardUi {
    padding: 2rem;
  }

  .dashboardUi__header h1 {
    font-size: 1.8rem;
    font-weight: 600;
  }
}

/* ----- Dashboard Alerts ----- */
.dashboard-alerts {
  margin-top: 2rem;
}

.dashboard-alerts__banner {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  animation: slideInUp 0.4s ease;
}

.dashboard-alerts__banner--ok {
  background: linear-gradient(135deg, #ecfdf3 0%, #d1fadf 100%);
  border: 1px solid #a6f4c5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #027a48;
}

.dashboard-alerts__banner--ok svg {
  flex-shrink: 0;
}

.dashboard-alerts__banner--ok span {
  font-size: 0.9rem;
  font-weight: 500;
}

.dashboard-alerts__banner--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
}

.dashboard-alerts__banner-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dashboard-alerts__banner-header svg {
  flex-shrink: 0;
  color: #b54708;
}

.dashboard-alerts__banner-header span {
  font-size: 0.9rem;
  color: #93370d;
}

.dashboard-alerts__view-link {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1570ef !important;
  text-decoration: none !important;
}

.dashboard-alerts__view-link:hover {
  text-decoration: underline !important;
}

.dashboard-alerts__list {
  margin-top: 0.75rem;
  padding-left: 0.5rem;
}

.dashboard-alerts__list li {
  font-size: 0.82rem;
  color: #344054;
  padding: 0.3rem 0;
  border-bottom: 1px solid #fde68a;
  list-style: none;
}

.dashboard-alerts__list li:last-child {
  border-bottom: none;
}

.dashboard-alerts__fsn {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.25rem;
}

.dashboard-alerts__more {
  font-style: italic;
  color: #667085;
}

/* ----- Profile modal ----- */
.profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
  padding: 1.25rem;
}

.profile-modal-overlay.--hidden {
  display: none !important;
}

.profile-modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4e7ec;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
}

.profile-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1rem;
  border-bottom: 1px solid #f2f4f7;
}

.profile-modal__header h2 {
  font-size: 1.2rem;
  font-weight: 650;
  color: #101828;
}

.profile-modal__subtitle {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: #98a2b3;
}

.profile-modal__close {
  border: none;
  background: #f2f4f7;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: #667085;
  flex-shrink: 0;
}

.profile-modal__close:hover {
  background: #e4e7ec;
  color: #101828;
}

.profile-modal__body,
.profile-view {
  padding: 1.1rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.profile-modal__body.--hidden,
.profile-view.--hidden,
.profile-edit.--hidden {
  display: none !important;
}

.profile-modal__error {
  margin: 0.9rem 1.4rem 0;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
  font-size: 0.82rem;
}

.profile-view__hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f8fafc;
}

.profile-view__avatar,
.profile-picture-editor__preview {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #eff4ff;
  color: #175cd3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-view__avatar img,
.profile-picture-editor__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-picture-editor {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f8fafc;
}

.profile-picture-editor__preview {
  width: 4.2rem;
  height: 4.2rem;
  font-size: 1.05rem;
  background: #fff;
  border: 1px solid #e4e7ec;
}

.profile-picture-editor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.profile-picture-editor__upload {
  cursor: pointer;
}

/* Profile crop modal */
.profile-crop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400;
  padding: 1.25rem;
  backdrop-filter: blur(2px);
}

.profile-crop-overlay.--hidden {
  display: none !important;
}

.profile-crop-modal {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4e7ec;
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-crop-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 0.85rem;
}

.profile-crop-modal__header h2 {
  font-size: 1.05rem;
  font-weight: 650;
  color: #101828;
}

.profile-crop-modal__close {
  border: none;
  background: #f2f4f7;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #667085;
}

.profile-crop-modal__close:hover {
  background: #e4e7ec;
  color: #101828;
}

.profile-crop-modal__stage {
  position: relative;
  width: 100%;
  height: 320px;
  background: #f2f4f7;
  overflow: hidden;
}

.profile-crop-modal__stage img {
  display: block;
  max-width: 100%;
}

.profile-crop-modal__tools {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(228, 231, 236, 0.95);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12);
  z-index: 5;
}

.profile-crop-tool {
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #344054;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.profile-crop-tool svg {
  width: 1.05rem;
  height: 1.05rem;
}

.profile-crop-tool:hover {
  background: #eff4ff;
  color: #1570ef;
}

.profile-crop-modal__hint {
  margin: 0;
  padding: 0.65rem 1.1rem 0.15rem;
  text-align: center;
  font-size: 0.75rem;
  color: #98a2b3;
}

.profile-crop-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem 1.1rem;
}

.profile-crop-modal .cropper-container {
  background: #f2f4f7 !important;
}

.profile-crop-modal .cropper-modal {
  background: rgba(242, 244, 247, 0.72) !important;
}

.profile-crop-modal .cropper-view-box,
.profile-crop-modal .cropper-face {
  border-radius: 50%;
}

.profile-crop-modal .cropper-view-box {
  outline: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(21, 112, 239, 0.35);
}

.profile-crop-modal .cropper-face {
  background-color: transparent !important;
}

.profile-crop-modal .cropper-dashed,
.profile-crop-modal .cropper-center,
.profile-crop-modal .cropper-line,
.profile-crop-modal .cropper-point {
  display: none !important;
}

.profile-view__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}

.profile-view__identity strong {
  font-size: 1.05rem;
  font-weight: 650;
  color: #101828;
}

.profile-view__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #e8f1ff;
  color: #1570ef;
  font-size: 0.72rem;
  font-weight: 650;
}

.profile-view__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.profile-view__details > div {
  padding: 0.75rem 0.85rem;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  background: #fff;
}

.profile-view__details dt {
  font-size: 0.72rem;
  color: #98a2b3;
  margin-bottom: 0.25rem;
}

.profile-view__details dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #101828;
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.profile-section__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.9rem;
}

.profile-form-grid__full {
  grid-column: 1 / -1;
}

.profile-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475467;
}

.profile-form-grid input {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: #101828;
  background: #fff;
  outline: none;
}

.profile-form-grid input:focus {
  border-color: #84caff;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.profile-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #f8fafc;
}

.profile-meta__label {
  display: block;
  font-size: 0.72rem;
  color: #98a2b3;
  margin-bottom: 0.2rem;
}

.profile-meta strong {
  font-size: 0.9rem;
  color: #101828;
  font-weight: 650;
}

.profile-meta__hint {
  font-size: 0.75rem;
  color: #98a2b3;
}

.profile-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 0.25rem;
  border-top: 1px solid #f2f4f7;
}

.profile-modal__footer--stack {
  flex-direction: column;
  justify-content: stretch;
}

.profile-modal__footer--stack .profile-btn {
  width: 100%;
  justify-content: center;
}

.profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.profile-btn--ghost {
  background: #fff;
  border-color: #d0d5dd;
  color: #344054;
}

.profile-btn--ghost:hover:not(:disabled) {
  background: #f9fafb;
}

.profile-btn--primary {
  background: #1570ef;
  border-color: #1570ef;
  color: #fff;
}

.profile-btn--primary:hover:not(:disabled) {
  background: #175cd3;
}

.profile-btn--danger {
  background: #fff;
  border-color: #fecdca;
  color: #b42318;
}

.profile-btn--danger:hover:not(:disabled) {
  background: #fef3f2;
}

@media screen and (max-width: 640px) {
  .profile-form-grid,
  .profile-meta,
  .profile-view__details {
    grid-template-columns: 1fr;
  }
}

/* ----- Dashboard Activity Log (admin) ----- */
.dashboard-activity {
  margin-top: 1.75rem;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.dashboard-activity__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f2f4f7;
  background: #f8fafc;
}

.dashboard-activity__title h2 {
  font-size: 1rem;
  font-weight: 650;
  color: #101828;
}

.dashboard-activity__subtitle {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #667085;
}

.dashboard-activity__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dashboard-activity__date {
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 2rem;
}

.dashboard-activity__nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dashboard-activity__nav:hover:not(:disabled) {
  background: #f9fafb;
}

.dashboard-activity__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dashboard-activity__refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 2rem;
}

.dashboard-activity__refresh:hover {
  background: #f9fafb;
}

.dashboard-activity__view-all {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #1570ef;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
  min-height: 2rem;
}

.dashboard-activity__view-all:hover {
  background: #eff8ff;
  border-color: #b2ddff;
}

.dashboard-activity__body {
  max-height: none;
}

.dashboard-activity__count {
  padding: 0.65rem 1.25rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: #98a2b3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dashboard-activity__loading,
.dashboard-activity__empty {
  padding: 1.5rem 1.25rem;
  color: #98a2b3;
  font-size: 0.88rem;
}

.dashboard-activity__empty small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
}

.dashboard-activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-activity__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #f2f4f7;
}

.dashboard-activity__item:last-child {
  border-bottom: none;
}

.dashboard-activity__item:hover {
  background: #f9fafb;
}

.dashboard-activity__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-top: 0.4rem;
  background: #98a2b3;
}

.dashboard-activity__dot--green { background: #12b76a; }
.dashboard-activity__dot--blue { background: #1570ef; }
.dashboard-activity__dot--red { background: #f04438; }
.dashboard-activity__dot--orange { background: #f79009; }
.dashboard-activity__dot--gray { background: #98a2b3; }

.dashboard-activity__content {
  min-width: 0;
}

.dashboard-activity__text {
  font-size: 0.88rem;
  color: #344054;
  line-height: 1.4;
}

.dashboard-activity__text strong {
  color: #101828;
  font-weight: 650;
  margin-right: 0.25rem;
}

.dashboard-activity__role {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 0.7rem;
  font-weight: 650;
}

.dashboard-activity__time {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #98a2b3;
}

.dashboard-activity__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 0.15rem;
}

.dashboard-activity__badge--green {
  background: #ecfdf3;
  color: #027a48;
}

.dashboard-activity__badge--blue {
  background: #eff8ff;
  color: #175cd3;
}

.dashboard-activity__badge--red {
  background: #fef3f2;
  color: #b42318;
}

.dashboard-activity__badge--orange {
  background: #fffaeb;
  color: #b54708;
}

.dashboard-activity__badge--gray {
  background: #f2f4f7;
  color: #475467;
}

.activity-changes {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.activity-changes__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.22rem 0.6rem;
  background: #f2f4f7;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.activity-changes__field {
  color: #667085;
  font-weight: 600;
  flex-shrink: 0;
}

.activity-changes__from {
  color: #98a2b3;
  overflow-wrap: anywhere;
}

.activity-changes__arrow {
  color: #d0d5dd;
  font-weight: 600;
}

.activity-changes__to {
  color: #101828;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.activity-logs-details__summary {
  margin: 0;
  color: #344054;
  font-size: 0.95rem;
}

.activity-logs-details {
  min-width: 0;
}

.activity-logs-row {
  cursor: pointer;
}

.activity-changes-scroll {
  margin-top: 0.45rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #98a2b3 #f2f4f7;
}

.activity-changes-scroll::-webkit-scrollbar {
  height: 8px;
}

.activity-changes-scroll::-webkit-scrollbar-track {
  background: #f2f4f7;
  border-radius: 999px;
}

.activity-changes-scroll::-webkit-scrollbar-thumb {
  background: #98a2b3;
  border-radius: 999px;
}

.activity-logs-details .activity-changes {
  margin-top: 0;
  flex-wrap: nowrap;
  width: max-content;
}

.activity-logs-details .activity-changes__chip {
  flex-shrink: 0;
  max-width: none;
  white-space: nowrap;
  font-size: 0.82rem;
}

.activity-logs-details .activity-changes__from,
.activity-logs-details .activity-changes__to {
  overflow-wrap: normal;
}

@media screen and (max-width: 640px) {
  .dashboard-activity__item {
    grid-template-columns: auto 1fr;
  }

  .dashboard-activity__badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* --------------------------- Forecasting Badges ------------------------------------- */

.forecast-section-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1rem;
}

.forecast-section-table tr td {
  margin-right: 20px;
  padding: 0px 20px;
  font-size: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
}

.badge-success {
  color: #0f5132;
  background-color: #d1e7dd;
}

.badge-warning {
  color: #664d03;
  background-color: #fff3cd;
}

.badge-danger {
  color: #842029;
  background-color: #f8d7da;
}

.badge-neutral {
  color: #41464b;
  background-color: #e2e3e5;
}

/* ======================= LOGIN PAGE ======================= */

.login-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b1437 0%, #1a237e 40%, #1565c0 70%, #0d47a1 100%);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  overflow: hidden;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.login-container {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.login-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 80px rgba(21, 101, 192, 0.15);
}

.login-card__logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-card__logo-img {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 0.75rem auto !important;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(21, 101, 192, 0.4));
}

.login-card__title {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.login-card__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.login-card__field {
  margin-bottom: 1.25rem;
}

.login-card__field label {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.login-card__input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.login-card__input-wrapper:focus-within {
  border-color: #42a5f5;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
}

.login-card__input-icon {
  width: 18px;
  height: 18px;
  margin: 0 0 0 1rem;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
}

.login-card__input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.9rem 1rem;
  color: #ffffff;
  font-size: 0.95rem;
}

.login-card__input-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.login-card__input-wrapper--password input {
  padding-right: 0.4rem;
}

.login-card__toggle-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.35rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.login-card__toggle-password:hover,
.login-card__toggle-password:focus-visible {
  color: #ffffff;
  outline: none;
}

.login-card__toggle-icon {
  width: 18px;
  height: 18px;
}

.login-card__toggle-icon.--hidden {
  display: none;
}

.login-card__error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  animation: slideInUp 0.3s ease;
}

.login-card__error.--hidden {
  display: none !important;
}

.login-card__error svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #ef4444;
}

.login-card__error span {
  color: #fca5a5;
  font-size: 0.85rem;
}

.login-card__btn {
  width: 100%;
  padding: 0.9rem;
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.25s ease;
}

.login-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4);
}

.login-card__btn:active {
  transform: translateY(0);
}

.login-card__btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.login-card__btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-card__footer {
  text-align: center;
  margin-top: 1.5rem;
}

.login-card__footer p {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* ======================= NOTIFICATION BELL ======================= */

.notif {
  position: relative;
}

.notif__bell {
  position: relative;
  background: none;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667085;
  transition: all 0.25s ease;
}

.notif__bell:hover {
  border-color: #1570ef;
  color: #1570ef;
  background: #f0f6ff;
  transform: scale(1.05);
}

.notif__bell:active {
  transform: scale(0.95);
}

.notif__bell svg {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* Animated badge */
.notif__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: notifPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 1;
}

.notif__badge.--hidden {
  display: none !important;
}

@keyframes notifPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

/* Bell ring animation when new alerts exist */
.notif__bell.--has-alerts {
  animation: bellRing 2s ease-in-out 0.5s;
}

@keyframes bellRing {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(14deg); }
  10%  { transform: rotate(-12deg); }
  15%  { transform: rotate(10deg); }
  20%  { transform: rotate(-8deg); }
  25%  { transform: rotate(5deg); }
  30%  { transform: rotate(-3deg); }
  35%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ---- Notification Dropdown Panel ---- */

.notif__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -40px;
  width: 420px;
  max-height: 560px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(16, 24, 40, 0.12),
    0 4px 12px rgba(16, 24, 40, 0.06);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: notifSlideIn 0.25s ease;
  overflow: hidden;
}

.notif__panel.--hidden {
  display: none !important;
}

@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #f2f4f7;
}

.notif__panel-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.notif__mark-read {
  background: none;
  border: none;
  padding: 0.4rem;
  border-radius: 8px;
  cursor: pointer;
  color: #98a2b3;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif__mark-read:hover {
  background: #f2f4f7;
  color: #1570ef;
}

.notif__mark-read svg {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* Panel body with scrollable list */
.notif__panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.65rem 0;
  max-height: 400px;
}

.notif__panel-body::-webkit-scrollbar {
  width: 6px;
}

.notif__panel-body::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 4px;
}

/* Individual notification item */
.notif__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s ease;
  border-left: 3px solid transparent;
}

.notif__item:hover {
  background: #f9fafb;
}

.notif__item.--unread {
  background: #f0f6ff;
  border-left-color: #1570ef;
}

.notif__item.--unread:hover {
  background: #e8f1ff;
}

/* Urgency dot indicator */
.notif__item-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
}

.notif__item-dot.--critical {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
  animation: criticalPulse 2s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 12px rgba(239, 68, 68, 0.7); }
}

.notif__item-dot.--high {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.35);
}

.notif__item-dot.--medium {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
}

.notif__item-dot.--ok {
  background: linear-gradient(135deg, #10b981, #059669);
}

.notif__item-content {
  flex: 1;
  min-width: 0;
}

.notif__item-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: #344054;
  margin: 0 0 0.3rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif__item-desc {
  font-size: 0.88rem;
  color: #667085;
  margin: 0;
  line-height: 1.45;
}

.notif__item-time {
  font-size: 0.78rem;
  color: #98a2b3;
  margin-top: 0.35rem;
}

/* Urgency tag inline */
.notif__item-urgency {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.notif__item-urgency.--critical {
  background: #fee2e2;
  color: #b91c1c;
}

.notif__item-urgency.--high {
  background: #fef3c7;
  color: #92400e;
}

.notif__item-urgency.--medium {
  background: #dbeafe;
  color: #1d4ed8;
}

.notif__item.--calendar {
  cursor: pointer;
}

.notif__item-dot.--calendar.--high {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 0 4px rgba(124, 58, 237, 0.35);
}

.notif__item-dot.--calendar.--medium {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  box-shadow: 0 0 4px rgba(14, 165, 233, 0.3);
}

.notif__item.--calendar.--unread {
  border-left-color: #7c3aed;
}

/* Empty state */
.notif__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.75rem;
  text-align: center;
}

.notif__empty svg {
  width: 56px;
  height: 56px;
  color: #12b76a;
  margin: 0 0 0.9rem;
}

.notif__empty p {
  font-size: 1rem;
  color: #667085;
  font-weight: 500;
}

/* Panel footer */
.notif__panel-footer {
  border-top: 1px solid #f2f4f7;
  padding: 0.9rem 1.5rem;
  text-align: center;
}

.notif__view-all {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1570ef !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.notif__view-all:hover {
  color: #1251b0 !important;
  text-decoration: underline !important;
}

/* --- Responsive notification panel --- */
@media screen and (max-width: 480px) {
  .notif__panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 20px 20px 0 0;
    animation: notifSlideUp 0.3s ease;
  }

  @keyframes notifSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ======================= SESSION MODAL ======================= */

.session-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.session-modal {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e4e7ec;
  padding: 1.5rem 1.4rem 1.25rem;
  max-width: 400px;
  width: min(400px, 100%);
  text-align: left;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.16);
  animation: slideInUp 0.25s ease;
}

.session-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fffaeb;
  color: #b54708;
  margin-bottom: 0.85rem;
}

.session-modal__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #101828;
  margin: 0 0 0.4rem;
}

.session-modal__message {
  font-size: 0.9rem;
  color: #667085;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.session-modal__btn {
  width: 100%;
  padding: 0.7rem 1rem;
  background: #1570ef;
  border: 1px solid #1570ef;
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.session-modal__btn:hover {
  background: #175cd3;
  border-color: #175cd3;
}

/* ======================= CONFIRM DIALOG ======================= */

.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

.confirm-modal-overlay.--hidden,
.procurement-overlay {
  display: none !important;
}

.procurement-overlay.is-open {
  display: flex !important;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow: hidden;
}

.confirm-modal {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e4e7ec;
  padding: 1.25rem 1.25rem 1.1rem;
  max-width: 420px;
  width: min(420px, 100%);
  text-align: left;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.16);
  animation: slideInUp 0.22s ease;
}

.confirm-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.confirm-modal__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.confirm-modal__icon--default {
  background: #eff8ff;
  color: #175cd3;
}

.confirm-modal__icon--info {
  background: #f2f4f7;
  color: #475467;
}

.confirm-modal__icon--danger {
  background: #fef3f2;
  color: #b42318;
}

.confirm-modal__heading {
  min-width: 0;
  padding-top: 0.2rem;
}

.confirm-modal__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  line-height: 1.35;
}

.confirm-modal__message {
  font-size: 0.9rem;
  color: #667085;
  margin: 0 0 1.15rem;
  line-height: 1.5;
  white-space: pre-line;
}

.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 0.15rem;
}

.confirm-modal__btn {
  min-width: 5.5rem;
  padding: 0.6rem 0.95rem;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.confirm-modal__btn--ghost {
  background: #fff;
  border-color: #d0d5dd;
  color: #344054;
}

.confirm-modal__btn--ghost:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.confirm-modal__btn--primary {
  background: #1570ef;
  border-color: #1570ef;
  color: #fff;
}

.confirm-modal__btn--primary:hover {
  background: #175cd3;
  border-color: #175cd3;
}

.confirm-modal__btn--danger {
  background: #d92d20;
  border-color: #d92d20;
  color: #fff;
}

.confirm-modal__btn--danger:hover {
  background: #b42318;
  border-color: #b42318;
}

/* ======================= REPORTS PAGE ======================= */

.reports-page {
  padding: 1.25rem 1rem;
  width: 100%;
  background-color: var(--color-background);
  border-radius: 12px;
  border: 1px solid #e9edf3;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
}

.reports-page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.reports-page__header h1 {
  font-size: 1.2rem;
}

.reportDownloadDropdown {
  position: relative;
}

.reportDownloadBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: #344054;
  padding: 0.65rem 1rem;
  border: 1px solid #d0d5dd;
  outline: none;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.75rem;
  transition: all 0.15s ease;
}

.reportDownloadBtn svg {
  width: 16px;
  height: 16px;
  margin: 0;
}

.reportDownloadBtn:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.reportDownloadMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
  z-index: 25;
  padding: 0.3rem;
}

.reportDownloadOption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: #ffffff;
  color: #344054;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  transition: background 0.15s;
}

.reportDownloadOption svg {
  width: 14px;
  height: 14px;
  margin: 0;
}

.reportDownloadOption:hover {
  background: #f2f4f7;
}

/* Reports Summary Cards */
.reports-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .reports-summary {
    grid-template-columns: repeat(4, 1fr);
  }
}

.reports-summary__card {
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.reports-summary__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}

.reports-summary__card--clickable {
  cursor: pointer;
}

.reports-summary__card--clickable:hover {
  border-color: #b2ddff;
}

.reports-summary__card--clickable:focus-visible {
  outline: none;
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.15);
}

.reports-summary__card--clickable.is-active {
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
  background: #f5faff;
}

.procurement-page .reports-summary__card--clickable.is-active {
  border-color: #1570ef;
}

/* Dashboard metric explanation modal */
.metric-explain-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.metric-explain-overlay.--hidden {
  display: none;
}

.metric-explain-modal {
  width: min(520px, 100%);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: metricExplainIn 0.2s ease;
}

@keyframes metricExplainIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.metric-explain-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid #eef2f6;
}

.metric-explain-modal__header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #101828;
}

.metric-explain-modal__close {
  border: none;
  background: #f2f4f7;
  color: #667085;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.metric-explain-modal__close:hover {
  background: #e4e7ec;
  color: #344054;
}

.metric-explain-modal__body {
  padding: 1.2rem 1.35rem 1.4rem;
  color: #475467;
  font-size: 0.92rem;
  line-height: 1.55;
}

.metric-explain-modal__body p {
  margin: 0 0 0.85rem;
}

.metric-explain__result {
  background: #f0f6ff;
  border: 1px solid #d0e4ff;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  color: #101828;
}

.metric-explain__formula {
  display: block;
  margin: 0.85rem 0;
  padding: 0.7rem 0.9rem;
  background: #f8fafc;
  border: 1px dashed #d0d5dd;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: #344054;
  font-weight: 600;
}

.metric-explain__points {
  margin: 0;
  padding-left: 1.15rem;
}

.metric-explain__points li {
  margin-bottom: 0.4rem;
}

.reports-summary__card--alert {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.reports-summary__card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reports-summary__card-icon svg {
  width: 22px;
  height: 22px;
  margin: 0;
}

.reports-summary__card-icon--items {
  background: #e8f1ff;
  color: #1570ef;
}

.reports-summary__card-icon--qty {
  background: #ecfdf3;
  color: #027a48;
}

.reports-summary__card-icon--value {
  background: #f0e6ff;
  color: #6b21a8;
}

.reports-summary__card-icon--alert {
  background: #fef3c7;
  color: #b54708;
}

.reports-summary__card-label {
  font-size: 0.78rem;
  color: #667085;
  margin-bottom: 0.25rem;
}

.reports-summary__card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #101828;
}

/* Reports Alerts Section */
.reports-alerts {
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  overflow: hidden;
}

.reports-alerts__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9edf3;
  background: #fafcff;
}

.reports-alerts__header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #101828;
}

.reports-alerts__header h2 svg {
  color: #f59e0b;
  width: 20px;
  height: 20px;
  margin: 0;
}

.reports-alerts__body {
  padding: 0;
  max-height: min(52vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.reports-alerts__loading {
  padding: 2rem;
  text-align: center;
  color: #667085;
  font-size: 0.9rem;
}

.reports-alerts__empty {
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.reports-alerts__empty svg {
  width: 48px;
  height: 48px;
  margin: 0;
}

.reports-alerts__empty p {
  color: #667085;
  font-size: 0.9rem;
}

.reports-alerts__table {
  width: 100%;
  border-collapse: collapse;
}

.reports-alerts__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f9fafb;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border-bottom: 1px solid #e9edf3;
}

.reports-alerts__table tbody tr {
  transition: background 0.15s;
}

.reports-alerts__table tbody tr.reports-alert-row {
  cursor: pointer;
}

.reports-alerts__table tbody tr:hover {
  background: #f9fafb;
}

.reports-alerts__table tbody td {
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  color: #344054;
  border-bottom: 1px solid #f2f4f7;
}

.reports-alerts__item-name {
  font-weight: 600;
}

.reports-fsn-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.reports-urgency-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.reports-urgency--critical {
  background: #fee2e2;
  color: #b91c1c;
}

.reports-urgency--high {
  background: #ffedd5;
  color: #c2410c;
}

.reports-urgency--medium {
  background: #fef3c7;
  color: #b45309;
}

@media screen and (min-width: 1024px) {
  .reports-page {
    padding: 2rem;
  }

  .reports-page__header h1 {
    font-size: 1.8rem;
    font-weight: 600;
  }

  .reportDownloadBtn {
    font-size: 0.9rem;
    padding: 0.85rem 1.25rem;
  }
}

/* ======================= FORBIDDEN PAGE ======================= */

.forbidden-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  min-height: 400px;
}

.forbidden-page__icon {
  color: #ef4444;
  margin-bottom: 1.5rem;
}

.forbidden-page__icon svg {
  width: 80px;
  height: 80px;
}

.forbidden-page h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #101828;
  margin-bottom: 0.5rem;
}

.forbidden-page p {
  font-size: 1rem;
  color: #667085;
  margin-bottom: 0.5rem;
}

.forbidden-page__role {
  margin-bottom: 1.5rem !important;
}

.forbidden-page__btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  color: #ffffff !important;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.15s ease;
}

.forbidden-page__btn:hover {
  transform: translateY(-1px);
}

/* ======================= MOBILE RESPONSIVE ======================= */

/* ---------- viewport meta already set in layout-head.ejs ---------- */

/* ---- Global mobile spacing ---- */
@media screen and (max-width: 767px) {
  .main {
    padding: 1rem 0.65rem;
  }

  /* ---- Header ---- */
  .header {
    padding: 0.75rem 1rem;
    height: auto;
    min-height: 56px;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  .header img.menu-toggle {
    width: 36px;
    height: 36px;
    padding: 6px;
  }

  .notif__bell {
    padding: 0.4rem;
  }

  .notif__bell svg {
    width: 18px;
    height: 18px;
  }

  /* ---- Dashboard ---- */
  .dashboardUi {
    padding: 1.25rem 1rem;
    border-radius: 10px;
  }

  .dashboardUi__header h1 {
    font-size: 1.35rem;
  }

  .dashboardUi__main {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.75rem;
    column-gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .dashboardUi__main__items {
    margin-right: 0;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e9edf3;
  }

  .dashboardUi__main__items img {
    width: 28px;
    height: 28px;
  }

  .dashboardUi__main__items :nth-child(2) {
    font-size: 1.15rem;
    margin: 0.5rem 0;
  }

  .dashboardUi__main__items :last-child {
    width: auto;
    font-size: 0.72rem;
    color: #667085;
  }

  /* Dashboard alerts */
  .dashboard-alerts__banner {
    padding: 0.75rem 1rem;
  }

  .dashboard-alerts__banner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .dashboard-alerts__view-link {
    margin-left: 0;
    margin-top: 0.25rem;
  }

  .dashboard-alerts__list li {
    font-size: 0.78rem;
    padding: 0.35rem 0;
  }

  /* ---- Inventory Page ---- */
  .inventory-app,
  .forecastUi,
  .users-page,
  .activity-logs-page {
    padding: 1rem 0.65rem;
    border-radius: 10px;
  }

  /* Product section header — stack title and buttons */
  .product-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .product-section__header h1 {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .product-section__header__buttons {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .addProBtn {
    font-size: 0.72rem;
    padding: 0.55rem 0.8rem;
    margin-right: 0;
    border-radius: 8px;
  }

  .editToggleBtn,
  .downloadBtn,
  .filterBtn {
    font-size: 0.72rem;
    padding: 0.55rem 0.7rem;
    margin-right: 0;
  }

  /* Keep filter/download dropdowns usable on mobile */
  .inventoryFilterPanel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: unset;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 1.25rem 1rem 1.75rem;
    z-index: 1300;
    box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.18);
    animation: slideUpMobile 0.25s ease;
  }

  .downloadMenu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: unset;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    z-index: 1300;
    box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.18);
    animation: slideUpMobile 0.25s ease;
  }

  .downloadOptionBtn {
    padding: 0.75rem 0.85rem;
    font-size: 0.85rem;
  }

  .filterOptionBtn {
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
  }

  @keyframes slideUpMobile {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Inventory table scrolls inside the visible panel so the horizontal bar stays on-screen */
  .product-section {
    margin: 0 -0.65rem;
    padding: 0 0.65rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-app .product-section,
  .users-page .product-section {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
  }

  .inventory-app .product-section::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }

  .inventory-app table {
    table-layout: auto;
    min-width: 980px;
  }

  .inventory-app table tr td {
    padding: 0.7rem 0.55rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .inventory-app .table__title td {
    font-size: 0.68rem;
    padding: 0.7rem 0.55rem;
    white-space: nowrap;
  }

  .inventory-app .row-action {
    width: 30px;
    height: 30px;
  }

  /* Forecast table similarly */
  .forecastUi table {
    min-width: 700px;
  }

  .forecastUi table tr td {
    padding: 0.6rem 0.5rem;
    font-size: 0.7rem;
  }

  /* ---- Add Product Modal ---- */
  .addProModal {
    width: 92%;
    margin-top: 40px;
    padding: 1.25rem 1rem;
    border-radius: 14px;
    max-height: 85vh;
    overflow-y: auto;
  }

  .addProModal__title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }

  .addProModal__form__inputs {
    margin-bottom: 0.75rem;
  }

  .addProModal__form__inputs input {
    padding: 0.8rem;
    font-size: 0.85rem;
    border-radius: 10px;
  }

  .addProModal__form__buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .addProModal__form__buttons button {
    flex: 1;
    padding: 0.7rem;
    font-size: 0.85rem;
    border-radius: 8px;
    margin-left: 0;
  }

  /* ---- Reports Page ---- */
  .reports-page {
    padding: 1rem 0.75rem;
    border-radius: 10px;
  }

  .reports-page__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .reports-page__header h1 {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .reportDownloadBtn {
    font-size: 0.75rem;
    padding: 0.55rem 0.75rem;
  }

  .reportDownloadMenu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: unset;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 1rem;
    z-index: 100;
    box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.18);
    animation: slideUpMobile 0.25s ease;
  }

  .reportDownloadOption {
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
  }

  /* Reports summary cards */
  .reports-summary {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .reports-summary__card {
    padding: 0.85rem;
    gap: 0.6rem;
    border-radius: 10px;
  }

  .reports-summary__card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .reports-summary__card-icon svg {
    width: 18px;
    height: 18px;
  }

  .reports-summary__card-label {
    font-size: 0.68rem;
  }

  .reports-summary__card-value {
    font-size: 1.1rem;
  }

  /* Reports alert table horizontal scroll */
  .reports-alerts {
    border-radius: 10px;
  }

  .reports-alerts__header {
    padding: 0.75rem 1rem;
  }

  .reports-alerts__header h2 {
    font-size: 0.9rem;
  }

  .reports-alerts__body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .reports-alerts__table {
    min-width: 550px;
  }

  .reports-alerts__table thead th {
    padding: 0.6rem 0.75rem;
    font-size: 0.65rem;
    white-space: nowrap;
  }

  .reports-alerts__table tbody td {
    padding: 0.55rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* ---- Edit Category Modal ---- */
  .EditCatMod {
    width: 90%;
    padding: 1.25rem 1rem;
    top: 100px;
    border-radius: 14px;
  }

  /* ---- Session Modal ---- */
  .session-modal {
    max-width: 320px;
    padding: 2rem 1.5rem;
    border-radius: 14px;
  }

  /* ---- Login (already responsive but fine-tune) ---- */
  .login-container {
    padding: 1rem;
  }

  .login-card {
    padding: 2rem 1.5rem;
    border-radius: 16px;
  }

  /* ---- Sidebar toggle (already works but smooth it out) ---- */
  .sideBar-ontoggle {
    width: 280px;
    max-width: 85vw;
  }

  .sideBar__logo-container {
    gap: 10px;
    margin-bottom: 0.75rem;
  }

  .water-logo {
    width: 44px;
    height: 44px;
  }

  .sideBar__logo-text {
    font-size: 1rem;
  }

  .sideBar__icon {
    padding: 0.75rem 0.8rem;
  }

  .sideBar__icon p {
    font-size: 0.9rem;
  }
}

/* ---- Extra-small phones (< 380px) ---- */
@media screen and (max-width: 379px) {
  .dashboardUi__main {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .product-section__header__buttons {
    gap: 0.3rem;
  }

  .addProBtn,
  .editToggleBtn,
  .downloadBtn,
  .filterBtn {
    font-size: 0.65rem;
    padding: 0.5rem 0.55rem;
  }

  .reports-summary {
    grid-template-columns: 1fr;
  }

  .addProModal {
    width: 96%;
    margin-top: 24px;
  }
}

/* ---- Tablet tweaks (768px – 1023px) ---- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .main {
    padding: 1.5rem 1.25rem;
  }

  .dashboardUi__main {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
  }

  .dashboardUi__main__items {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e9edf3;
  }

  .product-section__header {
    flex-direction: row;
    align-items: center;
  }

  .inventory-app table {
    min-width: 980px;
  }

  .addProModal {
    width: 75%;
    margin-top: 60px;
  }

  .reports-summary {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================= INLINE STOCK TOGGLE ========================= */

.stockToggleBtn {
  cursor: pointer;
  color: #344054;
  padding: 0.7rem 1rem;
  border: 1px solid #d0d5dd;
  outline: none;
  border-radius: 8px;
  background: #ffffff;
  margin-right: 0;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stockToggleBtn.--active {
  background: #027a48;
  border-color: #027a48;
  color: #ffffff;
}

@media screen and (min-width: 1024px) {
  .stockToggleBtn {
    font-size: 0.88rem;
    padding: 0.8rem 1.15rem;
  }
}

/* ========================= STOCK MODE ========================= */

.stock-mode-banner {
  flex: 0 0 auto;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  color: #475467;
  font-size: 0.78rem;
  line-height: 1.4;
}

.stock-mode-banner.--hidden {
  display: none !important;
}

.stock-mode-banner strong {
  color: #101828;
  font-weight: 650;
}

.stock-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(120%);
  background: #101828;
  color: #ffffff;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.stock-toast.--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.inline-stock {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.inline-stock__input {
  width: 44px;
  height: 30px;
  border: 0;
  border-right: 1px solid #e4e7ec;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #101828;
  outline: none;
  background: #ffffff;
  -moz-appearance: textfield;
}

.inline-stock__input::-webkit-outer-spin-button,
.inline-stock__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.inline-stock__input:focus {
  background: #f8fafc;
}

.inline-stock__btn {
  cursor: pointer;
  border: 0;
  border-right: 1px solid #e4e7ec;
  background: #ffffff;
  color: #344054;
  min-width: 2.75rem;
  height: 30px;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
}

.inline-stock__btn:last-child {
  border-right: 0;
}

.inline-stock__btn.--use {
  color: #b42318;
}

.inline-stock__btn.--use:hover {
  background: #fef3f2;
}

.inline-stock__btn.--add {
  color: #027a48;
}

.inline-stock__btn.--add:hover {
  background: #ecfdf3;
}

.inventory-app:not(.--stockMode) .stockTableSection {
  display: none;
}

/* ========================= CALENDAR PAGE ========================= */

.calendar-page {
  padding: 1.25rem 1rem;
  width: 100%;
  background-color: var(--color-background);
  border-radius: 12px;
  border: 1px solid #e9edf3;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.calendar-header h1 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #101828;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.calendar-year-control {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.calendar-year-btn {
  width: 2rem;
  height: 2.15rem;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calendar-year-btn:hover {
  background: #f2f4f7;
  border-color: #1570ef;
  color: #1570ef;
}

.calendar-year-input {
  width: 5.25rem;
  text-align: center;
  cursor: text;
  -moz-appearance: textfield;
}

.calendar-year-input::-webkit-outer-spin-button,
.calendar-year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calendar-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.calendar-select:focus {
  border-color: #1570ef;
  box-shadow: 0 0 0 2px rgba(21, 112, 239, 0.15);
}

.calendar-view-toggle {
  margin-right: 0;
}

.calendar-table-wrapper {
  width: 100%;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: auto;
  background: #ffffff;
  max-height: min(72vh, 740px);
}

.calendar-table-wrapper.--hidden,
.calendar-grid-wrapper.--hidden {
  display: none;
}

.calendar-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.calendar-table thead th,
.calendar-table tfoot th,
.calendar-table tfoot td {
  position: sticky;
  background: #f9fafb;
}

.calendar-table thead th {
  top: 0;
  z-index: 3;
  text-align: center;
  padding: 0.45rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #667085;
  border-bottom: 1px solid #e4e7ec;
  vertical-align: bottom;
  min-width: 3.4rem;
}

.calendar-table tfoot th,
.calendar-table tfoot td {
  bottom: 0;
  z-index: 3;
  border-top: 1px solid #e4e7ec;
  font-weight: 700;
}

.calendar-table__item-col {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 11rem;
  width: 11rem;
  max-width: 14rem;
  text-align: left !important;
  background: #ffffff;
  box-shadow: 1px 0 0 #e4e7ec;
}

.calendar-table thead .calendar-table__item-col,
.calendar-table tfoot .calendar-table__item-col {
  z-index: 5;
  background: #f9fafb;
}

.calendar-table__total-col {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 4.5rem;
  background: #f9fafb;
  box-shadow: -1px 0 0 #e4e7ec;
  font-weight: 700;
}

.calendar-table thead .calendar-table__total-col,
.calendar-table tfoot .calendar-table__total-col {
  z-index: 5;
}

.calendar-table__day {
  cursor: pointer;
}

.calendar-table__day-num {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #101828;
  line-height: 1.1;
}

.calendar-table__day-name {
  display: block;
  font-size: 0.6rem;
  font-weight: 650;
  color: #98a2b3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.1rem;
}

.calendar-table__day.--today,
.calendar-table__day-cell.--today {
  background: #eef4ff;
}

.calendar-table__day.--today .calendar-table__day-num {
  color: #1570ef;
}

.calendar-table__item-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0 0.55rem;
  text-align: left;
}

.calendar-table__item-code {
  font-size: 0.62rem;
  font-weight: 650;
  color: #98a2b3;
}

.calendar-table__item-name {
  font-size: 0.8rem;
  font-weight: 650;
  color: #101828;
  line-height: 1.25;
  text-align: left;
}

.calendar-table__empty-col {
  text-align: left !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: #98a2b3;
  padding: 1rem;
}

.calendar-table__row:hover td {
  background: #e4e9ef !important;
}

.calendar-table__row.--quiet .calendar-table__item-name {
  color: #667085;
}

.calendar-table td {
  padding: 0.4rem 0.28rem;
  border-bottom: 1px solid #f2f4f7;
  vertical-align: middle;
  text-align: center;
  font-size: 0.8rem;
  background: #ffffff;
}

.calendar-table tbody tr.calendar-table__row:nth-child(odd) td {
  background: #eef1f4;
}

.calendar-table tbody tr.calendar-table__row:nth-child(even) td {
  background: #ffffff;
}

.calendar-table tbody tr.calendar-table__row td.calendar-table__day-cell.--today,
.calendar-table thead th.calendar-table__day.--today {
  background: #eef4ff;
}

.calendar-table tbody tr:last-child td {
  border-bottom: none;
}

.calendar-table__day-cell {
  cursor: pointer;
}

.calendar-table__note-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #eef4ff;
  color: #175cd3;
  font-size: 0.58rem;
  font-weight: 700;
}

.calendar-table__qty {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
}

.calendar-table .cal-badge {
  padding: 0.12rem 0.3rem;
  font-size: 0.65rem;
}

.calendar-table__empty {
  color: #d0d5dd;
  font-weight: 600;
}

.calendar-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.calendar-add-note-btn {
  min-width: 8.5rem;
}

.calendar-day__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.calendar-day__add-note {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #ffffff;
  color: #667085;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.calendar-day:hover:not(.--empty) .calendar-day__add-note,
.calendar-day__add-note:focus-visible {
  opacity: 1;
}

.calendar-day__add-note:hover {
  background: #eff8ff;
  border-color: #1570ef;
  color: #1570ef;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f9fafb;
  border-radius: 10px 10px 0 0;
  border: 1px solid #e4e7ec;
  border-bottom: none;
}

.calendar-weekday {
  text-align: center;
  padding: 0.6rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  border: 1px solid #e4e7ec;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  /* Fixed height: 6 rows */
  min-height: 480px;
}

.calendar-day {
  min-height: 70px;
  padding: 0.35rem 0.4rem;
  border: 0.5px solid #e4e7ec;
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}

.calendar-day:hover:not(.--empty) {
  background-color: #f5f7fa;
}

.calendar-day.--empty {
  background: #fafbfc;
  cursor: default;
}

.calendar-day.--today {
  background: #eef4ff;
}

.calendar-day.--today .calendar-day__num {
  background: #1570ef;
  color: #ffffff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.calendar-day__num {
  font-size: 0.75rem;
  font-weight: 600;
  color: #344054;
  line-height: 1;
}

.calendar-day__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: auto;
}

.cal-badge {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.cal-badge.--add {
  background: #d1fadf;
  color: #027a48;
}

.cal-badge.--use {
  background: #fee4e2;
  color: #b42318;
}

.calendar-day__notes {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.15rem;
  min-width: 0;
}

.cal-note-chip {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-note-more {
  font-size: 0.6rem;
  font-weight: 700;
  color: #667085;
  padding-left: 0.1rem;
}

.cal-note-chip.--blue { background: #d1e9ff; color: #175cd3; }
.cal-note-chip.--green { background: #d1fadf; color: #027a48; }
.cal-note-chip.--amber { background: #fef0c7; color: #b54708; }
.cal-note-chip.--red { background: #fee4e2; color: #b42318; }
.cal-note-chip.--purple { background: #ebe9fe; color: #5925dc; }
.cal-note-chip.--teal { background: #ccfbef; color: #107569; }
.cal-note-chip.--pink { background: #fce7f6; color: #c11574; }
.cal-note-chip.--slate { background: #f2f4f7; color: #344054; }

/* ========================= DAILY OVERVIEW MODAL ========================= */

.daily-overview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.daily-overview-overlay.--hidden {
  display: none !important;
}

.daily-overview-modal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(16, 24, 40, 0.18);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.25s ease;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.daily-overview-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e9edf3;
}

.daily-overview-modal__header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #101828;
}

.daily-overview-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #667085;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.daily-overview-modal__close:hover {
  background: #f2f4f7;
  color: #101828;
}

.daily-overview-modal__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e9edf3;
}

.daily-stat {
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
}

.daily-stat.--added {
  background: #ecfdf3;
}

.daily-stat.--used {
  background: #fef3f2;
}

.daily-stat__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.daily-stat.--added .daily-stat__label {
  color: #027a48;
}

.daily-stat.--used .daily-stat__label {
  color: #b42318;
}

.daily-stat__value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #101828;
}

.daily-overview-modal__list {
  overflow-y: auto;
  padding: 1rem 1.5rem;
  flex: 1;
  max-height: 350px;
}

.daily-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #98a2b3;
}

.daily-empty svg {
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

.daily-empty p {
  font-size: 0.85rem;
  color: #667085;
}

.daily-tx-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #f2f4f7;
  border-radius: 6px;
}

.daily-tx-item:nth-child(odd) {
  background: #eef1f4;
}

.daily-tx-item:nth-child(even) {
  background: #ffffff;
}

.daily-tx-item:last-child {
  border-bottom: none;
}

.daily-tx-item__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.daily-tx-item.--add .daily-tx-item__indicator {
  background: #12b76a;
}

.daily-tx-item.--use .daily-tx-item__indicator {
  background: #f04438;
}

.daily-tx-item__info {
  flex: 1;
}

.daily-tx-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #101828;
  margin-bottom: 0.15rem;
}

.daily-tx-item__code {
  font-weight: 400;
  color: #667085;
  font-size: 0.75rem;
}

.daily-tx-item__meta {
  font-size: 0.72rem;
  color: #667085;
}

.daily-tx-item__meta strong {
  color: #344054;
}

.daily-overview-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.75rem 1.5rem 0;
  border-bottom: 1px solid #e9edf3;
}

.daily-overview-tab {
  border: none;
  background: transparent;
  color: #667085;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0.55rem 0.75rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.daily-overview-tab.--active {
  color: #1570ef;
  border-bottom-color: #1570ef;
}

.daily-overview-tab__count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.daily-overview-tab.--active .daily-overview-tab__count {
  background: #eff8ff;
  color: #175cd3;
}

.daily-overview-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.daily-overview-panel.--hidden {
  display: none !important;
}

.daily-note-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f2f4f7;
}

.daily-note-item:last-child {
  border-bottom: none;
}

.daily-note-item__bar {
  width: 4px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #1570ef;
}

.daily-note-item.--blue .daily-note-item__bar { background: #1570ef; }
.daily-note-item.--green .daily-note-item__bar { background: #12b76a; }
.daily-note-item.--amber .daily-note-item__bar { background: #f79009; }
.daily-note-item.--red .daily-note-item__bar { background: #f04438; }
.daily-note-item.--purple .daily-note-item__bar { background: #7a5af8; }
.daily-note-item.--teal .daily-note-item__bar { background: #15b79e; }
.daily-note-item.--pink .daily-note-item__bar { background: #ee46bc; }
.daily-note-item.--slate .daily-note-item__bar { background: #667085; }

.daily-note-item__body {
  flex: 1;
  min-width: 0;
}

.daily-note-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.daily-note-item__title {
  font-size: 0.88rem;
  font-weight: 650;
  color: #101828;
}

.daily-note-item__edit {
  border: none;
  background: #f2f4f7;
  color: #344054;
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.daily-note-item__edit:hover {
  background: #e4e7ec;
}

.daily-note-item__text {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #475467;
  white-space: pre-wrap;
}

.daily-note-item__meta {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: #98a2b3;
}

.cal-note-modal .users-perm-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cal-note-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.cal-note-color {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.cal-note-color.--selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1570ef;
}

.cal-note-color[data-color="blue"] { background: #1570ef; }
.cal-note-color[data-color="green"] { background: #12b76a; }
.cal-note-color[data-color="amber"] { background: #f79009; }
.cal-note-color[data-color="red"] { background: #f04438; }
.cal-note-color[data-color="purple"] { background: #7a5af8; }
.cal-note-color[data-color="teal"] { background: #15b79e; }
.cal-note-color[data-color="pink"] { background: #ee46bc; }
.cal-note-color[data-color="slate"] { background: #667085; }

.cal-note-share {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cal-note-share.--hidden {
  display: none !important;
}

.cal-note-share__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-note-search {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: #101828;
  background: #fff;
  outline: none;
}

.cal-note-search:focus {
  border-color: #84caff;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.cal-note-share__empty {
  font-size: 0.8rem;
  color: #98a2b3;
}

.cal-note-share__empty.--hidden {
  display: none !important;
}

.cal-note-check.--hidden {
  display: none !important;
}

.cal-note-checklist {
  max-height: 180px;
  overflow: auto;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fcfcfd;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cal-note-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
}

.cal-note-check:hover {
  background: #f2f4f7;
}

.cal-note-check input {
  margin-top: 0.15rem;
}

.cal-note-check span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #344054;
}

.cal-note-check small {
  font-size: 0.72rem;
  font-weight: 400;
  color: #98a2b3;
}

/* ========================= CALENDAR RESPONSIVE ========================= */

@media screen and (min-width: 768px) {
  .calendar-page {
    padding: 2rem;
  }

  .calendar-header h1 {
    font-size: 1.8rem;
  }

  .calendar-grid {
    min-height: 560px;
  }

  .calendar-day {
    min-height: 90px;
    padding: 0.5rem;
  }

  .calendar-day__num {
    font-size: 0.85rem;
  }

  .cal-badge {
    font-size: 0.8rem;
    padding: 0.22rem 0.55rem;
  }
}

@media screen and (min-width: 1024px) {
  .calendar-grid {
    min-height: 620px;
  }

  .calendar-day {
    min-height: 100px;
    padding: 0.6rem;
  }
}

/* *======== AMC TOGGLE ========* */
.amc-toggle {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
  margin-right: 1rem;
}

.amc-toggle input[type="radio"] {
  display: none;
}

.amc-toggle label {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.amc-toggle input[type="radio"]:checked + label {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* *======== FORECAST CHART PANEL ========* */

.forecast-chart-host:empty,
.forecast-chart-host:has(.forecast-chart-panel.--hidden) {
  display: none;
}

.forecast-chart-expand-row td,
.forecast-chart-expand-cell {
  padding: 0.75rem 0.85rem 1rem !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  vertical-align: top;
}

.forecast-chart-expand-row .forecast-chart-panel {
  margin: 0;
  animation: forecastExpandIn 0.25s ease;
}

@keyframes forecastExpandIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.forecast-chart-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.forecast-chart-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0.75rem;
}

.forecast-chart-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.forecast-chart-panel__header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.forecast-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
}

.forecast-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.forecast-chart-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.forecast-chart-legend__swatch--demand {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

.forecast-chart-legend__swatch--forecast {
  background: var(--forecast-swatch, #f97316);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  height: 4px;
  width: 18px;
}

.forecast-chart-legend__swatch--stock {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
}

.forecast-chart-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 0.4rem;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.forecast-chart-panel__close:hover {
  background: #f1f5f9;
  color: #475569;
}

.forecast-chart-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.75rem;
  padding: 0.25rem 1.25rem 0.5rem;
}

.forecast-chart-wrapper {
  padding: 0;
  overflow-x: auto;
  min-width: 0;
}

.forecast-chart-wrapper__title {
  font-size: 0.78rem;
  font-weight: 650;
  color: #475569;
  margin: 0 0 0.45rem 0.15rem;
}

.forecast-chart-wrapper canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
}

/* *======== STAT CARDS ========* */

.forecast-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0.5rem 1.5rem 1.5rem;
}

.forecast-stat-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}

.forecast-stat-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.forecast-stat-card__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
}

/* Method-specific stat value colors */
.forecast-stat-card__method--croston {
  color: #3b82f6;
}

.forecast-stat-card__method--wma {
  color: #8b5cf6;
}

.forecast-stat-card__method--static {
  color: #94a3b8;
}

/* *======== METHOD BADGES IN TABLE ========* */

.badge-croston {
  background: #dbeafe !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}

.badge-wma {
  background: #ede9fe !important;
  color: #7c3aed !important;
  font-weight: 600 !important;
}

.badge-static {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* *======== ROW CLICK INTERACTION ========* */

.forecast-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.forecast-row:hover {
  background: #f8fafc;
}

.forecast-row.--active {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #3b82f6;
}

/* *======== FORECAST VISUAL OVERVIEW ========* */

.forecast-visuals {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.15rem;
}

.forecast-visuals.--hidden,
.forecast-table-hint.--hidden {
  display: none;
}

.forecast-summary {
  margin-bottom: 0;
}

.forecast-overview {
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 14px;
  overflow: hidden;
}

.forecast-overview__header {
  padding: 1rem 1.25rem 0.85rem;
}

.forecast-overview__header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.forecast-overview__header p {
  font-size: 0.78rem;
  color: #667085;
  margin: 0.3rem 0 0;
}

.forecast-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}

.forecast-chart-card {
  background: #f8fafc;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  padding: 1rem 1rem 0.65rem;
  min-width: 0;
}

.forecast-chart-card h3 {
  font-size: 0.85rem;
  font-weight: 650;
  color: #344054;
  margin: 0 0 0.5rem;
}

.forecast-coverage-mix {
  padding: 0 1.25rem 1.1rem;
}

.forecast-coverage-mix__heading h3 {
  font-size: 0.85rem;
  font-weight: 650;
  color: #344054;
  margin: 0;
}

.forecast-coverage-mix__heading p {
  font-size: 0.75rem;
  color: #667085;
  margin: 0.2rem 0 0.7rem;
}

.forecast-coverage-mix__bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f6;
}

.forecast-coverage-mix__seg {
  display: block;
  height: 100%;
  min-width: 2px;
}

.forecast-coverage-mix__seg--critical { background: #ef4444; }
.forecast-coverage-mix__seg--low { background: #f59e0b; }
.forecast-coverage-mix__seg--watch { background: #1570ef; }
.forecast-coverage-mix__seg--healthy { background: #16a34a; }

.forecast-coverage-mix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  margin-top: 0.7rem;
}

.forecast-coverage-mix__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #475467;
}

.forecast-coverage-mix__legend-item strong {
  color: #101828;
}

.forecast-coverage-mix__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.forecast-coverage-mix__dot--critical { background: #ef4444; }
.forecast-coverage-mix__dot--low { background: #f59e0b; }
.forecast-coverage-mix__dot--watch { background: #1570ef; }
.forecast-coverage-mix__dot--healthy { background: #16a34a; }

.forecast-table-hint {
  font-size: 0.78rem;
  color: #667085;
  margin: 0 0 0.65rem;
}

.forecast-row__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.forecast-row__item-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.forecast-row__item-no {
  opacity: 0.55;
  font-size: 0.75em;
}

.forecast-row__item-name {
  font-weight: 600;
  color: #101828;
}

.forecast-row__item-size {
  font-weight: 500;
  font-size: 0.85em;
  color: #667085;
}

.forecast-sparkline {
  flex-shrink: 0;
  overflow: visible;
}

.forecast-sparkline--empty {
  font-size: 0.68rem;
  color: #98a2b3;
  font-weight: 500;
}

.forecast-qty-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.forecast-coverage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 92px;
  margin: 0 auto;
}

.forecast-coverage__track {
  width: 100%;
  height: 6px;
  background: #e4e7ec;
  border-radius: 999px;
  overflow: hidden;
}

.forecast-coverage__fill {
  height: 100%;
  border-radius: 999px;
}

.forecast-coverage__fill--critical { background: #ef4444; }
.forecast-coverage__fill--low { background: #f59e0b; }
.forecast-coverage__fill--watch { background: #1570ef; }
.forecast-coverage__fill--healthy { background: #16a34a; }

.forecast-coverage__label {
  font-size: 0.68rem;
  font-weight: 650;
  color: #475467;
  white-space: nowrap;
}

/* *======== RESPONSIVE ========* */

@media screen and (max-width: 900px) {
  .forecast-chart-grid,
  .forecast-overview__grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .forecast-stat-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.5rem 1rem 1rem;
  }

  .forecast-row__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .forecast-chart-panel__header {
    padding: 1rem 1rem 0.5rem;
  }

  .forecast-chart-panel__header h2 {
    font-size: 0.95rem;
  }

  .forecast-stat-card {
    padding: 0.8rem 1rem;
  }

  .forecast-stat-card__value {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .forecast-stat-cards {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

/* ========================= TABLE PAGINATION ========================= */

.table-pagination-container {
  margin-top: 0.75rem;
}

.table-pagination-container.--hidden {
  display: none;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.5rem 0.15rem;
}

.table-pagination__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.table-pagination__size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #667085;
  font-weight: 500;
}

.table-pagination__size-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 3.5rem;
  padding: 0.3rem 1.6rem 0.3rem 0.55rem;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 12px;
  color: #344054;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.table-pagination__size-select:hover {
  border-color: #d0d5dd;
  background-color: #ffffff;
}

.table-pagination__size-select:focus {
  outline: none;
  border-color: #1570ef;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.table-pagination__info {
  font-size: 0.78rem;
  color: #98a2b3;
}

.table-pagination__controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.table-pagination__page {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  color: #667085;
}

.table-pagination__page-input {
  width: 2.75rem;
  padding: 0.3rem 0.25rem;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  background: #f9fafb;
  color: #344054;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  -moz-appearance: textfield;
}

.table-pagination__page-input::-webkit-outer-spin-button,
.table-pagination__page-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.table-pagination__page-input:hover {
  border-color: #d0d5dd;
  background: #ffffff;
}

.table-pagination__page-input:focus {
  outline: none;
  border-color: #1570ef;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(21, 112, 239, 0.12);
}

.table-pagination__page-total {
  color: #98a2b3;
  font-variant-numeric: tabular-nums;
}

.table-pagination__btn {
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #475467;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.15s ease, background 0.15s ease;
}

.table-pagination__btn:hover:not(:disabled) {
  background: #f2f4f7;
  color: #1570ef;
}

.table-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.daily-overview-modal .table-pagination-container {
  padding: 0 1.5rem 1rem;
}

/* ========================= VIEW ITEM MODAL ========================= */

.viewItemSection {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.viewItemSection.--hidden {
  display: none !important;
}

.viewItemModal {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(16, 24, 40, 0.18);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow: auto;
}

.viewItemModal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e9edf3;
}

.viewItemModal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #101828;
}

.viewItemModal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #667085;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.viewItemModal__close:hover {
  background: #f2f4f7;
  color: #101828;
}

.viewItemModal__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.viewItemModal__section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
  margin-bottom: 0.25rem;
}

.viewItemModal__code {
  font-size: 0.8rem;
  color: #667085;
  margin-bottom: 1rem;
}

.viewItemModal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.viewItemModal__field {
  background: #f9fafb;
  border: 1px solid #e9edf3;
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.viewItemModal__field span {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #667085;
}

.viewItemModal__field strong {
  font-size: 0.9rem;
  color: #101828;
}

.viewIcon {
  cursor: pointer;
  border: none;
  background: #eef4ff;
  color: #1570ef;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.viewIcon:hover {
  background: #1570ef;
  color: #ffffff;
}

/* ========================= FORECAST ALGORITHM PANEL ========================= */

.forecast-info {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.forecast-info__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #667085;
  cursor: pointer;
}

.forecast-info__btn:hover,
.forecast-info__btn.--active {
  color: #1570ef;
  background: #e8f1ff;
}

.forecast-info__panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  z-index: 30;
  width: min(640px, calc(100vw - 2.5rem));
  padding: 1.1rem;
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.14);
}

.forecast-info__panel.--hidden {
  display: none;
}

.forecast-algo-panel__title {
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
  margin-bottom: 0.85rem;
}

.forecast-algo-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.forecast-algo-card {
  background: #f9fafb;
  border: 1px solid #e9edf3;
  border-radius: 10px;
  padding: 0.9rem;
}

.forecast-algo-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1570ef;
  margin-bottom: 0.45rem;
}

.forecast-algo-card p {
  font-size: 0.78rem;
  color: #667085;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.forecast-algo-formula {
  display: block;
  background: #eef4ff;
  color: #175cd3;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.74rem;
  font-family: ui-monospace, monospace;
}

.forecast-algo-note {
  font-size: 0.72rem !important;
  font-style: italic;
  margin-bottom: 0 !important;
}

/* ========================= REPORTS FORECAST CHARTS ========================= */

.reports-forecast-charts {
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.reports-forecast-charts__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9edf3;
}

.reports-forecast-charts__header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #101828;
}

.reports-forecast-charts__desc {
  font-size: 0.78rem;
  color: #667085;
  margin-top: 0.25rem;
}

.reports-forecast-charts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
}

.reports-chart-card {
  background: #f9fafb;
  border: 1px solid #e9edf3;
  border-radius: 10px;
  padding: 1rem;
}

.reports-chart-card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #344054;
  margin-bottom: 0.75rem;
}

.reports-view-btn {
  cursor: pointer;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  color: #344054;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.reports-view-btn:hover {
  border-color: #1570ef;
  color: #1570ef;
}

@media screen and (max-width: 768px) {
  .viewItemModal__grid,
  .forecast-algo-panel__grid,
  .reports-forecast-charts__grid {
    grid-template-columns: 1fr;
  }

  .forecast-info__panel {
    left: 0;
    right: auto;
    width: min(100vw - 2rem, 420px);
  }
}

/* Download options modal */
.download-options-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.download-options-overlay.--hidden {
  display: none;
}

.download-options-modal {
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  animation: downloadOptionsIn 0.2s ease;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}

.download-options-modal--wide {
  width: min(980px, 100%);
}

.download-options-modal--compact {
  width: min(380px, 100%);
}

.download-options-modal--compact .download-options-modal__content {
  align-items: center;
  text-align: center;
}

.download-options-modal--compact .download-options-modal__controls {
  width: 100%;
  align-items: center;
}

.download-options-modal--compact .download-options-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-options-modal--compact .download-options-field__label,
.download-options-modal--compact .download-options-field__header {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.download-options-modal--compact .download-options-chips {
  justify-content: center;
}

.download-options-modal--compact .download-options-modal__footer {
  justify-content: center;
}

.download-options-modal--compact .download-options-modal__header {
  justify-content: center;
  position: relative;
}

.download-options-modal--compact .download-options-modal__header h2 {
  width: 100%;
  text-align: center;
}

.download-options-modal--compact .download-options-modal__close {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes downloadOptionsIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.download-options-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #eef2f6;
  flex-shrink: 0;
}

.download-options-modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
}

.download-options-modal__close {
  border: none;
  background: #f2f4f7;
  color: #667085;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.download-options-modal__close:hover {
  background: #e4e7ec;
  color: #344054;
}

.download-options-modal__body,
.download-options-modal__content {
  padding: 1.15rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow: auto;
}

.download-options-modal__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.download-options-modal--wide .download-options-modal__content {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.download-options-modal__controls {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.download-options-modal__preview {
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 0.85rem;
}

.download-options-modal__preview.--hidden {
  display: none;
}

.download-options-field__label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475467;
}

.download-options-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.download-options-field__header .download-options-field__label {
  margin: 0;
}

.download-options-field__actions {
  display: flex;
  gap: 0.5rem;
}

.download-options-columns-field.--hidden {
  display: none;
}

.download-options-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.download-options-chips--multi .download-options-chip {
  font-size: 0.72rem;
  padding: 0.35rem 0.6rem;
}

.download-options-chip {
  border: 1px solid #d0d5dd;
  background: #ffffff;
  color: #344054;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.download-options-chip:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.download-options-chip.--active {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

.download-options-chip[data-locked="true"] {
  cursor: default;
}

.download-options-pdf-only.--hidden {
  display: none;
}

.download-options-pdf-only {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.download-preview-status {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #667085;
}

.download-preview-stage {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 360px;
  padding: 0;
}

.download-preview-stage--live {
  min-height: 420px;
  height: min(58vh, 560px);
}

.download-preview-frame-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: #eef2f6;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  overflow: hidden;
}

.download-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

.download-preview-frame.--hidden {
  visibility: hidden;
}

.download-preview-loading,
.download-preview-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(248, 250, 252, 0.92);
  color: #667085;
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}

.download-preview-loading.--hidden,
.download-preview-empty-state.--hidden {
  display: none;
}

.download-preview-loading p,
.download-preview-empty-state p {
  margin: 0;
}

.download-preview-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #d0d5dd;
  border-top-color: #1570ef;
  border-radius: 50%;
  animation: downloadPreviewSpin 0.7s linear infinite;
}

@keyframes downloadPreviewSpin {
  to { transform: rotate(360deg); }
}

.download-options-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.25rem 1.2rem;
  border-top: 1px solid #eef2f6;
  flex-shrink: 0;
}

.download-options-btn {
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.download-options-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.download-options-btn--ghost {
  background: #ffffff;
  border-color: #d0d5dd;
  color: #344054;
}

.download-options-btn--ghost:hover {
  background: #f9fafb;
}

.download-options-btn--primary {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

.download-options-btn--primary:hover:not(:disabled) {
  background: #175cd3;
}

@media screen and (max-width: 860px) {
  .download-options-modal__content {
    grid-template-columns: 1fr;
  }

  .download-preview-stage {
    min-height: 220px;
  }
}

/* Users & permissions admin */
.users-page,
.activity-logs-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.users-page .product-section__header,
.activity-logs-page .product-section__header {
  margin-bottom: 1.25rem;
}

.users-page .product-section__header__title,
.activity-logs-page .product-section__header__title {
  flex-wrap: wrap;
}

.users-search__form,
.activity-logs-search__form {
  flex: 1 1 180px;
  max-width: 260px;
}

.activity-logs-select,
.activity-logs-date {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 0;
}

.activity-logs-date {
  min-width: 9.5rem;
}

.activity-logs-when,
.activity-logs-user {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.activity-logs-when strong,
.activity-logs-user strong {
  color: #101828;
  font-weight: 650;
  font-size: 0.95rem;
}

.activity-logs-when small,
.activity-logs-user small {
  color: #667085;
  font-size: 0.82rem;
}

.activity-log-detail-modal {
  max-width: 720px;
}

.activity-log-detail__lead {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #101828;
}

.activity-log-detail__heading {
  margin: 1.25rem 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #101828;
}

.activity-log-detail__empty {
  margin: 1.25rem 0 0;
  color: #667085;
}

.activity-log-detail__table-wrap {
  overflow-x: auto;
}

.activity-log-detail__table {
  width: 100%;
  border-collapse: collapse;
}

.activity-log-detail__table th,
.activity-log-detail__table td {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid #eef2f6;
  font-size: 0.92rem;
  color: #344054;
  white-space: nowrap;
}

.activity-log-detail__table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #667085;
  background: #f8fafc;
}

.activity-log-detail__table td strong {
  color: #101828;
}

.users-name-toggle.--active {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

.users-name-toggle.--hidden {
  display: none !important;
}

.users-sort {
  position: relative;
}

.users-sort #usersSortBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.users-sort__label {
  color: #98a2b3;
  font-weight: 500;
}

.users-sort #usersSortBtn.--active {
  background: #eff8ff;
  border-color: #b2ddff;
  color: #175cd3;
}

.users-sort #usersSortBtn.--active .users-sort__label {
  color: #175cd3;
}

.users-sort__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
  padding: 0.35rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.users-sort__menu.--hidden {
  display: none !important;
}

.users-sort__option {
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
}

.users-sort__option:hover {
  background: #f8fafc;
}

.users-sort__option.--active {
  background: #eff8ff;
  color: #175cd3;
}

.users-sort__option.--hidden {
  display: none !important;
}

.users-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  background: #f2f4f7;
  border-radius: 10px;
}

.users-tab {
  border: none;
  background: transparent;
  color: #667085;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.users-tab.--active {
  background: #fff;
  color: #101828;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.users-page table,
.activity-logs-page table,
.procurement-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.activity-logs-page table {
  table-layout: fixed;
}

.activity-logs-page table td:nth-child(1) {
  width: 18%;
}

.activity-logs-page table td:nth-child(2) {
  width: 16%;
}

.activity-logs-page table td:nth-child(3) {
  width: 7.5rem;
}

.activity-logs-page table td:nth-child(4) {
  width: auto;
  overflow: hidden;
}

.users-page table tr td,
.activity-logs-page table tr td,
.procurement-page table tr td {
  padding: 0.85rem 0.75rem;
  font-size: 0.88rem;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  color: #344054;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}

.users-page table tbody tr:nth-child(odd):not(.table__title) td,
.activity-logs-page table tbody tr:nth-child(odd):not(.table__title) td,
.procurement-page table tbody tr:nth-child(odd):not(.table__title) td {
  background-color: #eef1f4;
}

.users-page table tbody tr:nth-child(even):not(.table__title) td,
.activity-logs-page table tbody tr:nth-child(even):not(.table__title) td,
.procurement-page table tbody tr:nth-child(even):not(.table__title) td {
  background-color: #ffffff;
}

.users-page table tr:not(.table__title):hover td,
.activity-logs-page table tr:not(.table__title):hover td,
.procurement-page table tr:not(.table__title):hover td {
  background-color: #e4e9ef;
}

.reports-alerts__table tbody tr:nth-child(odd) td {
  background-color: #eef1f4;
}

.reports-alerts__table tbody tr:nth-child(even) td {
  background-color: #ffffff;
}

.reports-alerts__table tbody tr:hover td {
  background-color: #e4e9ef;
}

.users-page .table__title td,
.activity-logs-page .table__title td,
.procurement-page .table__title td {
  font-weight: 700;
  font-size: 0.72rem;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
  border-bottom: 1px solid #e4e7ec;
  padding: 0.8rem 0.75rem;
}

.users-empty,
.users-muted {
  color: #98a2b3;
  font-size: 0.88rem;
}

.users-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.users-person__avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #eff4ff;
  color: #175cd3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.users-person__avatar.--has-image {
  background: #e4e7ec;
}

.users-person__avatar-img,
.users-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.users-person__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.users-person__meta strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: #101828;
}

.users-person__meta small {
  font-size: 0.78rem;
  color: #98a2b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.users-role-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.88rem;
}

.users-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.users-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 320px;
}

.users-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  background: #eff8ff;
  color: #175cd3;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.users-row {
  cursor: pointer;
}

.users-row:focus-visible td {
  outline: none;
  background: #eff8ff;
}

.users-row:hover td {
  background: #f8fafc;
}

.users-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1.25rem;
}

.users-modal-overlay.--hidden {
  display: none !important;
}

.users-modal {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e4e7ec;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
}

.users-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1rem;
  border-bottom: 1px solid #f2f4f7;
}

.users-modal__header h2 {
  font-size: 1.2rem;
  font-weight: 650;
  color: #101828;
}

.users-modal__subtitle {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: #98a2b3;
}

.users-modal__close {
  border: none;
  background: #f2f4f7;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: #667085;
  flex-shrink: 0;
}

.users-modal__close:hover {
  background: #e4e7ec;
  color: #101828;
}

.users-modal__body {
  padding: 1.1rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.users-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.users-section__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.users-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.9rem;
}

.users-form-grid__full {
  grid-column: 1 / -1;
}

.users-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475467;
}

.users-form-grid input,
.users-form-grid select,
.users-form-grid textarea {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: #101828;
  background: #fff;
  outline: none;
}

.users-form-grid input:focus,
.users-form-grid select:focus,
.users-form-grid textarea:focus {
  border-color: #84caff;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.users-form-grid small {
  font-size: 0.72rem;
  font-weight: 400;
  color: #98a2b3;
}

.users-perm-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.users-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}

.users-choice:has(input:checked) {
  border-color: #b2ddff;
  background: #f5faff;
}

.users-choice input {
  margin-top: 0.15rem;
}

.users-choice span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.users-choice strong {
  font-size: 0.85rem;
  font-weight: 650;
  color: #101828;
}

.users-choice small {
  font-size: 0.72rem;
  color: #98a2b3;
  font-weight: 400;
}

.users-perm-matrix {
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: hidden;
  background: #fcfcfd;
}

.users-perm-group {
  border-bottom: 1px solid #f2f4f7;
}

.users-perm-group:last-child {
  border-bottom: none;
}

.users-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
}

.users-perm-children {
  list-style: none;
  margin: 0;
  padding: 0 0.9rem 0.55rem 1.85rem;
}

.users-perm-child {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.32rem 0;
}

.users-perm-child::before {
  content: "•";
  position: absolute;
  left: -0.9rem;
  color: #98a2b3;
  font-size: 0.95rem;
  line-height: 1;
}

.users-perm-child__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475467;
}

.users-perm-child.--disabled {
  opacity: 0.42;
  pointer-events: none;
}

.users-perm-child.--disabled .users-perm-child__label {
  color: #98a2b3;
}

.users-perm-child input:disabled {
  cursor: not-allowed;
}

.users-perm-row__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #344054;
}

.users-perm-row__abilities {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.users-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: #667085;
  cursor: pointer;
}

.users-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding-top: 0.85rem;
  border-top: 1px solid #f2f4f7;
}

.users-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
}

.users-btn {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.users-btn--ghost {
  background: #fff;
  border-color: #d0d5dd;
  color: #344054;
}

.users-btn--ghost:hover {
  background: #f9fafb;
}

.users-btn--primary {
  background: #1570ef;
  border-color: #1570ef;
  color: #fff;
}

.users-btn--primary:hover {
  background: #175cd3;
}

.users-btn--danger {
  background: #fff;
  border-color: #fecdca;
  color: #b42318;
}

.users-btn--danger:hover {
  background: #fef3f2;
}

.users-btn.--hidden {
  display: none !important;
}

@media screen and (max-width: 720px) {
  .users-form-grid,
  .users-perm-mode {
    grid-template-columns: 1fr;
  }

  .users-perm-row,
  .users-perm-child {
    flex-direction: column;
    align-items: flex-start;
  }

  .users-chips {
    max-width: none;
  }
}

.procurement-page .users-tabs {
  flex-shrink: 0;
}

.procurement-mine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.procurement-mine-toggle__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475467;
  white-space: nowrap;
}

.procurement-mine-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.procurement-mine-toggle__switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #d0d5dd;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.procurement-mine-toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
  transition: transform 0.18s ease;
}

.procurement-mine-toggle input:checked + .procurement-mine-toggle__switch {
  background: #1570ef;
}

.procurement-mine-toggle input:checked + .procurement-mine-toggle__switch::after {
  transform: translateX(18px);
}

.procurement-mine-toggle input:focus-visible + .procurement-mine-toggle__switch {
  outline: 2px solid #84caff;
  outline-offset: 2px;
}

.procurement-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 0 0 0.75rem;
}

.procurement-detail-toolbar__hint {
  font-size: 0.8rem;
  color: #667085;
}

.procurement-detail-toolbar .procurement-actions {
  margin-left: auto;
}

.procurement-page .downloadBtn {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.procurement-page .procurement-list table tbody tr {
  cursor: pointer;
}

.procurement-page .procurement-list table tbody tr.is-selected td {
  background: #eff8ff !important;
}

.procurement-detail-modal {
  max-width: 920px;
  width: min(920px, 96vw);
  max-height: min(86vh, 860px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.procurement-detail-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 0.95rem;
  border-bottom: 1px solid #e4e7ec;
}

.procurement-detail-modal__heading {
  min-width: 0;
}

.procurement-detail-modal__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.7rem;
}

.procurement-detail-modal .confirm-modal__title {
  margin: 0;
  text-align: left;
  font-size: 1.25rem;
}

.procurement-detail-modal .dashboard-activity__badge {
  margin-top: 0;
}

.procurement-detail-modal__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #667085;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.procurement-detail-modal__close:hover {
  background: #f9fafb;
  color: #344054;
  border-color: #d0d5dd;
}

.procurement-detail-meta {
  margin: 0.4rem 0 0;
  color: #667085;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.4;
}

.procurement-detail-meta__chip {
  color: #475467;
}

.procurement-detail-meta__sep {
  color: #d0d5dd;
}

.procurement-detail-body {
  padding: 0.95rem 1.25rem 1rem;
  overflow: auto;
  min-height: 0;
  text-align: left;
  flex: 1;
}

.procurement-detail-table-wrap {
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: auto;
  max-height: min(48vh, 420px);
  background: #fff;
}

.procurement-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.procurement-detail-table .table__title td {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f2f4f7 !important;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #e4e7ec;
}

.procurement-detail-table tbody td {
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  color: #344054;
  border-bottom: 1px solid #f2f4f7;
  vertical-align: middle;
}

.procurement-detail-table tbody tr:nth-child(odd) td {
  background: #f9fafb;
}

.procurement-detail-table tbody tr:nth-child(even) td {
  background: #fff;
}

.procurement-detail-table tbody tr:last-child td {
  border-bottom: none;
}

.procurement-detail-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.procurement-detail-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: #667085;
  white-space: nowrap;
}

.procurement-detail-item {
  font-weight: 600;
  color: #101828;
}

.procurement-detail-size {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #98a2b3;
}

.procurement-detail-modal__footer {
  padding: 0.85rem 1.25rem 1.05rem;
  border-top: 1px solid #e4e7ec;
  background: #f9fafb;
}

.procurement-history-modal {
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
}

.procurement-history-body {
  padding: 0 1.25rem 1.25rem;
  overflow-y: auto;
  min-height: 0;
}

.procurement-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.procurement-history-item {
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  padding: 0.85rem 1rem;
}

.procurement-history-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.procurement-history-item__when {
  font-size: 0.8rem;
  color: #667085;
  white-space: nowrap;
}

.procurement-history-item__desc {
  margin: 0 0 0.25rem;
  color: #101828;
  font-size: 0.92rem;
  line-height: 1.4;
}

.procurement-history-item__who {
  margin: 0 0 0.55rem;
  color: #667085;
  font-size: 0.82rem;
}

.procurement-history-item .activity-changes {
  margin: 0;
}

.procurement-detail-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.procurement-detail-modal__actions .confirm-modal__btn {
  min-width: 0;
  padding: 0.55rem 0.95rem;
}

.procurement-actions {
  margin: 0 0 1rem;
}

.procurement-note {
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.75rem;
}

.procurement-note--danger {
  background: #fef3f2;
  border-color: #fecdca;
}

.procurement-note strong {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475467;
}

.procurement-note--danger strong {
  color: #b42318;
}

.procurement-note p {
  margin: 0.3rem 0 0;
  color: #344054;
  font-size: 0.875rem;
  line-height: 1.45;
}

.procurement-warning {
  color: #b54708;
  margin: 0 0 0.85rem;
}

.procurement-unmatched {
  color: #b42318;
  font-size: 0.75rem;
  font-weight: 600;
}

.procurement-qty-input,
.procurement-reason-input,
.procurement-stock-line input {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: inherit;
}

.procurement-qty-input {
  width: 5.5rem;
}

.procurement-reason-input {
  width: 100%;
  margin: 0 0 0.85rem;
  resize: vertical;
  text-align: left;
}

.confirm-modal--wide {
  max-width: 580px;
  text-align: left;
}

.procurement-manual-modal {
  max-width: 860px;
  width: min(860px, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  max-height: calc(100vh - 1.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.1rem 1.15rem 1rem;
}

.procurement-manual-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.1rem;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.procurement-manual-modal .confirm-modal__title,
.procurement-manual-modal .confirm-modal__message {
  flex-shrink: 0;
}

.procurement-manual-modal .confirm-modal__actions {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0;
  padding: 0.85rem 0 0;
  background: #fff;
  border-top: 1px solid #e4e7ec;
}

.procurement-manual-modal .confirm-modal__title {
  font-size: 1.2rem;
  color: #101828;
}

.procurement-manual-modal .confirm-modal__message {
  font-size: 0.88rem;
  color: #344054;
  margin-bottom: 0.75rem;
}

.procurement-manual-search {
  margin: 0 0 0.85rem;
  border: 1.5px solid #98a2b3;
  border-radius: 10px;
  background: #fff;
  padding: 0.15rem 0.75rem;
}

.procurement-manual-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin: 0 0 0.75rem;
}

.procurement-manual-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.procurement-manual-stock--low {
  color: #b42318;
}

.procurement-manual-search input {
  font-size: 1rem;
  color: #101828;
  font-weight: 500;
}

.procurement-manual-search input::placeholder {
  color: #667085;
}

.procurement-manual-table-wrap {
  flex: 0 1 auto;
  min-height: 8rem;
  height: auto;
  max-height: min(28vh, 16rem);
  overflow: auto;
  border: 1.5px solid #98a2b3;
  border-radius: 10px;
  margin: 0 0 0.65rem;
  background: #fff;
}

.procurement-manual-table {
  width: 100%;
  border-collapse: collapse;
}

.procurement-manual-table .table__title td {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #d0d5dd !important;
  color: #101828;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #98a2b3;
  white-space: nowrap;
}

.procurement-manual-table tbody tr:nth-child(odd) td {
  background: #e4e7ec;
}

.procurement-manual-table tbody tr:nth-child(even) td {
  background: #ffffff;
}

.procurement-manual-table tbody tr:hover td {
  background: #d0d5dd;
}

.procurement-manual-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #c8cdd5;
  vertical-align: middle;
  font-size: 0.95rem;
  color: #101828;
  font-weight: 500;
}

.procurement-manual-table td:first-child {
  font-weight: 700;
  color: #344054;
  white-space: nowrap;
}

.procurement-manual-table .activity-logs-when small {
  color: #475467;
  font-size: 0.8rem;
  font-weight: 500;
}

.procurement-manual-table .procurement-qty-input {
  width: 6.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #101828;
  border: 1.5px solid #667085;
  background: #fff;
  padding: 0.55rem 0.65rem;
}

.procurement-manual-table .procurement-qty-input:focus {
  outline: none;
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.18);
}

.procurement-manual-hint {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #344054;
}

.confirm-modal--wide .confirm-modal__title {
  font-size: 1.35rem;
}

.confirm-modal--wide .confirm-modal__message {
  font-size: 1rem;
}

.procurement-stock-lines {
  display: grid;
  gap: 0.75rem;
  max-height: 380px;
  overflow: auto;
  margin: 0 0 1rem;
}

.procurement-stock-line {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: center;
  text-align: left;
  font-size: 1rem;
}

.procurement-stock-line strong {
  font-size: 1.05rem;
  color: #101828;
}

.procurement-stock-line small {
  display: block;
  margin-top: 0.15rem;
  color: #475467;
  font-size: 0.9rem;
}

.procurement-stock-line input {
  width: 6rem;
  font-size: 1.05rem;
  padding: 0.6rem 0.7rem;
}

.procurement-modal__error {
  color: #b42318;
  margin: 0 0 0.75rem;
}

.procurement-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
}

.procurement-steps__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  background: #f2f4f7;
  color: #475467;
  font-size: 0.78rem;
  font-weight: 700;
}

.procurement-steps__index {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d0d5dd;
  color: #344054;
  font-size: 0.72rem;
}

.procurement-steps__item.is-done {
  background: #ecfdf3;
  color: #067647;
}

.procurement-steps__item.is-done .procurement-steps__index,
.procurement-steps__item.is-current .procurement-steps__index {
  background: currentColor;
  color: #fff;
}

.procurement-steps__item.is-current {
  background: #eff8ff;
  color: #175cd3;
}

.procurement-slip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #344054;
}

.procurement-manual-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
}

.procurement-manual-meta label,
.procurement-manual-meta__wide {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475467;
}

.procurement-manual-meta__label {
  display: block;
  line-height: 1.25;
  color: #344054;
  font-weight: 700;
}

.procurement-manual-meta input,
.procurement-manual-meta select {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font: 500 0.92rem/1.3 inherit;
  color: #101828;
  background: #fff;
}

.procurement-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.procurement-workflow li {
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: #f8fafc;
  min-width: 0;
}

.procurement-workflow li.is-current {
  border-color: #1570ef;
  background: #eff8ff;
}

.procurement-workflow li.is-done {
  border-color: #12b76a;
  background: #ecfdf3;
}

.procurement-workflow strong,
.procurement-workflow span {
  display: block;
}

.procurement-workflow strong {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475467;
}

.procurement-workflow span {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #101828;
  overflow-wrap: anywhere;
}

.procurement-slip-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.75rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
}

.procurement-slip-meta__wide {
  grid-column: 1 / -1;
}

.procurement-slip-meta strong,
.procurement-slip-meta span {
  display: block;
}

.procurement-slip-meta strong {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #667085;
}

.procurement-slip-meta span {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  color: #101828;
}

.confirm-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #344054;
}

.confirm-modal__field select {
  width: 100%;
  border: 1.5px solid #98a2b3;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: 500 0.95rem/1.3 inherit;
  background: #fff;
}

.confirm-modal__hint {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: #667085;
}

.confirm-modal--signature {
  width: min(560px, calc(100vw - 2rem));
}

.signature-pad {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.75rem 0.65rem;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #f9fafb;
}

.signature-pad__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #344054;
}

.signature-pad__tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.signature-pad__upload,
.signature-pad__clear {
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font: 600 0.75rem/1 inherit;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}

.signature-pad__upload:hover,
.signature-pad__clear:hover {
  background: #f2f4f7;
}

.signature-pad__canvas {
  display: block;
  width: 100%;
  height: 160px;
  border: 1.5px dashed #98a2b3;
  border-radius: 8px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.signature-pad__hint {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: #667085;
}

.signature-pad__error {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b42318;
}

.signature-pad__error.--hidden {
  display: none;
}

.procurement-manual-meta__wide {
  grid-column: 1 / -1;
}

.procurement-manual-attach {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.25rem;
}

.procurement-manual-attach__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.procurement-manual-attach__clear {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font: 600 0.78rem/1 inherit;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  flex-shrink: 0;
}

.procurement-manual-attach__clear:hover {
  background: #f2f4f7;
}

.procurement-manual-attach__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 3.75rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 2px dashed #98a2b3;
  border-radius: 10px;
  background: #f9fafb;
  color: #344054;
  text-align: center;
  cursor: pointer;
  font: inherit;
}

.procurement-manual-attach__drop:hover,
.procurement-manual-attach__drop:focus-visible {
  border-color: #175cd3;
  background: #eff8ff;
  outline: none;
}

.procurement-manual-attach__drop.has-file {
  border-style: solid;
  border-color: #d0d5dd;
  background: #fff;
}

.procurement-manual-attach__cta {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #175cd3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.procurement-manual-attach__hint {
  display: block;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #667085;
  overflow-wrap: anywhere;
}

.procurement-manual-attach__preview {
  display: block;
  max-width: min(240px, 100%);
  max-height: 110px;
  width: auto;
  height: auto;
  margin-top: 0.35rem;
  object-fit: contain;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}

.procurement-manual-attach__preview.--hidden,
.procurement-manual-attach__clear.--hidden {
  display: none;
}

.procurement-detail-attachment {
  margin-top: 0.9rem;
  padding: 0.75rem;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
}

.procurement-detail-attachment strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #667085;
}

.procurement-detail-attachment img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 6px;
}

@media screen and (max-width: 960px) {
  .procurement-page .users-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .procurement-steps,
  .procurement-manual-meta,
  .procurement-workflow {
    grid-template-columns: 1fr 1fr;
  }
}

/* ======================= PHONE SUPPORT ======================= */
@media screen and (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  .app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .header {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 52px;
    padding: 0.55rem 0.75rem;
    padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
  }

  .main {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem 0.55rem 1rem;
    overflow: hidden;
  }

  .inventory-app,
  .users-page,
  .activity-logs-page,
  .procurement-page,
  .dashboardUi,
  .calendar-page {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .forecastUi,
  .reports-page {
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .main:has(.forecastUi),
  .main:has(.reports-page) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .module-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
  }

  .users-page .users-panel,
  .activity-logs-page .activity-logs-panel {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
  }

  .inventory-app .product-section,
  .users-page .product-section,
  .activity-logs-page .product-section,
  .procurement-page .product-section {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .forecastUi .product-section,
  .forecastUi .module-body {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .sideBar-ontoggle {
    width: min(280px, 86vw);
    height: 100dvh;
    max-height: 100dvh;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .inventory-app,
  .users-page,
  .activity-logs-page,
  .procurement-page,
  .dashboardUi,
  .calendar-page {
    padding: 0.85rem 0.7rem 1rem;
    border-radius: 12px;
    min-width: 0;
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .forecastUi,
  .reports-page {
    padding: 0.85rem 0.7rem 1rem;
    border-radius: 12px;
    min-width: 0;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .product-section__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .product-section__header__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
  }

  .inventory-context-name {
    font-size: 0.78rem;
  }

  .product-section__header h1 {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .inventory-search__form,
  .inventory-search {
    max-width: none !important;
    width: 100%;
    flex: 1 1 auto;
  }

  .product-section__header__buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .product-section__header__buttons > * {
    flex: 1 1 calc(50% - 0.4rem);
    min-width: 0;
  }

  .product-section__header__buttons .filterDropdown {
    flex: 1 1 100%;
  }

  .addProBtn,
  .stockToggleBtn,
  .editToggleBtn,
  .downloadBtn,
  .filterBtn {
    width: 100%;
    margin: 0;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.65rem 0.7rem;
    min-height: 42px;
  }

  .filterBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .filterBtn img {
    width: 14px;
    height: 14px;
  }

  .filterBtn p {
    font-size: 0.78rem;
    margin: 0;
  }

  .users-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
  }

  .users-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.45rem 0.7rem;
  }

  .reports-summary {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .reports-summary__card {
    padding: 0.7rem 0.65rem;
    min-width: 0;
  }

  .reports-summary__card-label {
    font-size: 0.68rem;
  }

  .reports-summary__card-value {
    font-size: 1.05rem;
  }

  .table-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .table-pagination__meta,
  .table-pagination__controls {
    width: 100%;
    justify-content: space-between;
  }

  .table-pagination__btn,
  .table-pagination__page-input,
  .table-pagination__size-select {
    min-height: 40px;
  }

  .procurement-manual-modal {
    width: min(100vw - 0.75rem, 860px);
    max-height: calc(100dvh - 0.75rem);
    max-height: calc(100vh - 0.75rem);
    padding: 0.85rem 0.8rem 0.75rem;
    border-radius: 12px;
  }

  .procurement-manual-modal .confirm-modal__title {
    font-size: 1.05rem;
  }

  .procurement-manual-modal .confirm-modal__message {
    font-size: 0.8rem;
    margin-bottom: 0.55rem;
  }

  .procurement-manual-meta {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .procurement-manual-actions {
    width: 100%;
  }

  .procurement-manual-actions .editToggleBtn {
    flex: 1 1 calc(50% - 0.35rem);
    font-size: 0.72rem;
    padding: 0.55rem 0.45rem;
    min-height: 40px;
  }

  .procurement-manual-table-wrap {
    min-height: 7rem;
    max-height: min(34vh, 14rem);
  }

  .procurement-manual-modal .confirm-modal__actions {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .procurement-manual-modal .confirm-modal__btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .procurement-overlay.is-open {
    padding: 0.4rem;
    align-items: flex-end;
  }

  .procurement-detail-modal {
    width: min(100vw - 0.75rem, 720px);
    max-height: calc(100dvh - 0.75rem);
    max-height: calc(100vh - 0.75rem);
    border-radius: 14px 14px 10px 10px;
  }

  .procurement-detail-modal__header,
  .procurement-detail-body,
  .procurement-detail-modal__footer {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .procurement-detail-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .procurement-detail-modal__actions .confirm-modal__btn {
    flex: 1 1 calc(50% - 0.4rem);
    min-height: 42px;
  }

  .procurement-detail-table-wrap {
    max-height: min(42vh, 280px);
  }

  .procurement-detail-table {
    min-width: 520px;
  }

  .procurement-page .product-section,
  .issuance-page .product-section,
  .users-page .product-section,
  .activity-logs-page .product-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .procurement-page .product-section-table,
  .issuance-page .product-section-table,
  .users-page .product-section-table,
  .activity-logs-page .product-section-table {
    min-width: 640px;
  }

  .procurement-steps,
  .procurement-workflow {
    grid-template-columns: 1fr;
  }

  .procurement-qty-input {
    min-height: 40px;
    font-size: 16px; /* avoid iOS zoom */
  }

  .addProSection {
    padding: 0.5rem;
  }

  .addProModal {
    width: min(96vw, 520px) !important;
    margin: 0.5rem auto !important;
    max-height: calc(100dvh - 1rem);
  }

  .confirm-modal {
    width: min(100vw - 1rem, 420px);
    max-width: calc(100vw - 1rem);
  }

  .confirm-modal--wide,
  .confirm-modal--signature {
    width: min(100vw - 0.75rem, 560px);
    max-height: calc(100dvh - 0.75rem);
  }

  .confirm-modal__actions {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .confirm-modal__btn {
    min-height: 44px;
    flex: 1 1 auto;
  }

  .signature-pad__canvas {
    width: 100%;
    max-width: 100%;
    touch-action: none;
  }

  .signature-pad__tools {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .download-options-modal {
    width: min(100vw - 0.75rem, 720px);
    max-height: calc(100dvh - 0.75rem);
    border-radius: 14px;
  }

  .download-options-modal__content,
  .download-options-modal--wide .download-options-modal__content {
    grid-template-columns: 1fr;
  }

  .download-options-modal__footer {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .download-options-btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .reportDownloadMenu {
    z-index: 1300;
  }

  .inventoryFilterPanel,
  .downloadMenu {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .dashboardUi__main {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .login-container {
    min-height: 100dvh;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

@media screen and (max-width: 480px) {
  .reports-summary {
    grid-template-columns: 1fr;
  }

  .product-section__header__buttons > * {
    flex: 1 1 100%;
  }

  .dashboardUi__main {
    grid-template-columns: 1fr;
  }

  .procurement-manual-actions .editToggleBtn {
    flex: 1 1 100%;
  }

  .procurement-detail-modal__actions .confirm-modal__btn {
    flex: 1 1 100%;
  }

  .confirm-modal--signature {
    width: calc(100vw - 0.5rem);
  }
}