:root {
  --app-font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --green: #38c27d;
  --green-soft: #dcf8ea;
  --ink: #20313a;
  --muted: #7e8a94;
  --line: #edf1f4;
  --panel: #ffffff;
  --page: #F6F7F3;
  --sidebar: #fbfcfd;
  --field: #ffffff;
  --field-soft: #f4f6f8;
  --shadow: rgba(36, 55, 70, .05);
  --auth-green-900: #03170e;
  --auth-green-800: #06351f;
  --auth-green-700: #0a5a32;
  --auth-green-500: #1fa855;
  --auth-green-300: #6de28f;
  --auth-text: #111d18;
  --auth-muted: #6a746f;
  --auth-line: #cbd8cf;
  --auth-radius: 12px;
  --auth-shadow: 0 18px 42px rgba(4, 73, 39, .18);
}

body[data-theme="dark"] {
  --green: #42d991;
  --green-soft: #123829;
  --ink: #e8eef2;
  --muted: #9aa8b5;
  --line: #273542;
  --panel: #17212b;
  --page: #0f151c;
  --sidebar: #121b24;
  --field: #101922;
  --field-soft: #1d2934;
  --shadow: rgba(0, 0, 0, .25);
  color-scheme: dark;
}

:where([hidden]) {
  display: none !important;
}

/* Compact reports workspace */
#reportsView{background:#fff;color:#171717}
#reportsView .reports-page{width:min(1180px,100%);margin:0 auto;padding:22px 18px 34px;display:grid;gap:16px}
.reports-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.reports-page-header h1{margin:0 0 3px;color:#171717;font-size:30px;line-height:1;letter-spacing:-.025em}
.reports-page-header p,.reports-page-header>span{margin:0;color:#525252;font-size:12px}
.reports-page-header>span{padding-top:8px;white-space:nowrap}
#reportsView .report-category-tabs{display:flex;gap:2px;padding:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
#reportsView .report-category-tab{position:relative;min-width:max-content;padding:10px 14px 11px;border:0;border-radius:0;color:#303030;background:transparent;font-size:12px;font-weight:600}
#reportsView .report-category-tab.active{color:#111;background:transparent}
#reportsView .report-category-tab.active::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:#171717}
#reportsView .report-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#reportsView .report-card{min-height:108px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:15px;border:1px solid #d7d7d7;border-radius:9px;color:#171717;background:#fff;box-shadow:none;text-align:left}
#reportsView .report-card.active{border-color:#3182f6;background:#eaf3ff;box-shadow:none}
#reportsView .report-card>span{width:18px;height:18px;display:grid;place-items:center;color:#3b3b3b;background:transparent}
#reportsView .report-card.active>span{color:#2674d9}
#reportsView .report-card svg{width:15px;height:15px}
#reportsView .report-card strong{font-size:13px;line-height:1.2}
#reportsView .report-card small{max-width:230px;color:#3f3f3f;font-size:11px;line-height:1.35}
#reportsView .report-workspace{padding:18px;border:1px solid #d7d7d7;border-radius:9px;background:#fff;box-shadow:none}
#reportsView .report-workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:12px}
#reportsView .report-workspace-head h2{margin:0 0 2px;font-size:15px;color:#171717}
#reportsView .report-workspace-head p{margin:0;color:#3f3f3f;font-size:11px}
#reportsView .report-export-actions{display:flex;gap:8px}
#reportsView .report-export-actions .secondary,#reportsView .report-search-row .secondary{min-height:31px;padding:6px 13px;border:1px solid #bdbdbd;border-radius:7px;color:#171717;background:#fff;box-shadow:none;font-size:12px}
#reportsView .report-export-actions svg{width:13px;height:13px}
#reportsView .report-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 9px}
#reportsView .report-filters label{display:grid;gap:5px;color:#333;font-size:10px}
#reportsView .report-filters input,#reportsView .report-filters select{width:100%;height:32px;padding:5px 10px;border:1px solid #d1d1d1;border-radius:6px;color:#171717;background:#fff;font-size:12px}
#reportsView .report-apply-filter{display:none}
#reportsView .report-search-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:11px}
#reportsView .report-search{min-height:32px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #d1d1d1;border-radius:6px;background:#fff}
#reportsView .report-search svg{width:13px;height:13px;color:#777}
#reportsView .report-search input{height:30px;padding:0;border:0;outline:0;font-size:12px}
#reportsView .report-table-wrap{overflow-x:auto;border:0;border-top:1px solid #d9d9d9;border-radius:0;box-shadow:none}
#reportsView .report-table{width:100%;min-width:650px;border-collapse:collapse}
#reportsView .report-table th,#reportsView .report-table td{padding:8px 10px;border:0;border-bottom:1px solid #dedede;color:#171717;background:#fff;font-size:10.5px;line-height:1.3;text-align:left;white-space:normal}
#reportsView .report-table th{color:#404040;font-size:10px;font-weight:600}
#reportsView .report-pagination{justify-content:flex-start;margin-top:8px;color:#555;font-size:10px}
#reportsView .report-pagination .page-btn{display:none}
#reportsView .legacy-reports-section{display:grid;gap:12px;padding:18px;border:1px solid #d7d7d7;border-radius:9px;background:#fff}
#reportsView .legacy-report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
#reportsView .legacy-report-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
#reportsView .legacy-report-filters label{display:grid;gap:5px;color:#333;font-size:10px}
#reportsView .legacy-report-filters input,#reportsView .legacy-report-filters select{width:100%;height:32px;padding:5px 10px;border:1px solid #d1d1d1;border-radius:6px;color:#171717;background:#fff;font-size:12px}
#reportsView .legacy-report-table{min-width:940px}
#reportsView .legacy-report-actions{display:flex;gap:6px}
#reportsView .legacy-report-actions .tiny{width:28px;height:28px;display:inline-grid;place-items:center;padding:0;border:1px solid #d1d1d1;border-radius:6px;background:#fff;color:#171717}
#reportsView .legacy-report-actions svg{width:13px;height:13px}
@media(max-width:760px){#reportsView .report-library{grid-template-columns:1fr}#reportsView .report-filters,#reportsView .legacy-report-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#reportsView .legacy-report-kpis{grid-template-columns:1fr}#reportsView .report-workspace-head{flex-direction:column}.reports-page-header{flex-direction:column;gap:6px}.reports-page-header>span{padding-top:0}}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--app-font);
  color: var(--ink);
  background: var(--page);
}

button,
input,
select,
textarea,
table {
  font-family: var(--app-font);
}

.app-shell.is-booting .view:not(#dashboardView) {
  visibility: hidden;
}

.app-shell.is-booting #dashboardView {
  display: block;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 54%) minmax(420px, 46%);
  background: #fff;
  border-top: 8px solid #30343a;
}

.auth-marketing-panel {
  position: relative;
  min-height: calc(100vh - 8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  color: #fff;
  background:
    radial-gradient(circle at 24% 28%, rgba(44, 196, 98, .33), transparent 34%),
    linear-gradient(115deg, var(--auth-green-800) 0%, var(--auth-green-900) 82%);
}

.auth-marketing-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .45));
}

.auth-marketing-panel > * {
  position: relative;
  z-index: 1;
}

.auth-brand-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.auth-brand-block img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #52d879;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .26);
}

.auth-brand-block span {
  display: block;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.auth-brand-block strong {
  display: block;
  margin-top: 5px;
  color: #f7fff9;
  font-size: clamp(26px, 4vw, 54px);
  line-height: .95;
}

.auth-marketing-copy {
  max-width: 560px;
  margin: clamp(68px, 11vh, 130px) 0 auto;
}

.auth-marketing-copy h1 {
  margin: 0;
  max-width: 540px;
  color: #f7fff9;
  font-size: clamp(34px, 4.7vw, 58px);
  line-height: 1.04;
}

.auth-marketing-copy p {
  max-width: 480px;
  margin: 26px 0 0;
  color: rgba(239, 255, 244, .72);
  font-size: 16px;
  line-height: 1.7;
}

.auth-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
  margin-top: 26px;
}

.auth-pill-list span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid rgba(109, 226, 143, .34);
  border-radius: 999px;
  color: rgba(247, 255, 249, .88);
  background: rgba(8, 84, 43, .42);
  font-size: 13px;
  font-weight: 800;
}

.auth-trust-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  color: rgba(239, 255, 244, .74);
  font-size: 14px;
  font-weight: 700;
}

.auth-trust-notes span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.auth-trust-notes span::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid var(--auth-green-300);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(109, 226, 143, .08);
}

.auth-form-panel {
  min-height: calc(100vh - 8px);
  display: grid;
  place-items: center;
  padding: 48px 32px;
  background: #fff;
}

.auth-card {
  width: min(100%, 440px);
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.auth-brand {
  display: block;
  margin-bottom: 14px;
}

.auth-brand img {
  display: none;
}

.auth-brand span {
  display: block;
  color: #08783d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 14px;
}

.auth-brand h1 {
  margin: 0;
  color: var(--auth-text);
  font-size: 30px;
  line-height: 1.15;
}

.auth-intro {
  margin: 0 0 30px;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius);
  background: #fff;
  color: var(--auth-text);
  font: inherit;
  padding: 12px 16px;
  outline: none;
  box-shadow: 0 2px 10px rgba(17, 29, 24, .03);
}

.auth-form input:focus {
  border-color: var(--auth-green-500);
  box-shadow: 0 0 0 4px rgba(31, 168, 85, .14);
}

.auth-password-field {
  position: relative;
  display: block;
}

.auth-password-field input {
  padding-right: 52px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #0c9a83;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
}

.auth-password-toggle svg {
  width: 18px;
  height: 18px;
}

.auth-password-toggle:hover,
.auth-password-toggle:active {
  transform: translateY(-50%);
  background: transparent;
  box-shadow: none;
}

.auth-password-toggle:focus-visible {
  outline: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(12, 154, 131, 0.18);
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  min-height: 50px;
  border-radius: var(--auth-radius);
  background: linear-gradient(90deg, #20ad58, #0b7437);
  box-shadow: var(--auth-shadow);
}

.auth-link-btn {
  width: max-content;
  border: 0;
  background: transparent;
  color: #0c9a83;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.auth-google {
  width: 100%;
  min-height: 50px;
  color: var(--auth-text);
  background: #fff;
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius);
}

.google-only-auth {
  margin-top: 0;
}

.google-only-auth .auth-google {
  min-height: 50px;
  color: #fff;
  background: linear-gradient(90deg, #20ad58, #0b7437);
  border: 0;
  font-size: 15px;
  font-weight: 800;
  box-shadow: var(--auth-shadow);
}

.google-only-auth .auth-google:hover,
.google-only-auth .auth-google:focus-visible {
  background: linear-gradient(90deg, #25b961, #086c33);
  box-shadow: 0 20px 48px rgba(20, 150, 73, .26);
}

.auth-switch {
  margin: 22px 0 0;
  color: var(--auth-muted);
  font-size: 14px;
  text-align: center;
}

.auth-switch a {
  color: #08783d;
  font-weight: 800;
  text-decoration: none;
}

.auth-form #errorMsg,
.auth-form #successMsg {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--auth-radius);
  font-size: 13px !important;
  line-height: 1.45;
}

.auth-form #errorMsg {
  color: #9b1c1c !important;
  background: #fff1f1;
  border: 1px solid #ffd0d0;
}

.auth-form #successMsg {
  color: #076b34 !important;
  background: #edf9f1;
  border: 1px solid #c9efd6;
}

.auth-legal-links {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 0;
  color: #8a948f;
  font-size: 12px;
}

.auth-legal-links a {
  color: #56625c;
  text-decoration: none;
}

.auth-legal-links a:hover {
  color: #08783d;
}

@media (max-width: 980px) {
  .auth-page {
    grid-template-columns: 1fr;
    background:
      linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .96)),
      linear-gradient(135deg, var(--auth-green-800), var(--auth-green-900));
  }

  .auth-marketing-panel {
    min-height: auto;
    padding: 28px 24px;
  }

  .auth-marketing-copy {
    margin: 34px 0 0;
  }

  .auth-marketing-copy h1 {
    font-size: 34px;
  }

  .auth-marketing-copy p,
  .auth-pill-list {
    display: none;
  }

  .auth-trust-notes {
    margin-top: 28px;
  }

  .auth-form-panel {
    min-height: auto;
    padding: 46px 22px 34px;
  }
}

@media (max-width: 640px) {
  .auth-page {
    display: block;
    border-top-width: 6px;
  }

  .auth-marketing-panel {
    display: none;
  }

  .auth-form-panel {
    min-height: calc(100vh - 6px);
    place-items: start center;
    padding: 64px 20px 28px;
  }

  .auth-brand h1 {
    font-size: 26px;
  }

  .auth-intro {
    margin-bottom: 24px;
  }
}

.app-shell {
  min-height: 100vh;
  display: flex;
  border-top: 2px solid #0c9a83;
}

.sidebar {
  width: 222px;
  flex: 0 0 222px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 22px 18px;
  transition: width .18s ease, flex-basis .18s ease, padding .18s ease;
}

.sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.sidebar-auth-skeleton {
  min-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 28px;
}

.sidebar-skeleton-brand,
.sidebar-skeleton-card,
.sidebar-skeleton-profile {
  display: grid;
  align-items: center;
  column-gap: 10px;
}

.sidebar-skeleton-brand,
.sidebar-skeleton-profile {
  grid-template-columns: 32px 1fr;
}

.sidebar-skeleton-card {
  grid-template-columns: 38px 1fr;
  row-gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.sidebar-skeleton-card .skeleton-circle {
  grid-row: span 2;
}

.sidebar-skeleton-nav {
  display: grid;
  align-content: start;
  gap: 18px;
  padding-top: 14px;
}

.sidebar-skeleton-nav .skeleton-line.wide {
  height: 32px;
  border-radius: 9px;
}

.sidebar-skeleton-profile {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
  min-height: 32px;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--green);
  display: grid;
  place-items: center;
}

.brand svg,
.nav-item svg,
.nav-section-toggle svg,
.topbar svg,
.page-title svg,
.card svg {
  width: 18px;
  height: 18px;
}

.sidebar-toggle,
.collapse-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.sidebar-toggle:hover {
  background: var(--green-soft);
}

.app-shell.sidebar-collapsed .sidebar {
  width: 70px;
  flex-basis: 70px;
  padding: 22px 16px;
  overflow-x: hidden;
  scrollbar-width: none;
}

.app-shell.sidebar-collapsed .sidebar-auth-skeleton {
  gap: 28px;
}

.app-shell.sidebar-collapsed .sidebar-auth-skeleton .skeleton-line,
.app-shell.sidebar-collapsed .sidebar-skeleton-card .skeleton-line {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-skeleton-brand,
.app-shell.sidebar-collapsed .sidebar-skeleton-profile {
  grid-template-columns: 1fr;
  justify-items: center;
}

.app-shell.sidebar-collapsed .sidebar-skeleton-card {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 12px 0;
}

.app-shell.sidebar-collapsed .brand {
  justify-content: center;
  position: relative;
}

.app-shell.sidebar-collapsed .brand span,
.app-shell.sidebar-collapsed .nav-item > span:last-child,
.app-shell.sidebar-collapsed .nav-section-toggle > span:not(.nav-section-icon),
.app-shell.sidebar-collapsed .nav-section-toggle > svg {
  display: none;
}

.app-shell.sidebar-collapsed .side-nav {
  gap: 14px;
  margin-top: 48px;
}

.app-shell.sidebar-collapsed .nav-section {
  justify-items: center;
  padding-top: 14px;
}

.app-shell.sidebar-collapsed .nav-section-toggle {
  width: 32px;
  min-height: 32px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.app-shell.sidebar-collapsed .nav-item,
.app-shell.sidebar-collapsed .nav-item:not(.has-more) {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.app-shell.sidebar-collapsed .nav-icon,
.app-shell.sidebar-collapsed .nav-section-icon {
  margin: 0 auto;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(20, 35, 45, .08);
  color: #5b6670;
}

.app-shell.sidebar-collapsed .sidebar:hover .sidebar-toggle {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 0 0 6px rgba(56, 194, 125, .12), 0 10px 22px rgba(20, 35, 45, .14);
}

.app-shell.sidebar-collapsed .sidebar-toggle:hover {
  color: var(--green);
  background: var(--green-soft);
  border-color: #b9efd3;
  box-shadow: 0 0 0 8px rgba(56, 194, 125, .16), 0 12px 26px rgba(56, 194, 125, .20);
  transform: translateY(-1px);
}

.side-nav {
  display: grid;
  gap: 18px;
  margin-top: 42px;
}

.nav-section {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.nav-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.nav-section.single {
  gap: 0;
}

.nav-section-toggle {
  width: 100%;
  min-height: 30px;
  display: grid;
  grid-template-columns: 32px 1fr 15px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  padding: 0 4px 0 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.nav-section-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #b8c0c7;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.nav-section-toggle > svg {
  width: 15px;
  height: 15px;
  transition: transform .16s ease;
}

.nav-section-toggle:hover {
  color: #16895e;
  background: var(--green-soft);
}

.nav-section-toggle:hover .nav-section-icon {
  color: var(--green);
}

.nav-section.collapsed .nav-section-toggle > svg {
  transform: rotate(-90deg);
}

.nav-section-items {
  display: grid;
  gap: 6px;
}

.nav-section.collapsed .nav-section-items {
  display: none;
}

.nav-item {
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  min-height: 39px;
  display: grid;
  grid-template-columns: 32px 1fr 14px;
  align-items: center;
  gap: 10px;
  color: #6f7b84;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.nav-item:not(.has-more) {
  grid-template-columns: 32px 1fr;
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #b8c0c7;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.nav-item:hover .nav-icon {
  color: var(--green);
  background: var(--green-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(56, 194, 125, .10);
  transform: translateY(-1px);
}

.nav-item.active {
  color: #15a66b;
}

.nav-item.active .nav-icon {
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.nav-item.active:hover .nav-icon {
  box-shadow: 0 0 0 7px rgba(56, 194, 125, .14), 0 10px 22px rgba(56, 194, 125, .18);
}

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

.topbar {
  height: 66px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  box-shadow: 0 1px 0 rgba(20, 35, 45, .04);
}

.search {
  width: min(330px, 44vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9aa5ad;
  background: var(--field-soft);
  border-radius: 22px;
  padding: 0 16px;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn,
.dots {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.notification {
  position: relative;
}


.profile-wrap {
  position: relative;
  display: inline-block;
}

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  display: none;
  padding: 6px 0;
  z-index: 60;
}

.profile-menu.show {
  display: block;
}

.profile-menu-item {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.profile-menu-item:hover {
  background: var(--field-soft);
}

.notification.has-unread::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: 2px;
  top: 1px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff4747;
}

.notification-center {
  position: fixed;
  z-index: 40;
  top: 54px;
  right: 92px;
  width: min(608px, calc(100vw - 32px));
  max-height: min(768px, calc(100vh - 76px));
  display: none;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}

.notification-center.show {
  display: block;
}

.notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 26px 18px;
}

.notification-head h2 {
  font-size: 28px;
  line-height: 1;
}

.notification-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.unread-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}

.unread-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.unread-toggle span {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #4a4f57;
  position: relative;
  cursor: pointer;
}

.unread-toggle span::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  transition: transform .16s ease;
}

.unread-toggle input:checked + span::before {
  transform: translateX(16px);
}

.notification-tabs {
  display: flex;
  gap: 18px;
  margin: 0 26px;
  border-bottom: 1px solid var(--line);
}

.notification-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5b626b;
  cursor: pointer;
  padding: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

.notification-tab.active {
  color: #0c66e4;
  border-bottom-color: #0c66e4;
}

.notification-list {
  max-height: calc(min(768px, 100vh - 76px) - 118px);
  overflow-y: auto;
  padding: 18px 26px 26px;
  scrollbar-color: #8a8a8a #f1f3f5;
}

.notification-list::-webkit-scrollbar {
  width: 12px;
}

.notification-list::-webkit-scrollbar-track {
  background: #f1f3f5;
}

.notification-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #8a8a8a;
}

.notification-section-label {
  margin-bottom: 16px;
  color: #5f6974;
  font-size: 13px;
  font-weight: 800;
}

.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 10px;
  gap: 15px;
  padding: 8px 0 22px;
}

.notification-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #0c66e4;
  font-size: 14px;
  font-weight: 800;
}

.notification-avatar.teal {
  background: #10a8bd;
  color: #092f38;
}

.notification-avatar.green {
  background: #dcf8ea;
  color: #16895e;
}

.notification-body strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.notification-body p {
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.notification-meta {
  display: block;
  margin-top: 3px;
  color: #5f6974;
  font-size: 13px;
}

.notification-reply {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.notification-reply p {
  padding: 12px;
}

.notification-reply-actions {
  display: grid;
  grid-template-columns: repeat(4, 42px) 1fr auto;
  align-items: center;
  border-top: 1px solid var(--line);
}

.notification-reply-actions button {
  min-height: 32px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: #0c66e4;
  cursor: pointer;
  font-weight: 700;
}

.notification-reply-actions .reply-btn {
  justify-self: start;
  border-right: 0;
  color: #5b626b;
  padding: 0 14px;
}

.notification-reply-actions .thread-btn {
  border-right: 0;
  padding: 0 10px;
}

.notification-dot {
  width: 9px;
  height: 9px;
  margin-top: 11px;
  border-radius: 50%;
  background: #0c66e4;
}

.notification-item.read .notification-dot {
  background: transparent;
}

.notification-empty {
  padding: 48px 0;
  color: #6d7881;
  text-align: center;
  font-weight: 700;
}

.profile {
  height: 40px;
  border: 0;
  width: 40px;
  overflow: hidden;
  border-radius: 999px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: width .18s ease, background .18s ease, padding .18s ease;
}

.profile:hover,
.profile:focus-visible {
  width: 226px;
  background: var(--field-soft);
  padding: 0 12px 0 6px;
}

.profile-name,
.profile > svg {
  opacity: 0;
  flex: 0 0 auto;
  transition: opacity .12s ease;
}

.profile-name {
  font-size: 14px;
  font-weight: 500;
}

.profile:hover .profile-name,
.profile:hover > svg,
.profile:focus-visible .profile-name,
.profile:focus-visible > svg {
  opacity: 1;
}

.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 3px solid #e3f7ee;
  border-radius: 50%;
  background: #2c3c3d;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  margin: 0 auto;
}

.profile:hover .avatar,
.profile:focus-visible .avatar {
  margin: 0;
}

.page-head {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: var(--panel);
}

.app-shell[data-active-view="requisition"] .page-head {
  display: none;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 50%;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 18px;
  font-weight: 700;
}

.filters {
  display: flex;
  gap: 12px;
}

.filters button {
  height: 32px;
  border: 0;
  border-radius: 4px;
  color: #5e6971;
  background: #f2f4f6;
  padding: 0 18px;
  font-size: 12px;
  cursor: pointer;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  padding: 20px;
}

.dashboard-card {
  border-radius: 8px;
  min-height: 0;
  position: relative;
  overflow: visible;
}

.dashboard-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 8px;
}

.stat-card {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #006958;
  background: #dff6ef;
}

.stat-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.3;
}

.stat-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.stat-card:nth-child(5n+2) .stat-icon,
.stat-card:nth-child(5n+1):nth-child(n+6) .stat-icon {
  color: #0d5592;
  background: #e6f3ff;
}

.stat-card:nth-child(5n+3) .stat-icon,
.stat-card:nth-child(5n+4):nth-child(n+14) .stat-icon {
  color: #2f6f1f;
  background: #e6f2da;
}

.stat-card:nth-child(5n+4) .stat-icon,
.stat-card:nth-child(5n+2):nth-child(n+7) .stat-icon {
  color: #a66510;
  background: #fff0d9;
}

.stat-card:nth-child(5n) .stat-icon {
  color: #8b381d;
  background: #faebe6;
}

.stat-card:nth-child(11) .stat-icon {
  color: #5a4fd8;
  background: #eeeeff;
}

.stat-card:hover,
.stat-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(56, 194, 125, .42);
  box-shadow: 0 8px 18px rgba(36, 55, 70, .08);
  outline: 0;
}

.stat-copy span {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-copy strong {
  color: #16895e;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.dashboard-table-card {
  grid-column: span 3;
}

.activity-card {
  grid-column: 1 / -1;
}

.card {
  background: var(--panel);
  border-radius: 13px;
  box-shadow: 0 16px 35px var(--shadow);
  padding: 23px 22px;
}

.card.dashboard-card {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.kebab-wrap {
  position: relative;
  flex: 0 0 auto;
}

.kebab-wrap .dots {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.kebab-wrap .dots:hover,
.kebab-wrap .dots[aria-expanded="true"] {
  color: var(--green);
  background: var(--green-soft);
}

.kebab-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 15;
  width: 210px;
  display: none;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 42px rgba(20, 35, 45, .16);
}

.kebab-menu.show {
  display: grid;
  gap: 2px;
}

.kebab-menu button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.kebab-menu button:hover {
  color: #16895e;
  background: var(--green-soft);
}

.wide-card {
  grid-column: span 3;
  min-height: 226px;
}

.small-card {
  grid-column: span 2;
  min-height: 226px;
}

.chart-card {
  grid-column: 1 / -1;
  min-height: 280px;
  padding-bottom: 16px;
}

.card-head,
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-card .card-head {
  min-height: 45px;
  padding: 0 16px;
  border-bottom: 1px solid #d9d9d9;
}

h2 {
  font-size: 16px;
  font-weight: 700;
}

.dashboard-card h2 {
  color: #111;
  font-size: 15px;
  font-weight: 800;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 34px;
  column-gap: 30px;
  margin-top: 23px;
}

.compact-overview {
  row-gap: 28px;
  column-gap: 22px;
}

.metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.metric-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.metric p,
.summary-tile p,
.detail-list span {
  color: #6d7881;
  font-size: 13px;
  line-height: 1.35;
}

.metric strong {
  display: block;
  margin-top: 2px;
  font-size: 27px;
  line-height: 1;
  font-weight: 800;
}

.summary-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.summary-kpis div {
  min-height: 92px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  border: 1px solid rgba(56, 194, 125, .16);
  border-radius: 8px;
  background: #f0fbf6;
  padding: 16px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.summary-kpis div:hover,
.summary-kpis div:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(56, 194, 125, .36);
  box-shadow: 0 14px 30px rgba(36, 55, 70, .10);
  outline: 0;
}

.summary-kpis div:nth-child(2) {
  border-color: rgba(243, 176, 49, .24);
  background: #fff8e6;
}

.summary-kpis div:nth-child(3) {
  border-color: rgba(42, 160, 145, .22);
  background: #eefbf9;
}

.summary-kpis div:nth-child(4) {
  border-color: rgba(255, 121, 80, .22);
  background: #fff0e9;
}

.summary-kpis div:nth-child(5) {
  border-color: rgba(11, 168, 236, .22);
  background: #edf9ff;
}

.summary-kpis div:nth-child(6) {
  border-color: rgba(231, 111, 127, .24);
  background: #fff0f2;
}

.summary-kpis span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.summary-kpis strong {
  color: #16895e;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.summary-kpis div:nth-child(2) strong {
  color: #b77400;
}

.summary-kpis div:nth-child(3) strong {
  color: #168070;
}

.summary-kpis div:nth-child(4) strong {
  color: #d95c32;
}

.summary-kpis div:nth-child(5) strong {
  color: #0787c0;
}

.summary-kpis div:nth-child(6) strong {
  color: #c7475b;
}

.procurement-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-scroll {
  overflow-x: auto;
  margin-top: 0;
}

.dashboard-scroll table {
  min-width: 0;
  width: 100%;
  border-collapse: collapse;
}

.dashboard-scroll thead th {
  display: none;
}

.dashboard-scroll tbody tr {
  border-bottom: 1px solid #e4e4e4;
}

.dashboard-scroll tbody tr:last-child {
  border-bottom: 0;
}

.dashboard-scroll tbody td {
  padding: 0;
  border: 0;
}

.dashboard-feed-row {
  min-height: 61px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
}

.dashboard-feed-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-feed-copy strong,
.dashboard-feed-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-feed-copy strong {
  color: #111;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

.dashboard-feed-copy span {
  color: #4f4336;
  font-size: 12px;
  line-height: 1.2;
}

.activity-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 170px;
  font-weight: 800;
}

.activity-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #006958;
  background: #dff6ef;
}

.activity-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.dashboard-scroll tbody tr:nth-child(3n+2) .activity-icon {
  color: #0d5592;
  background: #e6f3ff;
}

.dashboard-scroll tbody tr:nth-child(3n+3) .activity-icon {
  color: #2f6f1f;
  background: #e6f2da;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: #fafafa;
}

body[data-theme="dark"] .summary-kpis div {
  border-color: rgba(66, 217, 145, .24);
  background: #123829;
}

body[data-theme="dark"] .summary-kpis div:nth-child(2) {
  border-color: rgba(243, 176, 49, .26);
  background: #33270d;
}

body[data-theme="dark"] .summary-kpis div:nth-child(3) {
  border-color: rgba(42, 160, 145, .32);
  background: #113633;
}

body[data-theme="dark"] .summary-kpis div:nth-child(4) {
  border-color: rgba(255, 121, 80, .28);
  background: #3a2119;
}

body[data-theme="dark"] .summary-kpis div:nth-child(5) {
  border-color: rgba(11, 168, 236, .28);
  background: #102f3f;
}

body[data-theme="dark"] .summary-kpis div:nth-child(6) {
  border-color: rgba(231, 111, 127, .28);
  background: #3a1d26;
}

body[data-theme="dark"] .summary-kpis strong,
body[data-theme="dark"] .summary-kpis div:nth-child(2) strong,
body[data-theme="dark"] .summary-kpis div:nth-child(3) strong,
body[data-theme="dark"] .summary-kpis div:nth-child(4) strong,
body[data-theme="dark"] .summary-kpis div:nth-child(5) strong,
body[data-theme="dark"] .summary-kpis div:nth-child(6) strong {
  color: var(--ink);
}

body[data-theme="dark"] .stat-card {
  border-color: rgba(66, 217, 145, .20);
  background: var(--panel);
}

body[data-theme="dark"] .stat-card strong {
  color: var(--ink);
}

body[data-theme="dark"] .dashboard-scroll thead th {
  background: #123829;
  color: #bff4d8;
}

@media (max-width: 1280px) {
  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.small-card .metric {
  gap: 10px;
}

.small-card .metric-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.small-card .metric strong {
  font-size: 25px;
}

.blue { color: #0ba8ec; background: #e4f6ff; }
.yellow { color: #f3b031; background: #fff4d7; }
.coral { color: #ff7950; background: #ffe8dd; }
.teal { color: #2aa091; background: #ddf4f2; }
.purple { color: #bb54e8; background: #f4ddff; }
.rose { color: #e76f7f; background: #ffe2e5; }
.pink { color: #c55387; background: #f8e4ed; }
.cyan { color: #1ab7e7; background: transparent; }
.green { color: var(--green); background: transparent; }

.admin-only[hidden] {
  display: none !important;
}

.nav-item[hidden],
.nav-section[hidden] {
  display: none !important;
}

.tile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}

.summary-tile {
  min-height: 139px;
  border-radius: 10px;
  background: #f6f6f6;
  padding: 22px 16px 16px;
}

.tile-icon {
  width: 37px;
  height: 37px;
  margin-bottom: 18px;
  stroke-width: 2.3;
}

.umbrella {
  display: block;
  font-size: 39px;
  line-height: 1;
  margin-bottom: 16px;
}

.summary-tile strong {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.detail-list {
  display: grid;
  margin-top: 15px;
}

.detail-list div {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.detail-list div:last-child {
  border-bottom: 0;
}

.detail-list strong {
  font-size: 23px;
  font-weight: 800;
}

.legend {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 78px;
  color: #6d7881;
  font-size: 13px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sales-dot { background: #16a9ea; }
.purchase-dot { background: #ff9477; }

.chart-wrap {
  position: relative;
  height: 220px;
  margin-top: 18px;
}

.view {
  display: none;
  padding: 22px;
}

.view.active {
  display: block;
}

.view.active#dashboardView {
  padding: 0;
}

.toast {
  position: fixed;
  right: 24px;
  top: 84px;
  z-index: 2147483000;
  max-width: 360px;
  min-width: 240px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
  color: #166534;
  background: #dcfce7;
  box-shadow: 0 16px 35px rgba(36, 55, 70, .12);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: .2s ease;
  overflow-wrap: anywhere;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.toast.error {
  color: #991b1b;
  border-color: #fecaca;
  background: #fee2e2;
}

.toast.warning {
  color: #92400e;
  border-color: #fed7aa;
  background: #ffedd5;
}

.toast.info {
  color: #1e40af;
  border-color: #bfdbfe;
  background: #dbeafe;
}

.form-card,
.table-card {
  max-width: 1120px;
  margin: 0 auto 22px;
}

.section-title {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.section-title:has(button) {
  grid-template-columns: 1fr auto;
  align-items: start;
}

.section-title:has(button) p {
  grid-column: 1;
}

.section-title > button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.section-title .secondary {
  width: auto;
  min-width: 82px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.section-title p {
  color: var(--muted);
  font-size: 13px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.po-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13px;
}

.po-items-toolbar .secondary {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 12px;
}

.po-items-editor {
  display: grid;
  gap: 14px;
}

.po-item-row {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--field) 72%, transparent);
}

.po-item-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}

.po-item-row-header strong {
  color: var(--ink);
  font-size: 14px;
}

.po-item-row-header .icon-btn {
  width: 32px;
  height: 32px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  outline: 0;
}

input,
select {
  height: 40px;
  padding: 0 12px;
}

textarea {
  min-height: 120px;
  resize: vertical;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #38c27d;
  box-shadow: 0 0 0 3px rgba(56, 194, 125, .12);
}

.span-2 {
  grid-column: span 2;
}

#poForm {
  display: grid;
  gap: 18px;
}

.po-entry-layout {
  display: grid;
  gap: 16px;
}

.po-entry-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.po-entry-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, .58);
  min-width: 0;
}

.po-entry-section legend {
  padding: 0 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.po-entry-section .form-grid {
  gap: 14px;
}

.po-type-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.po-type-card {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.po-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.po-type-card span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.po-type-card span::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.5px solid #9aa6b2;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff;
}

.po-type-card:has(input:checked) {
  border-color: #16a56a;
  background: #f4fbf7;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.po-type-card:has(input:checked) span::before {
  border-color: #16a56a;
  background: #16a56a;
}

.po-type-card:has(input:focus-visible) {
  outline: 2px solid rgba(22, 165, 106, .35);
  outline-offset: 2px;
}

.po-entry-section input[readonly] {
  background: #f8fafc;
  color: var(--ink);
}

.po-amount-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.po-amount-grid .span-2 {
  grid-column: span 2;
}

@media (max-width: 980px) {
  .po-entry-columns,
  .po-amount-grid {
    grid-template-columns: 1fr;
  }

  .po-amount-grid .span-2 {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .po-type-choice {
    grid-template-columns: 1fr;
  }

  .po-entry-section {
    padding: 14px;
  }

  .po-entry-section .form-grid {
    grid-template-columns: 1fr;
  }

  .po-entry-section .span-2 {
    grid-column: auto;
  }
}

.line-builder {
  margin-top: 24px;
}

.line-builder h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.line-row {
  display: grid;
  grid-template-columns: 1fr 140px 38px;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.item-type-row {
  display: grid;
  grid-template-columns: 1fr 150px 220px 38px;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.requisition-start-section {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 24px;
}

/* Approved IIMS operational dashboard */
.view.active#dashboardView {
  background: #f7f9f8;
  padding: 22px;
}

.iims-dashboard-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.iims-dashboard-hero h1 {
  color: #10241a;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
}

.iims-dashboard-hero p {
  margin-top: 6px;
  color: #6c7a72;
  font-size: 13px;
}

.iims-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dce7e0;
  border-radius: 10px;
  background: #fff;
  color: #20382b;
  box-shadow: 0 8px 24px rgba(20, 54, 37, .05);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.iims-date-badge svg {
  width: 16px;
  height: 16px;
  color: #08783d;
}

.dashboard-widget-canvas,
.dashboard-analytics-section {
  margin: 0;
}

.iims-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.iims-kpi-card,
.iims-panel,
.dashboard-analytics-card {
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 45, 32, .055);
}

.iims-kpi-card {
  min-height: 142px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  cursor: pointer;
}

.iims-kpi-card:hover,
.iims-mini-card:hover,
.iims-action-row:not(.iims-action-head):hover {
  border-color: rgba(8, 120, 61, .34);
  box-shadow: 0 14px 30px rgba(22, 45, 32, .085);
}

.iims-kpi-icon,
.iims-mini-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e8f5ee;
  color: #08783d;
}

.iims-kpi-card:nth-child(2) .iims-kpi-icon,
.iims-kpi-card:nth-child(2) .iims-mini-card > span {
  background: #eaf3ff;
  color: #1c6bd1;
}

.iims-kpi-card:nth-child(3) .iims-kpi-icon {
  background: #f0edff;
  color: #6848d9;
}

.iims-kpi-card:nth-child(4) .iims-kpi-icon {
  background: #fff1df;
  color: #c76b11;
}

.iims-kpi-icon svg,
.iims-mini-card svg {
  width: 18px;
  height: 18px;
}

.iims-kpi-copy {
  min-width: 0;
}

.iims-kpi-copy h3,
.iims-mini-card small {
  color: #20382b;
  font-size: 12px;
  font-weight: 800;
}

.iims-kpi-copy strong {
  display: block;
  margin-top: 8px;
  color: #101f18;
  font-size: 27px;
  line-height: 1;
  font-weight: 850;
}

.iims-kpi-copy p {
  margin-top: 8px;
  color: #6f7e75;
  font-size: 11px;
  line-height: 1.35;
}

.iims-card-link,
.iims-section-link {
  grid-column: 1 / -1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 0;
  background: transparent;
  color: #08783d;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.iims-card-link svg,
.iims-section-link svg,
.iims-action-row b svg {
  width: 13px;
  height: 13px;
}

.iims-dashboard-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: 16px;
}

.iims-panel {
  min-width: 0;
  padding: 18px;
}

.iims-action-panel {
  grid-row: span 1;
}

.iims-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.iims-panel-head h2,
.dashboard-analytics-card-head h3 {
  margin: 0;
  color: #14271d;
  font-size: 15px;
  font-weight: 850;
}

.iims-action-table {
  display: grid;
  gap: 0;
}

.iims-action-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1.4fr) 70px 86px 106px;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #edf2ef;
  background: transparent;
  color: #263b30;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}

.iims-action-head {
  min-height: 30px;
  color: #7a8880;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: default;
}

.iims-action-row span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.iims-action-row span:nth-child(2) {
  color: #6d7a72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iims-action-row strong {
  color: #14271d;
  font-size: 13px;
}

.iims-action-row em {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.iims-action-row em.pending {
  background: #eaf3ff;
  color: #1c6bd1;
}

.iims-action-row em.warning {
  background: #fff5db;
  color: #a96500;
}

.iims-action-row em.critical {
  background: #ffeceb;
  color: #c82922;
}

.iims-action-row b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #08783d;
  font-size: 11px;
  font-weight: 850;
}

.iims-action-row svg {
  width: 15px;
  height: 15px;
  color: #08783d;
}

.iims-vendor-analysis-panel {
  grid-row: span 1;
}

.iims-vendor-analysis-head {
  align-items: flex-start;
  gap: 14px;
}

.iims-vendor-analysis-head p {
  margin: 5px 0 0;
  color: #66776d;
  font-size: 12px;
}

.iims-month-filter {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: #66776d;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.iims-month-filter input {
  min-height: 34px;
  border: 1px solid #dce7df;
  border-radius: 7px;
  padding: 6px 9px;
  color: #173224;
  font: inherit;
  text-transform: none;
}

.iims-vendor-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #dcefe4;
  border-radius: 8px;
  background: #f7fcf9;
}

.iims-vendor-total span {
  color: #66776d;
  font-size: 12px;
  font-weight: 800;
}

.iims-vendor-total strong {
  color: #08783d;
  font-size: 15px;
  font-weight: 900;
}

.iims-vendor-table {
  display: grid;
  border-top: 1px solid #edf2ef;
}

.iims-vendor-row {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(170px, 1.4fr) 70px minmax(116px, .8fr) 82px 92px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid #edf2ef;
  background: transparent;
  color: #263b30;
  text-align: left;
  font-size: 12px;
}

.iims-vendor-row:not(.iims-vendor-head) {
  cursor: pointer;
}

.iims-vendor-head {
  min-height: 30px;
  color: #7a8880;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.iims-vendor-row strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #14271d;
  font-weight: 850;
}

.iims-vendor-row em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  background: #e7f8ee;
  color: #08783d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.iims-vendor-empty {
  padding: 24px 12px;
  border: 1px dashed #d8e4dc;
  border-radius: 8px;
  color: #66776d;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.iims-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.iims-mini-card {
  min-height: 84px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  border: 1px solid #e1e9e5;
  border-radius: 10px;
  background: #fff;
  padding: 13px;
  text-align: left;
  cursor: pointer;
}

.iims-mini-card small,
.iims-mini-card strong {
  grid-column: 2;
}

.iims-mini-card strong {
  color: #14271d;
  font-size: 18px;
  font-weight: 850;
}

.iims-mini-card.warn > span {
  background: #fff1df;
  color: #c76b11;
}

.iims-mini-card.danger > span {
  background: #ffeceb;
  color: #c82922;
}

.iims-section-link {
  margin-top: 14px;
}

.iims-chart-panel {
  min-width: 0;
}

.iims-dashboard-main .dashboard-analytics-card {
  padding: 18px;
}

.iims-dashboard-main .dashboard-chart-wrap {
  height: 260px;
  min-height: 260px;
}

.dashboard-activity-card {
  min-width: 0;
}

.dashboard-activity-list {
  margin-top: 8px;
}

@media (max-width: 1180px) {
  .iims-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iims-dashboard-main {
    grid-template-columns: 1fr;
  }
}

/* Final cascade guard for the approved IIMS dashboard. */
.view.active#dashboardView .iims-kpi-card,
.view.active#dashboardView .iims-panel,
.view.active#dashboardView .iims-dashboard-main .dashboard-analytics-card {
  border: 1px solid #dfe8e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 45, 32, .055);
}

.view.active#dashboardView .iims-dashboard-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: 16px;
}

.view.active#dashboardView .iims-dashboard-main .dashboard-chart-wrap {
  height: 260px;
  min-height: 260px;
}

@media (max-width: 1180px) {
  .view.active#dashboardView .iims-dashboard-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .view.active#dashboardView {
    padding: 16px 12px;
  }

  .iims-dashboard-hero {
    flex-direction: column;
  }

  .iims-kpi-grid,
  .iims-mini-grid {
    grid-template-columns: 1fr;
  }

  .iims-action-table {
    gap: 10px;
  }

  .iims-action-head {
    display: none;
  }

  .iims-action-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    min-height: 0;
    border: 1px solid #edf2ef;
    border-radius: 10px;
    padding: 12px;
  }

  .iims-action-row span:nth-child(2),
  .iims-action-row b {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

.requisition-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.requisition-action-btn {
  min-height: 40px;
  height: 40px;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 16px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.requisition-action-btn i {
  width: 16px;
  height: 16px;
  color: #fff;
  stroke-width: 2.25;
}

.requisition-action-btn:hover {
  background: #119447;
  border-color: #017100;
  box-shadow: 0 12px 24px rgba(22, 163, 74, 0.24);
  transform: translateY(-2px);
}

.requisition-action-btn:active {
  background: #0f873f;
  border-color: #017100;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.18);
  transform: translateY(0) scale(.98);
}

.requisition-guide-wrap {
  position: relative;
  flex: 0 0 auto;
}

.requisition-guide-toggle {
  min-height: 40px;
  gap: 8px;
  padding: 0 14px;
  border-radius: 10px;
  color: #0f6f49;
  background: #fff;
  border: 1px solid rgba(18, 34, 20, 0.12);
  box-shadow: 0 8px 18px rgba(18, 34, 20, 0.06);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.requisition-guide-toggle:hover,
.requisition-guide-toggle[aria-expanded="true"] {
  color: #08783d;
  background: #e9f8ee;
  border-color: rgba(56, 194, 125, 0.34);
}

.requisition-guide-toggle svg {
  width: 16px;
  height: 16px;
}

.requisition-guide-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  width: min(380px, calc(100vw - 42px));
  min-width: 0;
  padding: 15px 16px 14px;
  border: 1px solid rgba(18, 34, 20, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(18, 34, 20, 0.14);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.requisition-guide-card.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.requisition-guide-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.requisition-guide-head span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #0f8f4c;
  background: #e9f8ee;
}

.requisition-guide-head svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}

.requisition-guide-head h3 {
  margin: 0;
  color: #102019;
  font-size: 14px;
  line-height: 1.25;
}

.requisition-guide-close {
  width: 30px;
  height: 30px;
  color: #65716b;
  background: #fff;
  border-color: rgba(18, 34, 20, 0.1);
}

.requisition-guide-close svg {
  width: 14px;
  height: 14px;
}

.requisition-guide-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.requisition-guide-list li {
  position: relative;
  padding-left: 12px;
  color: #627068;
  font-size: 12px;
  line-height: 1.45;
}

.requisition-guide-list li::before {
  content: "";
  position: absolute;
  top: .58em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38c27d;
}

.requisition-guide-list strong {
  color: #173326;
  font-weight: 800;
}

@media (max-width: 980px) {
  .requisition-start-section {
    flex-direction: column;
    align-items: stretch;
  }

  .requisition-guide-wrap {
    width: 100%;
  }

  .requisition-guide-toggle {
    width: max-content;
  }

  .requisition-guide-card {
    right: auto;
    left: 0;
    width: min(100%, 420px);
  }
}

.temporal-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 400;
  isolation: isolate;
}

.temporal-filter-wrap.open {
  z-index: 1000;
}

.temporal-filter-trigger {
  min-height: 38px;
  white-space: nowrap;
}

.temporal-filter-trigger.is-active {
  color: #0f6f49;
  background: #dff5e9;
  box-shadow: inset 0 0 0 1px rgba(15, 111, 73, .16);
}

.temporal-filter-trigger.is-active::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.temporal-filter-bar {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1001;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: min(520px, calc(100vw - 32px));
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 14px;
  background: #fff;
  opacity: 1;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .16);
}

.temporal-filter-wrap.open .temporal-filter-bar {
  display: grid;
}

.temporal-filter-wrap.align-end .temporal-filter-bar {
  left: auto;
  right: 0;
}

.temporal-filter-title {
  grid-column: 1 / -1;
  color: var(--lm-muted, #66716b);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.temporal-filter-mode {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 999px;
  background: var(--lm-surface-alt, #f7faf7);
  justify-self: start;
}

.temporal-filter-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lm-muted, #66716b);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.temporal-filter-chip.active {
  color: #fff;
  background: var(--green);
}

.temporal-filter-field {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.temporal-filter-field span {
  color: var(--lm-muted, #66716b);
  font-size: 11px;
  font-weight: 800;
}

.temporal-filter-field input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--lm-line, #d9e1d9);
  border-radius: 10px;
  background: #fff;
  color: var(--lm-ink, #17221d);
  font: inherit;
}

.temporal-filter-clear {
  min-height: 40px;
  justify-self: end;
}

.temporal-filter-field[hidden],
.audit-only-filter[hidden] {
  display: none !important;
}

.compact-title {
  margin-top: 8px;
  margin-bottom: 14px;
}

.request-history-switch {
  --request-history-active: #017100;
  --request-history-active-shadow: rgba(22, 163, 74, .24);
  --request-history-focus: rgba(22, 163, 74, .22);
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin: 2px 0 16px;
  border: 1px solid #d9e3dc;
  border-radius: 999px;
  background: #f2f5f3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.request-history-tab {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.request-history-tab:hover {
  background: #e8eee9;
}

.request-history-tab + .request-history-tab {
  position: relative;
}

.request-history-tab + .request-history-tab::before {
  content: "";
  width: 1px;
  height: 18px;
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  background: #d2ddd5;
  transition: opacity .18s ease;
}

.request-history-tab.active::before,
.request-history-tab.active + .request-history-tab::before {
  opacity: 0;
}

.request-history-tab:focus-visible {
  outline: 3px solid var(--request-history-focus);
  outline-offset: 2px;
}

.request-history-tab.active {
  color: #fff;
  background: var(--request-history-active);
  box-shadow: 0 8px 18px var(--request-history-active-shadow);
}

.request-history-tab span {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.request-history-tab.active span {
  background: transparent;
}

.request-history-panel[hidden] {
  display: none !important;
}

.quotation-workflow-switch {
  margin-bottom: 4px;
}

.quotation-policy-select {
  display: grid;
  gap: 4px;
  min-width: 190px;
  text-align: left;
}

.quotation-policy-select span {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.quotation-policy-select select {
  min-height: 34px;
  padding: 5px 30px 5px 9px;
}

.quotation-policy-notice,
.quotation-requirement {
  padding: 10px 12px;
  border: 1px solid #b8d8c1;
  border-radius: 10px;
  background: #edf8f0;
  color: #176b35;
  font-size: 13px;
  font-weight: 700;
}

.quotation-slot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.quotation-slot {
  padding: 9px 10px;
  border: 1px dashed #d4a72c;
  border-radius: 9px;
  background: #fff9e8;
  color: #795d0c;
  font-size: 12px;
  font-weight: 700;
}

.quotation-slot.complete {
  border-style: solid;
  border-color: #83c697;
  background: #edf8f0;
  color: #176b35;
}

@media (max-width: 900px) {
  .quotation-workflow-switch {
    display: flex;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
}

.primary,
.secondary,
.tiny {
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}

.primary {
  height: 40px;
  padding: 0 18px;
  color: #fff;
  background: var(--green);
}

.secondary {
  height: 36px;
  padding: 0 14px;
  color: #18895d;
  background: #e2f8ed;
}

.tiny {
  min-height: 28px;
  padding: 0 10px;
  color: #31404a;
  background: #eef2f5;
  font-size: 12px;
}

.tiny.success {
  color: #147a50;
  background: #dcf8ea;
}

.tiny.danger,
.icon-danger {
  color: #b42318;
  background: #fee4e2;
}

.icon-danger {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.table-wrap {
  overflow-x: auto;
}

.requests-scroll {
  overflow-x: auto;
}

.requests-scroll table {
  min-width: 1260px;
}

#serviceRequestHistoryPanel .requests-scroll table {
  min-width: 1420px;
}

@media (max-width: 640px) {
  .request-history-switch {
    width: 100%;
    display: flex;
  }

  .request-history-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    white-space: normal;
    text-align: center;
  }
}

#approvalsView.procurement-view {
  min-height: 100%;
  padding: 24px;
  background: var(--lm-bg, #F6F7F3);
}

#approvalsView .inventory-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

#approvalsView .inventory-page-header h1 {
  margin: 0;
  color: var(--lm-ink, var(--text));
  font-size: 26px;
  font-weight: 850;
  letter-spacing: 0;
}

#approvalsView .inventory-page-header p {
  margin: 5px 0 0;
  color: var(--lm-muted, var(--muted));
  font-size: 13px;
}

#approvalsView .inventory-module-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--lm-line, var(--line));
}

#approvalsView .inventory-module-tab {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--lm-muted, var(--muted));
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: color .16s ease, background .16s ease;
}

#approvalsView .inventory-module-tab svg {
  width: 15px;
  height: 15px;
}

#approvalsView .inventory-module-tab.active {
  color: #0f8f5d;
  font-weight: 800;
}

#approvalsView .inventory-module-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: #0f8f5d;
}

#approvalsView .inventory-module-tab:hover {
  color: #0f8f5d;
  background: transparent;
}

#approvalsView .inventory-module-tab span {
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2f0;
  color: #5f6f68;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

#approvalsView .inventory-module-tab.active span {
  color: #0f8f5d;
  background: #c9f7d7;
}

#approvalsView .procurement-panel {
  display: none;
}

#approvalsView .procurement-panel.active,
#approvalsView #approvalsBoard {
  display: block;
}

#approvalsView .approvals-records-screen {
  display: grid;
  gap: 12px;
}

#approvalsView .po-records-card {
  overflow: hidden;
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 12px;
  background: var(--lm-surface, #fff);
  box-shadow: var(--lm-shadow, 0 10px 30px rgba(15, 23, 42, .08));
}

#approvalsView .po-records-card .table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#approvalsView .po-records-card table {
  min-width: 920px;
  table-layout: fixed;
}

#approvalsView .po-records-card th,
#approvalsView .po-records-card td {
  padding: 13px 14px;
  vertical-align: middle;
}

#approvalsView .po-records-card :is(th, td):nth-child(1) {
  width: 25%;
}

#approvalsView .po-records-card :is(th, td):last-child {
  width: 130px;
  text-align: right;
}

.requests-scroll thead th {
  position: static;
}

.history-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 0 28px;
}

.history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.history-heading h2 {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: 0;
}

.history-list {
  display: grid;
  gap: 12px;
}

.history-entry {
  overflow: hidden;
  border: 1px solid #dedbd3;
  border-radius: 10px;
  background: #fff;
}

.history-entry-main {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #171717;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.history-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.history-icon svg {
  width: 16px;
  height: 16px;
}

.history-icon.green {
  color: #08745a;
  background: #dff8ef;
}

.history-icon.blue {
  color: #0969b2;
  background: #e2f1ff;
}

.history-icon.purple {
  color: #4f46b8;
  background: #ece9ff;
}

.history-icon.amber {
  color: #9a5b00;
  background: #fff0d8;
}

.history-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.history-copy strong {
  font-size: 14px;
}

.history-copy span {
  color: #333;
  font-size: 13px;
}

.history-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #333;
  white-space: nowrap;
}

.history-meta strong {
  font-size: 13px;
}

.history-meta em {
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f0eee8;
  color: #3d3a34;
  font-style: normal;
  font-size: 12px;
}

.history-chevron {
  color: #777;
  transition: transform .2s ease;
}

.history-entry.open .history-chevron {
  transform: rotate(180deg);
}

.history-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 28px;
  padding: 14px 16px 18px;
  border-top: 1px solid #e5e1d8;
}

.history-details div {
  min-width: 0;
}

.history-details span {
  display: block;
  margin-bottom: 3px;
  color: #76716a;
  font-size: 12px;
}

.history-details strong {
  display: block;
  color: #171717;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.history-empty {
  padding: 28px;
  border: 1px solid #dedbd3;
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

.audit-log-page {
  padding: 4px 0 28px;
}

.audit-log-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.audit-log-heading h2 {
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #17211b;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
}

.audit-log-heading h2 svg {
  width: 28px;
  height: 28px;
  color: #16855a;
}

.audit-log-heading p {
  margin: 0;
  color: #5e6a63;
  font-size: 14px;
}

.audit-log-heading-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audit-log-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #dbe9df;
  border-radius: 999px;
  color: #0f7a42;
  background: #f3fbf6;
  font-size: 12px;
  font-weight: 800;
}

.audit-log-verified svg {
  width: 14px;
  height: 14px;
}

.audit-log-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(170px, .8fr));
  gap: 10px;
  margin-bottom: 18px;
}

.audit-log-filters .temporal-filter-wrap {
  grid-column: 1 / -1;
  justify-self: start;
}

.stock-issue-toolbar,
.audit-log-filters,
#poView .po-records-toolbar,
#procurementPoPanel .po-records-toolbar,
.transport-board-card,
.approvals-board-card {
  position: relative;
  z-index: 50;
  isolation: isolate;
}

.audit-log-search,
.audit-log-filters input,
.audit-log-filters select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #d9e1d9;
  border-radius: 10px;
  background: #fff;
  color: #17211b;
  font: inherit;
  font-size: 13px;
}

.audit-log-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.audit-log-search svg {
  width: 15px;
  height: 15px;
  color: #738078;
}

.audit-log-search input {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.audit-log-filters input,
.audit-log-filters select {
  padding: 0 12px;
}

.audit-log-table-card {
  overflow: hidden;
  border: 1px solid #dfe5de;
  border-radius: 16px;
  background: #fff;
}

.audit-log-table {
  min-width: 920px;
}

.audit-log-table th {
  color: #7a857d;
  background: #fafcf9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.audit-log-table th,
.audit-log-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #edf1ec;
  vertical-align: top;
}

.audit-log-table tbody tr:last-child td {
  border-bottom: 0;
}

.audit-log-table td:first-child,
.audit-log-table td:nth-child(2) {
  white-space: nowrap;
}

.audit-log-subtle {
  margin-top: 3px;
  color: #869188;
  font-size: 12px;
}

.audit-log-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}

.audit-log-badge.success {
  color: #0e7a42;
  background: #e7f7ed;
}

.audit-log-badge.danger {
  color: #cd2e2e;
  background: #ffeaea;
}

.audit-log-badge.info {
  color: #1c68b0;
  background: #e9f2ff;
}

.audit-log-badge.neutral {
  color: #5a655e;
  background: #f1f3ef;
}

.action-bullets {
  display: grid;
  gap: 5px;
  min-width: 150px;
  margin: 0;
  padding: 0 0 0 14px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.action-bullets li::marker {
  color: var(--green);
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.inventory-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

.inventory-toolbar .category-tabs {
  flex: 1;
}

.inventory-location-filter {
  width: min(240px, 100%);
  flex: 0 0 240px;
  gap: 6px;
  margin-top: -2px;
}

.inventory-search-row {
  display: flex;
  margin: 0 0 18px;
}

.inventory-search-filter {
  width: min(560px, 100%);
  gap: 6px;
}

.inventory-toolbar .primary {
  flex: 0 0 auto;
  height: 40px;
  margin-bottom: 1px;
}

.category-tab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--muted);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
}

.category-tab.active {
  border-color: #b9efd3;
  color: #168457;
  background: #dcf8ea;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  color: #66737d;
  font-size: 13px;
  font-weight: 700;
}

.pagination:empty,
.pagination-host:empty {
  display: none !important;
}

.page-btn {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 800;
}

.page-btn svg {
  width: 15px;
  height: 15px;
}

.page-btn:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--field-soft);
}

.pagination-host {
  margin-top: 8px;
}

.table-pagination {
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  font-size: 11px;
}

.pagination-summary {
  white-space: nowrap;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.table-pagination .page-btn {
  min-width: 30px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: 11px;
}

.table-pagination .page-btn.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

@media (max-width: 720px) {
  .table-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .pagination-summary {
    white-space: normal;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

th {
  color: var(--muted);
  background: var(--field-soft);
  font-weight: 700;
}

td {
  color: var(--ink);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 26px 12px;
}

.button-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.po-cancel-reason {
  min-width: 190px;
  max-width: 280px;
  color: var(--muted);
  line-height: 1.35;
  white-space: normal;
}

.danger-btn {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  padding: 0 16px;
  color: #fff;
  background: #b42318;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.danger-btn svg {
  width: 15px;
  height: 15px;
}

.table-input {
  width: 120px;
  height: 32px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 29, 36, .42);
}

.modal-backdrop.show {
  display: flex;
}

.modal-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 0;
}

.clickable-record-row {
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

table.actions-column-removed {
  width: 100% !important;
  table-layout: fixed !important;
}

table.actions-column-removed th,
table.actions-column-removed td {
  width: auto !important;
}

.table-wrap table.actions-column-removed th:last-child,
.table-wrap table.actions-column-removed td:last-child,
.requests-scroll table.actions-column-removed th:last-child,
.requests-scroll table.actions-column-removed td:last-child {
  min-width: 0 !important;
  width: auto !important;
}

.clickable-record-row:hover,
.clickable-record-row:focus-visible {
  background: rgba(8, 120, 61, .055);
  box-shadow: inset 3px 0 0 rgba(8, 120, 61, .42);
  outline: none;
}

.clickable-record-tile {
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.clickable-record-tile:hover,
.clickable-record-tile:focus-visible {
  border-color: rgba(8, 120, 61, .34);
  box-shadow: 0 10px 24px rgba(18, 29, 36, .08);
  transform: translateY(-1px);
  outline: none;
}

.record-preview-card {
  width: min(920px, 100%);
}

.record-preview-body {
  display: grid;
  gap: 16px;
  padding-top: 16px;
}

.record-preview-section {
  display: grid;
  gap: 10px;
}

.record-preview-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.record-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.record-preview-grid div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.record-preview-grid dt {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.record-preview-grid dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.record-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-preview-po-edit {
  width: 34px;
  height: 34px;
  min-width: 34px;
}

.record-preview-po-edit svg {
  width: 15px;
  height: 15px;
}

.record-preview-actions:empty::before {
  content: "No actions available for this record.";
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 720px) {
  .record-preview-grid {
    grid-template-columns: 1fr;
  }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.po-cancel-card {
  width: min(560px, 100%);
}

.delete-user-card {
  width: min(500px, 100%);
}

.delete-user-card .form-actions {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.po-modal-card {
  width: min(calc(210mm + 56px), calc(100vw - 32px));
}

.po-preview-wrap {
  overflow: auto;
  padding: 18px;
  background: #eef2f5;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
}

#poPreviewModal {
  z-index: 90;
  align-items: flex-start;
  overflow-y: auto;
}

#poPreviewModal .po-modal-card {
  width: min(calc(210mm + 56px), calc(100vw - 32px));
  max-height: none;
  min-height: 0;
  margin: auto;
  overflow: hidden;
}

#poPreviewContent {
  min-height: 0;
  max-height: calc(100vh - 180px);
  overflow: auto;
}

#poPreviewContent .po-form-document {
  width: 210mm;
  min-height: 297mm;
  max-width: none;
  margin: 0 auto;
  background: #fff;
}

.po-sheet {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 22px 26px;
  color: #333;
  background: #fff;
  border: 1px solid #d1d5db;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
  font-family: inherit;
  font-size: 12px;
}

.po-form-header {
  padding: 18px 20px;
  color: #2c3e50;
  text-align: center;
  border-top: 28px solid #2c3e50;
  border-bottom: 2px solid #2c3e50;
}

.po-form-title h1:first-child {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.po-form-title h1:nth-child(2) {
  margin: 7px 0 0;
  font-size: 18px;
  font-weight: 800;
}

.po-form-title .print-logo {
  display: block;
  width: 78px;
  max-height: 58px;
  object-fit: contain;
  margin: 8px auto 0;
}

.po-form-header p {
  margin: 12px 0 0;
  color: #555;
  line-height: 1.45;
}

.po-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 18px;
}

.po-detail-grid.compact {
  margin-top: 20px;
}

.po-form-party {
  min-height: 120px;
  padding-top: 0;
}

.po-form-party h2,
.po-form-section h2 {
  margin: 0 0 14px;
  color: #2c3e50;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.po-form-party dl {
  display: grid;
  grid-template-columns: 142px 1fr;
  gap: 9px 8px;
  margin: 0;
}

.po-form-party dt {
  margin: 0;
  color: #2c3e50;
  font-weight: 800;
}

.po-form-party dd {
  margin: 0;
  line-height: 1.35;
}

.po-form-section {
  margin-top: 22px;
}

.po-section-bar {
  margin: 0;
  padding: 10px 12px;
  color: #fff !important;
  background: #2c3e50;
}

.quotation-history-preview {
  width: min(760px, 100%);
  padding: 24px 28px;
  color: #171b18;
  background: #fff;
  border: 0;
  box-shadow: none;
  font-size: 12px;
}

.quotation-history-header,
.quotation-history-row,
.quotation-history-link-card > div {
  display: flex;
  align-items: center;
}

.quotation-history-header {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.quotation-history-header h1 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.1;
}

.quotation-history-header p {
  margin: 0;
  color: #626963;
}

.quotation-history-preview .badge {
  min-height: 22px;
  padding: 0 10px;
  font-size: 11px;
}

.quotation-history-preview .badge.converted,
.quotation-history-preview .badge.converted-to-po {
  color: #3d7225;
  background: #e7f2da;
}

.quotation-history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.quotation-history-summary article {
  min-height: 86px;
  padding: 16px 18px;
  background: #fbfcfa;
  border: 1px solid #dfe5df;
  border-radius: 8px;
}

.quotation-history-summary span,
.quotation-history-summary strong {
  display: block;
}

.quotation-history-summary span {
  margin-bottom: 7px;
  color: #484d49;
}

.quotation-history-summary strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.quotation-history-section {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #d8dcd8;
  border-radius: 8px;
  background: #fff;
}

.quotation-history-section h2,
.quotation-history-link-card h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #dfe5df;
  color: #171b18 !important;
  background: #f8faf7;
  font-size: 13px;
}

.quotation-history-section h2 svg,
.quotation-history-link-card h2 svg {
  width: 15px;
  height: 15px;
}

.quotation-history-list {
  display: grid;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quotation-history-table-head {
  display: grid;
  grid-template-columns: minmax(86px, .8fr) minmax(150px, 1.5fr) minmax(110px, .9fr) minmax(120px, 1fr) minmax(96px, .8fr) minmax(72px, auto);
  align-items: center;
  gap: 16px;
  min-height: 42px;
  padding: 0 16px;
  color: #69716b;
  background: #fff;
  border-bottom: 1px solid #e5e9e5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.quotation-history-table-head.comparative-head {
  grid-template-columns: minmax(86px, .8fr) minmax(190px, 1.7fr) minmax(110px, .9fr) minmax(140px, 1fr) minmax(72px, auto);
}

.quotation-history-row {
  display: grid;
  grid-template-columns: minmax(86px, .8fr) minmax(150px, 1.5fr) minmax(110px, .9fr) minmax(120px, 1fr) minmax(96px, .8fr) minmax(72px, auto);
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #eef1ee;
  border-radius: 0;
}

.quotation-history-row.comparative-row {
  grid-template-columns: minmax(86px, .8fr) minmax(190px, 1.7fr) minmax(110px, .9fr) minmax(140px, 1fr) minmax(72px, auto);
}

.quotation-history-row:last-child {
  border-bottom: 0;
}

.quotation-history-row strong,
.quotation-history-row b {
  font-size: 12px;
}

.quotation-history-row b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quotation-history-vendor,
.quotation-history-row time {
  color: #545a55;
}

.quotation-history-row time {
  text-align: right;
}

.quotation-history-view {
  min-height: 28px;
  padding: 0 10px;
  color: #202521;
  background: #fff;
  border: 1px solid #bfc4bf;
  border-radius: 999px;
}

.quotation-history-view svg {
  width: 13px;
  height: 13px;
}

.quotation-history-empty {
  margin: 0;
  padding: 16px;
  color: #69706a;
  background: #f7f8f6;
  border-radius: 0;
}

.quotation-history-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.quotation-history-link-card {
  position: relative;
  min-height: 104px;
  padding: 15px 16px;
  border: 1px solid #d8dcd8;
  border-radius: 9px;
}

.quotation-history-link-card > strong {
  display: block;
  padding-right: 68px;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.quotation-history-link-card > strong span {
  color: #8b918c;
}

.quotation-history-link-card > div {
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
}

.quotation-history-link-card > div b,
.quotation-history-link-card > div time {
  color: #545a55;
  font-weight: 600;
}

.quotation-history-link-card > .quotation-history-view {
  position: absolute;
  top: 13px;
  right: 14px;
}

@media (max-width: 720px) {
  .quotation-history-summary,
  .quotation-history-links {
    grid-template-columns: 1fr;
  }

  .quotation-history-row,
  .quotation-history-row.comparative-row,
  .quotation-history-table-head,
  .quotation-history-table-head.comparative-head {
    grid-template-columns: 1fr auto;
  }

  .quotation-history-table-head {
    display: none;
  }

  .quotation-history-vendor {
    grid-column: 1 / -1;
  }

  .quotation-history-row b,
  .quotation-history-row time {
    text-align: left;
  }
}


.single-quotation-preview {
  width: min(900px, 100%);
  padding: 24px 28px;
  color: #171b18;
  background: #fff;
  border: 0;
  box-shadow: none;
  font-size: 12px;
}

.single-quotation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.single-quotation-header > div > span {
  display: block;
  margin-bottom: 5px;
  color: #727973;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.single-quotation-header h1 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.1;
}

.single-quotation-header p {
  margin: 0;
  color: #5e655f;
}

.single-quotation-preview .badge {
  min-height: 23px;
  padding: 0 11px;
  font-size: 11px;
}

.single-quotation-preview .badge.converted,
.single-quotation-preview .badge.converted-to-po {
  color: #3d7225;
  background: #e7f2da;
}

.single-quotation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.single-quotation-summary article {
  min-height: 78px;
  display: grid;
  align-content: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d8dcd8;
  border-radius: 8px;
}

.single-quotation-summary span,
.single-quotation-summary strong {
  display: block;
}

.single-quotation-summary span {
  margin-bottom: 7px;
  color: #59605a;
}

.single-quotation-summary strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.single-quotation-summary .single-quotation-total strong {
  font-size: 17px;
}

.single-quotation-section {
  margin-top: 18px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8dcd8;
  border-radius: 8px;
  background: #fff;
}

.single-quotation-section > h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid #d8dcd8;
  color: #171b18 !important;
  background: #f8faf7;
  font-size: 13px;
}

.single-quotation-section > h2 svg {
  width: 15px;
  height: 15px;
}

.single-quotation-section .table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
}

.single-quotation-lines {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #fff;
  border-radius: 0;
}

.single-quotation-lines th,
.single-quotation-lines td {
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid #e3e8e4;
  border-bottom: 1px solid #e3e8e4;
  font-size: 12px;
  line-height: 1.4;
  vertical-align: top;
}

.single-quotation-lines th {
  color: #4f5650;
  background: #fbfcfa;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}

.single-quotation-lines :is(th, td):last-child {
  border-right: 0;
}

.single-quotation-lines :is(th, td).numeric,
.single-quotation-lines :is(th, td):not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.single-quotation-lines tbody tr:last-child td {
  border-bottom: 0;
}

.single-quotation-item-cell strong,
.single-quotation-item-cell span {
  display: block;
}

.single-quotation-item-cell strong {
  color: #17211b;
  font-weight: 800;
}

.single-quotation-item-cell span {
  margin-top: 4px;
  color: #627068;
  font-size: 11px;
  line-height: 1.35;
}

.single-quotation-lines .single-quotation-empty {
  padding: 18px 12px;
  color: #6c736d;
  text-align: center;
}

.single-quotation-term-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.single-quotation-term-grid article {
  min-height: 82px;
  padding: 14px 16px;
  background: #fff;
  border-right: 1px solid #e3e8e4;
  border-bottom: 1px solid #e3e8e4;
  border-radius: 0;
}

.single-quotation-term-grid article:nth-child(2n) {
  border-right: 0;
}

.single-quotation-term-grid article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.single-quotation-term-grid span {
  display: block;
  margin-bottom: 6px;
  color: #59605a;
  font-weight: 700;
}

.single-quotation-term-grid p {
  margin: 0;
  color: #262b27;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .single-quotation-summary,
  .single-quotation-term-grid {
    grid-template-columns: 1fr;
  }
}

.po-items-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.po-items-table th {
  padding: 11px;
  color: #fff;
  background: #34495e;
  border: 1px solid #ddd;
  font-weight: 800;
  text-align: left;
}

.po-items-table th:nth-child(2),
.po-items-table td:nth-child(2) {
  width: 12%;
  text-align: center;
}

.po-items-table th:nth-child(3),
.po-items-table th:nth-child(4),
.po-items-table td:nth-child(3),
.po-items-table td:nth-child(4) {
  width: 18%;
  text-align: right;
}

.po-items-table td {
  min-height: 86px;
  padding: 15px 11px;
  vertical-align: top;
  border: 1px solid #ddd;
  line-height: 1.4;
}

.po-items-table td strong,
.po-items-table td span {
  display: block;
}

.po-items-table td span {
  margin-top: 8px;
  color: #555;
}

.po-total-lines {
  width: 34%;
  min-width: 250px;
  margin-left: auto;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.po-total-lines p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
}

.po-total-lines p:last-child {
  color: #2c3e50;
  font-size: 15px;
  font-weight: 800;
}

.po-form-section.terms {
  break-before: page;
  padding-top: 24px;
  border-top: 28px solid #2c3e50;
}

.po-form-section.terms p {
  margin: 0 0 13px;
  line-height: 1.5;
}

.po-signature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 52px;
}

.po-signature-grid > div {
  min-height: 116px;
  padding: 16px;
  color: #fff;
  background: #333;
  text-align: center;
}

.po-signature-grid p,
.po-signature-grid strong,
.po-signature-grid span,
.po-signature-grid em {
  display: block;
  margin: 0 0 10px;
  font-style: normal;
}

.po-signature-grid strong:last-of-type {
  margin-top: 56px;
}

.gate-pass-print-sheet {
  width: min(100%, 186mm);
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.15;
}

.gate-pass-print-sheet * { box-sizing: border-box; }
.gate-pass-print-title { border: 2px solid #111; border-bottom: 0; text-align: center; }
.gate-pass-print-title h1 { margin: 0; padding: 5px 8px 3px; color: #fff; background: #15191d; font-size: 18px; font-weight: 800; line-height: 1.1; }
.gate-pass-print-title strong { display: block; padding: 2px 8px; font-size: 9px; line-height: 1.1; }
.gate-pass-print-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 2px solid #111; border-top: 0; }
.gate-pass-print-meta div { display: grid; grid-template-columns: 22mm minmax(0, 1fr); min-height: 7mm; border-right: 1px solid #111; border-top: 1px solid #111; }
.gate-pass-print-meta div:nth-child(3n) { border-right: 0; }
.gate-pass-print-meta div:nth-child(5) { grid-column: span 2; border-right: 0; }
.gate-pass-print-meta span,
.gate-pass-print-meta strong,
.gate-pass-print-purpose span,
.gate-pass-print-purpose strong,
.gate-pass-print-party-grid span,
.gate-pass-print-party-grid strong { min-width: 0; padding: 2px 4px; color: #000; overflow-wrap: anywhere; }
.gate-pass-print-meta span,
.gate-pass-print-party-grid span,
.gate-pass-print-purpose span { font-weight: 800; }
.gate-pass-print-party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16mm; margin: 4mm 3mm 2mm; }
.gate-pass-print-party-grid section { min-height: 31mm; border: 2px solid #111; }
.gate-pass-print-party-grid h2 { margin: 0; padding: 2px 4px; color: #000; background: #fff; font-size: 10px; font-weight: 800; line-height: 1.1; text-align: center; }
.gate-pass-print-party-grid p { display: grid; grid-template-columns: 17mm minmax(0, 1fr); min-height: 6mm; margin: 0; border-top: 1px solid #111; }
.gate-pass-print-party-grid p.address { min-height: 16mm; }
.gate-pass-print-purpose { display: grid; grid-template-columns: 24mm minmax(0, 1fr); min-height: 8mm; margin: 0 0 3mm; border: 2px solid #111; }
.gate-pass-print-items { width: 100%; border: 2px solid #111; border-collapse: collapse; table-layout: fixed; }
.gate-pass-print-items th,
.gate-pass-print-items td { height: 6.2mm; padding: 1px 4px; border: 1px solid #111; color: #000; background: #fff; font-size: 9px; line-height: 1.05; vertical-align: top; overflow-wrap: anywhere; }
.gate-pass-print-items th { height: 5mm; font-weight: 800; text-align: center; }
.gate-pass-print-items th:nth-child(1),
.gate-pass-print-items td:nth-child(1) { width: 10%; text-align: center; }
.gate-pass-print-items th:nth-child(2),
.gate-pass-print-items td:nth-child(2) { width: 36%; }
.gate-pass-print-items th:nth-child(3),
.gate-pass-print-items td:nth-child(3) { width: 13%; text-align: center; }
.gate-pass-print-items th:nth-child(4),
.gate-pass-print-items td:nth-child(4) { width: 15%; text-align: center; }
.gate-pass-print-signatures { display: grid; gap: 4mm; margin-top: 4mm; border: 2px solid #111; padding: 2mm; }
.gate-pass-print-signatures.inward,
.gate-pass-print-signatures.outward { grid-template-columns: 1fr 1fr; }
.gate-pass-print-signatures section { min-height: 23mm; padding: 3px 5px; border: 1px solid #111; }
.gate-pass-print-signatures p { margin: 0 0 3px; color: #000; font-size: 9px; line-height: 1.15; }

.iims-update-banner {
  position: sticky;
  top: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: #102f22;
  color: #fff;
  box-shadow: 0 10px 24px rgba(16, 47, 34, 0.18);
}

.iims-update-banner div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.iims-update-banner strong,
.iims-update-banner span {
  color: #fff;
}

.iims-update-banner span {
  opacity: 0.86;
}

.iims-update-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.iims-update-banner .secondary {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.iims-release-card {
  max-width: 560px;
}

.iims-release-body {
  display: grid;
  gap: 12px;
  padding: 0 24px 18px;
}

.iims-release-body p,
.iims-release-body span {
  color: var(--muted);
}

.iims-release-body ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.iims-release-body li + li {
  margin-top: 4px;
}

.iims-release-body div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-soft);
}

.iims-dashboard-announcement {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(12, 116, 56, 0.22);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #f3fbf6;
}

.iims-dashboard-announcement strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.iims-dashboard-announcement p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.iims-dashboard-announcement .icon-btn {
  flex-shrink: 0;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  body * {
    visibility: hidden;
  }

  .po-sheet,
  .po-sheet * {
    visibility: visible;
  }

  .po-sheet {
    position: absolute;
    top: 10mm;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: 186mm;
    max-width: calc(100% - 24mm);
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.45;
  }

  .po-sheet.official-document {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 194mm;
    max-width: 100%;
    margin: 0 auto;
    padding: 5mm;
  }

  .po-sheet :is(button, .btn, .primary, .secondary, .danger-btn, .tiny, .view-btn, [data-action], .screen-only) {
    display: none !important;
  }

  .po-sheet :is(.ims-document-header, .po-form-header) {
    margin-bottom: 18px;
    break-inside: avoid;
  }

  .po-sheet :is(.po-form-section, .single-quotation-section, .quotation-history-section, .quotation-history-print-card, .comparative-table-wrap) {
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid #cbd4ce;
    border-radius: 6px;
    background: #fff;
    break-inside: avoid;
  }

  .po-sheet :is(.po-section-bar, .po-form-section h2, .single-quotation-section > h2, .quotation-history-section > h2, .quotation-history-print-card h2) {
    min-height: 36px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 12px;
    border-bottom: 1px solid #cbd4ce;
    color: #174f3a !important;
    background: #f3f7f4 !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .po-sheet :is(table, .po-items-table, .single-quotation-lines, .comparative-canvas-table) {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
  }

  .po-sheet :is(th, .po-items-table th, .single-quotation-lines th, .comparative-canvas-table th) {
    padding: 8px 9px;
    border: 1px solid #cbd4ce;
    color: #536159;
    background: #fafbf9;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
  }

  .po-sheet :is(td, .po-items-table td, .single-quotation-lines td, .comparative-canvas-table td) {
    padding: 9px;
    border: 1px solid #dce3de;
    color: #17211b;
    font-size: 11px;
    line-height: 1.35;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .po-sheet table :is(th, td):not(:first-child),
  .po-sheet :is(.numeric, .date, .total) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  background: #eef2f5;
  white-space: nowrap;
}

.badge.pending,
.badge.open,
.badge.ordered,
.badge.restock-needed {
  color: #9a5b00;
  background: #fff4d7;
}

.badge.draft {
  color: #475569;
  background: #eef2f5;
}

.badge.partially-received {
  color: #9a5b00;
  background: #fff4d7;
}

.badge.approved,
.badge.issued,
.badge.arranged,
.badge.ok,
.badge.closed,
.badge.received {
  color: #147a50;
  background: #dcf8ea;
}

.badge.partially-issued {
  color: #147a50;
  background: #dcf8ea;
}

.badge.rejected,
.badge.out-of-stock,
.badge.not-issued,
.badge.cancelled,
.badge.cancelled-after-issue {
  color: #b42318;
  background: #fee4e2;
}

.audit-business-activity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 340px;
}

.audit-business-activity strong {
  color: #17221d;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  white-space: normal;
}

.audit-log-badge.activity-created,
.audit-log-badge.activity-approved,
.audit-log-badge.activity-received,
.audit-log-badge.activity-login {
  color: #08783e;
  background: #dff6e8;
}

.audit-log-badge.activity-updated {
  color: #1c68b0;
  background: #e9f2ff;
}

.audit-log-badge.activity-transferred {
  color: #6f42c1;
  background: #f0e9ff;
}

.audit-log-badge.activity-issued {
  color: #a35a00;
  background: #fff1d8;
}

.audit-log-badge.activity-rejected,
.audit-log-badge.activity-deleted,
.audit-log-badge.activity-cancelled,
.audit-log-badge.activity-deactivated,
.audit-log-badge.activity-logout {
  color: #c03221;
  background: #ffe8e5;
}

.audit-module-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid #dfe7dd;
  border-radius: 999px;
  color: #526158;
  background: #f7f9f5;
  font-size: 11px;
  font-weight: 850;
}

.stock-availability-badge,
.status-success,
.status-warning,
.status-danger,
.status-neutral {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stock-availability-badge.stock-available,
.status-success {
  color: #147a50;
  background: #dcf8ea;
}

.stock-availability-badge.stock-partial,
.status-warning {
  color: #9a5b00;
  background: #fff4d7;
}

.stock-availability-badge.stock-unavailable,
.status-danger {
  color: #b42318;
  background: #fee4e2;
}

.status-neutral {
  color: #475569;
  background: #eef2f5;
}

#poView .po-status-select.status-success,
#procurementPoPanel .po-status-select.status-success,
#grnView .grn-status-pill.status-success {
  border-color: #bcebd1;
  color: #147a50;
  background: #dcf8ea;
}

#poView .po-status-select.status-warning,
#procurementPoPanel .po-status-select.status-warning,
#grnView .grn-status-pill.status-warning {
  border-color: #f6d98f;
  color: #9a5b00;
  background: #fff4d7;
}

#poView .po-status-select.status-danger,
#procurementPoPanel .po-status-select.status-danger,
#grnView .grn-status-pill.status-danger {
  border-color: #f7b9b5;
  color: #b42318;
  background: #fee4e2;
}

#poView .po-status-select.status-neutral,
#procurementPoPanel .po-status-select.status-neutral {
  color: #475569;
  background: #eef2f5;
}

.filters #seedBtn {
  color: #20835d;
  background: #edf8f2;
}

.primary svg,
.secondary svg,
.tiny svg {
  width: 15px;
  height: 15px;
}

.settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 22px;
}

.settings-tabs,
.settings-panel {
  background: var(--panel);
  border-radius: 8px;
  box-shadow: 0 16px 35px rgba(36, 55, 70, .05);
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.settings-tab {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #60707b;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.settings-tab svg {
  width: 16px;
  height: 16px;
}

.settings-tab.active,
.settings-tab:hover {
  color: #16895e;
  background: var(--green-soft);
}

.settings-panel {
  padding: 22px;
  min-width: 0;
}

.settings-panel:has(.user-management-list) {
  padding: 24px;
  overflow-x: hidden;
}

.settings-form:has(.user-management-list) {
  max-width: none;
}

.settings-form:has(.user-management-list) .settings-actions {
  width: 100%;
  justify-content: flex-start;
}

.settings-title {
  margin-bottom: 18px;
}

.settings-form {
  display: grid;
  gap: 18px;
}

.settings-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-subhead {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--line);
  color: #16895e;
  font-size: 14px;
  font-weight: 800;
}

.settings-subhead:first-child {
  margin-top: 0;
  padding-top: 0;
}

.setting-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.setting-field.full {
  grid-column: 1 / -1;
}

.setting-field input,
.setting-field select,
.setting-field textarea {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--field);
  outline: 0;
  font-size: 13px;
  font-weight: 500;
}

.setting-field textarea {
  min-height: 92px;
  resize: vertical;
}

.setting-check {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  font-size: 13px;
  font-weight: 700;
}

.setting-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.user-management-list {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 0;
}

.add-user-panel {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr) minmax(280px, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 0 0 18px;
  margin: 0 0 8px;
  border-bottom: 1px solid #dde1e6;
}

.add-user-panel > div:first-child {
  display: grid;
  gap: 5px;
  align-self: center;
}

.add-user-panel strong {
  color: #171717;
  font-size: 15px;
}

.add-user-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.add-user-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.add-user-roles {
  align-self: end;
}

.user-management-header,
.user-management-card {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 86px minmax(360px, 1.7fr) 96px;
  align-items: center;
  column-gap: 14px;
}

.user-management-header {
  min-height: 40px;
  border-bottom: 1px solid #d7dce3;
  color: #3f4651;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.user-management-header span:last-child {
  text-align: right;
}

.role-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  min-width: 0;
}

.role-pill {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #d2d6dc;
  border-radius: 5px;
  color: #30343b;
  background: #fbfbfc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.role-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-pill.selected {
  border-color: #9aa2ad;
  background: #ffffff;
  color: #171717;
}

.role-pill.selected::before {
  content: "✓";
  font-size: 12px;
  line-height: 1;
}

.user-role-note,
.form-note,
.user-management-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.user-management-empty {
  padding: 18px 0;
}

.user-management-card {
  min-height: 92px;
  padding: 16px 0;
  border-bottom: 1px solid #dde1e6;
  background: transparent;
}

.user-management-person {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.user-management-person strong {
  color: #171717;
  font-size: 14px;
  line-height: 1.2;
}

.user-management-person > span {
  color: #333842;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.user-management-status .badge {
  min-height: 20px;
  border-radius: 5px;
  padding: 0 9px;
  color: #1f6a22;
  background: #ecf8df;
  font-size: 12px;
  text-transform: lowercase;
}

.user-management-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.user-save-btn {
  min-width: 58px;
  height: 34px;
  border: 1px solid #b8bdc5;
  border-radius: 8px;
  background: #ffffff;
  color: #171717;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.user-delete-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #c6cbd2;
  border-radius: 8px;
  background: #ffffff;
  color: #171717;
  cursor: pointer;
}

.user-delete-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.user-delete-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 980px) {
  .sidebar {
    width: 82px;
    flex-basis: 82px;
    padding: 20px 13px;
  }

  .app-shell.sidebar-collapsed .sidebar {
    width: 70px;
    flex-basis: 70px;
    padding: 22px 16px;
  }

  .brand span,
  .collapse-btn,
  .nav-item > span:last-of-type,
  .nav-item > svg,
  .nav-section-toggle > span:not(.nav-section-icon),
  .nav-section-toggle > svg {
    display: none;
  }

  .nav-item,
  .nav-item:not(.has-more) {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .nav-section-toggle {
    width: 32px;
    min-height: 32px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .app-shell.sidebar-collapsed .brand {
    justify-content: center;
  }

  .app-shell.sidebar-collapsed .sidebar-toggle {
    display: grid;
  }

  .side-nav {
    gap: 14px;
    margin-top: 44px;
  }

  .nav-section {
    padding-top: 14px;
  }

  .wide-card,
  .small-card,
  .dashboard-stats,
  .dashboard-table-card {
    grid-column: 1 / -1;
  }

  .user-management-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    padding: 16px 0;
  }

  .add-user-panel,
  .add-user-fields {
    grid-template-columns: 1fr;
  }

  .user-management-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-management-header {
    display: none;
  }

  .user-management-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  .user-management-header {
    display: none;
  }

  .user-management-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    padding: 16px 0;
  }

  .add-user-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .add-user-fields {
    grid-template-columns: 1fr;
  }

  .user-management-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
.app-shell {
    display: block;
  }

  .sidebar {
    width: 100%;
    min-height: auto;
    max-height: none;
    position: static;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    padding: 14px;
  }

  .brand span {
    display: inline;
  }

  .side-nav {
    display: flex;
    margin-top: 0;
    gap: 8px;
  }

  .nav-section {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding-top: 0;
    border-top: 0;
  }

  .nav-section-items {
    display: flex;
    gap: 8px;
  }

  .nav-item,
  .nav-item:not(.has-more) {
    min-width: 38px;
  }

  .topbar,
  .page-head {
    height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  .search {
    width: 100%;
  }

  .top-actions,
  .filters {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .notification-center {
    top: 110px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .notification-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-tools {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-grid,
  .tile-row,
  .summary-kpis,
  .procurement-kpis {
    grid-template-columns: 1fr;
  }

  .metric:nth-child(odd) {
    border-right: 0;
  }

  .legend {
    justify-content: flex-end;
    gap: 24px;
  }

  .inventory-toolbar,
  .item-type-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .inventory-location-filter {
    width: 100%;
    flex: auto;
    min-width: 0;
  }

  .inventory-search-row {
    margin-top: 0;
  }

  .inventory-search-filter {
    width: 100%;
  }

  .inventory-toolbar .primary {
    width: 100%;
  }

  .settings-layout {
    padding: 16px;
  }

  .settings-group-grid {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    display: flex;
  }

  .role-checkbox-grid,
  .user-management-actions {
    grid-template-columns: 1fr;
  }

  .history-heading,
  .history-entry-main {
    align-items: stretch;
  }

  .history-heading {
    flex-direction: column;
  }

  .history-entry-main {
    grid-template-columns: 42px minmax(0, 1fr) 22px;
  }

  .history-meta {
    grid-column: 2 / 3;
    justify-items: start;
  }

  .history-chevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .history-details {
    grid-template-columns: 1fr;
  }

  .audit-log-heading,
  .audit-log-heading-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .audit-log-filters {
    grid-template-columns: 1fr;
  }
}

.cl-footer,
.cl-footerAction,
.cl-internal-badge,
.cl-badge {
  display: none !important;
}

/* Professional portal refresh */
:root {
  --green: #2557d6;
  --green-soft: #eef4ff;
  --ink: #172033;
  --muted: #7c8798;
  --line: #e6ebf2;
  --panel: #ffffff;
  --page: #F6F7F3;
  --sidebar: #1f2a3d;
  --field: #ffffff;
  --field-soft: #f7f9fc;
  --shadow: rgba(18, 32, 54, .06);
}

body {
  color: var(--ink);
  background: var(--page);
}

.app-shell {
  border-top: 0;
  background: var(--page);
}

.sidebar {
  width: 224px;
  flex-basis: 224px;
  background: #1f2a3d;
  border-right: 0;
  padding: 22px 0;
  color: #d7deea;
}

.brand {
  min-height: 58px;
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  align-items: center;
  color: #ffffff;
  font-size: 18px;
}

.brand span {
  display: block;
  font-size: 0;
  line-height: 1.2;
  letter-spacing: .02em;
}

.brand span::before {
  content: "IMS";
  font-size: 18px;
}

.brand-mark {
  display: none;
}

.sidebar-toggle {
  color: #9aa6b8;
  background: transparent;
  position: static;
  opacity: 1;
  pointer-events: auto;
  flex: 0 0 34px;
}

.sidebar .sidebar-toggle {
  margin-left: auto;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, .08);
}

.side-nav {
  gap: 0;
  margin-top: 12px;
}

.nav-section {
  gap: 0;
  padding-top: 0;
  border-top: 0;
}

.nav-section-toggle,
.nav-item {
  min-height: 42px;
  border-radius: 0;
  padding: 0 14px;
  color: #d5ddec;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.nav-section-toggle {
  grid-template-columns: 28px 1fr 15px;
}

.nav-item,
.nav-item:not(.has-more) {
  grid-template-columns: 28px 1fr;
}

.nav-section-icon,
.nav-icon {
  width: 24px;
  height: 24px;
  color: #c4ccda;
}

.nav-section-toggle:hover,
.nav-item:hover,
.nav-item.active {
  color: #ffffff;
  background: #2557d6;
}

.nav-section-toggle:hover .nav-section-icon,
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #ffffff;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.nav-section-items .nav-item {
  padding-left: 26px;
}

.nav-section.collapsed .nav-section-toggle > svg {
  transform: rotate(-90deg);
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  flex-basis: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-right: 0;
}

.app-shell.sidebar-collapsed .brand,
.app-shell.sidebar-collapsed .side-nav {
  display: none;
}

.main-content {
  background: #f1f4f9;
}

.topbar {
  height: 48px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  gap: 14px;
  justify-content: flex-start;
}

.search {
  width: 230px;
  height: 44px;
  display: block;
  padding: 0;
  flex: 0 0 230px;
  background: url("../assets/shehersaaz-logo.png") left center / contain no-repeat;
  border-radius: 0;
}

.search input {
  display: none;
  width: 0;
}

.search input::placeholder {
  color: transparent;
}

.search > svg {
  display: none;
}

.top-actions {
  margin-left: auto;
  gap: 12px;
}

.icon-btn,
.dots {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.icon-btn:hover,
.dots:hover {
  background: var(--field-soft);
}

.profile {
  width: auto;
  height: 38px;
  overflow: visible;
  gap: 8px;
}

.profile:hover,
.profile:focus-visible {
  width: auto;
  background: transparent;
  padding: 0;
}

.profile-name,
.profile > svg {
  opacity: 1;
}

.profile-name {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  margin: 0;
  border: 0;
  background: #2557d6;
  font-size: 12px;
}

.page-head {
  height: auto;
  padding: 24px 28px 4px;
  background: transparent;
}

.page-title {
  display: block;
}

.page-title span {
  display: none;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

.dashboard-grid {
  padding: 22px 28px 32px;
}

.dashboard-grid {
  gap: 22px;
}

.dashboard-stats {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 20px;
}

.stat-card,
.card,
.settings-tabs,
.settings-panel,
.history-entry,
.history-empty {
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.stat-card {
  min-height: 96px;
  grid-template-columns: 1fr;
  align-content: center;
  padding: 18px 22px;
}

.stat-icon {
  display: none;
}

.stat-copy {
  gap: 12px;
}

.stat-copy span {
  color: #98a2b3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

.stat-copy strong {
  order: 2;
  color: #2557d6;
  font-size: 24px;
  font-weight: 800;
}

.stat-card:hover,
.stat-card:focus-visible {
  transform: none;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(18, 32, 54, .06);
}

.card {
  padding: 22px;
}

.card.dashboard-card {
  border: 0;
  border-radius: 8px;
}

.card-head,
.section-title {
  padding-bottom: 16px;
}

.card-head h2,
.section-title h2 {
  color: #202b3d;
  font-size: 18px;
  font-weight: 800;
}

.section-title p {
  color: #8b95a6;
}

th {
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
}

td {
  color: #263244;
}

.primary {
  background: #2557d6;
}

.secondary {
  color: #2557d6;
  background: #eef4ff;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2557d6;
  box-shadow: 0 0 0 3px rgba(37, 87, 214, .12);
}

.badge.approved,
.badge.issued,
.badge.arranged,
.badge.ok,
.badge.closed,
.badge.received {
  color: #166534;
  background: #dcfce7;
}

.badge.pending,
.badge.open,
.badge.ordered,
.badge.restock-needed,
.badge.partially-received {
  color: #92400e;
  background: #fef3c7;
}

.badge.rejected,
.badge.out-of-stock,
.badge.not-issued,
.badge.cancelled,
.badge.cancelled-after-issue {
  color: #991b1b;
  background: #fee2e2;
}

@media (max-width: 980px) {
  .sidebar {
    width: 82px;
    flex-basis: 82px;
    padding: 18px 0;
  }

  .brand {
    min-height: 52px;
    padding: 0 12px 12px;
  }

  .brand::before,
  .brand span,
  .brand span::after {
    display: none;
  }

  .nav-section-toggle,
  .nav-item {
    justify-items: center;
    padding: 0;
  }

  .nav-section-items .nav-item {
    padding-left: 0;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

@media (max-width: 720px) {
  .sidebar {
    width: 100%;
    padding: 12px;
  }

  .brand {
    display: none;
  }

  .nav-section-toggle,
  .nav-item {
    border-radius: 6px;
    padding: 0 10px;
  }

  .topbar,
  .page-head,
  .dashboard-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  h1 {
    font-size: 23px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
  }
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.app-shell.sidebar-collapsed .sidebar * {
  display: none !important;
}

.topbar-sidebar-toggle {
  display: none;
}

.app-shell.sidebar-collapsed .topbar-sidebar-toggle {
  display: grid !important;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.topbar .topbar-sidebar-toggle {
  display: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  color: #344054;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  box-shadow: none;
  place-items: center;
  transform: none !important;
}

.app-shell.sidebar-collapsed .topbar .topbar-sidebar-toggle {
  display: grid !important;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.topbar .topbar-sidebar-toggle:hover {
  color: #2557d6;
  background: #f7f9fc;
}

/* Sidebar bottom-settings layout */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 18px 8px 0;
  background: #202c3f;
}

.brand {
  margin: 0 8px 16px;
}

.side-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
  padding: 0;
}

.nav-label {
  padding: 8px 4px 8px;
  color: rgba(229, 235, 245, .52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-section {
  margin: 0;
}

.nav-section-toggle,
.nav-item,
.nav-item:not(.has-more) {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  gap: 12px;
}

.nav-section-toggle {
  justify-content: flex-start;
}

.nav-section-toggle > svg {
  margin-left: auto;
  width: 15px;
  height: 15px;
  opacity: .65;
}

.nav-section-items {
  margin: 4px 0 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(226, 232, 240, .12);
}

.nav-section-items .nav-item,
.nav-section-items .nav-item:not(.has-more) {
  min-height: 34px;
  padding-left: 12px;
  font-size: 13px;
}

.nav-icon,
.nav-section-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: transparent;
}

.nav-icon svg,
.nav-section-icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-footer {
  flex: 0 0 auto;
  margin: 16px -8px 0;
  padding: 12px 8px 14px;
  border-top: 1px solid rgba(226, 232, 240, .12);
}

.sidebar-footer .nav-section {
  margin: 0;
}

.sidebar-footer .nav-item {
  color: rgba(229, 235, 245, .82);
}

.app-shell.sidebar-collapsed .sidebar-footer,
.app-shell.sidebar-collapsed .nav-label {
  display: none !important;
}

@media (max-width: 720px) {
  .sidebar {
    min-height: auto;
    padding: 12px;
  }

  .side-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
  }

  .sidebar-footer {
    margin: 10px 0 0;
    padding: 10px 0 0;
  }
}

/* Prevent Settings/User Management from creating page-level horizontal scroll */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.main-content,
.view,
.settings-layout,
.settings-panel,
.settings-form,
.user-management-list {
  max-width: 100%;
  min-width: 0;
}

.app-shell,
.main-content {
  overflow-x: hidden;
}

.settings-layout {
  box-sizing: border-box;
}

.settings-panel:has(.user-management-list) {
  width: 100%;
}

.user-management-header,
.user-management-card {
  grid-template-columns: minmax(150px, 1fr) 76px minmax(280px, 1.55fr) 84px;
}

.role-checkbox-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.user-save-btn {
  min-width: 54px;
}

.user-delete-btn {
  width: 32px;
}

/* ACME-style light portal refresh */
:root {
  --green: #2356f6;
  --green-soft: #eaf0ff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #edf0f5;
  --panel: #ffffff;
  --page: #F6F7F3;
  --sidebar: #fbfbfc;
  --field: #ffffff;
  --field-soft: #f6f7fb;
  --shadow: rgba(16, 24, 40, .04);
}

body {
  color: var(--ink);
  background: var(--page);
}

.app-shell {
  min-height: 100vh;
  border-top: 0;
  background: var(--page);
}

.sidebar {
  width: 164px;
  flex: 0 0 164px;
  min-height: 100vh;
  padding: 14px 10px 0;
  color: #111827;
  background: #fbfbfc;
  border-right: 1px solid #edf0f5;
}

.brand {
  min-height: 34px;
  margin: 0 0 24px;
  padding: 0 2px;
  border: 0;
  color: #111827;
  gap: 8px;
}

.brand-mark {
  width: 22px;
  height: 22px;
  display: grid;
  border-radius: 50%;
  color: #ffffff;
  background: #4f6df5;
}

.brand-mark svg {
  width: 14px;
  height: 14px;
}

.brand span,
.brand span::before {
  content: none;
  display: inline;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand span {
  font-size: 0;
}

.brand span::after {
  content: "IMS";
  font-size: 13px;
}

.sidebar .sidebar-toggle {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-left: auto;
  border: 0;
  border-radius: 6px;
  color: #111827;
  background: transparent;
}

.sidebar .sidebar-toggle:hover {
  color: #2356f6;
  background: #eef2ff;
}

.nav-label {
  padding: 0 2px 10px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.side-nav {
  gap: 10px;
}

.nav-section {
  gap: 4px;
}

.nav-section-toggle,
.nav-item,
.nav-item:not(.has-more) {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  color: #111827;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.nav-section-toggle {
  grid-template-columns: 16px 1fr 12px;
}

.nav-item,
.nav-item:not(.has-more) {
  grid-template-columns: 16px 1fr;
}

.nav-icon,
.nav-section-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.nav-icon svg,
.nav-section-icon svg,
.nav-item svg,
.nav-section-toggle svg {
  width: 14px;
  height: 14px;
}

.nav-section-toggle > svg {
  width: 12px;
  height: 12px;
  color: #6b7280;
}

.nav-section-toggle:hover,
.nav-item:hover {
  color: #2356f6;
  background: #eef2ff;
}

.nav-section-toggle:hover .nav-section-icon,
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #2356f6;
  background: transparent;
}

.nav-item.active {
  color: #2356f6;
  background: #dce7ff;
}

.nav-section-items {
  margin: 4px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid #edf0f5;
}

.nav-section-items .nav-item,
.nav-section-items .nav-item:not(.has-more) {
  min-height: 26px;
  padding-left: 8px;
  font-size: 11px;
}

.sidebar-footer {
  margin: auto -10px 0;
  padding: 12px 10px 14px;
  border-top: 1px solid #edf0f5;
}

.sidebar-footer .nav-item {
  color: #111827;
}

.main-content {
  background: #F6F7F3;
}

.topbar {
  height: 64px;
  padding: 0 22px;
  background: #ffffff;
  border-bottom: 1px solid #edf0f5;
}

.search {
  width: auto;
  height: auto;
  flex: 1 1 auto;
  background: transparent;
}

.search input,
.search > svg {
  display: none;
}

.top-actions {
  gap: 10px;
}

.icon-btn,
.dots {
  width: 32px;
  height: 32px;
  color: #111827;
  border: 1px solid #edf0f5;
  border-radius: 9px;
  background: #ffffff;
}

.icon-btn:hover,
.dots:hover {
  color: #2356f6;
  background: #f6f7fb;
}

.profile {
  height: 36px;
  padding: 0 8px;
  gap: 8px;
  border: 1px solid #edf0f5;
  border-radius: 10px;
  background: #ffffff;
}

.profile:hover,
.profile:focus-visible {
  width: auto;
  padding: 0 8px;
  background: #ffffff;
}

.avatar {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  background: #2356f6;
  font-size: 11px;
}

.profile-name {
  color: #111827;
  font-size: 12px;
  font-weight: 700;
}

.page-head {
  padding: 28px 28px 8px;
  background: transparent;
}

h1 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}

.page-title span {
  display: none;
}

.dashboard-grid,
.view {
  padding-left: 28px;
  padding-right: 28px;
}

.dashboard-grid {
  gap: 16px;
  padding-top: 12px;
}

.dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #edf0f5;
  border-radius: 18px;
  background: #ffffff;
}

.stat-card {
  min-height: 98px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: start;
  border: 0;
  border-right: 1px solid #edf0f5;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}

.stat-card:nth-child(4n) {
  border-right: 0;
}

.stat-icon {
  width: 24px;
  height: 24px;
  display: grid;
  color: #2356f6;
  background: #f1f5ff;
  border-radius: 50%;
}

.stat-icon svg {
  width: 13px;
  height: 13px;
}

.stat-copy {
  gap: 8px;
}

.stat-copy span {
  order: 1;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

.stat-copy strong {
  order: 2;
  color: #111827;
  font-size: 20px;
  font-weight: 800;
}

.stat-card:hover,
.stat-card:focus-visible {
  transform: none;
  box-shadow: none;
  background: #fbfcff;
}

.card,
.settings-tabs,
.settings-panel,
.history-entry,
.history-empty {
  border: 1px solid #edf0f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
}

.card {
  padding: 20px;
}

.table-card {
  padding: 20px;
}

.card-head,
.section-title {
  padding-bottom: 14px;
}

.card-head h2,
.section-title h2 {
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

.section-title p,
.card-head p {
  color: #6b7280;
  font-size: 12px;
}

.table-wrap {
  border: 1px solid #edf0f5;
  border-radius: 14px;
  background: #ffffff;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  height: 42px;
  color: #4b5563;
  background: #ffffff;
  border-bottom: 1px solid #edf0f5;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
}

td {
  height: 38px;
  color: #374151;
  border-bottom: 1px solid #f1f3f7;
  font-size: 12px;
}

tbody tr:hover {
  background: #fbfcff;
}

.primary,
button.primary {
  border-radius: 9px;
  background: #2356f6;
}

.secondary,
button.secondary {
  color: #2356f6;
  border: 1px solid #edf0f5;
  border-radius: 9px;
  background: #ffffff;
}

input,
select,
textarea {
  border-color: #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2356f6;
  box-shadow: 0 0 0 3px rgba(35, 86, 246, .12);
}

.settings-layout {
  padding: 24px 28px;
}

.settings-tabs {
  padding: 8px;
  border-radius: 14px;
}

.settings-tab {
  min-height: 30px;
  border-radius: 7px;
  color: #111827;
  font-size: 12px;
  font-weight: 500;
}

.settings-tab.active,
.settings-tab:hover {
  color: #2356f6;
  background: #dce7ff;
}

.settings-panel {
  border-radius: 18px;
}

.role-pill {
  min-height: 30px;
  border-radius: 8px;
  font-size: 12px;
}

.user-save-btn,
.user-delete-btn {
  border-color: #e5e7eb;
  border-radius: 9px;
}

.user-status-btn {
  min-width: 76px;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  color: #2356f6;
  background: #eef2ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.user-status-btn[data-next-active="true"] {
  color: #166534;
  background: #dcfce7;
}

.user-status-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.badge.inactive {
  color: #7f1d1d;
  background: #fee2e2;
}

.user-management-header,
.user-management-card {
  grid-template-columns: minmax(150px, 1fr) 76px minmax(260px, 1.4fr) 188px;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  flex: 0 0 0 !important;
}

.topbar .topbar-sidebar-toggle {
  color: #111827;
  border-color: #edf0f5;
  border-radius: 9px;
}

@media (max-width: 1180px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 720px) {
  .sidebar {
    width: 100%;
    min-height: auto;
  }

  .dashboard-grid,
  .view,
  .page-head {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    border-right: 0;
  }
}

/* Keep sidebar fixed while only the workspace scrolls */
html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

.app-shell {
  height: 100vh;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.main-content {
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar,
  .main-content {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
}

/* Final theme color polish */
.role-pill.selected {
  border-color: #22c55e;
  color: #166534;
  background: #dcfce7;
}

.role-pill.selected::before {
  color: #166534;
}

.category-tab.active {
  border-color: #b9c9ff;
  color: #2356f6;
  background: #dce7ff;
}

.category-tab:hover {
  border-color: #d7def5;
  color: #2356f6;
  background: #eef2ff;
}

.setting-check input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: #2356f6;
}

.button-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 112px;
}

.button-cell .tiny {
  min-width: 92px;
  min-height: 34px;
  padding: 0 14px;
  white-space: nowrap;
}

td:has(.button-cell) {
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: middle;
}

.empty-dashboard {
  padding: 28px;
}

.dashboard-empty-state {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 34px;
  border: 1px solid #edf0f5;
  border-radius: 18px;
  background: #ffffff;
}

.dashboard-empty-state p {
  margin: 0;
  color: #2356f6;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-empty-state h2 {
  margin: 0;
  color: #111827;
  font-size: 26px;
  line-height: 1.2;
}

.dashboard-empty-state span {
  color: #6b7280;
  font-size: 14px;
}

/* Reference ERP redesign layer
   Visual-only overrides based on the approved Inventory UI screenshots. */
:root {
  --ref-bg: #F6F7F3;
  --ref-surface: #ffffff;
  --ref-surface-soft: #fbfcf8;
  --ref-sidebar: #fbfcf8;
  --ref-text: #07120d;
  --ref-muted: #68736d;
  --ref-border: #e2e7dd;
  --ref-border-strong: #d4dccf;
  --ref-primary: #017100;
  --ref-primary-dark: #087b3b;
  --ref-primary-soft: #e6f7ec;
  --ref-blue: #3b82f6;
  --ref-blue-soft: #eaf2ff;
  --ref-orange: #f97316;
  --ref-orange-soft: #fff1e8;
  --ref-red: #ef4444;
  --ref-red-soft: #feecec;
  --ref-purple: #7c3aed;
  --ref-purple-soft: #f0e9ff;
  --ref-radius: 12px;
  --ref-radius-lg: 16px;
  --ref-shadow: 0 10px 24px rgba(14, 28, 18, 0.08);
  --ref-shadow-soft: 0 4px 12px rgba(14, 28, 18, 0.05);
  --ref-font: var(--app-font);
}

html,
body {
  background: var(--ref-bg);
  color: var(--ref-text);
  font-family: var(--ref-font);
  letter-spacing: 0;
}

body {
  overflow: hidden;
}

.app-shell {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--ref-bg);
}

.sidebar {
  position: sticky;
  top: 0;
  width: 206px;
  height: 100vh;
  padding: 16px 10px;
  background: var(--ref-sidebar);
  border-right: 1px solid var(--ref-border);
  box-shadow: none;
  color: var(--ref-text);
}

.brand {
  min-height: 50px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--ref-border);
  gap: 10px;
}

.brand-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.brand-copy span {
  display: block;
}

.brand-copy small {
  display: block;
  color: #66716b;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

.sidebar-company-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px;
  border: 1px solid #e2e7dd;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(14, 28, 18, 0.04);
}

.sidebar-company-card img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff7ed;
}

.sidebar-company-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-company-copy strong {
  overflow: hidden;
  color: #07120d;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-company-copy span {
  overflow: hidden;
  color: #647067;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1fb65a, #087b3b);
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.25);
}

.brand span {
  color: var(--ref-text);
  font-size: 16px;
  font-weight: 800;
}

.sidebar-toggle,
.icon-btn,
button.icon-btn {
  border: 1px solid var(--ref-border);
  background: var(--ref-surface);
  color: var(--ref-muted);
  border-radius: 10px;
  box-shadow: none;
}

.sidebar-toggle:hover,
.icon-btn:hover,
button.icon-btn:hover {
  background: var(--ref-primary-soft);
  color: var(--ref-primary-dark);
  border-color: #bfe8cc;
}

.side-nav {
  padding: 14px 0 78px;
  gap: 4px;
}

.nav-label {
  margin: 14px 10px 8px;
  color: var(--ref-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.nav-item,
.nav-section-toggle {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #101a15;
  font-size: 13px;
  font-weight: 650;
  background: transparent;
  border: 1px solid transparent;
}

.nav-item:hover,
.nav-section-toggle:hover {
  background: #f0f4ee;
  color: var(--ref-primary-dark);
}

.nav-item.active {
  background: var(--ref-surface);
  color: var(--ref-primary-dark);
  border-color: transparent;
  box-shadow: var(--ref-shadow-soft);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  width: 3px;
  height: 24px;
  border-radius: 999px;
  background: var(--ref-primary);
}

.sidebar-footer {
  left: 10px;
  right: 10px;
  bottom: 8px;
  padding: 10px 4px 0;
  background: var(--ref-sidebar);
  border-top: 1px solid var(--ref-border);
}

.sidebar-footer .nav-item {
  background: transparent;
  box-shadow: none;
}

.main-content {
  height: 100vh;
  overflow: auto;
  background: var(--ref-bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  padding: 12px 26px;
  background: rgba(251, 252, 248, 0.94);
  border-bottom: 1px solid var(--ref-border);
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.topbar-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
  color: var(--ref-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.topbar-breadcrumb svg {
  width: 13px;
  height: 13px;
  color: #9aa39e;
  stroke-width: 2;
}

.topbar-breadcrumb strong {
  color: var(--ref-text);
  font-weight: 800;
}

.app-shell[data-active-view="history"] #pageTitle {
  display: none;
}

/* Compact professional density pass */
:root {
  --ref-density-font: 12px;
}

html,
body {
  height: 100%;
  overflow: hidden;
  font-size: var(--ref-density-font);
}

body,
button,
input,
select,
textarea {
  font-size: 12px;
}

.app-shell:not(.sidebar-collapsed) {
  grid-template-columns: 206px minmax(0, 1fr);
}

.sidebar {
  width: 206px;
  padding: 10px 8px;
}

.brand {
  min-height: 42px;
  padding: 4px 8px 10px;
  gap: 8px;
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.brand span {
  font-size: 15px;
}

.side-nav {
  padding: 8px 0 52px;
  gap: 1px;
}

.nav-label {
  margin: 8px 10px 5px;
  font-size: 10px;
}

.nav-section {
  margin: 0;
}

.nav-section-toggle,
.nav-item,
.nav-section-items .nav-item,
.nav-section-items .nav-item:not(.has-more) {
  min-height: 29px;
  height: 29px;
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 7px;
}

.nav-section-items {
  gap: 1px;
  margin: 2px 0 3px;
  padding-left: 14px;
}

.nav-icon,
.nav-section-icon {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

.nav-icon svg,
.nav-section-icon svg,
.nav-section-toggle > svg {
  width: 15px;
  height: 15px;
}

.sidebar-footer {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 2px 0 0;
  margin-top: 2px;
}

.sidebar-footer .nav-item {
  height: 29px;
  min-height: 29px;
}

.topbar {
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.main-content {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.view {
  padding-top: 22px;
  padding-bottom: 40px;
}

.section-title h1,
.section-title h2,
.dashboard-hero h1,
.page-hero h1 {
  font-size: 21px;
}

.section-title p,
.dashboard-hero p,
.page-hero p,
.card-head p,
label,
tbody td,
thead th {
  font-size: 12px;
}

input,
select,
textarea {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

button,
.primary,
button.primary,
.secondary,
button.secondary,
.danger-btn,
.page-btn,
.tiny,
.user-save-btn,
.user-status-btn,
.user-delete-btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.stat-card {
  min-height: 96px;
  padding: 14px;
}

.stat-card strong,
.small-card .metric strong {
  font-size: 22px;
}

.card,
.form-card,
.table-card,
.settings-panel {
  padding: 16px;
}

.table-wrap th,
.table-wrap td {
  padding: 10px 12px;
}

.settings-layout,
.settings-panel,
.settings-form,
.user-management-list {
  max-height: none;
  overflow: visible;
}

.settings-panel:has(.user-management-list) {
  padding: 18px;
}

.settings-form:has(.user-management-list) {
  display: grid;
  gap: 14px;
}

.add-user-panel {
  grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 1.15fr) minmax(300px, 1.35fr) auto;
  gap: 12px;
  align-items: end;
  padding: 0 0 14px;
  margin: 0;
}

.add-user-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-checkbox-grid,
.add-user-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 8px;
}

.role-pill {
  min-width: 0;
}

.role-pill span,
.role-pill {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-management-list {
  display: grid;
  gap: 0;
  width: 100%;
}

.user-management-header,
.user-management-card {
  grid-template-columns: minmax(220px, 1.2fr) 92px minmax(390px, 1.8fr) minmax(230px, auto);
  gap: 14px;
  align-items: center;
}

.user-management-header {
  padding: 10px 0;
}

.user-management-card {
  padding: 14px 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--ref-border);
  border-bottom: 0;
}

.user-management-person {
  min-width: 0;
}

.user-management-person strong,
.user-management-person > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-management-actions {
  display: grid;
  grid-template-columns: 70px 92px 36px;
  gap: 8px;
  justify-content: end;
}

.user-management-actions button {
  min-width: 0;
  padding: 0 10px;
}

.user-delete-btn {
  width: 36px;
  padding: 0;
}

@media (max-width: 1200px) {
  .add-user-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .user-management-header {
    display: none;
  }

  .user-management-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .user-management-actions {
    justify-content: start;
  }
}

/* Remove nested scrolling from operational request/procurement sections */
#requestView,
#myRequestsView,
#transportView,
#approvalsView,
#poView {
  font-size: 11px;
}

#requestView .card,
#myRequestsView .card,
#transportView .card,
#approvalsView .card,
#poView .card,
#requestView .form-card,
#myRequestsView .form-card,
#transportView .form-card,
#approvalsView .form-card,
#poView .form-card,
#requestView .table-card,
#myRequestsView .table-card,
#transportView .table-card,
#approvalsView .table-card,
#poView .table-card {
  padding: 12px;
  overflow: visible;
}

#requestView .section-title,
#myRequestsView .section-title,
#transportView .section-title,
#approvalsView .section-title,
#poView .section-title {
  margin-bottom: 10px;
  gap: 6px 10px;
}

#requestView .section-title h2,
#myRequestsView .section-title h2,
#transportView .section-title h2,
#approvalsView .section-title h2,
#poView .section-title h2 {
  font-size: 18px;
}

#requestView .section-title p,
#myRequestsView .section-title p,
#transportView .section-title p,
#approvalsView .section-title p,
#poView .section-title p {
  font-size: 11px;
}

#requestView .form-grid,
#poView .po-form-grid,
#poView .form-grid,
#poView .po-entry-layout,
#poView .po-entry-columns,
#transportView .form-grid,
#approvalsView .form-grid {
  gap: 8px;
}

#requestView label,
#poView label,
#transportView label,
#approvalsView label {
  gap: 4px;
  font-size: 11px;
}

#requestView input,
#requestView select,
#requestView textarea,
#poView input,
#poView select,
#poView textarea,
#transportView input,
#transportView select,
#transportView textarea,
#approvalsView input,
#approvalsView select,
#approvalsView textarea {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

#requestView textarea,
#poView textarea,
#transportView textarea,
#approvalsView textarea {
  min-height: 54px;
}

#requestView button,
#myRequestsView button,
#transportView button,
#approvalsView button,
#poView button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
}

#requestView .table-wrap,
#myRequestsView .table-wrap,
#transportView .table-wrap,
#approvalsView .table-wrap,
#poView .table-wrap,
#requestView .requests-scroll,
#myRequestsView .requests-scroll {
  overflow: visible !important;
  max-height: none !important;
  width: 100%;
}

#requestView table,
#myRequestsView table,
#transportView table,
#approvalsView table,
#poView table {
  width: 100%;
  min-width: 0 !important;
  table-layout: auto;
}

#requestView th,
#requestView td,
#myRequestsView th,
#myRequestsView td,
#transportView th,
#transportView td,
#approvalsView th,
#approvalsView td,
#poView th,
#poView td {
  padding: 7px 6px;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

#requestView thead th,
#myRequestsView thead th,
#transportView thead th,
#approvalsView thead th,
#poView thead th {
  font-size: 10px;
}

#transportView .card,
#approvalsView .card {
  margin-bottom: 12px;
}

#poView .po-entry-section {
  padding: 10px;
}

#poView .po-entry-columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#poView .po-amount-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#poView .po-item-row {
  padding: 10px;
  gap: 8px;
}

#poView .po-item-row .form-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#poView .button-cell,
#transportView .button-cell,
#approvalsView .button-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

#poView .tiny,
#transportView .tiny,
#approvalsView .tiny {
  min-width: 0;
  min-height: 26px;
  padding: 0 7px;
  font-size: 10px;
}

/* Final no-nested-scroll override for dense operational tables */
#requestView .table-wrap,
#myRequestsView .table-wrap,
#transportView .table-wrap,
#approvalsView .table-wrap,
#poView .table-wrap,
#requestView .requests-scroll,
#myRequestsView .requests-scroll {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
}

#requestView .requests-scroll table,
#myRequestsView .requests-scroll table,
#requestView table,
#myRequestsView table,
#transportView table,
#approvalsView table,
#poView table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;
}

.search {
  max-width: 292px;
  margin-left: auto;
}

.search input,
input,
select,
textarea {
  border: 1px solid var(--ref-border);
  background: var(--ref-surface);
  color: var(--ref-text);
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--ref-font);
}

.search input {
  height: 38px;
  padding-left: 42px;
  font-size: 14px;
}

input:focus,
select:focus,
textarea:focus,
.search input:focus {
  border-color: #9ddfb6;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
  outline: none;
}

.profile {
  height: 42px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--ref-border);
  border-radius: 12px;
  background: var(--ref-surface);
  box-shadow: none;
}

.profile .avatar,
.avatar {
  background: var(--ref-primary);
  color: #fff;
  box-shadow: none;
}

.profile-menu {
  top: calc(100% + 8px);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius);
  background: var(--ref-surface);
  box-shadow: var(--ref-shadow);
}

.view {
  padding: 28px 26px 56px;
}

.section-title {
  align-items: flex-start;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.section-title h1,
.section-title h2,
.dashboard-hero h1,
.page-hero h1 {
  color: var(--ref-text);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 820;
  letter-spacing: 0;
}

.section-title h2 {
  font-size: 22px;
}

.section-title p,
.dashboard-hero p,
.page-hero p,
.card-head p {
  color: var(--ref-muted);
  font-size: 13px;
}

.dashboard-grid,
.stats-grid,
.compact-overview {
  gap: 14px;
}

.stat-card,
.card,
.form-card,
.table-card,
.dashboard-card,
.small-card,
.wide-card,
.chart-card,
.activity-card,
.dashboard-table-card {
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius-lg);
  box-shadow: none;
  color: var(--ref-text);
}

.dashboard-card,
.empty-dashboard,
.dashboard-empty-state {
  min-height: 258px;
}

.dashboard-empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 44px 24px;
}

.dashboard-empty-state .primary,
.dashboard-empty-state button.primary,
.empty-dashboard .primary,
.empty-dashboard button.primary {
  min-height: 34px;
  padding: 0 16px;
  font-size: 13px;
}

.stat-card {
  min-height: 118px;
  padding: 18px;
}

.stat-card:hover,
.stat-card:focus-visible,
.card:hover {
  transform: none;
  border-color: var(--ref-border-strong);
  box-shadow: var(--ref-shadow-soft);
}

.stat-icon,
.metric-icon,
.empty-icon,
.notification-avatar {
  background: var(--ref-primary-soft);
  color: var(--ref-primary-dark);
  border-radius: 10px;
}

.stat-card:nth-child(2n) .stat-icon {
  background: var(--ref-blue-soft);
  color: var(--ref-blue);
}

.stat-card:nth-child(3n) .stat-icon {
  background: var(--ref-orange-soft);
  color: var(--ref-orange);
}

.stat-card:nth-child(4n) .stat-icon {
  background: var(--ref-red-soft);
  color: var(--ref-red);
}

.stat-card small,
.stat-card span,
.metric-label {
  color: var(--ref-muted);
}

.stat-card strong,
.small-card .metric strong {
  color: var(--ref-text);
  font-size: 28px;
  font-weight: 850;
}

.card-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ref-border);
}

.filters,
.inventory-toolbar,
.form-actions,
.settings-actions,
.history-actions {
  gap: 10px;
}

button,
.primary,
button.primary,
.secondary,
button.secondary,
.danger-btn,
.page-btn,
.tiny,
.user-save-btn,
.user-status-btn,
.user-delete-btn {
  min-height: 34px;
  border-radius: 10px;
  font-family: var(--ref-font);
  font-weight: 750;
  letter-spacing: 0;
}

button.primary,
.primary,
.user-save-btn {
  background: var(--ref-primary);
  border: 1px solid var(--ref-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}

button.primary:hover,
.primary:hover,
.user-save-btn:hover {
  background: #119447;
  border-color: #017100;
  transform: none;
}

button.secondary,
.secondary,
.page-btn {
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  color: var(--ref-text);
  box-shadow: none;
}

button.secondary:hover,
.secondary:hover,
.page-btn:hover {
  background: #f0f4ee;
  border-color: var(--ref-border-strong);
  color: var(--ref-primary-dark);
}

.danger-btn,
.user-delete-btn,
.icon-danger {
  background: var(--ref-red);
  border-color: var(--ref-red);
  color: #fff;
}

label {
  color: #4f5b55;
  font-size: 13px;
  font-weight: 750;
}

input,
select,
textarea {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
}

textarea {
  min-height: 92px;
}

.form-grid,
.transport-grid,
.vendor-grid,
.po-form-grid,
.grn-grid,
.settings-grid {
  gap: 14px;
}

.category-tabs,
.module-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--ref-border);
}

.category-tab,
.tab-btn,
.notification-tab,
.settings-tab {
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ref-muted);
  box-shadow: none;
}

.category-tab.active,
.tab-btn.active,
.notification-tab.active,
.settings-tab.active {
  background: transparent;
  color: var(--ref-primary-dark);
  border-bottom-color: var(--ref-primary);
}

.category-tab .count,
.badge,
.status-badge {
  border-radius: 999px;
  background: var(--ref-primary-soft);
  color: var(--ref-primary-dark);
  font-weight: 800;
}

.table-wrap {
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius-lg);
  box-shadow: none;
  overflow: auto;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

thead th {
  background: var(--ref-surface-soft);
  color: #4d5a53;
  border-bottom: 1px solid var(--ref-border);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

tbody td {
  color: var(--ref-text);
  border-bottom: 1px solid var(--ref-border);
  font-size: 13px;
}

tbody tr:hover {
  background: #f7faf5;
}

tr.notification-target-highlight {
  animation: notificationTargetPulse 2.2s ease;
}

@keyframes notificationTargetPulse {
  0%, 100% {
    box-shadow: none;
  }
  18%, 72% {
    box-shadow: inset 4px 0 0 var(--primary), 0 0 0 1px rgba(20, 163, 83, 0.18);
    background: rgba(20, 163, 83, 0.08);
  }
}

.empty-state,
.empty-table,
.empty-dashboard,
.dashboard-empty-state,
.dashboard-empty,
.notification-empty {
  border: 1px dashed var(--ref-border-strong);
  border-radius: var(--ref-radius-lg);
  background: var(--ref-surface);
  color: var(--ref-muted);
}

.empty-state strong,
.empty-table strong,
.empty-dashboard strong,
.dashboard-empty-state h2,
.dashboard-empty strong,
.notification-empty strong {
  color: var(--ref-text);
}

.dashboard-empty-state p {
  color: var(--ref-primary-dark);
}

.notification-center {
  top: 76px;
  right: 24px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius-lg);
  box-shadow: var(--ref-shadow);
}

.notification-head {
  border-bottom: 1px solid var(--ref-border);
}

.notification-head h2 {
  color: var(--ref-text);
  font-weight: 850;
}

.notification-item {
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius);
  background: var(--ref-surface);
  box-shadow: none;
}

.notification-item:not(.read) {
  border-color: #bfe8cc;
  background: #fbfffc;
}

.notification-item:hover {
  background: #f7faf5;
}

.notification-body strong {
  color: var(--ref-text);
}

.notification-body p,
.notification-meta {
  color: var(--ref-muted);
}

.notification-dot {
  background: var(--ref-primary);
}

.modal-backdrop {
  background: rgba(24, 31, 26, 0.48);
  backdrop-filter: blur(3px);
}

.modal-card {
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius-lg);
  box-shadow: var(--ref-shadow);
}

.modal-head {
  border-bottom: 1px solid var(--ref-border);
}

.po-modal-card,
.po-cancel-card,
.delete-user-card {
  border-radius: var(--ref-radius-lg);
}

.profile-menu button,
.kebab-menu button {
  color: var(--ref-text);
  border-radius: 8px;
}

.profile-menu button:hover,
.kebab-menu button:hover {
  background: #f0f4ee;
  color: var(--ref-primary-dark);
}

.settings-layout {
  gap: 16px;
}

.settings-tabs,
.settings-panel,
.add-user-panel,
.user-management-card {
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius-lg);
  box-shadow: none;
}

.history-entry {
  background: var(--ref-surface);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius-lg);
  box-shadow: none;
}

.history-entry.open {
  border-color: #bfe8cc;
}

.history-icon {
  border-radius: 12px;
}

.toast {
  border-radius: 12px;
  border: 1px solid var(--ref-border);
  background: var(--ref-surface);
  color: var(--ref-text);
  box-shadow: var(--ref-shadow);
  font-weight: 700;
}

.toast.error {
  border-color: #fecaca;
  background: var(--ref-red-soft);
  color: #991b1b;
}

.toast.success {
  border-color: #bbf7d0;
  background: var(--ref-primary-soft);
  color: var(--ref-primary-dark);
}

.toast.warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #92400e;
}

.toast.info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
}

.toast-action {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
}

.toast-action:hover,
.toast-action:focus-visible {
  background: rgba(255, 255, 255, .55);
  outline: none;
  transform: none;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  border-right: 0;
  overflow: hidden;
}

.app-shell.sidebar-collapsed .brand {
  min-height: 44px;
  padding: 4px 0 12px;
  justify-content: center;
}

.app-shell.sidebar-collapsed .brand-mark {
  width: 32px;
  height: 32px;
}

.app-shell.sidebar-collapsed .brand span,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-item > span:last-child,
.app-shell.sidebar-collapsed .nav-section-toggle > span:not(.nav-section-icon),
.app-shell.sidebar-collapsed .nav-section-toggle > svg,
.app-shell.sidebar-collapsed .sidebar-footer {
  display: none;
}

.app-shell.sidebar-collapsed .side-nav {
  padding: 12px 0;
  align-items: center;
}

.app-shell.sidebar-collapsed .nav-section {
  width: 100%;
}

.app-shell.sidebar-collapsed .nav-item,
.app-shell.sidebar-collapsed .nav-section-toggle {
  width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0 auto 6px;
  justify-content: center;
  border-radius: 10px;
}

.app-shell.sidebar-collapsed .nav-icon,
.app-shell.sidebar-collapsed .nav-section-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
}

.app-shell.sidebar-collapsed .nav-item.active::before {
  left: -8px;
  height: 22px;
}

.app-shell.sidebar-collapsed .sidebar-toggle-main {
  display: none;
}

.app-shell.sidebar-collapsed .topbar-sidebar-toggle {
  display: inline-grid;
  opacity: 1;
  visibility: visible;
}

.app-shell.sidebar-collapsed .main-content {
  min-width: 0;
  grid-column: 2;
}

.app-shell.sidebar-collapsed .topbar {
  width: 100%;
  padding-left: 24px;
  padding-right: 36px;
}

.app-shell.sidebar-collapsed .view {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 196px minmax(0, 1fr);
  }

  .sidebar {
    width: 196px;
  }

  .view {
    padding: 22px 18px 48px;
  }

  .app-shell.sidebar-collapsed .view {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    z-index: 60;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
  }

  .main-content {
    height: auto;
    min-height: 100vh;
  }

  .topbar {
    padding: 10px 14px;
  }

  .search {
    max-width: none;
    flex: 1 1 100%;
  }

  .view {
    padding: 18px 14px 40px;
  }

  .app-shell.sidebar-collapsed .view {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section-title h1,
  .dashboard-hero h1,
  .page-hero h1 {
    font-size: 24px;
  }
}

/* Must be last: keep request/transport/approval/PO tables from nesting scrollbars. */
#requestView .table-wrap,
#myRequestsView .table-wrap,
#transportView .table-wrap,
#approvalsView .table-wrap,
#poView .table-wrap,
#requestView .requests-scroll,
#myRequestsView .requests-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--ref-border) !important;
  background: var(--ref-surface) !important;
}

#requestView .requests-scroll table,
#myRequestsView .requests-scroll table,
#requestView table,
#myRequestsView table,
#transportView table,
#approvalsView table,
#poView table {
  min-width: 980px !important;
  width: 100% !important;
  table-layout: auto !important;
}

#transportView table {
  min-width: 1220px !important;
}

#approvalsView table {
  min-width: 1040px !important;
}

#poView table {
  min-width: 1320px !important;
}

#requestView th,
#requestView td,
#myRequestsView th,
#myRequestsView td,
#transportView th,
#transportView td,
#approvalsView th,
#approvalsView td,
#poView th,
#poView td {
  padding: 8px 8px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle !important;
}

#requestView th,
#myRequestsView th,
#transportView th,
#approvalsView th,
#poView th {
  white-space: normal !important;
  color: #34443b !important;
  font-weight: 800 !important;
}

#requestView td,
#myRequestsView td,
#transportView td,
#approvalsView td,
#poView td {
  color: #111827 !important;
}

#requestView .button-cell,
#myRequestsView .button-cell,
#transportView .button-cell,
#approvalsView .button-cell,
#poView .button-cell {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: max-content !important;
}

#requestView .tiny,
#myRequestsView .tiny,
#transportView .tiny,
#approvalsView .tiny,
#poView .tiny {
  min-width: auto !important;
  white-space: nowrap !important;
}

#transportView .card,
#approvalsView .card,
#poView .card {
  overflow: hidden !important;
}

#transportView .section-title,
#approvalsView .section-title,
#poView .section-title {
  align-items: center !important;
}

/* Portal-wide table containment: keeps wide data inside cards/pages. */
* {
  box-sizing: border-box;
}

.app-shell,
.main-content,
.view {
  min-width: 0;
  max-width: 100%;
}

.main-content {
  overflow-x: hidden !important;
}

.view {
  width: 100%;
  max-width: 100%;
}

.card,
.form-card,
.table-card,
.settings-panel,
.dashboard-card,
.wide-card,
.small-card {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.table-card {
  padding: 14px;
}

.table-wrap,
.requests-scroll,
.dashboard-scroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: none !important;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.requests-scroll table,
.dashboard-scroll table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#requestsTable,
#myRequestsTable,
#inventoryApprovalsTable,
#transportApprovalsTable,
#poTable,
#goodsTransportTable,
#travelTransportTable,
#localTransportTable {
  font-size: 11px;
}

#requestView table,
#myRequestsView table,
#approvalsView table {
  min-width: 1080px !important;
}

#inventoryView table,
#issueView table,
#vendorsView table,
#grnView table {
  min-width: 900px !important;
}

#poView table {
  min-width: 1380px !important;
}

#transportView table {
  min-width: 1320px !important;
}

.table-wrap th,
.table-wrap td,
.requests-scroll th,
.requests-scroll td {
  max-width: 220px;
  padding: 9px 10px !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}

.table-wrap th,
.requests-scroll th {
  color: #34443b;
  font-weight: 800;
  background: var(--ref-surface-soft);
}

.table-wrap th:first-child,
.table-wrap td:first-child,
.requests-scroll th:first-child,
.requests-scroll td:first-child,
.table-wrap th:nth-child(2),
.table-wrap td:nth-child(2) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.table-wrap th:last-child,
.table-wrap td:last-child,
.requests-scroll th:last-child,
.requests-scroll td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 132px;
  max-width: none;
  white-space: nowrap;
  background: var(--ref-surface);
  box-shadow: -8px 0 12px rgba(14, 28, 18, 0.04);
}

.table-wrap thead th:last-child,
.requests-scroll thead th:last-child {
  z-index: 3;
  background: var(--ref-surface-soft);
}

.button-cell {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
}

.button-cell .tiny,
.tiny.success,
.tiny.danger,
.tiny {
  min-width: auto !important;
  min-height: 28px !important;
  height: 28px;
  padding: 0 10px !important;
  border-radius: 999px;
  font-size: 11px !important;
  line-height: 1;
  white-space: nowrap;
}

.tiny.success {
  color: #087b3b;
  background: var(--ref-primary-soft);
}

.tiny.danger {
  color: #991b1b;
  background: var(--ref-red-soft);
}

.status-badge,
.badge {
  white-space: nowrap;
}

td,
th {
  overflow: hidden;
  text-overflow: ellipsis;
}

#transportView td:nth-child(3),
#transportView td:nth-child(11),
#transportView td:nth-child(13),
#approvalsView td:nth-child(4),
#approvalsView td:nth-child(8),
#requestView td:nth-child(4),
#myRequestsView td:nth-child(4) {
  min-width: 150px;
  white-space: normal;
}

@media (max-width: 900px) {
  .sidebar {
    width: 188px;
  }

  .app-shell:not(.sidebar-collapsed) {
    grid-template-columns: 188px minmax(0, 1fr);
  }

  .view {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Restore original scrollable table behavior */
.table-card,
.card.table-card {
  overflow: hidden !important;
  max-width: 100% !important;
}

.table-wrap,
.requests-scroll,
.dashboard-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
  border-radius: 14px;
}

.table-wrap table,
.requests-scroll table,
.dashboard-scroll table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
}

.requests-scroll table,
#requestView table,
#myRequestsView table,
#approvalsView table {
  min-width: 1260px !important;
}

#transportView table {
  min-width: 1480px !important;
}

#poView table {
  min-width: 1500px !important;
}

#inventoryView table,
#issueView table,
#grnView table,
#vendorsView table {
  min-width: 980px !important;
}

.table-wrap th,
.table-wrap td,
.requests-scroll th,
.requests-scroll td {
  position: static !important;
  max-width: none !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  box-shadow: none !important;
}

.table-wrap th:last-child,
.table-wrap td:last-child,
.requests-scroll th:last-child,
.requests-scroll td:last-child {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  min-width: auto !important;
  background: inherit !important;
  box-shadow: none !important;
}

.button-cell {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
}

.button-cell .tiny,
.tiny.success,
.tiny.danger {
  min-width: 74px !important;
  min-height: 30px !important;
  height: 30px;
  padding: 0 12px !important;
  border-radius: 999px;
  font-size: 12px !important;
  white-space: nowrap !important;
}

#transportView .button-cell,
#approvalsView .button-cell,
#poView .button-cell {
  min-width: max-content !important;
}

/* Keep the topbar notification bell crisp after compact table/button overrides. */
.top-actions {
  align-items: center;
}

#notificationBtn.icon-btn,
.top-actions > .icon-btn.notification {
  position: relative;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  overflow: visible !important;
  flex: 0 0 40px !important;
}

#notificationBtn svg,
.top-actions > .icon-btn.notification svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
  display: block !important;
}

#notificationBtn.has-unread::after,
.top-actions > .icon-btn.notification.has-unread::after {
  content: attr(data-unread-count);
  position: absolute;
  top: 3px !important;
  right: 3px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid var(--ref-surface);
  box-shadow: none !important;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 13px;
  text-align: center;
}

/* Clean simple notification center */
.notification-center {
  top: 70px !important;
  right: 26px !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 92px) !important;
  padding: 0 !important;
  border: 1px solid #e2e6de !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 38px rgba(19, 28, 22, 0.14) !important;
  overflow: hidden !important;
}

.notification-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 20px 12px !important;
  border-bottom: 0 !important;
}

.notification-head h2 {
  margin: 0 !important;
  color: #101827 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

.notification-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.notification-tools .unread-toggle,
.notification-tools #closeNotificationCenter {
  display: none !important;
}

.mark-read-link {
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2563eb !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

.mark-read-link:hover {
  color: #0f4ccc !important;
  text-decoration: underline;
}

.notification-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin: 0 20px 14px !important;
  padding: 3px !important;
  border: 1px solid #e4e8df !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.notification-tab {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #6b7280 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notification-tab.active {
  background: #f4f6f3 !important;
  color: #18231d !important;
}

.notification-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8ece5;
  color: #26312a;
  font-size: 10px;
}

.notification-list {
  max-height: 430px !important;
  padding: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  background: #ffffff !important;
}

.notification-group {
  display: grid;
}

.notification-section-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px 8px;
  border-top: 1px solid #edf0e8;
  background: #f8faf7;
  color: #4b5563;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.notification-section-label em {
  color: #7a857d;
  font-style: normal;
  text-transform: none;
}

.notification-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 76px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid #edf0e8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer;
}

.notification-item:not(.read) {
  background: #f3f6ff !important;
}

.notification-item:hover {
  background: #f7faf5 !important;
}

.notification-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #dbeafe, #dcfce7) !important;
  color: #0f5132 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  overflow: hidden;
}

.notification-body {
  min-width: 0;
}

.notification-body strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #14161f !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-body p {
  display: block !important;
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-meta,
.notification-reply {
  display: none !important;
}

.notification-arrow {
  display: grid;
  place-items: center;
  color: #374151;
}

.notification-arrow svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
}

.notification-dot {
  position: absolute !important;
  top: 12px !important;
  left: 52px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  border: 2px solid #fff !important;
}

.notification-empty {
  margin: 0 !important;
  padding: 28px 20px !important;
  border: 0 !important;
  border-top: 1px solid #edf0e8 !important;
  border-radius: 0 !important;
  color: #6b7280 !important;
  background: #ffffff !important;
  text-align: center;
}

.notification-see-all {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid #edf0e8 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #3f433f !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.notification-see-all:hover {
  background: #f7faf5 !important;
}

/* Final table action/scroll corrections */
#approvalsView .table-wrap th:last-child,
#approvalsView .table-wrap td:last-child,
#transportView .table-wrap th:last-child,
#transportView .table-wrap td:last-child {
  min-width: 190px !important;
  width: 190px !important;
  max-width: 190px !important;
  overflow: visible !important;
}

#approvalsView .button-cell,
#transportView .button-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: 178px !important;
  min-width: 178px !important;
  overflow: visible !important;
}

#approvalsView .button-cell .tiny,
#transportView .button-cell .tiny {
  min-width: 78px !important;
  width: 78px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

#approvalsView .table-wrap td,
#transportView .table-wrap td {
  overflow: visible !important;
}

#grnView .table-wrap,
#poView .table-wrap {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

#grnView table,
#poView table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: auto !important;
}

#grnView .table-wrap th,
#grnView .table-wrap td,
#poView .table-wrap th,
#poView .table-wrap td {
  padding: 8px 8px !important;
  font-size: 11px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#poView .table-wrap th:last-child,
#poView .table-wrap td:last-child,
#grnView .table-wrap th:last-child,
#grnView .table-wrap td:last-child {
  min-width: 92px !important;
  width: auto !important;
  max-width: none !important;
}

#grnView {
  background: #F6F7F3;
  padding: 0 0 32px;
}

#grnView .grn-screen-shell {
  display: grid;
  gap: 16px;
}

#grnView .grn-records-card {
  overflow: hidden;
  border: 1px solid #e0e7dc;
  border-radius: 20px;
  background: #fff;
}

#grnView .table-wrap {
  overflow-x: auto !important;
}

#grnView table {
  width: 100% !important;
  min-width: 920px !important;
  border-collapse: collapse;
}

#grnView .table-wrap th,
#grnView .table-wrap td {
  height: 54px;
  padding: 0 18px !important;
  border-bottom: 1px solid #edf1ea;
  color: #17221d;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

#grnView .table-wrap th {
  height: 42px;
  color: #66716b;
  background: #fff;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#grnView .table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

#grnView .table-wrap td:first-child {
  font-weight: 900;
}

#grnView .grn-status-pill {
  min-width: 104px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e2e7df;
  border-radius: 999px;
  padding: 0 12px;
  color: #17221d;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

#grnView .grn-status-pill::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6f7d77;
}

#grnView .grn-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

#grnView .grn-row-actions .tiny {
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  padding: 0;
  color: #66716b;
  background: transparent;
}

#grnView .grn-row-actions .tiny svg {
  width: 15px;
  height: 15px;
}

.grn-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  justify-content: flex-end;
  padding: 18px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.grn-drawer.show {
  display: flex;
}

.grn-drawer-card {
  position: relative;
  z-index: 1;
  width: min(820px, 100%);
  height: 100%;
  max-height: calc(100vh - 36px);
  margin: 0;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 18, .22);
}

.grn-drawer-card .section-title {
  padding-right: 46px;
}

.grn-drawer-card .section-title h2 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.grn-drawer-card .section-title p {
  margin: 0;
  line-height: 1.45;
}

.grn-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

.grn-po-item-field {
  display: none !important;
}

.grn-po-lines-wrap {
  display: grid;
  gap: 10px;
}

.grn-po-lines-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.grn-po-lines-head strong {
  color: #172033;
  font-size: 13px;
}

.grn-po-lines-head span {
  color: #667085;
  font-size: 12px;
}

.grn-po-lines-table-wrap {
  max-height: 320px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.grn-po-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.grn-po-lines-table th,
.grn-po-lines-table td {
  padding: 8px;
  border-bottom: 1px solid #edf1f6;
  vertical-align: middle;
}

.grn-po-lines-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #475467;
  text-align: left;
  font-weight: 800;
}

.grn-po-lines-table td strong,
.grn-po-lines-table td span {
  display: block;
}

.grn-po-lines-table td span {
  margin-top: 2px;
  color: #667085;
}

.grn-po-lines-table .numeric {
  text-align: right;
  white-space: nowrap;
}

.grn-po-lines-table input {
  width: 92px;
  min-height: 34px;
  padding: 6px 8px;
}

body.grn-drawer-open .sidebar {
  pointer-events: none;
}

body.grn-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.vendor-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  justify-content: flex-end;
  padding: 18px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.vendor-drawer.show {
  display: flex;
}

.vendor-drawer-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  height: 100%;
  max-height: calc(100vh - 36px);
  margin: 0;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 18, .22);
}

.vendor-drawer-card .section-title {
  padding-right: 46px;
}

.vendor-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

body.vendor-drawer-open .sidebar {
  pointer-events: none;
}

body.vendor-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Sidebar hover/active icons stay green, never blue. */
.sidebar .nav-item:hover,
.sidebar .nav-section-toggle:hover,
.sidebar .nav-item.active {
  color: var(--ref-primary-dark) !important;
}

.sidebar .nav-item:hover svg,
.sidebar .nav-section-toggle:hover svg,
.sidebar .nav-item.active svg,
.sidebar .nav-section-toggle:hover .nav-section-icon,
.sidebar .nav-item.active .nav-icon {
  color: var(--ref-primary-dark) !important;
  stroke: currentColor !important;
}

/* Must be last: show both action buttons on approval/transport screens. */
#approvalsView .table-wrap,
#transportView .table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

#approvalsView table,
#transportView table {
  table-layout: auto !important;
}

#approvalsView .table-wrap th:last-child,
#approvalsView .table-wrap td:last-child,
#transportView .table-wrap th:last-child,
#transportView .table-wrap td:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 5 !important;
  min-width: 210px !important;
  width: 210px !important;
  max-width: 210px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  background: var(--ref-surface) !important;
  box-shadow: -10px 0 14px rgba(14, 28, 18, 0.08) !important;
}

#approvalsView .table-wrap thead th:last-child,
#transportView .table-wrap thead th:last-child {
  z-index: 6 !important;
  background: var(--ref-surface-soft) !important;
}

#approvalsView .button-cell,
#transportView .button-cell,
#inventoryApprovalsTable .button-cell,
#transportApprovalsTable .button-cell,
#goodsTransportTable .button-cell,
#travelTransportTable .button-cell,
#localTransportTable .button-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  width: 186px !important;
  min-width: 186px !important;
  max-width: 186px !important;
  overflow: visible !important;
}

#approvalsView .button-cell .tiny,
#transportView .button-cell .tiny,
#inventoryApprovalsTable .button-cell .tiny,
#transportApprovalsTable .button-cell .tiny,
#goodsTransportTable .button-cell .tiny,
#travelTransportTable .button-cell .tiny,
#localTransportTable .button-cell .tiny {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  width: 86px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Reference-style User Management screen */
#settingsView:has(.user-management-list) {
  max-width: 1280px;
  margin: 0 auto;
}

#settingsView:has(.user-management-list) .settings-layout {
  display: block;
}

#settingsView:has(.user-management-list) .settings-tabs,
#settingsView:has(.user-management-list) #settingsSectionTitle,
#settingsView:has(.user-management-list) #settingsSectionDescription {
  display: none;
}

#settingsView:has(.user-management-list) .settings-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.user-management-page-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.user-management-title-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ref-primary-soft);
  color: var(--ref-primary-dark);
}

.user-management-page-head h2 {
  margin: 0;
  color: var(--ref-text);
  font-size: 25px;
  line-height: 1.15;
}

.user-management-page-head p {
  margin: 4px 0 0;
  color: var(--ref-muted);
  font-size: 13px;
}

.user-export-btn {
  height: 36px;
  min-height: 36px;
}

.add-user-panel {
  display: grid !important;
  grid-template-columns: 190px 420px minmax(320px, 1fr) 120px !important;
  align-items: start !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
  padding: 24px !important;
  border: 1px solid var(--ref-border) !important;
  border-radius: 12px !important;
  background: var(--ref-surface) !important;
  box-shadow: var(--ref-shadow-soft) !important;
}

.add-user-panel > div:first-child {
  align-self: start;
}

.add-user-panel strong {
  color: var(--ref-text);
  font-size: 16px;
  font-weight: 850;
}

.add-user-panel span {
  color: var(--ref-muted);
  font-size: 12px;
  line-height: 1.45;
}

.add-user-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.add-user-fields label,
.add-user-roles label {
  font-size: 12px;
}

.add-user-fields input {
  height: 36px;
  min-height: 36px;
}

.add-user-roles,
.role-checkbox-grid.add-user-roles {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(102px, 1fr)) !important;
  gap: 8px !important;
}

#addUserBtn {
  height: 36px;
  min-height: 36px;
  align-self: end;
  gap: 7px;
}

.user-management-list {
  overflow: hidden !important;
  border: 1px solid var(--ref-border);
  border-radius: 12px;
  background: var(--ref-surface);
  box-shadow: var(--ref-shadow-soft);
}

.user-management-toolbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 330px);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 12px;
}

.user-management-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #48554e;
  font-size: 12px;
}

.user-management-toolbar select,
.user-management-toolbar input {
  height: 34px;
  min-height: 34px;
}

.user-management-search {
  position: relative;
}

.user-management-search input {
  width: 100%;
  min-width: 300px;
}

.user-management-header,
.user-management-card {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.35fr) 110px minmax(360px, 1.6fr) 310px !important;
  gap: 16px !important;
  align-items: center !important;
}

.user-management-header {
  padding: 12px 24px !important;
  border-top: 1px solid var(--ref-border);
  border-bottom: 1px solid var(--ref-border);
  background: #fbfcf8;
  color: #34443b;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.user-management-card {
  min-height: 98px;
  padding: 18px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ref-border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

.user-management-card:last-child {
  border-bottom: 0 !important;
}

.user-management-person {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.user-management-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dff7e8;
  color: #0b7a3a;
  font-size: 13px;
  font-weight: 850;
}

.user-management-card:nth-child(3n) .user-management-avatar {
  background: #e9e7ff;
  color: #4338ca;
}

.user-management-card:nth-child(4n) .user-management-avatar {
  background: #fff1c7;
  color: #854d0e;
}

.user-management-identity {
  min-width: 0;
}

.user-management-identity strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ref-text);
  font-size: 13px;
  font-weight: 850;
}

.user-management-identity span {
  display: block;
  color: #4b5563;
  font-size: 12px;
}

.user-management-status .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--ref-primary-soft);
  color: var(--ref-primary-dark);
  font-size: 12px;
}

.user-management-status .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.role-checkbox-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.role-pill {
  min-width: 94px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border: 1px solid #d4dbe3 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  color: #374151 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.role-pill.selected {
  border-color: #22c55e !important;
  background: #dcfce7 !important;
  color: #087b3b !important;
}

.role-pill.selected::before {
  content: "✓";
  margin-right: 8px;
  color: #087b3b;
  font-weight: 900;
}

.user-management-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.user-management-actions button {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

.user-management-actions .user-save-btn {
  min-width: 82px !important;
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #087b3b !important;
  box-shadow: none !important;
}

.user-status-btn {
  min-width: 118px !important;
  background: #fff !important;
  border: 1px solid #f87171 !important;
  color: #dc2626 !important;
}

.user-delete-btn {
  width: 36px !important;
  min-width: 36px !important;
  background: #fff !important;
  border: 0 !important;
  color: #374151 !important;
}

.user-management-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  color: #4b5563;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .add-user-panel,
  .user-management-header,
  .user-management-card {
    grid-template-columns: 1fr !important;
  }

  .user-management-header {
    display: none !important;
  }

  .user-management-actions {
    justify-content: flex-start !important;
  }

  .user-management-toolbar {
    grid-template-columns: 1fr;
  }
}

/* Jira-style approvals request board */
#approvalsView {
  display: none;
}

#approvalsView.active {
  display: grid;
  gap: 18px;
}

.approvals-board-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.transport-board-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.approvals-board-card .temporal-filter-wrap,
.transport-board-card .temporal-filter-wrap {
  margin-bottom: 18px;
}

.approvals-board,
.transport-board {
  display: grid;
  grid-template-columns: repeat(var(--kanban-columns, 4), minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
  gap: 8px;
  min-height: 0;
  padding: 10px 0 2px;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
}

.transport-board {
  --kanban-columns: 5;
}

.approval-kanban-column {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  gap: 6px;
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 210px);
  padding: 10px 7px 9px;
  border: 1px solid #d9dde3;
  border-radius: 10px;
  background: #f4f4f4;
  overflow: hidden;
}

.approval-kanban-column header {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 5px 3px;
  color: #374151;
  font-size: 13px;
  font-weight: 750;
}

.approval-kanban-column header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.approval-kanban-column header svg {
  width: 15px !important;
  height: 15px !important;
}

.approval-kanban-column header strong {
  min-width: 24px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #d1d5db;
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
}

.approval-column-tools {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.approval-column-menu-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #64748b !important;
  cursor: pointer;
}

.approval-column-menu-btn:hover,
.approval-column-menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #334155 !important;
}

.approval-column-menu-btn svg {
  width: 17px !important;
  height: 17px !important;
}

.approval-column-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 156px;
  display: none;
  padding: 6px;
  border: 1px solid #d8dde5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.approval-column-menu.show {
  display: grid;
  gap: 2px;
}

.approval-column-menu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  padding: 0 9px;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

.approval-column-menu button:hover {
  background: #f1f5f9;
}

.approval-column-menu button svg {
  width: 15px !important;
  height: 15px !important;
}

.approval-kanban-column.new header span { color: #111827; }
.approval-kanban-column.pending header span { color: #2563eb; }
.approval-kanban-column.approved header span { color: #15803d; }
.approval-kanban-column.rejected header span { color: #dc2626; }
.transport-column.cancelled header span { color: #dc2626; }
.transport-column.completed header span { color: #15803d; }
.transport-column.arranged header span { color: #0f766e; }

.approval-kanban-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  max-height: calc(100vh - 285px);
  overflow-y: auto;
  padding: 0 3px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: #858585 transparent;
}

.approval-kanban-list::-webkit-scrollbar {
  width: 10px;
}

.approval-kanban-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #858585;
}

.approval-kanban-card {
  width: 100%;
  height: auto !important;
  min-height: 76px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 9px !important;
  border: 1px solid #d8dde5;
  border-radius: 8px;
  background: #ffffff;
  color: #2f343b;
  box-shadow: 0 1px 1px rgba(17, 24, 39, 0.12);
  cursor: pointer;
  text-align: left;
  overflow: hidden !important;
  flex: 0 0 auto;
}

.approval-kanban-card:hover,
.approval-kanban-card:focus-visible {
  border-color: #b8cec0;
  box-shadow: 0 8px 20px rgba(20, 35, 45, 0.10);
  outline: 0;
}

.approval-kanban-card strong {
  display: block;
  color: #30343a;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-kanban-card em {
  width: max-content;
  max-width: 100%;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2f5f9f;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-kanban-card span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5b6670;
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-kanban-card svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px;
  color: #6b7280;
}

.approval-kanban-empty {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px dashed #c8ccd2;
  border-radius: 8px;
  color: #69707a;
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 650;
}

.approval-detail-card {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.approval-detail-card .modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: start;
  gap: 14px;
  padding: 22px 22px 14px;
  border-bottom: 1px solid #e7ebe5;
}

#closeApprovalDetail.icon-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #dfe6dc !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #53605a !important;
  line-height: 0 !important;
}

#closeApprovalDetail svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

#approvalDetailContent {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 22px;
  scrollbar-width: thin;
}

.po-detail-card {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

#poDetailContent {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 22px;
  scrollbar-width: thin;
}

.po-detail-stack {
  display: grid;
  gap: 16px;
}

.po-detail-section {
  display: grid;
  gap: 12px;
}

.po-detail-section h3 {
  margin: 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 800;
}

.po-detail-items {
  display: grid;
  gap: 10px;
}

.po-detail-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e5e9e1;
  border-radius: 10px;
  background: #fbfcf8;
}

.po-detail-item-head,
.po-detail-totals div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.po-detail-item-head strong {
  min-width: 0;
  color: #172033;
  font-size: 14px;
}

.po-detail-item-head span,
.po-detail-item-meta span {
  color: #5b6670;
  font-size: 12px;
}

.po-detail-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.po-detail-item p,
.po-detail-note {
  margin: 0;
  color: #334155;
  line-height: 1.5;
}

.po-detail-totals {
  width: min(100%, 320px);
  margin-left: auto;
  display: grid;
  gap: 8px;
}

.po-detail-totals div {
  padding: 12px 14px;
  border: 1px solid #e5e9e1;
  border-radius: 10px;
  background: #ffffff;
}

.po-detail-totals strong {
  color: #172033;
}

.approval-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.approval-detail-grid div {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid #e5e9e1;
  border-radius: 8px;
  background: #fbfcf8;
}

.approval-detail-grid span {
  color: #6b7280;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.approval-detail-grid strong {
  min-width: 0;
  color: #172033;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.approval-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: nowrap;
}

.approval-detail-actions .primary,
.approval-detail-actions .danger-btn {
  width: auto !important;
  min-width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.approval-detail-actions .document-preview-po-edit {
  width: auto !important;
  min-width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.approval-detail-actions .primary svg,
.approval-detail-actions .danger-btn svg,
.approval-detail-actions .document-preview-po-edit svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

.approval-detail-actions .po-number-edit-action {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

.approval-detail-actions .po-number-edit-action svg {
  width: 15px !important;
  height: 15px !important;
}

.approval-detail-status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.approval-history-list {
  display: grid;
  gap: 8px;
}

.approval-history-item {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 12px 14px;
  border: 1px solid #e1e6df;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  cursor: pointer;
  text-align: left;
}

.approval-history-item:hover {
  border-color: #b8cec0;
  background: #f8faf7;
}

.approval-history-item strong {
  grid-column: 1;
  color: #1f2937;
  font-size: 14px;
  font-weight: 800;
}

.approval-history-item span:not(.approval-history-type) {
  grid-column: 1;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.approval-history-item time {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.approval-history-type {
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2f5f9f;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .approvals-board,
  .transport-board {
    grid-template-columns: repeat(var(--kanban-columns, 4), minmax(0, 1fr));
    gap: 6px;
  }

  .approval-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep sidebar menu labels visually consistent. */
.sidebar .nav-item,
.sidebar .nav-section-toggle,
.sidebar .nav-section-items .nav-item {
  font-weight: 500 !important;
}

.sidebar .nav-item.active {
  font-weight: 500 !important;
}

/* Sidebar brand and footer alignment */
.sidebar .brand {
  align-items: center;
}

.sidebar .brand span {
  font-size: 24px;
  font-weight: 850;
  letter-spacing: 0;
}

.sidebar .brand span::before,
.sidebar .brand span::after {
  content: none !important;
  display: none !important;
}

.sidebar .brand-mark {
  width: 28px;
  height: 28px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--primary);
}

.sidebar .brand-mark svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.sidebar-footer {
  padding-left: 0;
  padding-right: 0;
}

.sidebar-footer .nav-section,
.sidebar-footer .nav-item {
  width: 100%;
}

.sidebar-footer .nav-item,
.sidebar-footer .nav-item:not(.has-more) {
  margin-left: 0;
  margin-right: 0;
  padding-left: 12px;
  padding-right: 12px;
}

/* Keep saved PO actions compact inside the table grid. */
#poView .table-wrap:has(#poTable),
#servicePoView .table-wrap:has(#servicePoTable),
#procurementPoPanel .table-wrap:has(#poTable),
#procurementServicePoPanel .table-wrap:has(#servicePoTable) {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#poDetailModal {
  align-items: center;
  padding: 18px;
  overflow: hidden;
}

#poDetailModal .po-detail-card {
  width: min(calc(210mm + 72px), calc(100vw - 36px));
  height: min(860px, calc(100dvh - 36px));
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

#poDetailModal .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e9e1;
  background: #ffffff;
}

#poDetailModal .modal-head .section-title {
  min-width: 0;
}

#poDetailModal .modal-head h2,
#poDetailModal .modal-head p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#poDetailModal .modal-head h2 {
  max-width: calc(100vw - 120px);
}

#poDetailModal #poDetailContent {
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
  scrollbar-gutter: stable;
}

#poDetailModal .po-detail-stack {
  gap: 18px;
}

#poDetailModal .approval-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#poDetailModal .approval-detail-grid div {
  min-height: 58px;
  padding: 11px 12px;
}

#poDetailModal .po-detail-item {
  border-radius: 8px;
}

#poDetailModal .po-detail-item-head strong {
  overflow-wrap: anywhere;
}

#poDetailModal .po-detail-totals {
  max-width: 360px;
}

@media (max-width: 720px) {
  #poDetailModal {
    align-items: stretch;
    padding: 10px;
  }

  #poDetailModal .po-detail-card {
    width: 100%;
    height: calc(100dvh - 20px);
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 12px;
  }

  #poDetailModal .modal-head {
    padding: 14px 16px;
  }

  #poDetailModal #poDetailContent {
    padding: 14px 16px 18px;
  }

  #poDetailModal .approval-detail-grid {
    grid-template-columns: 1fr;
  }

  #poDetailModal .po-detail-item-head,
  #poDetailModal .po-detail-totals div {
    align-items: flex-start;
  }

  #poDetailModal .po-detail-item-head {
    flex-direction: column;
  }

  #poDetailModal .po-detail-totals {
    width: 100%;
    max-width: none;
  }
}

#poView .table-wrap:has(#poTable) table,
#servicePoView .table-wrap:has(#servicePoTable) table,
#procurementPoPanel .table-wrap:has(#poTable) table,
#procurementServicePoPanel .table-wrap:has(#servicePoTable) table {
  min-width: 1120px !important;
  table-layout: auto !important;
}

#poView #poTable td:last-child,
#servicePoView #servicePoTable td:last-child,
#poView .table-wrap:has(#poTable) th:last-child,
#poView .table-wrap:has(#poTable) td:last-child,
#servicePoView .table-wrap:has(#servicePoTable) th:last-child,
#servicePoView .table-wrap:has(#servicePoTable) td:last-child,
#procurementPoPanel .table-wrap:has(#poTable) th:last-child,
#procurementPoPanel .table-wrap:has(#poTable) td:last-child,
#procurementServicePoPanel .table-wrap:has(#servicePoTable) th:last-child,
#procurementServicePoPanel .table-wrap:has(#servicePoTable) td:last-child {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  min-width: 172px !important;
  width: 172px !important;
  max-width: 172px !important;
  padding: 8px 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right !important;
  vertical-align: middle !important;
}

#poView .table-wrap:has(#poTable) th:last-child,
#servicePoView .table-wrap:has(#servicePoTable) th:last-child,
#procurementPoPanel .table-wrap:has(#poTable) th:last-child,
#procurementServicePoPanel .table-wrap:has(#servicePoTable) th:last-child {
  background: var(--ref-surface-soft) !important;
}

#poView .table-wrap:has(#poTable) td:last-child,
#servicePoView .table-wrap:has(#servicePoTable) td:last-child,
#procurementPoPanel .table-wrap:has(#poTable) td:last-child,
#procurementServicePoPanel .table-wrap:has(#servicePoTable) td:last-child {
  background: transparent !important;
}

#poView .table-wrap:has(#poTable) th:nth-child(12),
#poView .table-wrap:has(#poTable) td:nth-child(12) {
  min-width: 170px !important;
  width: 170px !important;
  max-width: 210px !important;
}

#poTable .button-cell,
#servicePoTable .button-cell {
  display: table-cell !important;
  vertical-align: middle !important;
}

#poTable .tiny,
#servicePoTable .tiny {
  width: auto !important;
  min-width: 52px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border: 1px solid var(--ref-border) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: var(--ref-text) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#poTable .tiny:hover,
#servicePoTable .tiny:hover {
  border-color: rgba(20, 163, 83, 0.35) !important;
  background: #f7faf5 !important;
  color: var(--primary) !important;
}

/* Final compact fit for User Management. */
#settingsView:has(.user-management-list) {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  overflow-x: hidden !important;
}

/* Reusable skeleton loading states */
.loading {
  position: relative;
}

.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 8px;
  opacity: 0.82;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-row td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.skeleton-card {
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.skeleton-card.compact {
  display: grid;
  gap: 10px;
  min-height: 104px;
}

.skeleton-line {
  height: 12px;
  max-width: 100%;
}

.skeleton-line.short {
  width: 38%;
}

.skeleton-line.wide {
  width: 76%;
}

.skeleton-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

tbody.loading .skeleton-line {
  min-width: 44px;
}

.button-loading-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.14em;
  animation: loader-spin 0.72s linear infinite;
}

button[data-loading="true"],
.primary[data-loading="true"],
.secondary[data-loading="true"],
.danger-btn[data-loading="true"] {
  cursor: wait;
  opacity: 0.82;
}

button[data-loading="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.inline-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 108px;
  padding: 22px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.14);
}

.page-loader.show {
  display: grid;
}

.page-loader-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  padding: 14px 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #17211b;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  font-size: 14px;
  font-weight: 800;
}

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

.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 132px;
  padding: 22px;
  color: #64748b;
  text-align: center;
}

.empty-state-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef2f7;
  color: #64748b;
}

.empty-state-icon svg {
  width: 20px;
  height: 20px;
}

.empty-state strong {
  color: #0f172a;
  font-size: 15px;
}

.empty-state p {
  max-width: 420px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

body[data-theme="dark"] .skeleton {
  background: #243244;
}

body[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

/* Professional portal motion */
@keyframes imsFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes imsScaleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes imsSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

:where(.nav-item, .nav-section-toggle, button, .primary, .secondary, .tiny, .page-btn, input, select, textarea, .card, .table-card, .form-card, .table-wrap, .inventory-module-tab, .category-tab, .po-status-filter, .filter-clear-button) {
  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.brand,
.topbar,
.page-head {
  animation: imsFadeUp .34s ease both;
}

.sidebar .nav-group {
  animation: imsSlideInLeft .34s ease both;
}

.sidebar .nav-group:nth-child(2) {
  animation-delay: .05s;
}

.view.active {
  animation: imsFadeUp .28s ease both;
}

.view.active :where(.inventory-page-header, .section-title, .history-heading, .po-records-head) {
  animation: imsFadeUp .3s ease both;
}

.view.active :where(.inventory-module-tabs, .po-records-toolbar, .vendors-records-toolbar, .stock-issue-toolbar, .requisition-actions) {
  animation: imsFadeUp .34s ease .04s both;
}

.view.active :where(.card, .table-card, .form-card, .inventory-lumen-card, .po-records-card, .vendors-records-card, .grn-records-card, .transport-board-card, .approvals-board-card, .settings-panel, .settings-tabs, .history-entry) {
  animation: imsScaleIn .32s ease both;
}

.view.active :where(.card, .table-card, .form-card, .inventory-lumen-card, .po-records-card, .vendors-records-card, .grn-records-card):nth-of-type(2) {
  animation-delay: .04s;
}

.view.active :where(.card, .table-card, .form-card, .inventory-lumen-card, .po-records-card, .vendors-records-card, .grn-records-card):nth-of-type(3) {
  animation-delay: .08s;
}

.view.active tbody tr,
.view.active .inventory-item-card,
.view.active .approval-kanban-column,
.view.active .approval-kanban-card,
.view.active .transport-kanban-card,
.view.active .dashboard-feed-row,
.view.active .settings-tab {
  animation: imsRowIn .26s ease both;
}

.view.active tbody tr:nth-child(2),
.view.active .inventory-item-card:nth-child(2),
.view.active .approval-kanban-column:nth-child(2),
.view.active .settings-tab:nth-child(2) {
  animation-delay: .025s;
}

.view.active tbody tr:nth-child(3),
.view.active .inventory-item-card:nth-child(3),
.view.active .approval-kanban-column:nth-child(3),
.view.active .settings-tab:nth-child(3) {
  animation-delay: .05s;
}

.view.active tbody tr:nth-child(4),
.view.active .inventory-item-card:nth-child(4),
.view.active .approval-kanban-column:nth-child(4),
.view.active .settings-tab:nth-child(4) {
  animation-delay: .075s;
}

.view.active tbody tr:nth-child(n+5),
.view.active .inventory-item-card:nth-child(n+5),
.view.active .approval-kanban-column:nth-child(n+5),
.view.active .settings-tab:nth-child(n+5) {
  animation-delay: .1s;
}

:where(button, .primary, .secondary, .tiny, .page-btn, .nav-item, .inventory-module-tab, .category-tab, .po-status-filter):hover {
  transform: translateY(-1px);
}

:where(button, .primary, .secondary, .tiny, .page-btn):active {
  transform: translateY(0) scale(.99);
}

:where(input, select, textarea):focus {
  border-color: rgba(29, 175, 82, .55);
  box-shadow: 0 0 0 3px rgba(29, 175, 82, .12);
}

.modal-backdrop.show,
.po-drawer.show,
.grn-drawer.show,
.vendor-drawer.show,
.stock-issue-drawer.show,
.search-overlay.show,
.notification-center.show {
  animation: imsFadeUp .22s ease both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

#deleteVendorModal {
  z-index: 85;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#deleteVendorModal .modal-card {
  position: relative;
  z-index: 2;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Lumen-style Settings refresh */
#settingsView {
  --settings-green: #017100;
  --settings-green-dark: #087239;
  --settings-soft: #f7faf7;
  --settings-line: #dfe7dd;
  --settings-muted: #647067;
  --settings-ink: #06140c;
  background: var(--settings-soft);
}

#settingsView .settings-layout {
  display: block;
  padding: 30px 32px 44px;
  max-width: 100%;
}

#settingsView .settings-page-heading {
  margin-bottom: 18px;
}

#settingsView .settings-page-heading h1 {
  margin: 0 0 6px;
  color: var(--settings-ink);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
}

#settingsView .settings-page-heading p,
#settingsView #settingsSectionDescription {
  margin: 0;
  color: var(--settings-muted);
  font-size: 14px;
}

#settingsView .settings-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--settings-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

#settingsView .settings-tab {
  position: relative;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--settings-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--settings-ink);
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
}

#settingsView .settings-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -15px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--settings-green);
  opacity: 0;
  transform: scaleX(.45);
  transition: opacity .2s ease, transform .2s ease;
}

#settingsView .settings-tab svg {
  width: 15px;
  height: 15px;
}

#settingsView .settings-tab.active {
  border-color: var(--settings-green-dark);
  background: var(--settings-green-dark);
  color: #ffffff;
}

#settingsView .settings-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

#settingsView .settings-panel,
#settingsView:has(.user-management-list) .settings-panel {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#settingsView .settings-title {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

#settingsView .settings-title h2 {
  margin: 0 0 6px;
  color: var(--settings-ink);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}

#settingsView .settings-form {
  display: block;
  max-width: none;
}

#settingsView .user-management-list,
#settingsView .settings-role-card {
  border: 1px solid var(--settings-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
}

#settingsView .setting-field {
  display: grid;
  gap: 8px;
  color: #7a847d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#settingsView .setting-field.full {
  grid-column: 1 / -1;
}

#settingsView input,
#settingsView textarea {
  border: 1px solid var(--settings-line);
  border-radius: 8px;
  color: var(--settings-ink);
  background: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
}

#settingsView textarea {
  min-height: 70px;
  resize: vertical;
}

#settingsView .settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

#settingsView .primary {
  min-height: 38px;
  border-radius: 10px;
  background: var(--settings-green);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(22, 163, 74, .16);
}

#settingsView .secondary,
#settingsView .user-save-btn,
#settingsView .user-status-btn {
  border: 1px solid var(--settings-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--settings-ink);
}

#settingsView .user-management-page-head {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  margin-bottom: 18px;
}

#settingsView .user-management-page-head h2 {
  margin: 0 0 6px;
  color: var(--settings-ink);
  font-size: 28px;
}

#settingsView .settings-team-actions,
#settingsView .settings-roles-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

#settingsView .settings-team-actions span,
#settingsView .settings-roles-head span {
  color: var(--settings-ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

#settingsView .add-user-panel {
  margin: 0 0 18px;
  border: 1px solid var(--settings-line);
  border-radius: 18px;
  background: #ffffff;
}

#settingsView .settings-team-table .user-management-header,
#settingsView .settings-team-table .user-management-card {
  grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1fr) 120px minmax(170px, .9fr) 120px minmax(220px, auto);
}

#settingsView .settings-team-table .user-management-header {
  color: #667067;
  background: #fbfdfb;
  border-bottom: 1px solid var(--settings-line);
}

#settingsView .settings-team-table .user-management-card {
  min-height: 72px;
  border: 0;
  border-bottom: 1px solid #eef3ee;
  border-radius: 0;
}

#settingsView .settings-team-table .user-management-card:last-child {
  border-bottom: 0;
}

#settingsView .settings-team-email,
#settingsView .settings-team-login,
#settingsView .role-checkbox-grid span {
  color: var(--settings-muted);
  font-size: 13px;
}

#settingsView .settings-owner-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 20px;
  margin-top: 3px;
  padding: 0 8px;
  border-radius: 999px;
  background: #d9fbe7;
  color: var(--settings-green-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

#settingsView .user-management-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#settingsView .settings-roles-head {
  margin: -58px 0 22px;
}

.role-modal-card {
  width: min(520px, calc(100vw - 32px));
}

#settingsView .settings-role-list {
  display: grid;
  gap: 14px;
}

#settingsView .settings-role-card {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
}

#settingsView .settings-role-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--settings-ink);
  font-size: 17px;
  text-transform: capitalize;
}

#settingsView .settings-role-card h3 span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef4ef;
  color: #4f5f54;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

#settingsView .settings-role-card p {
  margin: 0 0 6px;
  color: #536158;
  font-size: 13px;
}

#settingsView .settings-role-card small {
  color: var(--settings-muted);
  font-size: 12px;
}

@media (max-width: 920px) {
  #settingsView .settings-layout {
    padding: 20px 14px 32px;
  }

  #settingsView .settings-team-table .user-management-header,
  #settingsView .settings-team-table .user-management-card {
    grid-template-columns: 1fr;
  }

  #settingsView .settings-team-table .user-management-header {
    display: none;
  }

  #settingsView .settings-team-actions,
  #settingsView .settings-roles-head,
  #settingsView .settings-role-card {
    align-items: stretch;
    flex-direction: column;
  }

  #settingsView .settings-roles-head {
    margin: 0 0 16px;
  }
}

#settingsView:has(.user-management-list) .settings-panel,
#settingsView:has(.user-management-list) .settings-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

#settingsView:has(.user-management-list) .user-management-page-head {
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  margin-bottom: 18px !important;
}

#settingsView:has(.user-management-list) .add-user-panel {
  grid-template-columns: minmax(150px, 190px) minmax(260px, 1fr) minmax(300px, 1.1fr) 110px !important;
  gap: 12px !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

#settingsView:has(.user-management-list) .add-user-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#settingsView:has(.user-management-list) .add-user-roles,
#settingsView:has(.user-management-list) .role-checkbox-grid.add-user-roles {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(88px, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#settingsView:has(.user-management-list) .user-management-list {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#settingsView:has(.user-management-list) .user-management-toolbar {
  grid-template-columns: minmax(180px, auto) minmax(260px, 360px) !important;
  padding: 14px 18px !important;
}

#settingsView:has(.user-management-list) .user-management-search input {
  min-width: 0 !important;
  width: 100% !important;
}

#settingsView:has(.user-management-list) .user-management-header,
#settingsView:has(.user-management-list) .user-management-card {
  grid-template-columns: minmax(230px, 1.15fr) 92px minmax(300px, 1.45fr) 116px !important;
  gap: 12px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#settingsView:has(.user-management-list) .user-management-card {
  min-height: 120px !important;
}

#settingsView:has(.user-management-list) .user-management-person {
  min-width: 0 !important;
}

#settingsView:has(.user-management-list) .user-management-identity,
#settingsView:has(.user-management-list) .user-management-identity strong,
#settingsView:has(.user-management-list) .user-management-identity span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#settingsView:has(.user-management-list) .role-checkbox-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#settingsView:has(.user-management-list) .role-pill {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  overflow: hidden !important;
}

#settingsView:has(.user-management-list) .role-pill span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#settingsView:has(.user-management-list) .user-management-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#settingsView:has(.user-management-list) .user-management-actions button {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

#settingsView:has(.user-management-list) .user-delete-btn {
  justify-self: stretch !important;
}

@media (max-width: 1180px) {
  #settingsView:has(.user-management-list) .add-user-panel,
  #settingsView:has(.user-management-list) .user-management-header,
  #settingsView:has(.user-management-list) .user-management-card {
    grid-template-columns: 1fr !important;
  }

  #settingsView:has(.user-management-list) .user-management-header {
    display: none !important;
  }
}

/* Dashboard shell refresh */
.app-shell {
  border-top-color: #18220f;
  background: #F6F7F3;
}

.sidebar {
  width: 248px;
  flex-basis: 248px;
  padding: 24px 14px 16px;
  display: flex;
  flex-direction: column;
  background: #fbfcfa;
}

.brand {
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(18, 34, 20, 0.08);
  gap: 10px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #139a52);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(20, 163, 85, 0.24);
}

.brand span {
  color: #08120d;
  font-size: 18px;
  min-width: 0;
}

.side-nav {
  margin-top: 24px;
  gap: 24px;
}

.nav-group {
  display: grid;
  gap: 8px;
}

.nav-label {
  padding: 0 10px;
  color: #89948c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-section,
.nav-section:first-child,
.sidebar-footer .nav-section {
  padding-top: 0;
  border-top: 0;
}

.nav-section.single {
  gap: 2px;
}

.nav-group .nav-section {
  display: grid;
  gap: 4px;
}

.nav-section-toggle {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #16241b;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
}

.nav-section-toggle:hover {
  color: #0c7a42;
  background: #fff;
}

.nav-section-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #1f3025;
}

.nav-section-toggle:hover .nav-section-icon {
  color: #10934f;
}

.nav-section-toggle > svg {
  width: 16px;
  height: 16px;
  color: #7a867d;
  transition: transform .16s ease;
}

.nav-section.collapsed .nav-section-toggle > svg {
  transform: rotate(-90deg);
}

.nav-section-items {
  display: grid;
  gap: 2px;
  padding-left: 8px;
}

.nav-section.collapsed .nav-section-items {
  display: none;
}

.nav-item,
.nav-item:not(.has-more) {
  min-height: 38px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
  color: #16241b;
  font-size: 14px;
  font-weight: 500;
}

.nav-icon {
  width: 22px;
  height: 22px;
  color: #1f3025;
}

.nav-item:hover,
.nav-item.active {
  color: #0c7a42;
  background: #fff;
}

.nav-item.active {
  box-shadow: inset 3px 0 0 #22c55e;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon,
.nav-item.active:hover .nav-icon {
  color: #10934f;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.nav-item-static {
  cursor: default;
}

.nav-item-static,
.nav-item-static:hover {
  color: #16241b;
  background: transparent;
}

.sidebar-toggle-main {
  flex: 0 0 32px;
  display: grid;
  margin-left: auto;
  color: #77837b;
  background: transparent;
}

.sidebar-toggle-main:hover {
  color: #10934f;
  background: #eef8f1;
}

.main-content {
  background: #F6F7F3;
}

.topbar {
  height: 72px;
  padding: 0 26px;
  background: #fbfcfa;
  border-bottom: 1px solid rgba(18, 34, 20, 0.08);
  box-shadow: none;
}

.search {
  margin-left: auto;
  width: min(336px, 36vw);
  height: 42px;
  background: #fff;
  border: 1px solid rgba(18, 34, 20, 0.1);
  border-radius: 12px;
}

.search input {
  font-size: 14px;
}

.top-actions {
  gap: 10px;
}

.top-actions .icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(18, 34, 20, 0.1);
  border-radius: 12px;
  background: #fff;
}

.app-shell[data-active-view="dashboard"] .page-head {
  display: none;
}

.view.active#dashboardView,
.empty-dashboard {
  padding: 32px 26px !important;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #0b3d2a 0%, #11683c 56%, #18a957 100%);
  box-shadow: 0 18px 42px rgba(11, 61, 42, 0.18);
}

.dashboard-hero-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
}

.dashboard-hero p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-status-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-status-pill {
  min-width: 0;
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-align: left;
}

.dashboard-status-pill:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-status-pill span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-status-pill strong {
  font-size: 19px;
  line-height: 1;
}

.dashboard-empty-state {
  min-height: 292px;
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 52px 20px;
  text-align: center;
  background: #fff;
  border: 1px dashed rgba(104, 120, 108, 0.34);
  border-radius: 20px;
  box-shadow: none;
}

.dashboard-empty-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #89948c;
  background: #f0f3ee;
  border-radius: 50%;
}

.dashboard-empty-state strong {
  color: #020907;
  font-size: 16px;
}

.dashboard-empty-state p {
  margin: 0;
  color: #64706a;
  font-size: 14px;
}

.dashboard-empty-state .dashboard-add-widget {
  margin-top: 18px;
}

.dashboard-widget-canvas {
  position: relative;
  transition: padding-right .18s ease;
}

.dashboard-kpi-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 220px)) auto minmax(180px, 1fr);
  gap: 12px;
  align-items: end;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 34, 20, 0.05);
}

.dashboard-kpi-filter label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dashboard-kpi-filter label span {
  color: #627068;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-kpi-filter input {
  min-height: 42px;
}

.dashboard-kpi-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dashboard-kpi-range,
.dashboard-kpi-error {
  margin: 0;
  color: #627068;
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-kpi-error {
  grid-column: 1 / -1;
  color: #b42318;
  font-weight: 700;
}

.grn-invoice-file-note {
  margin: -4px 0 0;
  color: #627068;
  font-size: 12px;
  font-weight: 700;
}

.grn-invoice-file-note.error {
  color: #b42318;
}

.manual-stock-issue-document-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.manual-stock-issue-document-chip {
  max-width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 10px;
  border: 1px solid #dbe5dc;
  border-radius: 9px;
  color: #102017;
  background: #f8fbf8;
  font-size: 12px;
  font-weight: 700;
}

.manual-stock-issue-document-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-stock-issue-document-chip svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.manual-stock-issue-document-chip .icon-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
}

.grn-invoice-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

button.grn-invoice-pill:hover { text-decoration: underline; }

.grn-invoice-pill.has-invoice {
  color: #067647;
  background: #dcfae6;
}

.grn-invoice-pill.missing-invoice {
  color: #667085;
  background: #f2f4f7;
}

.dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-view {
  position: relative;
}

.dashboard-view .dashboard-hero {
  transition: padding-right .18s ease;
}

.dashboard-view.dashboard-managing .dashboard-hero,
.dashboard-view.dashboard-managing .dashboard-widget-canvas {
  padding-right: 404px;
}

.dashboard-widget-card {
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 34, 20, 0.06);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dashboard-widget-card:hover,
.dashboard-widget-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(22, 191, 95, 0.28);
  box-shadow: 0 16px 34px rgba(18, 34, 20, 0.1);
  outline: 0;
}

.dashboard-widget-card-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: flex-start;
  gap: 11px;
}

.dashboard-widget-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #0f8f4c;
  border-radius: 12px;
  background: #e9f8ee;
}

.dashboard-widget-icon svg {
  width: 19px;
  height: 19px;
}

.dashboard-widget-group,
.dashboard-widget-picker-group {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #1b7a48;
  background: #e8f7ee;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.dashboard-widget-card h3,
.dashboard-widget-picker-copy h3 {
  margin: 7px 0 0;
  color: #102019;
  font-size: 15px;
  line-height: 1.2;
}

.dashboard-widget-value {
  color: #08130d;
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
}

.dashboard-widget-trend {
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  color: #167647;
  background: #e7f8ee;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-widget-note,
.dashboard-widget-picker-copy p {
  margin: 0;
  color: #627068;
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-widget-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #12301f;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-widget-link svg {
  width: 14px;
  height: 14px;
}

.dashboard-widget-remove {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #52615a;
  background: #fff;
  border-color: rgba(18, 34, 20, 0.12);
}

.dashboard-widget-picker {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 392px;
  z-index: 80;
  display: none;
  pointer-events: none;
}

.dashboard-widget-picker.show {
  display: block;
}

.dashboard-widget-picker-backdrop {
  display: none;
}

.dashboard-widget-picker-card {
  position: sticky;
  top: 24px;
  margin-left: auto;
  width: 100%;
  max-height: calc(100vh - 140px);
  display: grid;
  gap: 16px;
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(18, 34, 20, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(18, 34, 20, 0.18);
  pointer-events: auto;
}

.dashboard-widget-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-widget-picker-head h2 {
  margin: 0 0 6px;
  color: #08130d;
  font-size: 20px;
}

.dashboard-widget-picker-head p {
  margin: 0;
  color: #627068;
  font-size: 13px;
}

.dashboard-widget-picker-list {
  display: grid;
  gap: 12px;
}

.dashboard-widget-picker-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(18, 34, 20, 0.1);
  border-radius: 16px;
  background: #fbfcfb;
}

.dashboard-widget-picker-item.selected {
  border-color: rgba(22, 191, 95, 0.24);
  background: #f2fbf5;
}

.dashboard-widget-picker-copy {
  min-width: 0;
}

.dashboard-widget-picker-copy p {
  margin-top: 8px;
}

.dashboard-analytics-section {
  margin-top: 20px;
}

.dashboard-analytics-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-analytics-head h2 {
  margin: 0 0 6px;
  color: #08130d;
  font-size: 20px;
  line-height: 1.2;
}

.dashboard-analytics-head p {
  margin: 0;
  color: #627068;
  font-size: 13px;
}

.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-analytics-card {
  grid-column: span 4;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(190px, 1fr);
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 34, 20, 0.05);
}

.dashboard-doughnut-card {
  grid-template-rows: auto 1fr;
}

.dashboard-action-card {
  grid-column: span 4;
  grid-template-rows: auto 1fr;
}

.dashboard-analytics-wide {
  grid-column: span 6;
  grid-template-rows: auto 240px;
}

.dashboard-action-card .dashboard-analytics-card-head p {
  margin: 4px 0 0;
  color: #627068;
  font-size: 12px;
}

.official-document {
  width: 194mm;
  max-width: 100%;
  min-height: auto;
  padding: 5mm;
  color: #111;
  background: #fff;
  border: 1px solid #111;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.official-header {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
}

.official-header h1 {
  margin: 0;
  padding-top: 8px;
  color: #000;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.official-address {
  display: grid;
  gap: 2px;
  color: #000;
  font-size: 12px;
  line-height: 1.45;
}

.official-address strong {
  font-size: 12px;
}

.official-logo {
  justify-self: end;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.official-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 7px;
}

.official-info-block {
  min-width: 0;
  /* Single-source grid borders: the container draws only the top + left edge,
     every cell draws its own right + bottom edge. This guarantees exactly one
     1px line per grid edge with no doubling, gaps, or overlap. */
  border-top: 1px solid #111;
  border-left: 1px solid #111;
  break-inside: avoid;
}

.official-info-block h2,
.official-section h2,
.official-terms h2 {
  margin: 0;
  padding: 6px 8px;
  color: #000;
  background: #fff;
  border-bottom: 1px solid #111;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-transform: none;
}

.official-info-block h2 {
  border-right: 1px solid #111;
}

.official-info-block dl {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  margin: 0;
}

.official-info-block dt,
.official-info-block dd {
  min-width: 0;
  margin: 0;
  padding: 7px 8px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.official-info-block dt {
  font-weight: 800;
}

/* Full-width block (e.g. Funding Details): lay its fields out horizontally so
   it stays compact on a single page. */
.official-info-grid .official-info-block--span {
  grid-column: 1 / -1;
}

.official-info-block--span dl {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content minmax(0, 1fr);
}

.official-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 7px;
  border: 1px solid #111;
}

.official-strip div {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid #111;
}

.official-strip div:last-child {
  border-right: 0;
}

.official-strip span,
.official-strip strong {
  min-width: 0;
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.official-strip span {
  border-right: 1px solid #111;
  font-weight: 800;
}

.official-section,
.official-terms {
  margin: 0 0 7px;
  border: 1px solid #111;
  break-inside: avoid;
}

.official-table {
  width: 100%;
  min-width: 0;
  border: 1px solid #111;
  border-collapse: collapse;
  table-layout: fixed;
}

.official-table th,
.official-table td {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #111;
  color: #000;
  background: #fff;
  font-size: 12px;
  line-height: 1.55;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.official-table th {
  font-weight: 800;
  text-align: left;
}

.official-table td strong,
.official-table td span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.official-table td span {
  margin-top: 2px;
}

.official-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.official-totals {
  width: 38%;
  min-width: 230px;
  margin: 0 0 7px auto;
  border: 1px solid #111;
  break-inside: avoid;
}

.official-totals div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #111;
}

.official-totals div:last-child {
  border-bottom: 0;
}

.official-totals span,
.official-totals strong {
  padding: 7px 8px;
  color: #000;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.official-totals span {
  border-right: 1px solid #111;
  font-weight: 800;
}

.official-totals .grand-total strong,
.official-totals .grand-total span {
  font-weight: 900;
}

.official-document .ims-approval-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 18px;
  margin: 12px 0 9px;
  border: 0;
}

.official-document .ims-approval-footer > div {
  min-height: 50px;
  display: grid;
  grid-template-rows: auto 28px auto;
  row-gap: 4px;
  align-content: end;
  padding: 0;
  border: 0;
  color: #000;
  text-align: center;
}

.official-document .ims-approval-footer span,
.official-document .ims-approval-footer strong,
.official-document .ims-approval-footer small {
  display: block;
  color: #000;
  font-size: 12px;
  line-height: 1.25;
}

.official-document .ims-approval-footer i {
  display: block;
  height: 24px;
  margin: 2px 0 4px;
  border-bottom: 1px solid #111;
}

.official-document .ims-approval-footer span {
  color: #017100;
  font-weight: 900;
  text-transform: uppercase;
}

.official-document .ims-approval-footer strong {
  min-height: 13px;
  font-size: 9px;
  font-weight: 800;
}

.official-document .grn-signature-footer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 18px;
}

.official-document .grn-signature-footer > div {
  min-height: 72px;
  grid-template-rows: auto 34px auto;
}

.official-document .grn-signature-footer i {
  height: 32px;
  margin: 4px 0 6px;
}

.official-terms {
  margin-bottom: 0;
}

.official-terms ol {
  margin: 0;
  padding: 5px 7px 5px 20px;
}

.official-terms li,
.official-terms p {
  margin: 0 0 3px;
  color: #000;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.official-document.po-form-document {
  width: 100%;
  min-height: 0;
  display: block;
  padding: 3mm;
  font-size: 9.6px;
  line-height: 1.22;
}

.po-form-document .official-document-bottom {
  margin-top: 4px;
}

.po-form-document .official-header {
  gap: 7px;
  margin-bottom: 5px;
}

.po-form-document .official-header h1 {
  padding-top: 4px;
  font-size: 14px;
  line-height: 1.05;
}

.po-form-document .official-address,
.po-form-document .official-address strong {
  font-size: 9px;
  line-height: 1.18;
}

.po-form-document .official-logo {
  width: 38px;
  height: 38px;
}

.po-form-document .official-info-grid {
  gap: 4px;
  margin-bottom: 4px;
}

.po-form-document .official-section,
.po-form-document .official-terms {
  margin-bottom: 4px;
}

.po-form-document .official-terms {
  break-inside: auto;
  page-break-inside: auto;
}

.po-form-document .official-info-block h2,
.po-form-document .official-section h2 {
  padding: 3px 5px;
  font-size: 8.6px;
  line-height: 1.15;
}

.po-form-document .official-terms h2 {
  padding: 3px 5px;
  font-size: 8.4px;
  line-height: 1.12;
}

.po-form-document .official-info-block dl {
  grid-template-columns: 92px minmax(0, 1fr);
}

.po-form-document .official-info-block--span dl {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content minmax(0, 1fr);
}

.po-form-document .official-info-block dt,
.po-form-document .official-info-block dd,
.po-form-document .official-table th,
.po-form-document .official-table td,
.po-form-document .official-totals span,
.po-form-document .official-totals strong {
  padding: 2.5px 4px;
  font-size: 8.1px;
  line-height: 1.14;
}

.po-form-document .official-totals {
  width: 34%;
  min-width: 188px;
  margin-bottom: 4px;
}

.po-form-document .ims-approval-footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 4px;
  border: 1px solid #111;
}

.po-form-document .ims-approval-footer > div {
  min-height: 18mm;
  display: block;
  padding: 4px 7px 5px;
  border-right: 1px solid #111;
  text-align: center;
}

.po-form-document .ims-approval-footer > div:last-child {
  border-right: 0;
}

.po-form-document .ims-approval-footer span,
.po-form-document .ims-approval-footer strong,
.po-form-document .ims-approval-footer small {
  font-size: 8.6px;
  line-height: 1.15;
}

.po-form-document .ims-approval-footer i {
  display: block;
  margin: 12mm 0 3px;
  border-bottom: 1px solid #111;
}

.po-form-document .ims-approval-footer strong {
  min-height: 0;
  margin-top: 2px;
  font-size: 8px;
}

.po-form-document .official-terms ol {
  padding: 2px 5px 2px 16px;
}

.po-form-document .official-terms li,
.po-form-document .official-terms p {
  margin-bottom: 0;
  font-size: 7.4px;
  line-height: 1.04;
}

.official-document :is(select, textarea, input) {
  width: 100%;
  min-width: 0;
  border: 1px solid #111;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
}

.po-scan-form {
  width: 210mm;
  min-height: 297mm;
  max-width: none;
  box-sizing: border-box;
  padding: 9mm 10mm;
  border: 1px solid #111;
  background: #fff;
  color: #000;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px;
  line-height: 1.15;
}

.po-scan-form * {
  box-sizing: border-box;
}

.po-scan-header {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: start;
  gap: 8px;
  margin-bottom: 7mm;
}

.po-scan-header h1 {
  margin: 0;
  padding-top: 5px;
  color: #000;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.po-scan-header img {
  justify-self: end;
  width: 19mm;
  height: 19mm;
  object-fit: contain;
}

.po-scan-address {
  display: grid;
  gap: 1px;
  color: #000;
  font-size: 7px;
  line-height: 1.18;
}

.po-scan-address strong {
  font-size: 7.4px;
}

.po-scan-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  margin-bottom: 4mm;
}

.po-scan-reference-row {
  margin-bottom: 2mm;
}

.po-scan-box,
.po-scan-terms-strip,
.po-scan-items,
.po-scan-totals,
.po-scan-signatures,
.po-scan-conditions {
  border: 1px solid #111;
}

.po-scan-box h2,
.po-scan-conditions h2 {
  margin: 0;
  padding: 2px 4px;
  border-bottom: 1px solid #111;
  color: #000;
  background: #fff;
  font-size: 7.4px;
  font-weight: 800;
  line-height: 1.1;
}

.po-scan-field {
  display: grid;
  grid-template-columns: 31mm minmax(0, 1fr);
  min-height: 5.2mm;
  border-bottom: 1px solid #111;
}

.po-scan-field:last-child {
  border-bottom: 0;
}

.po-scan-field span,
.po-scan-field strong {
  min-width: 0;
  padding: 2px 4px;
  color: #000;
  font-size: 7.2px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.po-scan-field span {
  font-weight: 800;
}

.po-scan-field strong {
  border-left: 1px solid #111;
  font-weight: 700;
}

.po-scan-reference .po-scan-field {
  grid-template-columns: 31mm minmax(0, 1fr);
  min-height: 4.4mm;
}

.po-scan-terms-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 2mm;
}

.po-scan-terms-strip div {
  min-height: 10mm;
  border-right: 1px solid #111;
  text-align: center;
}

.po-scan-terms-strip div:last-child {
  border-right: 0;
}

.po-scan-terms-strip span,
.po-scan-terms-strip strong,
.po-scan-terms-strip small {
  display: block;
  padding: 2px 4px;
  color: #000;
  font-size: 7.2px;
  line-height: 1.1;
}

.po-scan-terms-strip span {
  border-bottom: 1px solid #111;
  font-weight: 800;
}

.po-scan-terms-strip strong {
  min-height: 4.4mm;
  font-weight: 800;
}

.po-scan-items {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.po-scan-items th,
.po-scan-items td {
  height: 6mm;
  padding: 2px 4px;
  border: 1px solid #111;
  color: #000;
  background: #fff;
  font-size: 7.2px;
  line-height: 1.1;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.po-scan-items th {
  height: 4.8mm;
  font-weight: 800;
  text-align: left;
}

.po-scan-items th:nth-child(1) { width: 58%; }
.po-scan-items th:nth-child(2) { width: 10%; }
.po-scan-items th:nth-child(3) { width: 16%; }
.po-scan-items th:nth-child(4) { width: 16%; }

.po-scan-items th:nth-child(2),
.po-scan-items th:nth-child(3),
.po-scan-items th:nth-child(4) { text-align: right; }

.po-scan-items small {
  display: block;
  margin-top: 1px;
  font-size: 6.4px;
}

.po-scan-items .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.po-scan-blank-row td {
  height: 6mm;
}

.po-scan-funding {
  margin-bottom: 2mm;
}

.po-scan-funding-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 2.4fr;
}

.po-scan-funding-row > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  border-right: 1px solid #111;
}

.po-scan-funding-row > div:last-child {
  border-right: 0;
}

.po-scan-funding-row span,
.po-scan-funding-row strong {
  min-width: 0;
  padding: 2px 4px;
  color: #000;
  font-size: 7.2px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.po-scan-funding-row span {
  border-right: 1px solid #111;
  font-weight: 800;
  white-space: nowrap;
}

.po-scan-totals {
  width: 62mm;
  margin: 2mm 0 2mm auto;
  border-bottom: 0;
}

.po-scan-total-row {
  display: grid;
  grid-template-columns: 1fr 26mm;
  min-height: 5.3mm;
  border-bottom: 1px solid #111;
}

.po-scan-total-row span,
.po-scan-total-row strong {
  padding: 2px 4px;
  color: #000;
  font-size: 7.4px;
  line-height: 1.1;
}

.po-scan-total-row span {
  font-weight: 800;
}

.po-scan-total-row strong {
  border-left: 1px solid #111;
  text-align: right;
  font-weight: 800;
}

.po-scan-grand-total {
  min-height: 6mm;
}

.po-scan-grand-total span,
.po-scan-grand-total strong {
  font-size: 8px;
}

.po-scan-signatures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #111;
}

.po-scan-signature {
  display: flex;
  flex-direction: column;
  min-height: 20mm;
  border-right: 1px solid #111;
}

.po-scan-signature:last-child {
  border-right: 0;
}

.po-scan-signature span {
  padding: 2px 4px;
  border-bottom: 1px solid #111;
  color: #000;
  font-size: 7.4px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.po-scan-signature-body {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  padding: 2px 4px 3mm;
}

.po-scan-signature-body strong {
  color: #000;
  font-size: 7.2px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.po-scan-conditions {
  margin-top: 2mm;
}

.po-scan-conditions ol {
  margin: 0;
  padding: 2px 5px 2px 17px;
}

.po-scan-conditions li,
.po-scan-conditions p {
  margin: 0;
  color: #000;
  font-size: 6.5px;
  line-height: 1.05;
}

.dashboard-action-list {
  display: grid;
  gap: 8px;
  overflow: auto;
}

.dashboard-action-alert {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 12px;
  color: #102019;
  background: #fbfcfb;
  text-align: left;
}

.dashboard-action-alert:hover {
  border-color: rgba(22, 191, 95, 0.24);
  background: #f2fbf5;
}

.dashboard-action-alert-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #0f8f4c;
  border-radius: 10px;
  background: #e8f7ee;
}

.dashboard-action-alert-icon svg {
  width: 17px;
  height: 17px;
}

.dashboard-action-alert strong,
.dashboard-action-alert small {
  display: block;
}

.dashboard-action-alert strong {
  font-size: 13px;
}

.dashboard-action-alert small {
  margin-top: 3px;
  color: #627068;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-action-alert b {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #0f5132;
  background: #dcfae6;
  font-size: 13px;
}

.dashboard-action-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(104, 120, 108, 0.28);
  border-radius: 12px;
  color: #64706a;
  background: #fbfcfb;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-analytics-card.clickable canvas {
  cursor: pointer;
}

.dashboard-analytics-card-head h3 {
  margin: 0;
  color: #102019;
  font-size: 16px;
  line-height: 1.25;
}

.dashboard-chart-wrap {
  position: relative;
  height: 190px;
  min-height: 0;
  overflow: hidden;
}

.dashboard-doughnut-card .dashboard-chart-wrap {
  height: 100%;
  min-height: 290px;
  display: grid;
  place-items: center;
}

.dashboard-analytics-wide .dashboard-chart-wrap {
  height: 240px;
}

.dashboard-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.dashboard-doughnut-card .dashboard-chart-wrap canvas {
  width: min(100%, 320px) !important;
  height: 250px !important;
}

.dashboard-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #64706a;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  border: 1px dashed rgba(104, 120, 108, 0.28);
  border-radius: 14px;
  background: #fbfcfb;
}

.dashboard-chart-empty[hidden] {
  display: none;
}

.dashboard-activity-card {
  grid-template-rows: auto 1fr;
  max-height: 330px;
  overflow: hidden;
}

.dashboard-activity-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.dashboard-activity-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(18, 34, 20, 0.08);
}

.dashboard-activity-list li:last-child {
  border-bottom: 0;
}

.dashboard-activity-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: #16bf5f;
  box-shadow: 0 0 0 4px rgba(22, 191, 95, 0.12);
}

.dashboard-activity-list strong {
  display: block;
  color: #102019;
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-activity-list p,
.dashboard-activity-list time {
  display: block;
  margin: 3px 0 0;
  color: #627068;
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-analytics-error {
  padding: 18px;
  border: 1px dashed rgba(180, 35, 24, 0.3);
  border-radius: 18px;
  color: #b42318;
  background: #fff;
}

.dashboard-analytics-error strong,
.dashboard-analytics-error p {
  margin: 0;
}

.dashboard-analytics-error p {
  margin-top: 6px;
  color: #627068;
}

.dashboard-analytics-card .skeleton-block {
  width: 100%;
  height: 100%;
  min-height: 210px;
  border-radius: 14px;
}

@media (max-width: 1120px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-analytics-card,
  .dashboard-action-card,
  .dashboard-analytics-wide {
    grid-column: span 6;
  }

  .dashboard-kpi-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpi-filter-actions,
  .dashboard-kpi-range {
    grid-column: 1 / -1;
  }

  .dashboard-kpi-filter-actions button {
    flex: 1 1 0;
  }

  .dashboard-view.dashboard-managing .dashboard-hero,
  .dashboard-view.dashboard-managing .dashboard-widget-canvas {
    padding-right: 0;
  }

  .dashboard-widget-picker {
    position: fixed;
    inset: 0;
    width: auto;
    pointer-events: auto;
  }

  .dashboard-widget-picker-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(9, 18, 12, 0.22);
  }

  .dashboard-widget-picker-card {
    position: absolute;
    top: 96px;
    right: 16px;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
  }
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 10px 0;
  border-top: 1px solid rgba(18, 34, 20, 0.08);
}

.sidebar-profile-wrap,
.sidebar-profile {
  width: 100%;
}

.sidebar-profile {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px 0 8px;
  border: 0;
  background: transparent;
  text-align: left;
}

.sidebar-profile:hover,
.sidebar-profile:focus-visible {
  width: 100%;
  padding: 0 10px 0 8px;
  background: #f4f7f4;
}

.sidebar-profile .avatar {
  width: 28px;
  height: 28px;
  color: #fff;
  background: #14964e;
  margin: 0;
}

.profile-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-copy small {
  color: #6f7a72;
  font-size: 12px;
}

.sidebar-profile .profile-name {
  max-width: 100%;
  color: #07120d;
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
}

.sidebar-profile > svg {
  color: #738078;
  opacity: 1;
}

.sidebar-profile-menu {
  right: 0;
  bottom: calc(100% + 8px);
  top: auto;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 74px;
  flex-basis: 74px;
}

.app-shell.sidebar-collapsed .brand span,
.app-shell.sidebar-collapsed .profile-copy,
.app-shell.sidebar-collapsed .sidebar-profile > svg,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-section-toggle > span:not(.nav-section-icon),
.app-shell.sidebar-collapsed .nav-section-toggle > svg {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-profile {
  grid-template-columns: 1fr;
  justify-items: center;
}

.app-shell.sidebar-collapsed .nav-section-toggle {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.app-shell.sidebar-collapsed .nav-section-items {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-toggle-main {
  position: absolute;
  right: 4px;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .view.active#dashboardView,
  .empty-dashboard {
    padding: 22px 14px !important;
  }

  .dashboard-hero {
    display: grid;
  }

  .dashboard-actions {
    width: 100%;
  }

  .dashboard-add-widget {
    flex: 1;
  }
}

/* Final sidebar layout fix: keep the sidebar rail in normal flow so content is never covered. */
.app-shell,
.app-shell.sidebar-collapsed {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch;
}

.sidebar {
  position: sticky !important;
  top: 0;
  z-index: 10;
  width: 248px !important;
  min-width: 248px !important;
  flex: 0 0 248px !important;
  transform: none !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 74px !important;
  min-width: 74px !important;
  flex-basis: 74px !important;
  padding: 24px 14px 16px !important;
  border-right: 1px solid var(--line) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.main-content,
.app-shell.sidebar-collapsed .main-content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  grid-column: auto !important;
  margin-left: 0 !important;
}

.topbar .topbar-sidebar-toggle,
.app-shell.sidebar-collapsed .topbar-sidebar-toggle {
  display: inline-grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  color: #5f6b64;
  background: #fff;
  border: 1px solid rgba(18, 34, 20, 0.12);
  border-radius: 10px;
}

.topbar .topbar-sidebar-toggle:hover,
.app-shell.sidebar-collapsed .topbar-sidebar-toggle:hover {
  color: #10934f;
  background: #eef8f1;
  border-color: rgba(16, 147, 79, 0.22);
}

.sidebar-toggle-main,
.app-shell.sidebar-collapsed .sidebar-toggle-main {
  display: grid !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: auto;
}

.app-shell.sidebar-collapsed .brand {
  justify-content: center;
  padding: 0 0 22px;
}

.app-shell.sidebar-collapsed .brand-mark {
  width: 30px;
  height: 30px;
}

.app-shell.sidebar-collapsed .brand span,
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-item > span:last-child,
.app-shell.sidebar-collapsed .nav-section-toggle > span:not(.nav-section-icon),
.app-shell.sidebar-collapsed .nav-section-toggle > svg,
.app-shell.sidebar-collapsed .profile-copy,
.app-shell.sidebar-collapsed .sidebar-profile > svg {
  display: none !important;
}

.app-shell.sidebar-collapsed .sidebar-footer {
  display: block !important;
  padding: 16px 0 0;
}

.app-shell.sidebar-collapsed .side-nav {
  margin-top: 24px !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 0 !important;
}

.app-shell.sidebar-collapsed .nav-section {
  width: 100%;
}

.app-shell.sidebar-collapsed .nav-item,
.app-shell.sidebar-collapsed .nav-section-toggle {
  width: 44px !important;
  min-height: 40px !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto 4px !important;
}

.app-shell.sidebar-collapsed .nav-section-items {
  display: none !important;
}

.app-shell.sidebar-collapsed .nav-icon,
.app-shell.sidebar-collapsed .nav-section-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

.app-shell.sidebar-collapsed .view,
.app-shell.sidebar-collapsed .topbar {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 760px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    display: block !important;
  }

  .sidebar {
    position: fixed !important;
    width: 248px !important;
    min-width: 248px !important;
    transform: translateX(-100%) !important;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0) !important;
  }

  .app-shell.sidebar-collapsed .sidebar {
    transform: translateX(-100%) !important;
  }
}

/* Sidebar collapse option removed. */
.sidebar-toggle,
.topbar-sidebar-toggle,
.sidebar-toggle-main {
  display: none !important;
}

.app-shell.sidebar-collapsed {
  display: flex !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 248px !important;
  min-width: 248px !important;
  flex-basis: 248px !important;
}

/* Keep the dashboard canvas clean: only the dashed widget area is framed. */
.view.active#dashboardView,
.empty-dashboard {
  background: #F6F7F3 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dashboard-empty-state {
  background: #e5ebe2 !important;
}

/* Global command search */
.search {
  width: 292px !important;
  height: 42px !important;
  margin-left: auto !important;
  margin-right: 10px !important;
  padding: 0 14px !important;
  cursor: text;
}

.search > svg {
  flex: 0 0 18px;
  color: #7b8780;
}

.search input {
  min-width: 0;
  font-size: 14px !important;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.search-overlay.show {
  display: block;
}

.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 46, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.search-palette {
  position: relative;
  width: min(720px, calc(100vw - 36px));
  max-height: min(540px, calc(100vh - 130px));
  margin: 116px auto 0;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(18, 34, 20, 0.14);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.search-palette-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(18, 34, 20, 0.08);
}

.search-palette-head > svg {
  width: 19px;
  height: 19px;
  color: #58655e;
}

.search-palette-head input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: #142018;
  background: transparent;
  font: inherit;
  font-size: 18px;
}

.search-palette-head input::placeholder {
  color: #7d8781;
  opacity: 1;
}

.search-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  padding: 0;
  border: 1px solid rgba(18, 34, 20, 0.1);
  border-radius: 7px;
  color: #68746d;
  background: #f5f7f4;
  cursor: pointer;
  line-height: 1;
}

.search-close:hover {
  color: #111c15;
  background: #eef2ec;
}

.search-close svg {
  width: 16px;
  height: 16px;
}

.search-results {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 10px 18px;
}

.search-result-group {
  padding: 10px 8px 8px;
  color: #7a867e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.search-result-item {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 24px minmax(0, auto) minmax(90px, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #19241d;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.search-result-item:hover,
.search-result-item.active {
  background: #f0f3ee;
}

.search-result-item:disabled {
  cursor: default;
  opacity: .78;
}

.search-result-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #16241b;
}

.search-result-icon svg {
  width: 18px;
  height: 18px;
}

.search-result-title {
  min-width: 0;
  font-size: 16px;
  white-space: nowrap;
}

.search-result-subtitle {
  min-width: 0;
  color: #6d7971;
  font-size: 14px;
  white-space: nowrap;
}

.search-enter {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #6d7971;
  background: #fff;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 6px;
}

.search-enter svg {
  width: 14px;
  height: 14px;
}

.search-empty {
  padding: 34px 12px;
  color: #6d7971;
  text-align: center;
}

@media (max-width: 900px) {
  .search {
    width: min(260px, 38vw) !important;
  }
}

@media (max-width: 760px) {
  .search {
    order: 3;
    width: 100% !important;
  }

  .search-palette {
    margin-top: 76px;
  }

  .search-result-item {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
  }

  .search-result-subtitle {
    display: none;
  }
}

#globalSearch {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  color: #142018 !important;
  opacity: 1 !important;
  font: inherit !important;
  font-size: 14px !important;
}

#globalSearch::placeholder {
  color: #6f7b74 !important;
  opacity: 1 !important;
}

/* Lumen-style inventory workspace */
#inventoryView.lumen-inventory {
  --lm-bg: #f6f7f3;
  --lm-surface: #fff;
  --lm-surface-2: #f8faf7;
  --lm-surface-3: #eef2ec;
  --lm-ink: #0a1410;
  --lm-muted: #5e6863;
  --lm-line: #e6e9e1;
  --lm-brand-50: #eafbec;
  --lm-brand-100: #d2f4d4;
  --lm-brand-500: #1daf52;
  --lm-brand-700: #0b6a36;
  display: none;
  padding: 24px 26px 44px;
  background: var(--lm-bg);
  color: var(--lm-ink);
  font-family: inherit;
}

#procurementView.procurement-view,
#financeView.finance-view {
  --lm-bg: #f6f7f3;
  --lm-surface: #fff;
  --lm-surface-2: #f8faf7;
  --lm-surface-3: #eef2ec;
  --lm-ink: #0a1410;
  --lm-muted: #5e6863;
  --lm-line: #e6e9e1;
  --lm-brand-50: #eafbec;
  --lm-brand-100: #d2f4d4;
  --lm-brand-500: #1daf52;
  --lm-brand-700: #0b6a36;
  padding: 24px 26px 44px;
  background: var(--lm-bg);
  color: var(--lm-ink);
  font-family: inherit;
}

#requestsView {
  --lm-bg: #f6f7f3;
  --lm-surface: #fff;
  --lm-surface-2: #f8faf7;
  --lm-surface-3: #eef2ec;
  --lm-ink: #0a1410;
  --lm-muted: #5e6863;
  --lm-line: #e6e9e1;
  --lm-brand-50: #eafbec;
  --lm-brand-100: #d2f4d4;
  --lm-brand-500: #1daf52;
  --lm-brand-700: #0b6a36;
  padding: 24px 26px 44px;
  background: var(--lm-bg);
  color: var(--lm-ink);
  font-family: inherit;
}

#inventoryView.lumen-inventory.active {
  display: block;
}

.app-shell[data-active-view="inventory"] .page-head {
  display: none;
}

.app-shell[data-active-view="procurement"] .page-head {
  display: none;
}

.app-shell[data-active-view="requests"] .page-head {
  display: none;
}

.app-shell[data-active-view="finance"] .page-head {
  display: none;
}

#inventoryView .inventory-page-header,
#procurementView .inventory-page-header,
#requestsView .inventory-page-header,
#financeView .inventory-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

#inventoryView .inventory-page-header h1,
#procurementView .inventory-page-header h1,
#requestsView .inventory-page-header h1,
#financeView .inventory-page-header h1 {
  margin: 0;
  color: var(--lm-ink);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0;
}

#inventoryView .inventory-page-header p,
#procurementView .inventory-page-header p,
#requestsView .inventory-page-header p,
#financeView .inventory-page-header p {
  margin-top: 5px;
  color: var(--lm-muted);
  font-size: 12px;
  line-height: 1.45;
}

#inventoryView .inventory-page-actions,
#procurementView .inventory-page-actions,
#financeView .inventory-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#inventoryView [data-inventory-items-only][hidden],
#procurementView [data-procurement-po-only][hidden],
#procurementView [data-procurement-service-po-only][hidden],
#procurementView [data-procurement-quotations-only][hidden] {
  display: none !important;
}

#procurementView [data-procurement-archives-only][hidden] {
  display: none !important;
}

.legacy-archive-screen {
  display: grid;
  gap: 14px;
}

.legacy-archive-tabs {
  flex-wrap: wrap;
}

.legacy-archive-toolbar {
  align-items: center;
}

.legacy-archive-card table th,
.legacy-archive-card table td {
  vertical-align: middle;
}

.legacy-file-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 220px;
}

.legacy-file-cell svg {
  width: 16px;
  height: 16px;
  color: #08783d;
  flex: 0 0 auto;
}

.legacy-file-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grn-status-pill.status-muted {
  color: #52605a;
  background: #eef2f0;
}

.legacy-record-modal-card textarea {
  min-height: 96px;
  resize: vertical;
}

.legacy-status-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.legacy-status-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.legacy-status-picker button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.legacy-status-picker button.active {
  border-color: #22a457;
  background: #e9f8ef;
  color: #166534;
  box-shadow: 0 0 0 3px rgba(34, 164, 87, .12);
}

.legacy-record-preview-card {
  width: min(620px, calc(100vw - 32px));
}

.legacy-record-preview-body {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  padding: 18px 20px 8px;
}

.legacy-preview-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #08783d;
  background: #eaf8ef;
}

.legacy-preview-icon svg {
  width: 24px;
  height: 24px;
}

.legacy-preview-copy {
  min-width: 0;
}

.legacy-preview-copy h3 {
  margin: 0 0 5px;
  color: var(--lm-ink, #17221d);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.legacy-preview-copy p {
  margin: 0;
  color: var(--lm-muted, #66716b);
  font-size: 12px;
  line-height: 1.45;
}

.legacy-preview-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

.legacy-preview-meta div,
.legacy-preview-notes {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 10px;
  background: #fbfcfa;
}

.legacy-preview-meta dt,
.legacy-preview-notes strong {
  display: block;
  margin: 0 0 4px;
  color: var(--lm-muted, #66716b);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.legacy-preview-meta dd,
.legacy-preview-notes p {
  margin: 0;
  color: var(--lm-ink, #17221d);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.legacy-preview-notes {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .legacy-record-preview-body {
    grid-template-columns: 1fr;
  }

  .legacy-preview-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .view.active#dashboardView,
  .empty-dashboard {
    padding: 18px 14px !important;
  }

  .dashboard-hero {
    padding: 18px;
    border-radius: 16px;
  }

  .dashboard-hero h1 {
    font-size: 24px;
  }

  .dashboard-status-pills,
  .dashboard-widget-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-kpi-filter {
    grid-template-columns: 1fr;
  }

  .dashboard-analytics-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-analytics-card {
    grid-column: auto;
    grid-template-rows: auto 190px;
  }

  .dashboard-analytics-wide {
    grid-template-rows: auto 210px;
  }

  .dashboard-action-card {
    grid-template-rows: auto auto;
  }

  .dashboard-chart-wrap {
    height: 190px;
  }

  .dashboard-analytics-wide .dashboard-chart-wrap {
    height: 210px;
  }
}

#procurementArchivesPanel .legacy-archive-screen {
  display: grid;
  gap: 16px;
}

#procurementArchivesPanel .legacy-archive-tabs {
  gap: 24px;
  margin-bottom: 2px;
  overflow-x: auto;
}

#procurementArchivesPanel .legacy-archive-tabs .quotation-tab {
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}

#procurementArchivesPanel .legacy-archive-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 200px) minmax(140px, 180px) minmax(140px, 170px) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-search-filter,
#procurementArchivesPanel .legacy-archive-toolbar .po-vendor-filter {
  height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 10px;
  background: var(--lm-surface, #fff);
  box-shadow: 0 8px 18px rgba(22, 37, 29, .04);
}

#procurementArchivesPanel .legacy-archive-toolbar .po-search-filter svg {
  width: 16px;
  height: 16px;
  color: var(--lm-muted, #66716b);
  flex: 0 0 auto;
}

#procurementArchivesPanel .legacy-archive-toolbar input,
#procurementArchivesPanel .legacy-archive-toolbar select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lm-ink, #17221d);
  font: inherit;
  font-size: 12px;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-status-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-status-filters button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--lm-line, #dfe7e1);
  border-radius: 999px;
  color: var(--lm-muted, #66716b);
  background: var(--lm-surface, #fff);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-status-filters button.active {
  color: #08783d;
  border-color: #b8dfc6;
  background: #eaf8ef;
}

.procurement-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

#procurementArchivesPanel .procurement-month-grid {
  margin: 0 0 14px;
  padding: 0;
}

.procurement-month-card {
  min-width: 0;
  min-height: 150px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 8px;
  background: #fff;
  color: var(--lm-ink, #17221d);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22, 37, 29, .04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.procurement-month-card:hover,
.procurement-month-card.active {
  border-color: #a9dcbc;
  box-shadow: 0 12px 26px rgba(15, 143, 77, .12);
}

.procurement-month-card.active {
  transform: translateY(-1px);
}

.procurement-month-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 10px;
}

.procurement-month-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #08783d;
  background: #eaf8ef;
}

.procurement-month-icon svg,
.procurement-month-arrow {
  width: 16px;
  height: 16px;
}

.procurement-month-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.procurement-month-title strong {
  overflow: hidden;
  color: #17221d;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procurement-month-title small {
  color: #66716b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.procurement-month-arrow {
  justify-self: end;
  color: #34453c;
}

.procurement-month-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.procurement-month-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.procurement-month-metric strong {
  color: #17221d;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.procurement-month-metric small {
  max-width: 100%;
  overflow: hidden;
  color: #66716b;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procurement-month-metric.completed strong,
.procurement-month-metric.completed small {
  color: #08783d;
}

.procurement-month-metric.open strong,
.procurement-month-metric.open small {
  color: #2563eb;
}

.procurement-month-metric.cancelled strong,
.procurement-month-metric.cancelled small {
  color: #b42318;
}

.procurement-month-metric.unknown strong,
.procurement-month-metric.unknown small {
  color: #66716b;
}

.procurement-month-amount {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #edf1ee;
}

.procurement-month-amount svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #66716b;
}

.procurement-month-amount span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.procurement-month-amount strong {
  overflow-wrap: anywhere;
  color: #17221d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.procurement-month-amount small {
  color: #66716b;
  font-size: 10px;
  font-weight: 700;
}

.procurement-month-empty,
.legacy-archive-month-table {
  grid-column: 1 / -1;
}

.procurement-month-empty {
  display: grid;
  gap: 4px;
  min-height: 92px;
  place-content: center;
  border: 1px dashed #cbd9d0;
  border-radius: 8px;
  color: #66716b;
  text-align: center;
  background: #fbfcfa;
}

.procurement-month-empty strong {
  color: #17221d;
}

.procurement-month-table-hidden {
  display: none !important;
}

@media (max-width: 1100px) {
  .procurement-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .procurement-month-grid {
    grid-template-columns: 1fr;
  }
}

#procurementArchivesPanel .legacy-archive-groups {
  display: grid;
  gap: 10px;
  padding: 10px;
}

#procurementArchivesPanel .legacy-archive-card .table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#procurementArchivesPanel .legacy-archive-card table {
  min-width: 1080px !important;
}

#procurementArchivesPanel .legacy-archive-card th,
#procurementArchivesPanel .legacy-archive-card td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--lm-line, #e1e7df);
  font-size: 12px;
}

#procurementArchivesPanel .legacy-archive-card th {
  color: #405047;
  background: #fbfcfa;
  font-weight: 800;
}

#procurementArchivesPanel .table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

#procurementArchivesPanel .table-sort-button svg {
  width: 13px;
  height: 13px;
}

#procurementArchivesPanel .legacy-archive-card td:last-child,
#procurementArchivesPanel .legacy-archive-card th:last-child {
  text-align: right;
}

#procurementArchivesPanel .legacy-archive-card .empty-row td {
  padding: 28px 14px !important;
}

#inventoryView [data-inventory-warehouses-only][hidden] {
  display: none !important;
}

#inventoryView .warehouse-dashboard { display: none; }
#inventoryView .warehouse-dashboard.active {
  display: grid;
  gap: 20px;
  padding: 4px 0 30px;
  --color-surface: var(--lm-surface, #fff);
  --color-border: var(--lm-line, #e5e7eb);
  --radius-xl: 20px;
  font-family: var(--app-font);
}
.warehouse-summary-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.warehouse-card {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.warehouse-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.warehouse-summary-card {
  min-height: 154px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}
.warehouse-summary-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 10px;
  color: #178448;
  background: #e8f8ee;
}
.warehouse-summary-icon svg { width: 17px; height: 17px; }
.warehouse-summary-card.blue .warehouse-summary-icon { color:#3979da; background:#e8f1ff; }.warehouse-summary-card.orange .warehouse-summary-icon { color:#df761c; background:#fff0e4; }.warehouse-summary-card.purple .warehouse-summary-icon { color:#7757d9; background:#f0ebff; }
.warehouse-summary-card div { display:grid; gap:7px; min-width:0; }
.warehouse-summary-card span { color:#6b7280; font-size:13px; font-weight:500; }
.warehouse-summary-card strong { color:#111827; font-size:28px; line-height:1.05; font-weight:700; letter-spacing:-.025em; overflow-wrap:anywhere; }
.warehouse-summary-card small { color:#8a919c; font-size:12px; line-height:1.35; }
.warehouse-card-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:20px;
  row-gap:24px;
  margin-top:24px;
}
.warehouse-card {
  display:grid;
  gap:15px;
  min-width:0;
  min-height:184px;
  color:#111827;
  text-align:left;
  box-shadow:0 4px 14px rgba(15,23,42,.035);
}
.warehouse-card-head { display:grid; grid-template-columns:42px 1fr 28px; gap:12px; align-items:center; }
.warehouse-card-head > span:nth-child(2){display:grid;gap:3px;min-width:0}
.warehouse-card-head strong{font-size:16px;line-height:1.2;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.warehouse-card-head small{color:#8a919c;font-size:12px;font-weight:500}
.warehouse-card-corner { width:28px;height:28px;display:grid;place-items:center;justify-self:end;padding:0;border:0;color:#9ca3af;background:transparent;border-radius:8px;cursor:pointer;transition:color .2s,background .2s; }
.warehouse-card-corner:hover { color:#dc2626;background:#fef2f2; }
.warehouse-card-corner svg { width:15px;height:15px; }
.warehouse-avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:11px;color:#fff;background:#08783d;font-size:14px;font-weight:700 }
.warehouse-avatar.tone-2{background:#10b981}.warehouse-avatar.tone-3{background:#24904f}.warehouse-avatar.tone-4{background:#416fcd}
.warehouse-manager { display:flex;align-items:center;gap:8px;min-height:20px;color:#6b7280;font-size:13px;font-weight:500 }
.warehouse-manager svg{width:14px;height:14px;flex:0 0 auto}
.warehouse-card-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px;border-top:1px solid #e5e7eb }
.warehouse-card-stats span{display:grid;gap:4px;min-width:0}
.warehouse-card-stats strong{font-size:15px;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.warehouse-card-stats small{color:#8a919c;font-size:12px;line-height:1.25}
.warehouse-detail-drawer { position:fixed;inset:0;z-index:80;display:none }.warehouse-detail-drawer.show{display:block}.warehouse-detail-backdrop{position:absolute;inset:0;background:rgba(16,28,20,.48);backdrop-filter:blur(2px)}
.warehouse-detail-panel{position:absolute;top:0;right:0;width:min(920px,94vw);height:100%;display:flex;flex-direction:column;background:var(--lm-bg,#f7f8f4);box-shadow:-24px 0 60px rgba(15,23,18,.22)}
.warehouse-detail-head{display:flex;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid var(--lm-line);background:var(--lm-surface)}.warehouse-detail-head span{color:#178448;font-size:11px;font-weight:900;text-transform:uppercase}.warehouse-detail-head h2{margin:4px 0;font-size:23px}.warehouse-detail-head p{margin:0;color:var(--lm-muted);font-size:12px}
.warehouse-detail-body{display:grid;gap:18px;padding:22px 26px 40px;overflow:auto}.warehouse-info-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.warehouse-info-grid div{display:grid;gap:6px;padding:14px;border:1px solid var(--lm-line);border-radius:13px;background:var(--lm-surface)}.warehouse-info-grid span{color:var(--lm-muted);font-size:10px;text-transform:uppercase;font-weight:800}.warehouse-info-grid strong{font-size:13px;overflow-wrap:anywhere}
.warehouse-detail-section{overflow:hidden;border:1px solid var(--lm-line);border-radius:15px;background:var(--lm-surface)}.warehouse-detail-section-title{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--lm-line)}.warehouse-detail-section-title h3{margin:0;font-size:14px}.warehouse-detail-section-title span{min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;color:#08783d;background:#e8f8ee;font-size:10px;font-weight:900}.warehouse-detail-section .table-wrap{margin:0;border:0;border-radius:0;box-shadow:none}.warehouse-detail-section table{min-width:650px!important}.warehouse-detail-section th,.warehouse-detail-section td{padding:11px 14px!important;font-size:11px!important}
@media (max-width:1250px){.warehouse-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1050px){.warehouse-summary-grid{grid-template-columns:repeat(2,1fr)}.warehouse-info-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:650px){.warehouse-summary-grid,.warehouse-card-grid{grid-template-columns:1fr}.warehouse-detail-body,.warehouse-detail-head{padding-left:16px;padding-right:16px}.warehouse-info-grid{grid-template-columns:1fr 1fr}}

#procurementView [data-procurement-vendors-only][hidden] {
  display: none !important;
}

#inventoryView [data-inventory-issue-only][hidden] {
  display: none !important;
}

#inventoryView [data-inventory-categories-only][hidden] {
  display: none !important;
}

#procurementView [data-procurement-grn-only][hidden] {
  display: none !important;
}

#financeView [data-finance-donors-only][hidden],
#financeView [data-finance-budget-lines-only][hidden],
#financeView[data-active-finance-tab="donors"] [data-finance-budget-lines-only] {
  display: none !important;
}

#inventoryView .inventory-page-actions button,
#procurementView .inventory-page-actions button,
#financeView .inventory-page-actions button,
#inventoryView .inventory-toolbar button,
#inventoryView .pagination button {
  min-height: 32px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

#inventoryView .inventory-page-actions .primary,
#procurementView .inventory-page-actions .primary,
#financeView .inventory-page-actions .primary {
  color: #fff;
  background: linear-gradient(135deg, #1daf52, #0b6a36);
  box-shadow: 0 10px 24px rgba(29, 175, 82, .24);
}

#vendorsView .vendors-records-screen,
#procurementVendorsPanel .vendors-records-screen {
  display: grid;
  gap: 24px;
}

#vendorsView .vendors-records-toolbar,
#procurementVendorsPanel .vendors-records-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px);
  align-items: center;
  gap: 10px;
}

#vendorsView .vendors-records-card,
#procurementVendorsPanel .vendors-records-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#vendorsView .vendor-container-grid,
#procurementVendorsPanel .vendor-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  padding: 0;
}

#vendorsView .vendor-container,
#procurementVendorsPanel .vendor-container {
  display: grid;
  gap: 10px;
  grid-template-rows: 96px auto auto;
  min-height: 204px;
  padding: 13px;
  border: 1px solid rgba(20, 31, 25, .10);
  border-radius: 14px;
  color: var(--lm-ink, #17211b);
  background: var(--lm-surface, #fff);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 20, 16, .04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#vendorsView .vendor-container:hover,
#procurementVendorsPanel .vendor-container:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 175, 82, .34);
  box-shadow: 0 14px 28px rgba(10, 20, 16, .10);
}

#vendorsView .vendor-card-visual,
#procurementVendorsPanel .vendor-card-visual {
  position: relative;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  color: #4f5b55;
}

#vendorsView .vendor-card-visual > span,
#procurementVendorsPanel .vendor-card-visual > span {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #4f5b55;
  background: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 900;
}

#vendorsView .vendor-card-visual strong,
#procurementVendorsPanel .vendor-card-visual strong {
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

#vendorsView .vendor-card-head,
#procurementVendorsPanel .vendor-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#vendorsView .vendor-card-head > span,
#procurementVendorsPanel .vendor-card-head > span {
  min-width: 0;
}

#vendorsView .vendor-card-head strong,
#vendorsView .vendor-card-head small,
#procurementVendorsPanel .vendor-card-head strong,
#procurementVendorsPanel .vendor-card-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#vendorsView .vendor-card-head strong,
#procurementVendorsPanel .vendor-card-head strong {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 800;
  white-space: normal;
}

#vendorsView .vendor-card-head small,
#procurementVendorsPanel .vendor-card-head small {
  margin-top: 3px;
  color: var(--lm-muted, #66716b);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#vendorsView .vendor-card-head em {
  flex: 0 0 auto;
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

#vendorsView .vendor-card-head em::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

#vendorsView .vendor-card-head em.in {
  color: #0c9f57;
  background: #d8f8e8;
}

#vendorsView .vendor-card-head em.low {
  color: #b77900;
  background: #fff0cf;
}

#vendorsView .vendor-card-meta,
#procurementVendorsPanel .vendor-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--lm-muted, #66716b);
  font-size: 11px;
  font-weight: 700;
}

#vendorsView .vendor-card-meta strong,
#procurementVendorsPanel .vendor-card-meta strong {
  max-width: 58%;
  overflow: hidden;
  color: var(--lm-ink, #17211b);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendorsView .vendor-card-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--lm-surface-3, #e8eee9);
}

#vendorsView .vendor-card-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #1daf52;
}

#vendorsView .vendor-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--lm-line, #e1e7df);
  color: var(--lm-muted, #66716b);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}

#vendorsView .vendor-card-foot span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vendorsView .vendor-empty-state,
#procurementVendorsPanel .vendor-empty-state {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--lm-muted, #66716b);
  border: 1px dashed var(--lm-line, #e1e7df);
  border-radius: 8px;
  background: var(--lm-bg, #f7f8f4);
}

#vendorsView .vendor-empty-state strong,
#procurementVendorsPanel .vendor-empty-state strong {
  color: var(--lm-ink, #17211b);
}

#vendorsView .vendor-detail-drawer,
#procurementVendorsPanel .vendor-detail-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 29, 36, .42);
}

#vendorsView .vendor-detail-drawer.show,
#procurementVendorsPanel .vendor-detail-drawer.show {
  display: flex;
}

#vendorsView .vendor-detail-card,
#procurementVendorsPanel .vendor-detail-card {
  width: min(940px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

#vendorsView .vendor-detail-card .modal-head,
#procurementVendorsPanel .vendor-detail-card .modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line, #e1e7df);
}

#vendorsView .vendor-detail-body,
#procurementVendorsPanel .vendor-detail-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

#vendorsView .vendor-detail-summary,
#procurementVendorsPanel .vendor-detail-summary {
  display: block;
}

#vendorsView .vendor-detail-summary .vendor-card-visual,
#procurementVendorsPanel .vendor-detail-summary .vendor-card-visual {
  display: none;
}

#vendorsView .vendor-detail-grid,
#procurementVendorsPanel .vendor-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#vendorsView .vendor-detail-grid div,
#procurementVendorsPanel .vendor-detail-grid div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 10px;
  background: #fbfcfa;
}

#vendorsView .vendor-detail-grid span,
#vendorsView .vendor-detail-grid strong,
#procurementVendorsPanel .vendor-detail-grid span,
#procurementVendorsPanel .vendor-detail-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

#vendorsView .vendor-detail-grid span,
#procurementVendorsPanel .vendor-detail-grid span {
  color: var(--lm-muted, #66716b);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#vendorsView .vendor-detail-grid strong,
#procurementVendorsPanel .vendor-detail-grid strong {
  color: var(--lm-ink, #17211b);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
}

#vendorsView .vendor-detail-card .form-actions,
#procurementVendorsPanel .vendor-detail-card .form-actions {
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--line, #e1e7df);
}

@media (max-width: 760px) {
  #vendorsView .vendor-detail-drawer,
  #procurementVendorsPanel .vendor-detail-drawer {
    padding: 10px;
  }

  #vendorsView .vendor-detail-card,
  #procurementVendorsPanel .vendor-detail-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  #vendorsView .vendor-detail-summary,
  #procurementVendorsPanel .vendor-detail-summary,
  #vendorsView .vendor-detail-grid,
  #procurementVendorsPanel .vendor-detail-grid {
    grid-template-columns: 1fr;
  }
}

.vendor-detail-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 29, 36, .46);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.vendor-detail-drawer.show {
  display: flex;
}

.vendor-detail-card {
  width: min(940px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

.vendor-detail-card .modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line, #e1e7df);
}

.vendor-detail-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.vendor-detail-summary {
  display: block;
}

.vendor-detail-summary .vendor-card-visual {
  display: none;
}

.vendor-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vendor-detail-grid div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 10px;
  background: #fbfcfa;
}

.vendor-detail-grid span,
.vendor-detail-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vendor-detail-grid span {
  color: var(--lm-muted, #66716b);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vendor-detail-grid strong {
  color: var(--lm-ink, #17211b);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
}

.vendor-detail-card .form-actions {
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--line, #e1e7df);
}

@media (max-width: 760px) {
  .vendor-detail-drawer {
    padding: 10px;
  }

  .vendor-detail-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .vendor-detail-summary,
  .vendor-detail-grid {
    grid-template-columns: 1fr;
  }
}

#inventoryView .inventory-page-actions .secondary {
  color: var(--lm-ink);
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
}

.stock-issue-drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  justify-content: flex-end;
  padding: 18px;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
}

.stock-issue-drawer.show {
  display: flex;
}

.stock-issue-drawer-card {
  position: relative;
  width: min(520px, 100%);
  height: 100%;
  max-height: calc(100vh - 36px);
  margin: 0;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 18, .22);
}

.stock-issue-drawer-card .section-title {
  padding-right: 46px;
}

.stock-issue-drawer-card .section-title h2 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.stock-issue-drawer-card .section-title p {
  margin: 0;
  line-height: 1.45;
}

#requestStockIssueDrawer table {
  min-width: 560px !important;
  table-layout: fixed;
}

#requestStockIssueDrawer th:first-child,
#requestStockIssueDrawer td:first-child {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center;
  vertical-align: middle;
}

#requestStockIssueDrawer .request-issue-select {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  display: inline-block;
  margin: 0 auto;
  padding: 0 !important;
}

#requestStockIssueDrawer th:nth-child(2),
#requestStockIssueDrawer td:nth-child(2) {
  width: 32%;
}

#requestStockIssueDrawer th:nth-child(3),
#requestStockIssueDrawer td:nth-child(3),
#requestStockIssueDrawer th:nth-child(4),
#requestStockIssueDrawer td:nth-child(4) {
  width: 76px;
}

#requestStockIssueDrawer th:nth-child(5),
#requestStockIssueDrawer td:nth-child(5) {
  width: 116px;
}

#requestStockIssueDrawer th:nth-child(7),
#requestStockIssueDrawer td:nth-child(7) {
  width: 92px;
}

#requestStockIssueDrawer.request-stock-issue-modal {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

#requestStockIssueDrawer .request-stock-issue-card {
  width: min(1280px, calc(100vw - 48px));
  height: auto;
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 14px;
  background: var(--lm-surface, #fff);
  box-shadow: 0 28px 80px rgba(15, 23, 18, .24);
}

#requestStockIssueDrawer .request-stock-issue-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 36px;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--lm-line, #e1e7df);
  background: #fbfcfa;
}

#requestStockIssueDrawer .request-stock-issue-kicker {
  margin: 0 0 4px;
  color: var(--lm-muted, #66716b);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#requestStockIssueDrawer .request-stock-issue-head h2 {
  margin: 0;
  color: var(--lm-ink, #172018);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
}

#requestStockIssueDrawer .request-stock-issue-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#requestStockIssueDrawer .request-stock-issue-meta span {
  max-width: 240px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 999px;
  color: var(--lm-ink, #172018);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#requestStockIssueDrawer .stock-issue-drawer-close {
  position: static;
  justify-self: end;
}

#requestStockIssueDrawer .request-stock-issue-table-wrap {
  min-width: 0;
  overflow: auto;
  padding: 0;
}

#requestStockIssueDrawer table {
  width: max-content !important;
  min-width: 1080px !important;
  table-layout: fixed;
  border-collapse: collapse;
}

#requestStockIssueDrawer th,
#requestStockIssueDrawer td {
  max-width: none !important;
  padding: 12px 10px !important;
  border-bottom: 1px solid var(--lm-line, #e1e7df);
  vertical-align: middle;
}

#requestStockIssueDrawer th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--lm-muted, #66716b);
  background: #f7f8f4;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

#requestStockIssueDrawer th:nth-child(1),
#requestStockIssueDrawer td:nth-child(1) {
  width: 58px !important;
}

#requestStockIssueDrawer th:nth-child(2),
#requestStockIssueDrawer td:nth-child(2) {
  width: 280px !important;
}

#requestStockIssueDrawer th:nth-child(3),
#requestStockIssueDrawer td:nth-child(3) {
  width: 120px !important;
}

#requestStockIssueDrawer th:nth-child(4),
#requestStockIssueDrawer td:nth-child(4),
#requestStockIssueDrawer th:nth-child(5),
#requestStockIssueDrawer td:nth-child(5),
#requestStockIssueDrawer th:nth-child(6),
#requestStockIssueDrawer td:nth-child(6) {
  width: 126px !important;
}

#requestStockIssueDrawer th:nth-child(7),
#requestStockIssueDrawer td:nth-child(7) {
  width: 112px !important;
}

#requestStockIssueDrawer th:nth-child(8),
#requestStockIssueDrawer td:nth-child(8) {
  width: 230px !important;
}

#requestStockIssueDrawer .request-issue-select-cell {
  text-align: center;
}

#requestStockIssueDrawer .request-issue-select {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 auto;
}

#requestStockIssueDrawer .request-issue-item-cell strong,
#requestStockIssueDrawer .request-issue-item-cell span {
  display: block;
  min-width: 0;
}

#requestStockIssueDrawer .request-issue-item-cell strong {
  color: var(--lm-ink, #172018);
  font-size: 13px;
  line-height: 1.35;
}

#requestStockIssueDrawer .request-issue-item-cell span {
  margin-top: 3px;
  color: var(--lm-muted, #66716b);
  font-size: 12px;
  line-height: 1.35;
}

#requestStockIssueDrawer .request-issue-code {
  display: inline-block;
  max-width: 100%;
  font-weight: 800;
  white-space: nowrap;
}

#requestStockIssueDrawer .table-input {
  width: 100%;
  min-width: 92px;
  height: 36px;
  border-radius: 8px;
  font-size: 12px;
}

#requestStockIssueDrawer .request-issue-by {
  min-width: 190px;
}

#requestStockIssueDrawer .table-input:disabled,
#requestStockIssueDrawer .request-issue-select:disabled {
  cursor: not-allowed;
  opacity: .58;
}

#requestStockIssueDrawer .request-stock-issue-footer {
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--lm-line, #e1e7df);
  background: #fbfcfa;
}

.stock-issue-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

body.manual-stock-issue-open .sidebar {
  pointer-events: none;
}

body.manual-stock-issue-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.manual-stock-issue-open .stock-issue-drawer {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-issue-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.stock-issue-search {
  width: min(460px, 100%);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  color: var(--lm-muted, var(--muted));
  background: var(--lm-surface, #fff);
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 9px;
}

.stock-issue-search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.stock-issue-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: var(--lm-ink, var(--text));
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.stock-issue-location-filter {
  flex: 0 0 240px;
  display: grid;
  gap: 5px;
  color: var(--lm-muted, var(--muted));
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.stock-issue-location-filter input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 9px;
  padding: 0 11px;
  color: var(--lm-ink, var(--text));
  background: var(--lm-surface, #fff);
  outline: 0;
  font-size: 13px;
  text-transform: none;
}

.stock-issue-location-filter select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 9px;
  padding: 0 11px;
  color: var(--lm-ink, var(--text));
  background: var(--lm-surface, #fff);
  outline: 0;
  font-size: 13px;
  text-transform: none;
}

#inventoryView .inventory-tabs,
#inventoryView .category-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#inventoryView .inventory-module-tabs,
#procurementView .inventory-module-tabs,
#requestsView .inventory-module-tabs,
#financeView .inventory-module-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--lm-line);
}

#inventoryView .inventory-module-tab,
#procurementView .inventory-module-tab,
#requestsView .inventory-module-tab,
#financeView .inventory-module-tab {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--lm-muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

#inventoryView .inventory-module-tab svg,
#procurementView .inventory-module-tab svg,
#requestsView .inventory-module-tab svg,
#financeView .inventory-module-tab svg {
  width: 15px;
  height: 15px;
}

#inventoryView .inventory-module-tab span,
#requestsView .inventory-module-tab span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #0b6a36;
  background: var(--lm-brand-100);
  font-size: 10px;
  font-weight: 900;
}

#inventoryView .inventory-module-tab.active,
#procurementView .inventory-module-tab.active,
#requestsView .inventory-module-tab.active,
#financeView .inventory-module-tab.active {
  color: var(--lm-brand-700);
  border-bottom-color: transparent;
  font-weight: 800;
}

#inventoryView .inventory-module-tab.active::after,
#procurementView .inventory-module-tab.active::after,
#requestsView .inventory-module-tab.active::after,
#financeView .inventory-module-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--lm-brand-500);
}

#inventoryView .inventory-action-tab:hover,
#procurementView .inventory-module-tab:hover,
#requestsView .inventory-module-tab:hover,
#financeView .inventory-module-tab:hover {
  color: var(--lm-brand-700);
  background: transparent;
}

#inventoryView .inventory-tabs::-webkit-scrollbar,
#inventoryView .category-tabs::-webkit-scrollbar {
  display: none;
}

#inventoryView .category-tab {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--lm-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

#inventoryView .category-tab:hover {
  color: var(--lm-ink);
  background: var(--lm-surface-3);
}

#inventoryView .category-tab.active {
  color: var(--lm-brand-700);
  background: var(--lm-surface);
  border-color: var(--lm-line);
  box-shadow: 0 1px 2px rgba(10, 20, 16, .05);
}

#inventoryView .inventory-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#inventoryView .inventory-kpis[hidden] {
  display: none !important;
}

#inventoryView .inventory-kpi {
  min-height: 78px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 20, 16, .04);
}

#inventoryView .inventory-kpi-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--lm-brand-700);
  background: var(--lm-brand-100);
}

#inventoryView .inventory-kpi:nth-child(2) .inventory-kpi-icon {
  color: #0f5f9f;
  background: #e4f1ff;
}

#inventoryView .inventory-kpi:nth-child(3) .inventory-kpi-icon {
  color: #a35b0b;
  background: #fff0d9;
}

#inventoryView .inventory-kpi:nth-child(4) .inventory-kpi-icon {
  color: #5a4fd8;
  background: #eeeeff;
}

#inventoryView .inventory-kpi span:not(.inventory-kpi-icon) {
  display: block;
  color: var(--lm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#inventoryView .inventory-kpi strong {
  display: block;
  margin-top: 4px;
  color: var(--lm-ink);
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#inventoryView .inventory-lumen-card {
  padding: 0;
  overflow: hidden;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: 12px;
  box-shadow: none;
}

#inventoryView #inventoryItemsPanel.inventory-lumen-card {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#inventoryView .inventory-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--lm-line);
  background: var(--lm-surface);
}

#inventoryView #inventoryItemsPanel .inventory-toolbar {
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#inventoryView .inventory-search-filter {
  min-width: min(420px, 100%);
  flex: 0 1 470px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--lm-muted);
  background: var(--lm-surface-2);
  border: 1px solid var(--lm-line);
  border-radius: 9px;
}

#inventoryView .inventory-toolbar .inventory-tabs {
  flex: 1 1 auto;
  min-width: 220px;
}

#inventoryView .inventory-status-tabs {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}

#inventoryView .inventory-status-tab {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--lm-line);
  border-radius: 8px;
  color: var(--lm-muted);
  background: var(--lm-surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

#inventoryView .inventory-status-tab:hover {
  color: var(--lm-ink);
  background: var(--lm-surface-3);
}

#inventoryView .inventory-status-tab.active {
  color: var(--lm-brand-700);
  background: var(--lm-brand-50);
  border-color: var(--lm-brand-100);
}

#inventoryView .inventory-search-filter input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: var(--lm-ink);
  background: transparent;
  font-size: 12px;
}

#inventoryView .inventory-location-filter {
  flex: 0 0 240px;
  display: grid;
  gap: 5px;
  color: var(--lm-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#inventoryView .inventory-location-filter input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--lm-line);
  border-radius: 9px;
  padding: 0 11px;
  color: var(--lm-ink);
  background: var(--lm-surface-2);
  outline: 0;
  font-size: 12px;
  text-transform: none;
}

#inventoryView .table-wrap {
  overflow-x: auto;
}

#inventoryView table {
  width: 100%;
  border-collapse: collapse;
}

#inventoryView th {
  height: 42px;
  padding: 0 14px;
  color: var(--lm-muted);
  background: var(--lm-surface-2);
  border-bottom: 1px solid var(--lm-line);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

#inventoryView td {
  height: 52px;
  padding: 10px 14px;
  color: var(--lm-ink);
  border-bottom: 1px solid var(--lm-line);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

#inventoryView td:first-child {
  font-family: "SF Mono", Consolas, monospace;
  color: #334139;
  font-size: 12px;
}

#inventoryView td:nth-child(6) {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

#inventoryView tbody tr:hover {
  background: #fbfcfa;
}

#inventoryView .status-badge,
#inventoryView .badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}

#inventoryView .pagination {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 12px;
  color: var(--lm-muted);
  background: var(--lm-surface);
}

#inventoryView .pagination span {
  font-size: 12px;
  font-weight: 700;
}

#inventoryView .page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lm-ink);
  background: var(--lm-surface-2);
  border: 1px solid var(--lm-line);
}

#inventoryView .page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#inventoryView .inventory-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
  gap: 14px;
  padding: 0;
}

#inventoryView .inventory-item-card {
  display: grid;
  gap: 10px;
  min-height: 260px;
  padding: 13px;
  border: 1px solid var(--lm-line);
  border-radius: 14px;
  color: var(--lm-ink);
  background: var(--lm-surface);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 20, 16, .04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#inventoryView .inventory-item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 175, 82, .34);
  box-shadow: 0 14px 28px rgba(10, 20, 16, .10);
}

#inventoryView .inventory-card-visual {
  position: relative;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
}

#inventoryView .inventory-card-visual > span {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #0a1410;
  background: rgba(255, 255, 255, .88);
  font-size: 10px;
  font-weight: 900;
}

#inventoryView .inventory-card-visual strong {
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

#inventoryView .inventory-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#inventoryView .inventory-card-head strong,
#inventoryView .inventory-card-head small {
  display: block;
}

#inventoryView .inventory-card-head strong {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 800;
}

#inventoryView .inventory-card-head small {
  margin-top: 3px;
  color: var(--lm-muted);
  font-size: 11px;
  font-weight: 700;
}

#inventoryView .inventory-card-head em {
  flex: 0 0 auto;
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

#inventoryView .inventory-card-head em::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

#inventoryView .inventory-card-head em.in {
  color: #0c9f57;
  background: #d8f8e8;
}

#inventoryView .inventory-card-head em.low {
  color: #b77900;
  background: #fff0cf;
}

#inventoryView .inventory-card-head em.out {
  color: #b42318;
  background: #fee4e2;
}

#inventoryView .inventory-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--lm-muted);
  font-size: 11px;
  font-weight: 700;
}

#inventoryView .inventory-card-meta strong {
  color: var(--lm-ink);
  font-size: 12px;
  font-weight: 900;
}

#inventoryView .inventory-card-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--lm-surface-3);
}

#inventoryView .inventory-card-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1daf52;
}

#inventoryView .inventory-card-bar.low i {
  background: #f59e0b;
}

#inventoryView .inventory-card-bar.out i {
  background: #ef4444;
}

#inventoryView .inventory-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--lm-line);
  color: var(--lm-muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
}

#inventoryView .inventory-card-empty {
  grid-column: 1 / -1;
  padding: 40px 16px;
  color: var(--lm-muted);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

#inventoryView .inventory-panel {
  display: none;
}

#inventoryView .inventory-panel.active {
  display: block;
}

#requestStockIssueDrawer .section-title {
  margin: 0;
  padding: 20px 68px 14px 22px;
  border-bottom: 1px solid var(--lm-line, #e1e7df);
  background: #fbfcfa;
}

#requestStockIssueDrawer .request-receiving-summary {
  padding: 16px 22px;
  border-bottom: 1px solid var(--lm-line, #e1e7df);
  background: #fff;
}

#requestStockIssueDrawer .request-receiving-summary input[readonly] {
  color: var(--lm-ink, #172018);
  background: #f7f8f4;
  font-weight: 800;
}

#inventoryView .inventory-operations-tabs {
  margin-bottom: 16px;
}

#inventoryView .inventory-operations-tabs .request-history-tab svg {
  width: 15px;
  height: 15px;
}

#inventoryView .inventory-operation-panel {
  display: none;
}

#inventoryView .inventory-operation-panel.active {
  display: block;
}

#inventoryView .inventory-stock-in-content {
  display: block;
}

#procurementView .procurement-panel {
  display: none;
}

#procurementView .procurement-panel.active {
  display: block;
}

#requestsView .request-panel {
  display: none;
}

#requestsView .request-panel.active {
  display: block;
}

#requestsView .inventory-module-tab {
  min-height: 38px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--lm-muted);
  background: transparent;
  box-shadow: none;
}

#requestsView .inventory-module-tab.active {
  color: var(--lm-brand-700);
  border-bottom-color: transparent;
  font-weight: 800;
}

#requestsView .inventory-module-tab:focus,
#requestsView .inventory-module-tab:focus-visible {
  outline: 0;
  box-shadow: none !important;
}

#requestsRequisitionPanel > .card.table-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#inventoryView .inventory-form-panel {
  padding-top: 4px;
}

#inventoryView .inventory-form-panel .card {
  margin-bottom: 14px;
}

.stock-transfer-history-card {
  margin-bottom: 0 !important;
}

.stock-transfer-drawer-card {
  width: min(620px, 100%);
}

.stock-transfer-drawer-card input[readonly] {
  color: var(--lm-brand-700);
  background: var(--surface-soft);
  font-weight: 800;
}

.warehouse-management-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid #e1e7df;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 38, 31, .05);
}

.warehouse-management-tabs .inventory-module-tab {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0 12px;
  font-size: 13px;
  background: transparent;
}

.warehouse-management-tabs .inventory-module-tab.active {
  border-color: rgba(18, 142, 72, .18);
  background: #edf8f0;
  color: #08783e;
  box-shadow: none;
}

.warehouse-management-panel {
  display: none;
}

.warehouse-management-panel.active {
  display: block;
}

.warehouse-operations-toolbar {
  display: grid;
  grid-template-columns: auto minmax(180px, 240px) minmax(260px, 1fr);
  gap: 10px;
  align-items: end;
  margin: 14px 0 12px;
}

.warehouse-operation-context {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cfe8d6;
  border-radius: 999px;
  background: #edf8f0;
  color: #08783e;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.warehouse-operation-filter,
.warehouse-operation-search {
  position: relative;
  display: grid;
  gap: 5px;
  margin: 0;
}

.warehouse-operation-filter span {
  color: #66736d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.warehouse-operation-filter input,
.warehouse-operation-filter select,
.warehouse-operation-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dfe7dc;
  border-radius: 10px;
  background: #fff;
  color: #17221d;
  font-size: 13px;
}

.warehouse-operation-filter input,
.warehouse-operation-filter select {
  padding: 0 12px;
}

.warehouse-operation-search {
  align-self: end;
}

.warehouse-operation-search svg {
  position: absolute;
  left: 12px;
  bottom: 11px;
  width: 16px;
  height: 16px;
  color: #66736d;
  pointer-events: none;
}

.warehouse-operation-search input {
  padding: 0 12px 0 36px;
}

.warehouse-operation-filter:focus-within input,
.warehouse-operation-filter:focus-within select,
.warehouse-operation-search:focus-within input {
  border-color: #17a653;
  box-shadow: 0 0 0 3px rgba(23, 166, 83, .12);
  outline: 0;
}

@media (max-width: 860px) {
  .warehouse-operations-toolbar {
    grid-template-columns: 1fr;
  }

  .warehouse-operation-context {
    width: fit-content;
  }
}

.warehouse-operation-lines {
  margin-top: 14px;
}

.warehouse-operation-lines .table-wrap {
  max-height: 340px;
  overflow: auto;
}

.warehouse-operation-lines input {
  width: 100%;
  min-width: 96px;
}

body.stock-transfer-drawer-open .sidebar {
  pointer-events: none;
}

body.stock-transfer-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.stock-transfer-drawer-open .stock-transfer-drawer {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stock-movement-positive {
  color: #08783e;
  font-weight: 900;
}

.stock-movement-negative {
  color: #c03221;
  font-weight: 900;
}

.gate-pass-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.gate-pass-card {
  border: 1px solid #dce6dd;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.gate-pass-card:hover,
.gate-pass-card:focus-visible {
  transform: translateY(-3px);
  border-color: #9fcfb2;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  outline: none;
}

.gate-pass-card:active {
  transform: translateY(-1px);
}

.gate-pass-card.inward {
  border-top: 4px solid #0f8f4f;
}

.gate-pass-card.outward {
  border-top: 4px solid #b42318;
}

.gate-pass-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gate-pass-card-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #23352a;
}

.gate-pass-card-head svg {
  width: 17px;
  height: 17px;
}

.gate-pass-card-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gate-pass-card-body div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.gate-pass-card small,
.gate-pass-card-body small {
  color: #6b7b70;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gate-pass-card-body strong,
.gate-pass-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gate-pass-card p {
  margin: 0;
  color: #637267;
  font-size: 13px;
}

.gate-pass-drawer-card {
  max-width: 980px;
}

.gate-pass-segmented {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(420px, 100%);
  padding: 4px;
  margin: 0 0 18px;
  border: 1px solid #d8e3da;
  border-radius: 999px;
  background: #f5f8f5;
}

.gate-pass-segmented span {
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #0b6a36;
  transition: transform 180ms ease;
  pointer-events: none;
}

.gate-pass-segmented button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: #506157;
  font-weight: 800;
  padding: 10px 14px;
  cursor: pointer;
}

.gate-pass-segmented button.active {
  color: #fff;
}

.gate-pass-segmented button:nth-of-type(2).active ~ span {
  transform: translateX(100%);
}

.gate-pass-item-details {
  margin-top: 14px;
}

.gate-pass-items-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #23352a;
}

.gate-pass-items-head span {
  color: #66766b;
  font-weight: 700;
}

.gate-pass-detail-summary,
.gate-pass-detail-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gate-pass-detail-drawer .warehouse-detail-panel {
  width: min(820px, calc(100vw - 24px));
  max-width: 100vw;
  overflow: hidden;
}

.gate-pass-detail-drawer .warehouse-detail-body {
  display: block;
  overflow-x: hidden;
}

.gate-pass-detail-drawer .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 8px;
}

.gate-pass-detail-drawer .table-wrap table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

.gate-pass-detail-drawer .table-wrap th,
.gate-pass-detail-drawer .table-wrap td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.gate-pass-detail-drawer .table-wrap th:nth-child(1),
.gate-pass-detail-drawer .table-wrap td:nth-child(1) {
  width: 18%;
}

.gate-pass-detail-drawer .table-wrap th:nth-child(2),
.gate-pass-detail-drawer .table-wrap td:nth-child(2) {
  width: 34%;
}

.gate-pass-detail-drawer .table-wrap th:nth-child(3),
.gate-pass-detail-drawer .table-wrap td:nth-child(3) {
  width: 18%;
}

.gate-pass-detail-drawer .table-wrap th:nth-child(4),
.gate-pass-detail-drawer .table-wrap td:nth-child(4),
.gate-pass-detail-drawer .table-wrap th:nth-child(5),
.gate-pass-detail-drawer .table-wrap td:nth-child(5) {
  width: 15%;
}

.gate-pass-detail-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.gate-pass-detail-summary div,
.gate-pass-detail-notes div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dce6dd;
  border-radius: 8px;
  background: #fff;
}

.gate-pass-detail-summary span,
.gate-pass-detail-notes span {
  color: #6b7b70;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gate-pass-detail-summary strong,
.gate-pass-detail-notes strong {
  color: #14251a;
  overflow-wrap: anywhere;
}

.gate-pass-detail-section {
  margin-top: 18px;
}

.gate-pass-detail-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #14251a;
}

.gate-pass-detail-notes .span-2 {
  grid-column: span 2;
}

@media (max-width: 720px) {
  .gate-pass-detail-summary,
  .gate-pass-detail-notes {
    grid-template-columns: 1fr;
  }

  .gate-pass-detail-notes .span-2 {
    grid-column: auto;
  }
}

#inventoryGatePassesPanel,
#inventoryTransfersPanel,
#inventoryMovementsPanel {
  color: #0a1410;
  background: #F6F7F3;
}

#inventoryGatePassesPanel .inventory-records-screen,
#inventoryTransfersPanel .inventory-records-screen,
#inventoryMovementsPanel .inventory-records-screen {
  display: grid;
  gap: 18px;
}

#inventoryTransfersPanel .po-records-head,
#inventoryMovementsPanel .po-records-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#inventoryTransfersPanel .po-records-head h2,
#inventoryMovementsPanel .po-records-head h2 {
  margin: 0;
  color: #06110c;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
}

#inventoryTransfersPanel .po-records-head p,
#inventoryMovementsPanel .po-records-head p {
  margin: 7px 0 0;
  color: #65716b;
  font-size: 13px;
}

#inventoryTransfersPanel .po-new-button {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 16px;
  background: #19bd57;
  box-shadow: 0 12px 24px rgba(25, 189, 87, .24);
  font-size: 13px;
  font-weight: 900;
}

#inventoryTransfersPanel .stock-transfer-filter-toolbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(210px, auto) repeat(5, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  margin: 16px 0 18px;
}

#inventoryTransfersPanel .stock-transfer-filter-toolbar .temporal-filter-wrap {
  display: grid;
  justify-items: start;
}

#inventoryTransfersPanel .stock-transfer-filter-toolbar .temporal-filter-bar {
  position: static;
  width: 100%;
  min-height: 44px;
  margin: 0;
}

#inventoryTransfersPanel .stock-out-filter-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: #536259;
  font-size: 12px;
  font-weight: 800;
}

#inventoryTransfersPanel .stock-out-filter-field span {
  overflow: hidden;
  color: #536259;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inventoryTransfersPanel .stock-out-filter-field input,
#inventoryTransfersPanel .stock-out-filter-field select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #dfe7df;
  border-radius: 10px;
  background: #fff;
  color: #26342d;
  font-size: 13px;
  outline: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

#inventoryTransfersPanel .stock-out-filter-field select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #111827 50%), linear-gradient(135deg, #111827 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#inventoryTransfersPanel .stock-out-filter-field input:focus,
#inventoryTransfersPanel .stock-out-filter-field select:focus {
  border-color: #79c99a;
  box-shadow: 0 0 0 3px rgba(25, 189, 87, 0.12);
}

@media (max-width: 1280px) {
  #inventoryTransfersPanel .stock-transfer-filter-toolbar {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  #inventoryTransfersPanel .stock-transfer-filter-toolbar {
    grid-template-columns: 1fr;
  }
}

#inventoryTransfersPanel .po-records-card,
#inventoryMovementsPanel .po-records-card {
  overflow: hidden;
  border: 1px solid #e1e7df;
  border-radius: 18px;
  background: #fff;
}

#inventoryTransfersPanel .po-records-card th,
#inventoryTransfersPanel .po-records-card td,
#inventoryMovementsPanel .po-records-card th,
#inventoryMovementsPanel .po-records-card td {
  height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid #edf1ea;
  color: #17221d;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

#inventoryTransfersPanel .po-records-card th,
#inventoryMovementsPanel .po-records-card th {
  height: 40px;
  color: #66716b;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#inventoryTransfersPanel .po-records-card tbody tr:last-child td,
#inventoryMovementsPanel .po-records-card tbody tr:last-child td {
  border-bottom: 0;
}

#inventoryMovementsPanel .stock-movement-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
}

#inventoryMovementsPanel .po-search-filter {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  color: #7b8780;
  background: #fff;
}

#inventoryMovementsPanel .po-search-filter svg {
  width: 15px;
  height: 15px;
}

#inventoryMovementsPanel .po-search-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #17221d;
  background: transparent;
  font-size: 13px;
}

#inventoryMovementsPanel .po-vendor-filter {
  min-width: 0;
}

#inventoryMovementsPanel .po-vendor-filter input,
#inventoryMovementsPanel .po-vendor-filter select {
  width: 100%;
  height: 38px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  padding: 0 12px;
  color: #66716b;
  background: #fff;
  outline: 0;
  font-size: 13px;
}

#inventoryMovementsPanel .stock-movement-date-filter {
  display: grid;
  gap: 5px;
  color: #66716b;
  font-size: 10px;
  font-weight: 900;
}

#inventoryMovementsPanel #clearStockMovementFilters {
  min-height: 38px;
  justify-self: start;
  border-radius: 10px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  #inventoryMovementsPanel .stock-movement-filters {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  #inventoryTransfersPanel .po-records-head,
  #inventoryMovementsPanel .po-records-head {
    align-items: stretch;
    flex-direction: column;
  }

  #inventoryMovementsPanel .stock-movement-filters {
    grid-template-columns: 1fr;
  }
}

.inventory-detail-card {
  width: min(940px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}

.inventory-detail-card .modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.inventory-delete-detail {
  min-height: 32px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.inventory-detail-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.inventory-detail-summary {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.inventory-detail-summary .inventory-card-visual {
  position: relative;
  height: 152px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
}

.inventory-detail-summary .inventory-card-visual > span {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #0a1410;
  background: rgba(255, 255, 255, .88);
  font-size: 10px;
  font-weight: 900;
}

.inventory-detail-summary .inventory-card-visual strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.inventory-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inventory-detail-facts div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
}

.inventory-detail-facts span,
.inventory-detail-stock h3,
.inventory-detail-stock-row span {
  color: #7b8780;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.inventory-detail-facts strong {
  color: #0a1410;
  font-size: 13px;
  font-weight: 900;
}

.inventory-detail-stock {
  margin-top: 24px;
}

.inventory-detail-types {
  margin-top: 24px;
}

.inventory-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inventory-detail-section-head h3 {
  margin: 0;
}

.inventory-detail-section-head p {
  margin: 7px 0 0;
  color: #64706a;
  font-size: 12px;
}

.inventory-detail-type-table {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inventory-detail-type-table table {
  width: 100%;
  border-collapse: collapse;
}

.inventory-detail-type-table th,
.inventory-detail-type-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.inventory-detail-type-table td small {
  display: block;
  margin-top: 3px;
  color: #7b8780;
  font-size: 10px;
  font-weight: 800;
}

.inventory-detail-type-table th {
  color: #7b8780;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.inventory-type-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.inventory-type-status.in {
  color: #166534;
  background: #dcfce7;
}

.inventory-type-status.low {
  color: #92400e;
  background: #fef3c7;
}

.inventory-type-status.out {
  color: #991b1b;
  background: #fee2e2;
}

.inventory-add-type-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, .5fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}

.inventory-cost-cell {
  min-width: 230px;
}

.inventory-cost-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventory-cost-cell input {
  width: 112px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}

.inventory-save-amount {
  min-width: 106px;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}

.inventory-type-actions {
  min-width: 150px;
}

.inventory-type-actions .tiny + .tiny {
  margin-left: 6px;
}

.inventory-detail-type-stock {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.inventory-detail-type-stock + .inventory-detail-type-stock {
  margin-top: 10px;
}

.inventory-detail-type-stock summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 900;
}

.inventory-detail-stock h3 {
  margin: 0;
}

.inventory-detail-stock p {
  margin: 7px 0 14px;
  color: #64706a;
  font-size: 12px;
}

.inventory-detail-stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 150px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-top: 1px solid var(--line);
}

.inventory-detail-stock-row input {
  width: 122px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: #0a1410;
  background: #fff;
  outline: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.inventory-detail-stock-row input:focus {
  border-color: #34bf66;
  box-shadow: 0 0 0 3px rgba(29, 175, 82, .16);
}

.inventory-detail-stock-row small {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  color: #0b6a36;
  background: #d8f8e8;
  font-size: 11px;
  font-weight: 900;
}

.inventory-detail-card .form-actions {
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.inventory-export-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.inventory-export-button svg {
  width: 16px;
  height: 16px;
}

.inventory-export-modal-card {
  max-width: 460px;
}

@media (max-width: 1100px) {
  #inventoryView .inventory-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #inventoryView.lumen-inventory {
    padding: 18px 14px 34px;
  }

  #inventoryView .inventory-page-header,
  #inventoryView .inventory-toolbar {
    display: grid;
  }

  #inventoryView .inventory-module-tabs {
    gap: 14px;
    overflow-x: auto;
  }

  #inventoryView .inventory-page-actions {
    justify-content: stretch;
  }

  #inventoryView .inventory-page-actions button {
    flex: 1;
  }

  .stock-issue-drawer {
    padding: 10px;
  }

  .grn-drawer {
    padding: 10px;
  }

  .vendor-drawer {
    padding: 10px;
  }

  .stock-issue-drawer-card {
    max-height: calc(100vh - 20px);
    border-radius: 10px;
  }

  #requestStockIssueDrawer.request-stock-issue-modal {
    align-items: stretch;
    padding: 10px;
  }

  #requestStockIssueDrawer .request-stock-issue-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
  }

  #requestStockIssueDrawer .request-stock-issue-head {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 12px;
    padding: 16px;
  }

  #requestStockIssueDrawer .request-stock-issue-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  #requestStockIssueDrawer .request-stock-issue-meta span {
    max-width: 100%;
  }

  #requestStockIssueDrawer table {
    min-width: 1080px !important;
  }

  #requestStockIssueDrawer .request-stock-issue-footer {
    padding: 12px 16px;
  }

  .grn-drawer-card {
    max-height: calc(100vh - 20px);
    border-radius: 10px;
  }

  .vendor-drawer-card {
    max-height: calc(100vh - 20px);
    border-radius: 10px;
  }

  #inventoryView .inventory-kpis {
    grid-template-columns: 1fr;
  }

  #inventoryView .inventory-location-filter {
    flex-basis: auto;
  }

  #inventoryView .inventory-search-filter,
  #inventoryView .inventory-toolbar .inventory-tabs,
  #inventoryView .inventory-status-tabs {
    min-width: 0;
    width: 100%;
  }

  #inventoryView table {
    min-width: 720px;
  }

  .inventory-detail-summary,
  .inventory-detail-facts,
  .inventory-detail-stock-row {
    grid-template-columns: 1fr;
  }
}

.modal-head > .icon-btn,
.modal-head-actions > .icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.modal-head > .icon-btn svg,
.modal-head-actions > .icon-btn svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  margin: 0 !important;
}

#deleteInventoryItemModal {
  z-index: 10070 !important;
}

/* Remove visual search wrappers across IMS; keep the actual inputs styled. */
.search,
.inventory-search-filter,
.stock-issue-search,
.user-management-search,
.search-palette-head {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.search,
.inventory-search-filter,
.stock-issue-search,
.search-palette-head {
  padding: 0 !important;
  gap: 8px;
}

.search input,
.inventory-search-filter input,
.stock-issue-search input,
.user-management-search input,
.search-palette-head input {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 9px;
  background: var(--lm-surface, var(--surface));
}

.search > svg,
.inventory-search-filter svg,
.stock-issue-search svg,
.search-palette-head > svg {
  flex: 0 0 auto;
}

.topbar .search,
#inventoryView .inventory-search-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px !important;
  background: #fff !important;
  border: 1px solid #e1e7df !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #7b8780;
}

#inventoryView .inventory-record-filter-toolbar {
  align-items: flex-end;
  gap: 12px;
  margin: 12px 0 18px;
}

#inventoryView .inventory-record-filter-toolbar .stock-issue-search {
  flex: 1 1 360px;
  max-width: 520px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 13px !important;
  color: var(--lm-muted, var(--muted));
  background: var(--lm-surface, #fff) !important;
  border: 1px solid var(--lm-line, var(--line)) !important;
  border-radius: 9px !important;
}

#inventoryView .inventory-record-filter-toolbar .stock-issue-search input {
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#inventoryView .inventory-record-filter-toolbar .stock-issue-location-filter {
  flex: 0 1 178px;
}

#inventoryView .inventory-record-filter-toolbar .stock-issue-location-filter input,
#inventoryView .inventory-record-filter-toolbar .stock-issue-location-filter select {
  height: 40px;
}

#inventoryView .inventory-record-filter-toolbar .temporal-filter-clear {
  height: 40px;
  align-self: flex-end;
}

#inventoryView .inventory-record-filter-toolbar .inventory-record-inline-action {
  height: 40px;
  margin-left: auto;
  align-self: flex-end;
}

.topbar .search {
  min-height: 38px;
}

.topbar .search input,
#inventoryView .inventory-search-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17221d;
  font-size: 13px;
}

/* Keep all close/icon buttons visually centered across IMS. */
button.icon-btn,
.icon-btn,
.search-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

button.icon-btn > svg,
.icon-btn > svg,
.search-close > svg {
  display: block !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

#grnView .grn-records-card {
  border-radius: 18px;
}

#poView,
#servicePoView {
  background: #F6F7F3;
  color: #0a1410;
}

#procurementPoPanel,
#procurementServicePoPanel {
  background: #F6F7F3;
  color: #0a1410;
}

#poView .po-records-screen,
#servicePoView .po-records-screen,
#procurementPoPanel .po-records-screen,
#procurementServicePoPanel .po-records-screen {
  display: grid;
  gap: 18px;
}

#poView .po-records-head,
#servicePoView .po-records-head,
#procurementPoPanel .po-records-head,
#procurementServicePoPanel .po-records-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#poView .po-records-head h2,
#servicePoView .po-records-head h2,
#procurementPoPanel .po-records-head h2,
#procurementServicePoPanel .po-records-head h2 {
  margin: 0;
  color: #06110c;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
}

#poView .po-records-head p,
#servicePoView .po-records-head p,
#procurementPoPanel .po-records-head p,
#procurementServicePoPanel .po-records-head p {
  margin: 7px 0 0;
  color: #65716b;
  font-size: 13px;
}

#poView .po-new-button,
#procurementPoPanel .po-new-button,
#procurementView .po-new-button,
#procurementView .vendor-new-button {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 16px;
  background: #19bd57;
  box-shadow: 0 12px 24px rgba(25, 189, 87, .24);
  font-size: 13px;
  font-weight: 900;
}

#poView .po-records-toolbar,
#servicePoView .po-records-toolbar,
#procurementPoPanel .po-records-toolbar,
#procurementServicePoPanel .po-records-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(170px, 220px) 38px minmax(360px, 1fr);
  align-items: center;
  gap: 10px;
}

#poView .po-records-toolbar .po-search-filter,
#poView .po-records-toolbar .po-vendor-filter,
#servicePoView .po-records-toolbar .po-search-filter,
#servicePoView .po-records-toolbar .po-vendor-filter,
#procurementPoPanel .po-records-toolbar .po-search-filter,
#procurementPoPanel .po-records-toolbar .po-vendor-filter,
#procurementServicePoPanel .po-records-toolbar .po-search-filter,
#procurementServicePoPanel .po-records-toolbar .po-vendor-filter {
  min-width: 0;
}

#poView .po-records-toolbar .temporal-filter-wrap,
#servicePoView .po-records-toolbar .temporal-filter-wrap,
#procurementPoPanel .po-records-toolbar .temporal-filter-wrap,
#procurementServicePoPanel .po-records-toolbar .temporal-filter-wrap {
  grid-column: 1 / -1;
}

#poView .po-records-toolbar > .temporal-filter-bar,
#servicePoView .po-records-toolbar > .temporal-filter-bar,
#procurementPoPanel .po-records-toolbar > .temporal-filter-bar,
#procurementServicePoPanel .po-records-toolbar > .temporal-filter-bar {
  grid-column: 1 / -1;
  justify-self: start;
}

.filter-clear-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 9px;
  color: var(--lm-muted, #66716b);
  background: var(--lm-surface, #fff);
  cursor: pointer;
}

.filter-clear-button:hover {
  color: var(--lm-ink, #17221d);
  border-color: var(--brand);
}

.filter-clear-button:disabled {
  opacity: .42;
  cursor: default;
}

.filter-clear-button:disabled:hover {
  color: var(--lm-muted, #66716b);
  border-color: var(--lm-line, #e1e7df);
}

.filter-clear-button svg {
  width: 16px;
  height: 16px;
}

#poView .po-search-filter,
#servicePoView .po-search-filter,
#procurementPoPanel .po-search-filter,
#procurementServicePoPanel .po-search-filter,
#procurementVendorsPanel .po-search-filter {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  background: #fff;
  color: #7b8780;
}

#poView .po-search-filter svg,
#servicePoView .po-search-filter svg,
#procurementPoPanel .po-search-filter svg,
#procurementServicePoPanel .po-search-filter svg,
#procurementVendorsPanel .po-search-filter svg {
  width: 15px;
  height: 15px;
}

#poView .po-search-filter input,
#servicePoView .po-search-filter input,
#procurementPoPanel .po-search-filter input,
#procurementServicePoPanel .po-search-filter input,
#procurementVendorsPanel .po-search-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17221d;
  font-size: 13px;
}

#poView .po-vendor-filter select,
#servicePoView .po-vendor-filter select,
#procurementPoPanel .po-vendor-filter select,
#procurementServicePoPanel .po-vendor-filter select {
  width: 100%;
  height: 38px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  padding: 0 12px;
  color: #66716b;
  background: #fff;
  outline: 0;
  font-size: 13px;
}

#poView .po-records-toolbar .filter-clear-button,
#servicePoView .po-records-toolbar .filter-clear-button,
#procurementPoPanel .po-records-toolbar .filter-clear-button,
#procurementServicePoPanel .po-records-toolbar .filter-clear-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  box-shadow: none;
}

#poView .po-status-filters,
#servicePoView .po-status-filters,
#procurementPoPanel .po-status-filters,
#procurementServicePoPanel .po-status-filters {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#poView .po-status-filter,
#servicePoView .po-status-filter,
#procurementPoPanel .po-status-filter,
#procurementServicePoPanel .po-status-filter {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e1e7df;
  border-radius: 999px;
  padding: 0 13px;
  color: #0f1e17;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

#poView .po-status-filter span,
#servicePoView .po-status-filter span,
#procurementPoPanel .po-status-filter span,
#procurementServicePoPanel .po-status-filter span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #66716b;
  background: #eef2ec;
  font-size: 10px;
  font-weight: 900;
}

#poView .po-status-filter.active,
#servicePoView .po-status-filter.active,
#procurementPoPanel .po-status-filter.active,
#procurementServicePoPanel .po-status-filter.active {
  border-color: #08783e;
  color: #fff;
  background: #08783e;
}

#poView .po-status-filter.active span,
#servicePoView .po-status-filter.active span,
#procurementPoPanel .po-status-filter.active span,
#procurementServicePoPanel .po-status-filter.active span {
  color: #08783e;
  background: #d6f7df;
}

#poView .po-records-card,
#servicePoView .po-records-card,
#procurementPoPanel .po-records-card,
#procurementServicePoPanel .po-records-card {
  overflow: hidden;
  border: 1px solid #e1e7df;
  border-radius: 18px;
  background: #fff;
}

#poView .po-records-card .table-wrap,
#servicePoView .po-records-card .table-wrap,
#procurementPoPanel .po-records-card .table-wrap,
#procurementServicePoPanel .po-records-card .table-wrap {
  overflow-x: auto;
}

#poView .po-records-card table,
#servicePoView .po-records-card table,
#procurementPoPanel .po-records-card table,
#procurementServicePoPanel .po-records-card table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

#poView .po-records-card th,
#poView .po-records-card td,
#servicePoView .po-records-card th,
#servicePoView .po-records-card td,
#procurementPoPanel .po-records-card th,
#procurementPoPanel .po-records-card td,
#procurementServicePoPanel .po-records-card th,
#procurementServicePoPanel .po-records-card td {
  height: 60px;
  padding: 0 16px;
  border-bottom: 1px solid #edf1ea;
  color: #17221d;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

#poView .po-records-card th,
#servicePoView .po-records-card th,
#procurementPoPanel .po-records-card th,
#procurementServicePoPanel .po-records-card th {
  height: 40px;
  color: #66716b;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poView .po-records-card tbody tr:last-child td,
#servicePoView .po-records-card tbody tr:last-child td,
#procurementPoPanel .po-records-card tbody tr:last-child td,
#procurementServicePoPanel .po-records-card tbody tr:last-child td {
  border-bottom: 0;
}

#poView .po-records-card tbody tr.po-clickable-row,
#servicePoView .po-records-card tbody tr.po-clickable-row,
#procurementPoPanel .po-records-card tbody tr.po-clickable-row,
#procurementServicePoPanel .po-records-card tbody tr.po-clickable-row {
  cursor: pointer;
}

.notification-body small {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: #7a857d;
  font-size: 11px;
  font-weight: 700;
}

.notification-body small span {
  color: #334155;
}

.notification-body small em {
  color: #0f766e;
  font-style: normal;
}

.notification-item.read .notification-body small em {
  color: #8a948d;
}

#poView .po-records-card tbody tr.po-clickable-row:hover td,
#servicePoView .po-records-card tbody tr.po-clickable-row:hover td,
#procurementPoPanel .po-records-card tbody tr.po-clickable-row:hover td,
#procurementServicePoPanel .po-records-card tbody tr.po-clickable-row:hover td {
  background: #f8fbf6;
}

#poView .po-records-card td:nth-child(3),
#servicePoView .po-records-card td:nth-child(3),
#procurementPoPanel .po-records-card td:nth-child(3),
#procurementServicePoPanel .po-records-card td:nth-child(3) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#financeView {
  background: var(--lm-bg);
  color: var(--lm-ink);
}

#financeView .inventory-page-header {
  margin-bottom: 12px;
}

#financeView .inventory-page-header h1 {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
}

#financeView .inventory-page-header p {
  margin-top: 7px;
  font-size: 13px;
}

#financeView .finance-panel {
  display: none;
}

#financeView .finance-panel.active {
  display: block;
}

#financeView .po-records-screen {
  display: grid;
  gap: 16px;
}

#financeView .po-records-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(190px, 240px) minmax(130px, 170px) minmax(280px, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

#financeBudgetLinesPanel .po-records-toolbar {
  grid-template-columns: minmax(190px, 240px) minmax(130px, 170px) minmax(280px, 1fr);
}

#financeBudgetLinesPanel .po-search-filter {
  grid-column: 1 / -1;
}

#financeView .po-search-filter {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  background: #fff;
  color: #7b8780;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .03);
}

#financeView .po-search-filter svg {
  width: 15px;
  height: 15px;
}

#financeView .po-search-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17221d;
  font-size: 13px;
}

#financeView .po-vendor-filter select,
#financeView .finance-bls-filter input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  padding: 0 12px;
  color: #66716b;
  background: #fff;
  outline: 0;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .03);
}

#financeView .po-search-filter:focus-within,
#financeView .po-vendor-filter select:focus,
#financeView .finance-bls-filter input:focus {
  border-color: #19a45b;
  box-shadow: 0 0 0 4px rgba(25, 164, 91, .12);
}

#financeView .budget-line-status-filters {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#financeView .po-status-filter {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e1e7df;
  border-radius: 999px;
  padding: 0 13px;
  color: #0f1e17;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

#financeView .po-status-filter span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #66716b;
  background: #eef2ec;
  font-size: 10px;
  font-weight: 900;
}

#financeView .po-status-filter.active {
  border-color: #08783e;
  color: #fff;
  background: #08783e;
}

#financeView .po-status-filter.active span {
  color: #08783e;
  background: #d6f7df;
}

#financeView .finance-bls-filter {
  position: relative;
  display: block;
}

#financeView .po-records-card {
  overflow: hidden;
  border: 1px solid #e1e7df;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(36, 55, 70, .04);
}

#financeBudgetLinesPanel .po-records-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#financeView .budget-lines-list {
  display: grid;
  gap: 28px;
}

#financeView .budget-lines-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#financeView .budget-line-stat {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid #edf1ea;
  border-radius: 8px;
  background: #f8f7f2;
}

#financeView .budget-line-stat small {
  color: #66716b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#financeView .budget-line-stat strong {
  color: #17221d;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
}

#financeView .budget-line-category-section {
  display: grid;
  gap: 16px;
}

#financeView .budget-line-category-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dfe5dc;
}

#financeView .budget-line-category-heading h2 {
  margin: 0;
  color: #17221d;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

#financeView .budget-line-category-heading span {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #66716b;
  background: #f3f3ee;
  font-size: 12px;
  font-weight: 900;
}

#financeView .budget-line-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#financeView .budget-line-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe5dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(36, 55, 70, .04);
}

#financeView .budget-line-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#financeView .budget-line-card-pills {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#financeView .budget-line-card-head > div {
  min-width: 0;
}

#financeView .budget-line-card-head small {
  display: block;
  margin-bottom: 5px;
  color: #66716b;
  font-size: 12px;
  font-weight: 900;
}

#financeView .budget-line-card-head h3 {
  margin: 0;
  color: #17221d;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

#financeView .budget-line-card .badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

#financeView .budget-line-card .badge::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.8px solid currentColor;
  border-radius: 999px;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px);
}

#financeView .budget-line-donor-pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  color: #0b5f7a;
  background: #e8f7fb;
  cursor: help;
  font-size: 12px;
  font-weight: 900;
}

#financeView .budget-line-donor-pill svg {
  width: 13px;
  height: 13px;
}

#financeView .budget-line-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#financeView .budget-line-value {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#financeView .budget-line-value > span:first-child,
#financeView .budget-line-utilization span {
  color: #66716b;
  font-size: 12px;
  font-weight: 800;
}

#financeView .budget-line-value strong {
  color: #17221d;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

#financeView .budget-line-total-field {
  cursor: text;
}

#financeView .budget-line-utilization {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #edf1ea;
}

#financeView .budget-line-utilization > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#financeView .budget-line-utilization strong {
  color: #17221d;
  font-size: 12px;
  font-weight: 900;
}

#financeView .budget-line-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

#financeView .po-records-card .table-wrap {
  overflow-x: auto;
}

#financeView .po-records-card table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
}

#financeView .po-records-card th,
#financeView .po-records-card td {
  min-height: 64px;
  padding: 0 14px;
  border-bottom: 1px solid #edf1ea;
  color: #17221d;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

#financeView .po-records-card th {
  height: 40px;
  color: #66716b;
  background: #fbfcfa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#financeView .po-records-card th:nth-child(1),
#financeView .po-records-card td:nth-child(1) {
  width: 210px;
}

#financeView .po-records-card th:nth-child(2),
#financeView .po-records-card td:nth-child(2) {
  width: 90px;
}

#financeView .po-records-card th:nth-child(3),
#financeView .po-records-card td:nth-child(3) {
  width: 300px;
}

#financeView .po-records-card th:nth-child(4),
#financeView .po-records-card th:nth-child(5),
#financeView .po-records-card th:nth-child(6),
#financeView .po-records-card td:nth-child(4),
#financeView .po-records-card td:nth-child(5),
#financeView .po-records-card td:nth-child(6) {
  text-align: right;
}

#financeView .po-records-card th:nth-child(8),
#financeView .po-records-card td:nth-child(8) {
  text-align: center;
}

#financeView .po-records-card tbody tr:last-child td {
  border-bottom: 0;
}

#financeView .po-records-card tbody tr:hover td {
  background: #f8fbf6;
}

#financeView .po-records-card td:nth-child(1),
#financeView .po-records-card td:nth-child(3) {
  white-space: normal;
  line-height: 1.35;
}

#financeView .table-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border-radius: 8px;
  text-align: right;
  font-weight: 800;
}

#financeView .finance-budget-input-wrap {
  width: min(172px, 100%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #e1e7df;
  border-radius: 9px;
  background: #fff;
}

#financeView .finance-budget-input-wrap span {
  color: #66716b;
  font-size: 11px;
  font-weight: 900;
}

#financeView .finance-budget-input-wrap .table-input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#financeView .po-records-card td small {
  display: block;
  margin-top: 5px;
  color: #66716b;
  font-size: 11px;
  font-weight: 700;
}

#financeView .finance-progress {
  width: 100%;
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #efeee8;
}

#financeView .finance-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #017100, #20c869);
}

#financeView .po-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

#financeView .tiny {
  min-height: 30px;
  justify-content: center;
  border-radius: 8px;
  font-weight: 850;
}

#financeView .tiny svg {
  width: 14px;
  height: 14px;
}

#financeView .badge.active {
  color: #147a50;
  background: #dcf8ea;
}

#financeView .budget-line-card .badge.inactive {
  color: #8a5b00;
  background: #fff4d6;
}

#financeView .finance-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 34px 20px;
  color: #66716b;
  text-align: center;
}

#financeView .finance-empty-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0f8f4d;
  background: #e8f8ef;
}

#financeView .finance-empty-icon svg {
  width: 20px;
  height: 20px;
}

#financeView .finance-empty-state strong {
  color: #17221d;
  font-size: 15px;
}

#financeView .finance-empty-state p {
  max-width: 430px;
  margin: 0;
  line-height: 1.45;
  font-size: 13px;
}

#financeView .finance-empty-state .secondary {
  margin-top: 6px;
  border-radius: 9px;
}

#financeView .finance-donor-bl-count {
  min-width: 30px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #0b6a36;
  background: #eafbec;
  font-size: 12px;
  font-weight: 900;
}

#financeDonorsPanel .po-records-card {
  border-radius: 14px;
}

#financeDonorsPanel .po-records-card table {
  min-width: 0;
  table-layout: fixed;
}

#financeDonorsPanel .po-records-card th,
#financeDonorsPanel .po-records-card td {
  height: 50px;
  min-height: 50px;
  padding: 0 14px;
  vertical-align: middle;
}

#financeDonorsPanel .po-records-card th:nth-child(1),
#financeDonorsPanel .po-records-card td:nth-child(1) {
  width: auto;
  text-align: left;
}

#financeDonorsPanel .po-records-card th:nth-child(2),
#financeDonorsPanel .po-records-card td:nth-child(2) {
  width: 90px;
  text-align: center;
}

#financeDonorsPanel .po-records-card th:nth-child(3),
#financeDonorsPanel .po-records-card td:nth-child(3) {
  width: 130px;
  text-align: left;
  white-space: nowrap;
}

#financeDonorsPanel .po-records-card th:nth-child(4),
#financeDonorsPanel .po-records-card td:nth-child(4) {
  width: 130px;
  text-align: right;
}

#financeDonorsPanel .po-records-card td:nth-child(1) strong {
  display: block;
  overflow: hidden;
  color: #17221d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#financeDonorsPanel .badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

#financeDonorsPanel .tiny.danger {
  min-width: 84px;
  color: #b42318;
  background: #fee4e2;
}

@media (max-width: 980px) {
  #financeView .po-records-toolbar {
    grid-template-columns: 1fr;
  }

  #financeBudgetLinesPanel .po-records-toolbar {
    grid-template-columns: 1fr;
  }

  #financeView .budget-line-status-filters {
    justify-self: start;
  }
}

@media (max-width: 1040px) {
  #financeView .budget-lines-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #financeView .budget-line-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #financeView .budget-lines-summary,
  #financeView .budget-line-values,
  #financeView .budget-line-actions {
    grid-template-columns: 1fr;
  }

  #financeView .budget-line-card-head {
    flex-direction: column;
  }

  #financeView .budget-line-card-pills {
    justify-content: flex-start;
  }

  #financeView .budget-line-card .badge {
    align-self: flex-start;
  }
}

#budgetLineTransactionsModal .po-detail-card {
  max-width: 1040px;
}

#budgetLineTransactionsModal table {
  min-width: 780px;
}

#budgetLineTransactionsModal .budget-line-history-card {
  width: min(1040px, calc(100vw - 40px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

#budgetLineTransactionsModal .modal-head {
  align-items: flex-start;
  gap: 18px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#budgetLineTransactionsModal .section-title {
  padding: 0;
  min-width: 0;
}

#budgetLineTransactionsModal .section-title h2 {
  margin: 0 0 8px;
  line-height: 1.2;
}

#budgetLineTransactionsModal .section-title p {
  margin: 0;
}

#budgetLineTransactionsModal #closeBudgetLineTransactions {
  flex: 0 0 auto;
  margin-top: -4px;
}

#budgetLineTransactionsModal .budget-line-history-table-wrap {
  margin: 0;
  padding: 20px 32px 30px;
  max-height: min(62dvh, 560px);
  overflow: auto;
}

#budgetLineTransactionsModal th,
#budgetLineTransactionsModal td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

#budgetLineTransactionsModal th {
  white-space: nowrap;
}

#budgetLineTransactionsModal .empty-state-row td,
#budgetLineTransactionsModal .error-state-row td {
  padding: 48px 18px;
  text-align: center;
}

@media (max-width: 720px) {
  #budgetLineTransactionsModal .budget-line-history-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  #budgetLineTransactionsModal .modal-head {
    padding: 22px 20px 16px;
  }

  #budgetLineTransactionsModal .budget-line-history-table-wrap {
    padding: 16px 20px 24px;
  }
}

#budgetLineEditModal {
  background: rgba(0, 0, 0, .72);
}

#budgetLineEditModal .budget-line-edit-card {
  width: min(760px, calc(100vw - 40px));
  height: auto;
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}

#budgetLineEditModal .modal-head {
  flex: 0 0 auto;
  padding: 22px 28px;
  border-bottom: 1px solid #dedede;
}

#budgetLineEditModal .section-title h2 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0;
}

#budgetLineEditModal .section-title p {
  display: none;
}

#budgetLineEditModal .icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #d7ddd4;
  border-radius: 10px;
}

#budgetLineEditModal .budget-line-edit-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 178px);
  display: grid;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px 24px;
}

#budgetLineEditModal label {
  display: grid;
  gap: 7px;
  color: #17221d;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
}

#budgetLineEditModal input,
#budgetLineEditModal textarea,
#budgetLineEditModal select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d9e0d6;
  border-radius: 10px;
  padding: 0 12px;
  color: #17221d;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: 0;
}

#budgetLineEditModal textarea {
  min-height: 92px;
  padding-top: 11px;
  line-height: 1.4;
  resize: vertical;
}

#budgetLineEditModal input:focus,
#budgetLineEditModal textarea:focus,
#budgetLineEditModal select:focus {
  border-color: #148847;
  box-shadow: 0 0 0 4px rgba(20, 136, 71, .12);
}

#budgetLineEditModal label > span {
  margin-top: -2px;
  color: #66716b;
  font-size: 11px;
  font-weight: 900;
}

#budgetLineEditModal .budget-line-edit-bls input,
#budgetLineEditModal .budget-line-edit-readonly input {
  border-color: transparent;
  background: #f4f3ee;
}

#budgetLineEditModal .budget-line-edit-bls {
  color: #66716b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#budgetLineEditModal .budget-line-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#budgetLineEditModal .form-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #dedede;
}

#budgetLineEditModal .form-actions button {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 760px) {
  #budgetLineEditModal .modal-head,
  #budgetLineEditModal .budget-line-edit-body,
  #budgetLineEditModal .form-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  #budgetLineEditModal .section-title h2 {
    font-size: 20px;
  }

  #budgetLineEditModal label,
  #budgetLineEditModal input,
  #budgetLineEditModal textarea,
  #budgetLineEditModal select,
  #budgetLineEditModal .form-actions button {
    font-size: 13px;
  }

  #budgetLineEditModal .budget-line-edit-grid,
  #budgetLineEditModal .form-actions {
    grid-template-columns: 1fr;
  }

  #budgetLineEditModal .form-actions {
    display: grid;
  }
}

#poView .po-status-select,
#procurementPoPanel .po-status-select {
  min-width: 104px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e1e7df;
  border-radius: 999px;
  padding: 0 11px;
  color: #17221d;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

#poView .po-status-select svg,
#servicePoView .po-status-select svg,
#procurementPoPanel .po-status-select svg,
#procurementServicePoPanel .po-status-select svg {
  width: 14px;
  height: 14px;
  color: #66716b;
}

#poView .po-row-actions,
#servicePoView .po-row-actions,
#procurementPoPanel .po-row-actions,
#procurementServicePoPanel .po-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#poView .po-row-actions .tiny,
#servicePoView .po-row-actions .tiny,
#procurementPoPanel .po-row-actions .tiny,
#procurementServicePoPanel .po-row-actions .tiny {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  padding: 0;
  color: #66716b;
  background: transparent;
}

#poView .po-row-actions .tiny:hover,
#servicePoView .po-row-actions .tiny:hover,
#procurementPoPanel .po-row-actions .tiny:hover,
#procurementServicePoPanel .po-row-actions .tiny:hover {
  color: #08783e;
  background: #eef9f0;
}

#poView .po-row-actions .tiny.danger:hover,
#servicePoView .po-row-actions .tiny.danger:hover,
#procurementPoPanel .po-row-actions .tiny.danger:hover,
#procurementServicePoPanel .po-row-actions .tiny.danger:hover {
  color: #b42318;
  background: #fee4e2;
}

#poView .po-row-actions .tiny svg,
#servicePoView .po-row-actions .tiny svg,
#procurementPoPanel .po-row-actions .tiny svg,
#procurementServicePoPanel .po-row-actions .tiny svg {
  width: 15px;
  height: 15px;
}

.po-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  justify-content: flex-end;
  padding: 18px;
  background: transparent;
}

.po-drawer.show {
  display: flex;
}

.po-drawer-card {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  height: 100%;
  max-height: calc(100vh - 36px);
  margin: 0 !important;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 18, .22);
}

.po-drawer-card .section-title {
  padding-right: 46px;
}

.po-drawer-card .section-title h2 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 850;
}

.po-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

body.po-drawer-open .sidebar {
  pointer-events: none;
}

body.po-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.po-drawer-open .po-drawer {
  background: transparent;
}

@media (max-width: 1100px) {
  #poView .po-records-toolbar,
  #servicePoView .po-records-toolbar,
  #procurementPoPanel .po-records-toolbar,
  #procurementServicePoPanel .po-records-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) 38px;
  }

  #poView .po-status-filters,
  #servicePoView .po-status-filters,
  #procurementPoPanel .po-status-filters,
  #procurementServicePoPanel .po-status-filters {
    grid-column: 1 / -1;
    justify-self: start;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  #poView .po-records-head,
  #poView .po-records-toolbar,
  #servicePoView .po-records-head,
  #servicePoView .po-records-toolbar,
  #procurementPoPanel .po-records-head,
  #procurementPoPanel .po-records-toolbar,
  #procurementServicePoPanel .po-records-head,
  #procurementServicePoPanel .po-records-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  #poView .po-new-button,
  #procurementPoPanel .po-new-button,
  #procurementView .po-new-button,
  #procurementView .vendor-new-button {
    width: 100%;
  }

  .temporal-filter-bar {
    grid-template-columns: 1fr;
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(320px, calc(100vw - 32px));
    padding: 12px;
  }

  .temporal-filter-field {
    min-width: min(100%, 220px);
  }

  .temporal-filter-clear {
    justify-self: stretch;
  }

  .po-drawer {
    padding: 10px;
  }

  .po-drawer-card {
    max-height: calc(100vh - 20px);
  }
}

/* Final Settings conflict overrides: keep the new three-tab layout above legacy user-management rules. */
#settingsView:has(.user-management-list) {
  max-width: none !important;
  margin: 0 !important;
}

#settingsView:has(.user-management-list) .settings-layout {
  display: block !important;
  padding: 30px 32px 44px !important;
}

#settingsView:has(.user-management-list) .settings-tabs,
#settingsView:has(.user-management-list) #settingsSectionTitle,
#settingsView:has(.user-management-list) #settingsSectionDescription {
  display: flex !important;
}

#settingsView:has(.user-management-list) #settingsSectionTitle,
#settingsView:has(.user-management-list) #settingsSectionDescription {
  display: block !important;
}

#settingsView:has(.user-management-list) .settings-tabs {
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--settings-line, #dfe7dd) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#settingsView:has(.user-management-list) .settings-panel,
#settingsView:has(.user-management-list) .settings-form {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#settingsView:has(.user-management-list) .user-management-page-head {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
}

#settingsView:has(.user-management-list) .user-management-list {
  overflow: auto !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-header,
#settingsView:has(.user-management-list) .settings-team-table .user-management-card {
  grid-template-columns: minmax(180px, 1.15fr) minmax(220px, 1fr) minmax(120px, .75fr) minmax(190px, 1fr) minmax(220px, 1.1fr) !important;
}

#settingsView:has(.user-management-list) .settings-team-table .role-checkbox-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
}

#settingsView .settings-inline-role-editor {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 0;
  border-top: 1px solid #eef3ee;
}

#settingsView .user-management-card.editing .settings-inline-role-editor {
  display: flex;
}

#settingsView .settings-inline-role-editor .role-checkbox-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
}

@media (max-width: 920px) {
  #settingsView:has(.user-management-list) .settings-layout {
    padding: 20px 14px 32px !important;
  }

  #settingsView:has(.user-management-list) .settings-team-table .user-management-header,
  #settingsView:has(.user-management-list) .settings-team-table .user-management-card {
    grid-template-columns: 1fr !important;
  }

  #settingsView:has(.user-management-list) .settings-team-table .user-management-header {
    display: none !important;
  }

  #settingsView .settings-inline-role-editor,
  #settingsView .user-management-card.editing .settings-inline-role-editor {
    align-items: stretch;
    flex-direction: column;
  }

  #settingsView .settings-inline-role-editor .role-checkbox-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Clean Team settings layout */
#settingsView .settings-team-summary {
  display: flex;
  justify-content: flex-end;
  margin: -52px 0 18px;
}

#settingsView .settings-team-count {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--settings-line, #dfe7dd);
  border-radius: 14px;
  background: #ffffff;
  color: var(--settings-ink, #06140c);
}

#settingsView .settings-team-count svg {
  width: 17px;
  height: 17px;
  color: var(--settings-green-dark, #087239);
}

#settingsView .settings-team-count span {
  color: var(--settings-green-dark, #087239);
  font-size: 20px;
  font-weight: 900;
}

#settingsView .settings-team-count strong {
  font-size: 13px;
  font-weight: 850;
}

#settingsView:has(.user-management-list) .add-user-panel {
  display: grid !important;
  grid-template-columns: minmax(160px, .8fr) minmax(260px, 1.2fr) minmax(300px, 1.25fr) auto !important;
  align-items: end !important;
  gap: 18px !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
  overflow: visible !important;
}

#settingsView .add-user-copy {
  display: grid;
  gap: 6px;
  align-self: center;
}

#settingsView .add-user-copy strong {
  color: var(--settings-ink, #06140c);
  font-size: 15px;
  font-weight: 900;
}

#settingsView .add-user-copy span,
#settingsView .add-user-role-block > span {
  color: var(--settings-muted, #647067);
  font-size: 12px;
}

#settingsView:has(.user-management-list) .add-user-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#settingsView .add-user-role-block {
  display: grid;
  gap: 8px;
}

#settingsView:has(.user-management-list) .add-user-roles,
#settingsView:has(.user-management-list) .role-checkbox-grid.add-user-roles {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(128px, 1fr)) !important;
  gap: 8px !important;
}

#settingsView .add-user-role-block .role-pill {
  justify-content: center;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  text-transform: capitalize;
}

#settingsView #addUserInlineBtn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  color: #ffffff !important;
  border-color: var(--settings-green, #017100) !important;
  background: var(--settings-green, #017100) !important;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  #settingsView:has(.user-management-list) .add-user-panel {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #settingsView .settings-team-summary {
    justify-content: flex-start;
    margin: 0 0 18px;
  }
}

/* Reference-matched Team and Roles settings tabs. */
#settingsView {
  --settings-green: #15803d;
  --settings-green-soft: #e8f7ef;
  --settings-ink: #202020;
  --settings-muted: #3f3f3f;
  --settings-soft-muted: #6a6863;
  --settings-line: #d9d7d1;
  background: #fbfbf9 !important;
}

#settingsView .settings-layout,
#settingsView:has(.user-management-list) .settings-layout {
  display: block !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 18px 14px 24px !important;
}

#settingsView .settings-tabs,
#settingsView:has(.user-management-list) .settings-tabs {
  display: flex !important;
  align-items: flex-end !important;
  gap: 18px !important;
  margin: 0 0 28px !important;
  padding: 0 0 0 6px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--settings-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

#settingsView .settings-tabs::-webkit-scrollbar,
#settingsView:has(.user-management-list) .settings-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#settingsView .settings-tab {
  position: relative;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 18px 13px !important;
  color: #3f3f3f !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

#settingsView .settings-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 0;
  background: transparent;
}

#settingsView .settings-tab.active {
  color: var(--settings-green) !important;
}

#settingsView .settings-tab.active::after {
  background: var(--settings-green);
}

#settingsView .settings-tab svg {
  width: 17px !important;
  height: 17px !important;
  color: currentColor !important;
}

#settingsView .settings-panel,
#settingsView:has(.user-management-list) .settings-panel,
#settingsView .settings-form,
#settingsView:has(.user-management-list) .settings-form {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#settingsView .settings-title {
  margin: 0 0 22px !important;
}

#settingsView .settings-title h2 {
  color: var(--settings-ink) !important;
  font-size: 27px !important;
  line-height: 1.05 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

#settingsView .settings-title p {
  margin-top: 5px !important;
  color: #383632 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

#settingsView .settings-team-summary {
  display: flex !important;
  justify-content: flex-end !important;
  margin: -60px 0 36px !important;
}

#settingsView .settings-team-count,
#settingsView .settings-roles-head > span {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border: 1px solid #d8d5cf !important;
  border-radius: 8px !important;
  background: #fdfdfb !important;
  color: #393833 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

#settingsView .settings-team-count svg {
  width: 15px !important;
  height: 15px !important;
  color: #393833 !important;
}

#settingsView .settings-team-count strong {
  font-size: 14px !important;
  font-weight: 760 !important;
  text-transform: none !important;
}

#settingsView:has(.user-management-list) .add-user-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto) !important;
  gap: 16px 14px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 23px 27px 24px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#settingsView .add-user-copy {
  grid-column: 1 / -1;
  gap: 2px !important;
}

#settingsView .add-user-copy strong {
  color: #1f1e1b !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
}

#settingsView .add-user-copy span {
  color: #2f2e2a !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

#settingsView:has(.user-management-list) .add-user-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 300px) minmax(0, 300px) !important;
  gap: 14px !important;
}

#settingsView .add-user-fields label,
#settingsView .add-user-role-block > span {
  display: grid !important;
  gap: 8px !important;
  color: #55524d !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

#settingsView .add-user-fields input {
  width: 100% !important;
  height: 41px !important;
  border: 1px solid #d8d5cf !important;
  border-radius: 7px !important;
  padding: 0 13px !important;
  color: #24231f !important;
  background: #fff !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

#settingsView .add-user-fields input::placeholder {
  color: #75716b !important;
}

#settingsView #addUserInlineBtn {
  height: 40px !important;
  min-height: 40px !important;
  align-self: end !important;
  justify-content: center !important;
  border: 1px solid #bdbab3 !important;
  border-radius: 8px !important;
  padding: 0 20px !important;
  color: #1f1e1b !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 820 !important;
}

#settingsView #addUserInlineBtn svg {
  width: 16px !important;
  height: 16px !important;
}

#settingsView .add-user-role-block {
  grid-column: 1 / -1;
  display: grid !important;
  gap: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--settings-line) !important;
}

#settingsView:has(.user-management-list) .add-user-roles,
#settingsView:has(.user-management-list) .role-checkbox-grid.add-user-roles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#settingsView .add-user-role-block .role-pill,
#settingsView .role-pill {
  width: auto !important;
  min-width: 0 !important;
  height: 35px !important;
  min-height: 35px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #c8c5bd !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  color: #3f3d38 !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  text-transform: none !important;
}

#settingsView .role-pill.selected {
  border-color: #16855a !important;
  color: #16855a !important;
  background: #e9f8ef !important;
}

#settingsView .role-pill.selected::before {
  color: #16855a !important;
  font-size: 13px !important;
}

#settingsView:has(.user-management-list) .user-management-list,
#settingsView:has(.user-management-list) .user-management-footer {
  display: none !important;
}

#settingsView .settings-roles-head {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 11px !important;
  margin: -62px 0 34px !important;
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}

#settingsView .settings-roles-head .primary {
  position: relative !important;
  z-index: 5 !important;
  min-height: 40px !important;
  border: 1px solid #bdbab3 !important;
  border-radius: 8px !important;
  padding: 0 19px !important;
  color: #1f1e1b !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 820 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#settingsView .settings-role-list {
  display: grid !important;
  gap: 14px !important;
}

#settingsView .settings-role-card {
  min-height: 107px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 20px 24px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#settingsView .settings-role-icon {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  color: #6857d9 !important;
  background: #eeebff !important;
}

#settingsView .settings-role-icon svg {
  width: 20px !important;
  height: 20px !important;
}

#settingsView .settings-role-requestor .settings-role-icon,
#settingsView .settings-role-inventory_manager .settings-role-icon {
  color: #16855a !important;
  background: #e3f5ee !important;
}

#settingsView .settings-role-approver .settings-role-icon {
  color: #9a691e !important;
  background: #fff0d9 !important;
}

#settingsView .settings-role-copy h3 {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 4px !important;
  color: #1f1e1b !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 820 !important;
}

#settingsView .settings-role-copy h3 span {
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #d4d1c9 !important;
  border-radius: 4px !important;
  padding: 0 8px !important;
  color: #6d6962 !important;
  background: #f6f5f1 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

#settingsView .settings-role-copy p {
  margin: 0 0 7px !important;
  color: #302f2b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

#settingsView .settings-role-copy small {
  color: #6f6b64 !important;
  font-size: 14px !important;
  font-weight: 720 !important;
}

#settingsView .settings-role-member-pill {
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 0 11px !important;
  color: #4d4a43 !important;
  background: #f4f3ef !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#settingsView .settings-role-card .secondary {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #bdbab3 !important;
  border-radius: 8px !important;
  padding: 0 19px !important;
  color: #1f1e1b !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 760 !important;
}

#settingsView .settings-role-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#settingsView .settings-role-card .secondary.danger {
  color: #8c2d2d !important;
  border-color: #e3c1c1 !important;
  background: #fff7f7 !important;
}

#settingsView .settings-role-card .secondary.danger:disabled {
  color: #8a847a !important;
  border-color: #ddd7cf !important;
  background: #f5f3ef !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

#settingsView .settings-role-card .secondary svg {
  width: 16px !important;
  height: 16px !important;
}

#settingsView .settings-role-access-preview {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border: 1px solid #e1ddd5 !important;
  border-radius: 12px !important;
  background: #faf9f6 !important;
}

#settingsView .settings-role-access-preview > strong {
  color: #1f1e1b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

#settingsView .settings-role-access-groups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#settingsView .settings-role-access-group {
  display: grid !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border: 1px solid #e7e2d8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

#settingsView .settings-role-access-group span {
  color: #16855a !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

#settingsView .settings-role-access-group p {
  margin: 0 !important;
  color: #36342f !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  #settingsView .settings-layout,
  #settingsView:has(.user-management-list) .settings-layout {
    padding: 16px 12px 24px !important;
  }

  #settingsView .settings-team-summary,
  #settingsView .settings-roles-head {
    justify-content: flex-start !important;
    margin: 0 0 16px !important;
  }

  #settingsView:has(.user-management-list) .add-user-panel,
  #settingsView:has(.user-management-list) .add-user-fields,
  #settingsView .settings-role-card {
    grid-template-columns: 1fr !important;
  }

  #settingsView .settings-role-member-pill,
  #settingsView .settings-role-card .secondary {
    justify-self: start !important;
  }

  #settingsView .settings-role-access-groups {
    grid-template-columns: 1fr !important;
  }
}

/* Full-width Team/Roles settings surface. */
#settingsView .settings-layout,
#settingsView:has(.user-management-list) .settings-layout {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 28px 36px !important;
}

#settingsView:has(.user-management-list) .add-user-panel {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  margin: 0 !important;
}

#settingsView:has(.user-management-list) .add-user-fields {
  width: min(100%, 680px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#settingsView .add-user-role-block {
  justify-items: center !important;
}

#settingsView .add-user-role-block > span {
  justify-self: stretch !important;
}

#settingsView:has(.user-management-list) .add-user-roles,
#settingsView:has(.user-management-list) .role-checkbox-grid.add-user-roles {
  justify-content: center !important;
  width: 100% !important;
}

#settingsView #addUserInlineBtn {
  width: min(100%, 690px) !important;
  justify-self: center !important;
}

#settingsView .settings-role-list,
#settingsView .settings-role-card {
  width: 100% !important;
}

@media (max-width: 760px) {
  #settingsView .settings-layout,
  #settingsView:has(.user-management-list) .settings-layout {
    padding: 16px 12px 24px !important;
  }

  #settingsView:has(.user-management-list) .add-user-fields {
    grid-template-columns: 1fr !important;
  }
}

/* Light Team access table. */
#settingsView:has(.user-management-list) .user-management-list.settings-team-table {
  width: 100% !important;
  display: grid !important;
  margin-top: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-header,
#settingsView:has(.user-management-list) .settings-team-table .user-management-card {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.15fr) minmax(220px, 1fr) minmax(120px, .75fr) minmax(190px, 1fr) minmax(220px, 1.1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 46px !important;
  padding: 0 !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-header {
  border-bottom: 1px solid var(--settings-line) !important;
  background: #f7faf7 !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-header span {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  border-right: 1px solid var(--settings-line) !important;
  color: #536158 !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-header span:last-child {
  border-right: 0 !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-card {
  border: 0 !important;
  border-bottom: 1px solid #e7ece4 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-card:last-child {
  border-bottom: 0 !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-card > div:not(.settings-inline-role-editor) {
  min-height: 46px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-right: 1px solid #e7ece4 !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-card > div:not(.settings-inline-role-editor):last-of-type {
  border-right: 0 !important;
}

#settingsView:has(.user-management-list) .settings-team-table .user-management-actions {
  border-right: 0 !important;
}

#settingsView .settings-team-table .user-management-person {
  gap: 10px !important;
}

#settingsView .settings-team-table .user-management-avatar {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 999px !important;
  background: var(--settings-green-soft) !important;
  color: var(--settings-green) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

#settingsView .settings-team-table .user-management-identity strong,
#settingsView .settings-team-table .settings-team-email,
#settingsView .settings-team-table .settings-team-login,
#settingsView .settings-team-table .role-checkbox-grid strong {
  color: #24231f !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}

#settingsView .settings-team-table .settings-team-email {
  color: #536158 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

#settingsView .settings-team-table .role-checkbox-grid {
  display: grid !important;
  gap: 3px !important;
}

#settingsView .settings-team-table .role-checkbox-grid span {
  color: #6f786f !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

#settingsView .settings-team-table .user-management-status .badge {
  min-height: 27px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid #cfe5d5 !important;
  border-radius: 7px !important;
  padding: 0 10px !important;
  background: #eaf7ee !important;
  color: var(--settings-green) !important;
  font-size: 13px !important;
  font-weight: 780 !important;
  text-transform: capitalize !important;
}

#settingsView .settings-team-table .user-management-status .badge::before {
  content: "";
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

#settingsView .settings-team-table .user-management-status .badge.inactive,
#settingsView .settings-team-table .user-management-status .badge.danger {
  border-color: #f0cfc9 !important;
  background: #fff1ee !important;
  color: #c2412f !important;
}

#settingsView .settings-team-table .user-management-actions {
  justify-content: flex-start !important;
  gap: 8px !important;
}

#settingsView .settings-team-table .user-management-actions button {
  min-height: 32px !important;
  width: auto !important;
  padding: 0 10px !important;
  border: 1px solid #d8d5cf !important;
  border-radius: 7px !important;
  background: #f7faf7 !important;
  color: #343832 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

#settingsView .settings-team-table .user-management-actions button svg {
  width: 15px !important;
  height: 15px !important;
}

#settingsView .settings-team-table .user-delete-btn {
  color: #8b2f2f !important;
}

#settingsView:has(.user-management-list) .user-management-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: 12px !important;
  color: #536158 !important;
  font-size: 13px !important;
}

@media (max-width: 1180px) {
  #settingsView:has(.user-management-list) .user-management-list.settings-team-table {
    overflow-x: auto !important;
  }

  #settingsView:has(.user-management-list) .settings-team-table .user-management-header,
  #settingsView:has(.user-management-list) .settings-team-table .user-management-card {
    min-width: 1080px !important;
  }
}

/* Team add-user drawer flow. */
#settingsView .settings-team-summary {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: -60px 0 22px !important;
}

#settingsView .settings-add-user-btn {
  position: relative !important;
  z-index: 5 !important;
  min-height: 31px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid var(--settings-green) !important;
  border-radius: 8px !important;
  padding: 0 13px !important;
  color: #ffffff !important;
  background: var(--settings-green) !important;
  box-shadow: 0 8px 18px rgba(21, 128, 61, .18) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#settingsView .settings-add-user-btn svg {
  width: 15px !important;
  height: 15px !important;
}

#settingsView:has(.user-management-list) .user-management-list.settings-team-table {
  margin-top: 0 !important;
}

.team-user-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  justify-content: flex-end;
  padding: 18px;
  background: transparent;
}

.team-user-drawer.show {
  display: flex;
}

.team-user-drawer-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  height: 100%;
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid var(--settings-line, #d9d7d1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 18, .22);
  padding: 24px;
}

.team-user-drawer-card .section-title {
  padding-right: 42px;
  margin-bottom: 24px;
}

.team-user-drawer-card .section-title h2 {
  margin: 0 0 6px;
  color: var(--settings-ink, #202020);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 820;
}

.team-user-drawer-card .section-title p {
  color: #536158;
  font-size: 14px;
  line-height: 1.35;
}

.team-user-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

.team-user-drawer-form {
  display: grid;
  gap: 16px;
}

.team-user-drawer-form label {
  display: grid;
  gap: 8px;
  color: #55524d;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.team-user-drawer-form input[type="text"],
.team-user-drawer-form input[type="email"],
.team-user-drawer-form label > input:not([type]) {
  width: 100%;
  height: 42px;
  border: 1px solid var(--settings-line, #d9d7d1);
  border-radius: 8px;
  padding: 0 13px;
  color: #24231f;
  background: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}

.team-drawer-role-list {
  display: grid;
  gap: 9px;
  margin: 4px 0 2px;
  padding: 16px;
  border: 1px solid var(--settings-line, #d9d7d1);
  border-radius: 10px;
  background: #f7faf7;
}

.team-drawer-role-list legend {
  padding: 0 6px;
  color: #55524d;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.team-drawer-role-option {
  min-height: 34px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  color: #24231f !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.team-drawer-role-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--settings-green, #15803d);
}

.team-user-drawer-form .primary {
  width: 100%;
  min-height: 42px !important;
  justify-content: center !important;
  margin-top: 4px;
  border-radius: 8px !important;
}

.team-user-submit-btn .team-user-submit-spinner,
.team-user-submit-btn .team-user-submit-loading-label {
  display: none;
}

.team-user-submit-btn .team-user-submit-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.team-user-submit-btn[data-loading="true"] .team-user-submit-label {
  display: none;
}

.team-user-submit-btn[data-loading="true"] .team-user-submit-spinner,
.team-user-submit-btn[data-loading="true"] .team-user-submit-loading-label {
  display: inline-flex;
}

.inventory-item-modal-card {
  width: min(780px, 100%);
  max-height: min(86vh, 820px);
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(18, 34, 20, 0.1);
  box-shadow: 0 30px 70px rgba(15, 31, 22, 0.22);
}

.inventory-item-modal-card .modal-head {
  align-items: flex-start;
  padding: 22px 24px 18px;
  background: linear-gradient(180deg, #fbfcfb 0%, #f5f8f5 100%);
  border-bottom: 1px solid rgba(18, 34, 20, 0.08);
}

.inventory-item-modal-title h2 {
  margin: 0 0 6px;
  color: #0d1912;
  font-size: 18px;
  font-weight: 800;
}

.inventory-item-modal-title p {
  margin: 0;
  color: #708078;
  font-size: 13px;
}

.inventory-item-modal-body {
  display: grid;
  gap: 22px;
  padding: 22px 24px 0;
}

.inventory-item-modal-section {
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(18, 34, 20, 0.08);
}

.inventory-item-modal-grid {
  gap: 16px 14px;
}

.inventory-item-modal-card label {
  gap: 8px;
  color: #46544e;
  font-size: 12px;
  font-weight: 700;
}

.inventory-item-modal-card input {
  min-height: 40px;
  border: 1px solid #d7dfd5;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.inventory-item-modal-card input::placeholder {
  color: #8b948d;
}

.inventory-item-types-builder {
  margin-top: 0;
  padding: 20px;
  background: #fafcf9;
  border: 1px solid rgba(18, 34, 20, 0.08);
  border-radius: 18px;
}

.inventory-item-types-builder h3 {
  margin: 0 0 14px;
  color: #15241d;
  font-size: 15px;
  font-weight: 800;
}

.inventory-item-modal-card .item-type-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 150px) 190px 44px;
  gap: 14px;
  margin-bottom: 14px;
}

.inventory-item-modal-card .remove-type {
  width: 44px;
  height: 40px;
  border-radius: 12px;
}

.inventory-item-add-type {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 12px;
  font-weight: 700;
}

.inventory-item-modal-actions {
  margin-top: 0;
  padding: 18px 24px 24px;
  border-top: 1px solid rgba(18, 34, 20, 0.08);
  background: #fff;
}

.inventory-item-modal-actions .secondary,
.inventory-item-modal-actions .primary {
  min-height: 42px;
  padding-inline: 18px;
  border-radius: 12px;
}

body.team-user-drawer-open .sidebar {
  pointer-events: none;
}

body.team-user-drawer-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 23, 18, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.team-user-drawer-open .team-user-drawer {
  background: transparent;
}

/* Legal document pages must scroll independently of the fixed IMS app shell rules. */
html:has(.legal-page),
body:has(.legal-page),
body.legal-document {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.legal-page),
body.legal-document {
  position: static !important;
}

body:has(.legal-page) .legal-page,
body:has(.legal-page) .legal-shell,
body.legal-document .legal-page,
body.legal-document .legal-shell {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}

.auth-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 0;
  color: #8a948f;
  font-size: 12px;
  font-weight: 500;
}

.auth-legal-links a {
  color: #56625c;
  text-decoration: none;
}

.auth-legal-links a:hover {
  color: #08783d;
  text-decoration: none;
}

.sidebar-legal-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-legal-links a {
  color: var(--muted);
  text-decoration: none;
}

.sidebar-legal-links a:hover {
  color: #0c9a83;
}

.app-shell.sidebar-collapsed .sidebar-legal-links {
  display: none;
}

.legal-page {
  min-height: 100vh;
  padding: 34px 18px;
  border-top: 2px solid #0c9a83;
  background:
    radial-gradient(circle at top left, rgba(56, 194, 125, .18), transparent 32rem),
    linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%);
}

.legal-shell {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.legal-hero,
.legal-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 20px 60px var(--shadow);
}

.legal-hero {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  border-radius: 18px;
  padding: 34px;
}

.legal-brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
}

.legal-brand img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.legal-kicker {
  width: max-content;
  margin-top: 8px;
  border-radius: 999px;
  padding: 7px 12px;
  color: #0c7c68;
  background: var(--green-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.legal-hero h1 {
  max-width: 760px;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -.045em;
}

.legal-hero p,
.legal-card p,
.legal-card li,
.legal-card address {
  color: #536158;
  font-size: 15px;
  line-height: 1.72;
}

.legal-updated {
  font-weight: 800;
}

.legal-card {
  margin-bottom: 14px;
  border-radius: 14px;
  padding: 26px 28px;
}

.legal-card h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.legal-card p + p,
.legal-card p + ul,
.legal-card ul + p {
  margin-top: 12px;
}

.legal-card ul {
  margin: 0;
  padding-left: 20px;
}

.legal-card li + li {
  margin-top: 7px;
}

.legal-card strong {
  color: var(--ink);
}

.legal-card address {
  margin-top: 10px;
  font-style: normal;
}

.legal-card a,
.legal-footer a {
  color: #0c9a83;
  font-weight: 800;
  text-decoration: none;
}

.legal-card a:hover,
.legal-footer a:hover {
  text-decoration: underline;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 18px 0 8px;
}

@media (max-width: 760px) {
  .legal-page {
    padding: 18px 12px;
  }

  .legal-hero,
  .legal-card {
    border-radius: 13px;
    padding: 22px 18px;
  }

  .legal-hero h1 {
    letter-spacing: -.035em;
  }
}

@media (max-width: 760px) {
  #settingsView .settings-team-summary {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin: 0 0 16px !important;
  }

  .team-user-drawer {
    padding: 10px;
  }

  .team-user-drawer-card {
    max-height: calc(100vh - 20px);
    padding: 22px 18px;
  }

  .inventory-item-modal-card {
    max-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  .inventory-item-modal-card .modal-head,
  .inventory-item-modal-body,
  .inventory-item-modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .inventory-item-modal-card .item-type-row {
    grid-template-columns: 1fr;
  }
}

/* Responsive stabilization layer: preserves existing JS hooks while making the portal usable across laptop, tablet, and phone widths. */
*, *::before, *::after {
  box-sizing: border-box;
}

.main-content,
.view,
.card,
.table-card,
.settings-panel,
.settings-form {
  min-width: 0;
}

.topbar-sidebar-toggle {
  display: none;
}

.table-wrap,
.requests-scroll,
.dashboard-scroll,
.audit-log-table-card,
.vendors-records-card {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.requests-scroll table,
.audit-log-table,
.po-items-table {
  min-width: 760px;
}

.form-grid,
.po-form-grid,
.settings-group-grid,
.inventory-item-modal-grid,
.inventory-item-modal-card .item-type-row,
.po-item-row .form-grid,
.po-amount-grid,
.inventory-detail-summary,
.inventory-detail-facts,
.inventory-detail-stock-row {
  min-width: 0;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.modal-card,
.inventory-item-modal-card,
.po-drawer-card,
.grn-drawer-card,
.vendor-drawer-card,
.stock-issue-drawer-card,
.team-user-drawer-card {
  max-width: min(100%, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

@media (max-width: 1366px) {
  .app-shell {
    grid-template-columns: 206px minmax(0, 1fr) !important;
  }

  .main-content {
    padding-inline: 18px !important;
  }

  .dashboard-grid,
  .dashboard-widget-canvas {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard-stats,
  .stats-grid,
  #inventoryView .inventory-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .table-card,
  .dashboard-card,
  .settings-panel {
    max-width: 100%;
  }

  #settingsView:has(.user-management-list) .settings-team-table .user-management-header,
  #settingsView:has(.user-management-list) .settings-team-table .user-management-card {
    grid-template-columns: minmax(170px, 1.15fr) minmax(190px, 1fr) minmax(110px, .7fr) minmax(170px, .9fr) minmax(190px, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .app-shell,
  .app-shell:not(.sidebar-collapsed),
  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  .topbar-sidebar-toggle,
  .topbar .topbar-sidebar-toggle,
  .app-shell.sidebar-collapsed .topbar-sidebar-toggle {
    display: grid !important;
    flex: 0 0 40px;
    place-items: center;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(320px, 86vw) !important;
    height: 100dvh !important;
    z-index: 80 !important;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 24px 0 48px rgba(15, 23, 42, .22);
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, .38);
  }

  .app-shell.sidebar-collapsed .sidebar,
  .app-shell:not(.sidebar-collapsed) .sidebar {
    width: min(320px, 86vw) !important;
  }

  .app-shell.sidebar-collapsed .brand span,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-item > span:last-child,
  .app-shell.sidebar-collapsed .profile-copy,
  .app-shell.sidebar-collapsed .sidebar-footer,
  .app-shell.sidebar-collapsed .sidebar-legal-links {
    display: initial !important;
  }

  .main-content,
  .app-shell.sidebar-collapsed .main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .topbar-breadcrumb {
    min-width: 0;
  }

  .search {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
  }

  .dashboard-grid,
  .dashboard-widget-canvas,
  .dashboard-stats,
  .stats-grid,
  .metric-grid,
  #inventoryView .inventory-kpis,
  .settings-group-grid,
  .form-grid,
  .po-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-table-card,
  .dashboard-card,
  .table-card {
    grid-column: 1 / -1 !important;
  }

  .inventory-toolbar,
  .po-records-toolbar,
  .stock-issue-toolbar,
  .audit-log-toolbar,
  .settings-team-summary,
  .settings-roles-head,
  .user-management-page-head {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .inventory-module-tabs,
  .settings-tabs,
  .category-tabs,
  .inventory-status-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-module-tab,
  .settings-tab,
  .category-tab,
  .po-status-filter {
    flex: 0 0 auto;
  }

  #settingsView:has(.user-management-list) .settings-team-table .user-management-header {
    display: none !important;
  }

  #settingsView:has(.user-management-list) .settings-team-table .user-management-card,
  #settingsView .settings-role-card {
    grid-template-columns: 1fr !important;
  }

  .settings-role-actions,
  .user-management-actions,
  .form-actions,
  .inventory-item-modal-actions {
    justify-content: stretch !important;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .main-content {
    padding: 12px !important;
  }

  .page-head,
  .dashboard-hero,
  .card,
  .table-card,
  .form-card,
  .settings-panel {
    border-radius: 12px !important;
  }

  .page-title h1,
  .dashboard-hero h1 {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: 1.08 !important;
  }

  .dashboard-grid,
  .dashboard-widget-canvas,
  .dashboard-stats,
  .stats-grid,
  .metric-grid,
  #inventoryView .inventory-kpis,
  .settings-group-grid,
  .form-grid,
  .po-form-grid,
  .po-amount-grid,
  .inventory-item-modal-grid,
  .inventory-item-modal-card .item-type-row,
  .po-item-row .form-grid,
  .inventory-detail-summary,
  .inventory-detail-facts,
  .inventory-detail-stock-row,
  .po-detail-grid,
  .po-signature-grid {
    grid-template-columns: 1fr !important;
  }

  .section-title,
  .table-head,
  .card-head,
  .modal-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .table-wrap table,
  .requests-scroll table,
  .audit-log-table,
  .po-items-table {
    min-width: 680px;
  }

  .modal-backdrop,
  .team-user-drawer,
  .po-drawer,
  .grn-drawer,
  .vendor-drawer,
  .stock-issue-drawer {
    padding: 10px !important;
  }

  .modal-card,
  .inventory-item-modal-card,
  .po-drawer-card,
  .grn-drawer-card,
  .vendor-drawer-card,
  .stock-issue-drawer-card,
  .team-user-drawer-card {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
  }

  .notification-center,
  .search-palette {
    inset: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  #settingsView .settings-tabs {
    gap: 8px !important;
  }

  #settingsView .settings-role-actions,
  #settingsView .user-management-actions,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

.reports-page {
  display: grid;
  gap: 18px;
}

.report-category-tabs,
.report-library {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.report-category-tab,
.report-card {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
}

.report-category-tab {
  padding: 10px 14px;
  font-weight: 700;
}

.report-category-tab.active,
.report-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.report-card {
  width: min(280px, 100%);
  min-height: 128px;
  padding: 14px;
  text-align: left;
  display: grid;
  gap: 8px;
  align-content: start;
}

.report-card span {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.report-card strong {
  font-size: 0.95rem;
}

.report-card small {
  color: var(--muted);
  line-height: 1.35;
}

.report-workspace {
  display: grid;
  gap: 14px;
}

.report-workspace-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.report-workspace-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.report-workspace-head p {
  margin: 5px 0 0;
  color: var(--muted);
}

.report-export-actions,
.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.report-filters label {
  display: grid;
  gap: 5px;
  min-width: 150px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.report-filters input,
.report-search input {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
}

.report-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface);
  max-width: 420px;
}

.report-search input {
  border: 0;
  padding-left: 0;
  width: 100%;
  outline: 0;
}

.report-table-wrap {
  max-height: 560px;
}

.report-table th {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .report-workspace-head {
    display: grid;
  }

  .report-card,
  .report-search {
    width: 100%;
    max-width: none;
  }
}

@media print {
  .sidebar,
  .topbar,
  .page-head,
  .report-category-tabs,
  .report-library,
  .report-filters,
  .report-search,
  .report-export-actions,
  .report-pagination {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .topbar {
    grid-template-columns: auto 1fr auto !important;
  }

  .topbar-breadcrumb {
    font-size: 12px;
    overflow: hidden;
  }

  .top-actions {
    gap: 6px !important;
  }

  .page-head,
  .dashboard-hero,
  .card,
  .table-card,
  .settings-panel,
  .settings-form {
    padding: 14px !important;
  }

  .dashboard-actions,
  .inventory-page-actions,
  .settings-roles-head .primary,
  .form-actions,
  .modal-head-actions {
    width: 100%;
  }

  .primary,
  .secondary,
  .danger-btn,
  .page-btn {
    min-height: 42px;
  }

  .dashboard-actions button,
  .inventory-page-actions button,
  .form-actions button,
  .settings-role-actions button,
  .user-management-actions button {
    width: 100%;
  }

  .table-wrap table,
  .requests-scroll table,
  .audit-log-table,
  .po-items-table {
    min-width: 620px;
  }

  .pagination,
  .table-pagination {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .profile-menu {
    right: 0;
    left: auto;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 8px !important;
  }

  .topbar {
    padding: 8px !important;
  }

  .topbar-breadcrumb span:not(:last-child),
  .topbar-breadcrumb i {
    display: none;
  }

  .search input,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .sidebar {
    width: min(300px, 92vw) !important;
  }

  .notification-head,
  .dashboard-widget-picker-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .notification-tools,
  .dashboard-widget-picker-head .icon-btn {
    width: 100%;
  }

  .settings-tab,
  .inventory-module-tab,
  .category-tab {
    min-height: 40px;
  }

  .table-wrap table,
  .requests-scroll table,
  .audit-log-table,
  .po-items-table {
    min-width: 560px;
  }
}

.notification-toast-region {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(390px, calc(100vw - 36px));
  pointer-events: none;
}

.notification-toast {
  display: grid;
  grid-template-columns: 42px 1fr 36px;
  align-items: start;
  gap: 10px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  color: var(--ink);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: auto;
}

.notification-toast:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.notification-toast.is-removing {
  opacity: 0;
  transform: translateX(18px);
}

.notification-toast-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--green);
}

.notification-toast-content {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-toast-content strong,
.notification-toast-content span,
.notification-toast-content time {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-toast-content strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.notification-toast-content span {
  display: -webkit-box;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-toast-content time {
  color: var(--muted);
  font-size: 0.76rem;
}

.notification-toast-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.notification-toast-close:hover,
.notification-toast-close:focus-visible {
  background: var(--field-soft);
  color: var(--ink);
}

.notification-toast-success {
  border-left-color: #017100;
}

.notification-toast-success .notification-toast-icon {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.notification-toast-warning {
  border-left-color: #d97706;
}

.notification-toast-warning .notification-toast-icon {
  background: rgba(217, 119, 6, 0.13);
  color: #b45309;
}

.notification-toast-error {
  border-left-color: #dc2626;
}

.notification-toast-error .notification-toast-icon {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.notification-toast-approval {
  border-left-color: #7c3aed;
}

.notification-toast-approval .notification-toast-icon {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}

.notification-toast-requisition {
  border-left-color: #0f766e;
}

.notification-toast-requisition .notification-toast-icon {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

@media (max-width: 768px) {
  .notification-toast-region {
    top: 12px;
    right: 12px;
    width: min(360px, calc(100vw - 24px));
  }
}

@media (max-width: 480px) {
  .notification-toast-region {
    left: 10px;
    right: 10px;
    width: auto;
  }

  .notification-toast {
    grid-template-columns: 36px 1fr 32px;
    gap: 8px;
    padding: 10px;
  }

  .notification-toast-icon {
    width: 34px;
    height: 34px;
  }
}

.linked-record-highlight {
  animation: linkedRecordPulse 5s ease forwards;
  box-shadow: inset 4px 0 0 #0f766e;
}

@keyframes linkedRecordPulse {
  0%,
  78% {
    background: rgba(15, 118, 110, 0.16);
  }

  100% {
    background: transparent;
  }
}

#requestsView .temporal-filter-wrap,
#requestsRequisitionPanel .temporal-filter-wrap,
#requestsItemsPanel .temporal-filter-wrap {
  flex: 1 1 100%;
  display: grid;
  width: 100%;
  max-width: 100%;
}

#requestsView .temporal-filter-bar,
#requestsRequisitionPanel .temporal-filter-bar,
#requestsItemsPanel .temporal-filter-bar {
  position: static;
  width: min(100%, 560px);
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  overflow: visible;
}

#requestsView .temporal-filter-wrap:not(.open) .temporal-filter-bar,
#requestsRequisitionPanel .temporal-filter-wrap:not(.open) .temporal-filter-bar,
#requestsItemsPanel .temporal-filter-wrap:not(.open) .temporal-filter-bar {
  display: none;
}

#requestsView .temporal-filter-wrap.open .temporal-filter-bar,
#requestsRequisitionPanel .temporal-filter-wrap.open .temporal-filter-bar,
#requestsItemsPanel .temporal-filter-wrap.open .temporal-filter-bar {
  display: grid;
}

#requestsView .temporal-filter-trigger,
#requestsRequisitionPanel .temporal-filter-trigger,
#requestsItemsPanel .temporal-filter-trigger {
  justify-self: start;
}

#requestsView .temporal-filter-field input,
#requestsRequisitionPanel .temporal-filter-field input,
#requestsItemsPanel .temporal-filter-field input {
  width: 100%;
}

@media (max-width: 768px) {
  #requestsView .temporal-filter-bar,
  #requestsRequisitionPanel .temporal-filter-bar,
  #requestsItemsPanel .temporal-filter-bar {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #requestsView .temporal-filter-field,
  #requestsRequisitionPanel .temporal-filter-field,
  #requestsItemsPanel .temporal-filter-field {
    min-width: 0;
  }
}

/* Unified dropdown and popover treatment across the portal. */
:root {
  --dropdown-bg: #ffffff;
  --dropdown-hover: #f3f4f6;
  --dropdown-shadow: 0 22px 55px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

body[data-theme="dark"] {
  --dropdown-bg: #17212b;
  --dropdown-hover: #233240;
  --dropdown-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

select,
input[list],
.po-vendor-filter select,
.stock-issue-location-filter select,
.audit-log-filters select,
.report-filters input[data-report-filter] {
  min-height: 46px;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background-color: var(--dropdown-bg) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

select,
.po-vendor-filter select,
.stock-issue-location-filter select,
.audit-log-filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 52%,
    calc(100% - 15px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:focus,
input[list]:focus,
.po-vendor-filter select:focus,
.stock-issue-location-filter select:focus,
.audit-log-filters select:focus,
.report-filters input[data-report-filter]:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent), 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-vendor-filter select,
#procurementArchivesPanel .legacy-archive-toolbar .po-vendor-filter input,
#procurementArchivesPanel .legacy-archive-toolbar .legacy-date-filter input {
  min-height: 0 !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-vendor-filter select {
  padding-right: 24px !important;
  background-position:
    calc(100% - 11px) 52%,
    calc(100% - 5px) 52%;
}

#procurementArchivesPanel .legacy-archive-toolbar .po-vendor-filter:focus-within {
  border-color: var(--green, #08783d);
  box-shadow: 0 0 0 3px rgba(8, 120, 61, .12);
}

.profile-menu,
.sidebar-profile-menu,
.approval-column-menu,
.temporal-filter-bar {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 24px !important;
  background: var(--dropdown-bg) !important;
  box-shadow: var(--dropdown-shadow) !important;
  padding: 10px !important;
  overflow: hidden;
}

.profile-menu {
  min-width: 230px;
}

.profile-menu::before,
.approval-column-menu::before,
.temporal-filter-bar::before {
  content: none !important;
}

.profile-menu-item,
.profile-menu button,
.approval-column-menu button,
.temporal-filter-chip,
.temporal-filter-clear {
  min-height: 48px;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 700;
}

.profile-menu-item:hover,
.profile-menu button:hover,
.approval-column-menu button:hover,
.temporal-filter-chip:hover,
.temporal-filter-clear:hover,
.temporal-filter-chip.active {
  background: var(--dropdown-hover) !important;
  color: var(--ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

.approval-column-menu {
  min-width: 220px;
}

.approval-column-menu button {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

.temporal-filter-bar {
  gap: 10px !important;
}

.temporal-filter-title {
  padding: 7px 8px 2px;
}

.temporal-filter-field input {
  border-radius: 14px !important;
}

.portal-custom-dropdown-menu {
  position: fixed;
  z-index: 10080 !important;
  display: grid;
  gap: 6px;
  overscroll-behavior: contain;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff !important;
  color: #202124 !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
}

.portal-custom-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 26px;
  width: 16px;
  height: 16px;
  background: #ffffff !important;
  transform: rotate(45deg);
}

.portal-custom-dropdown-menu.open-above::before {
  top: auto;
  bottom: -8px;
}

.portal-custom-dropdown-option {
  position: relative;
  z-index: 1;
  min-height: 46px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #202124 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.portal-custom-dropdown-option:hover,
.portal-custom-dropdown-option:focus-visible,
.portal-custom-dropdown-option.active {
  background: #f3f4f6 !important;
  color: #202124 !important;
  box-shadow: none;
  transform: none;
}

.portal-custom-dropdown-empty {
  position: relative;
  z-index: 1;
  padding: 14px;
  color: #65708d;
  font-weight: 700;
}

.custom-dropdown-open {
  border-color: #4169ff !important;
  box-shadow: 0 0 0 4px rgba(65, 105, 255, 0.18), 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

/* Final responsive guardrails: wide portal data scrolls instead of colliding at zoomed or narrow sizes. */
.app-shell,
.main-content,
.view,
.card,
.table-card,
.form-card,
.po-records-screen,
.po-records-card,
.stock-issue-table-section,
.settings-layout,
.settings-panel,
.settings-form,
.reports-page,
.report-workspace {
  min-width: 0 !important;
  max-width: 100% !important;
}

.main-content {
  flex: 1 1 auto;
  width: min(100%, 100vw);
}

.view {
  overflow-x: clip;
}

#dashboardView.dashboard-view {
  position: relative;
  opacity: 1;
  visibility: visible;
  color: #102019;
  background: #F6F7F3 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  transform: none;
}

#dashboardView.dashboard-view.active {
  display: block;
}

#dashboardView.dashboard-view.empty-dashboard:not(.loading) {
  min-height: 0;
  border: 0 !important;
  background: #F6F7F3 !important;
}

#dashboardView .dashboard-hero,
#dashboardView #dashboardWidgetCanvas,
#dashboardView .dashboard-widget-card,
#dashboardView .dashboard-analytics-section {
  opacity: 1 !important;
  visibility: visible !important;
  color: #102019;
  filter: none !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

#dashboardView .dashboard-hero {
  overflow: visible;
  color: #fff;
}

#dashboardView #dashboardWidgetCanvas {
  position: relative;
  z-index: 1;
  display: block;
  overflow: visible;
  background: transparent;
}

#dashboardView .dashboard-widget-card,
#dashboardView .dashboard-analytics-card {
  position: relative;
  z-index: 1;
  background: #fff;
}

.table-responsive,
.table-wrap,
.requests-scroll,
.dashboard-scroll,
.report-table-wrap,
.budget-line-history-table-wrap,
.audit-log-table-card,
.vendors-records-card,
.po-records-card .table-wrap,
.card.table-card .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table,
.table-wrap table,
.requests-scroll table,
.dashboard-scroll table,
.report-table,
.budget-line-history-table-wrap table,
.audit-log-table {
  width: 100% !important;
  min-width: max(760px, 100%) !important;
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
}

#requestsView table,
#requisitionView table,
#requestView table,
#myRequestsView table,
#approvalsView table,
#transportView table,
#procurementTransportPanel table {
  min-width: max(1120px, 100%) !important;
}

#poView table,
#servicePoView table,
#procurementPoPanel table,
#procurementServicePoPanel table,
#grnView table,
#procurementGrnPanel table {
  min-width: max(1180px, 100%) !important;
}

#inventoryView table,
#issueView table,
#vendorsView table,
#procurementVendorsPanel table,
#financeView table,
#auditView table,
#reportsView table,
.report-table {
  min-width: max(920px, 100%) !important;
}

.table-wrap th,
.table-wrap td,
.requests-scroll th,
.requests-scroll td,
.report-table th,
.report-table td,
.audit-log-table th,
.audit-log-table td {
  max-width: clamp(9rem, 18vw, 18rem);
  vertical-align: middle;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.table-wrap th,
.requests-scroll th,
.report-table th,
.audit-log-table th {
  white-space: nowrap !important;
  overflow-wrap: normal;
}

.table-wrap th:last-child,
.table-wrap td:last-child,
.requests-scroll th:last-child,
.requests-scroll td:last-child {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  min-width: clamp(8.5rem, 12vw, 12rem) !important;
  max-width: none !important;
  white-space: nowrap !important;
  background: inherit !important;
  box-shadow: none !important;
}

.actions-cell,
.action-buttons,
.po-row-actions,
.budget-line-actions,
.settings-role-actions,
.user-management-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap !important;
  width: max-content;
  min-width: max-content;
  max-width: none !important;
  white-space: nowrap !important;
}

.button-cell {
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
}

td.button-cell {
  display: table-cell !important;
  vertical-align: middle;
}

.button-cell:not(td) {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap !important;
  width: max-content;
}

.button-cell > .po-row-actions {
  width: max-content;
}

.actions-cell button,
.action-buttons button,
.button-cell button,
.po-row-actions button,
.budget-line-actions button,
.settings-role-actions button,
.user-management-actions button,
td .tiny {
  flex: 0 0 auto;
  white-space: nowrap !important;
}

.filter-bar,
.inventory-toolbar,
.po-records-toolbar,
.stock-issue-toolbar,
.grn-records-toolbar,
.audit-log-toolbar,
.report-filters,
.report-export-actions,
.inventory-page-actions,
.requisition-actions,
.form-actions,
.temporal-filter-bar,
.po-status-filters,
.inventory-status-tabs,
.inventory-module-tabs,
.category-tabs,
.settings-tabs {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.filter-bar,
.inventory-toolbar,
.po-records-toolbar,
.stock-issue-toolbar,
.grn-records-toolbar,
.audit-log-toolbar {
  overflow: visible !important;
}

.filter-bar > *,
.inventory-toolbar > *,
.po-records-toolbar > *,
.stock-issue-toolbar > *,
.grn-records-toolbar > *,
.audit-log-toolbar > *,
.report-filters > * {
  min-width: min(100%, 180px);
}

.responsive-grid,
.form-grid,
.po-form-grid,
.po-entry-layout,
.po-entry-columns,
.settings-group-grid,
.inventory-kpis,
.dashboard-stats,
.stats-grid,
.metric-grid,
.inventory-item-modal-grid,
.inventory-detail-summary,
.inventory-detail-facts {
  min-width: 0;
}

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.drawer-scroll,
.modal-card,
.inventory-item-modal-card,
.po-drawer-card,
.grn-drawer-card,
.vendor-drawer-card,
.stock-issue-drawer-card,
.team-user-drawer-card,
#budgetLineEditModal .budget-line-edit-body {
  max-width: min(100%, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.po-drawer,
.grn-drawer,
.vendor-drawer,
.stock-issue-drawer,
.team-user-drawer,
.modal-backdrop {
  overflow: hidden;
}

.po-drawer {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(14px, 2.4vw, 34px) !important;
}

.po-drawer.show {
  display: flex !important;
}

.po-drawer-card {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: min(1120px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: min(860px, calc(100dvh - 48px)) !important;
  margin: auto !important;
  border-radius: 18px !important;
  transform: translateY(10px) scale(.96);
  opacity: 0;
  box-shadow: 0 30px 90px rgba(10, 18, 14, .32) !important;
  transition: transform .2s ease, opacity .2s ease;
}

.po-drawer.show .po-drawer-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body.po-drawer-open::before {
  z-index: 68 !important;
  background: rgba(8, 15, 12, .54) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body.po-drawer-open .po-drawer {
  z-index: 72 !important;
}

@media (max-width: 760px) {
  .po-drawer {
    align-items: stretch !important;
    padding: 10px !important;
  }

  .po-drawer-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 14px !important;
  }
}

button,
.primary,
.secondary,
.danger-btn,
.page-btn,
.tiny {
  min-width: 0;
}

p,
span,
strong,
small,
label,
button,
input,
select,
textarea {
  overflow-wrap: anywhere;
}

input,
select,
textarea {
  min-width: 0;
}

@media (max-width: 1024px) {
  .app-shell {
    display: flex !important;
  }

  .main-content {
    width: 100% !important;
  }

  .table-wrap table,
  .requests-scroll table,
  .dashboard-scroll table,
  .report-table,
  .audit-log-table {
    min-width: max(760px, 100%) !important;
  }

  .inventory-toolbar,
  .po-records-toolbar,
  .stock-issue-toolbar,
  .grn-records-toolbar,
  .audit-log-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    align-items: end !important;
  }
}

@media (max-width: 768px) {
  .view {
    overflow-x: clip;
  }

  .table-wrap table,
  .requests-scroll table,
  .dashboard-scroll table,
  .report-table,
  .audit-log-table {
    min-width: max(680px, 100%) !important;
  }

  .filter-bar > *,
  .inventory-toolbar > *,
  .po-records-toolbar > *,
  .stock-issue-toolbar > *,
  .grn-records-toolbar > *,
  .audit-log-toolbar > *,
  .report-filters > * {
    min-width: 100%;
  }
}

/* Compact PO tables shared by Inventory PO and Service PO. */
#poView .po-records-card .table-wrap:has(#poTable),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) {
  overflow-x: auto !important;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  background: #fff;
}

#poView .po-records-card .table-wrap:has(#poTable) table,
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) table,
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) table,
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) table {
  min-width: 920px !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate;
  border-spacing: 0;
}

#poView .po-records-card .table-wrap:has(#poTable) colgroup,
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) colgroup,
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) colgroup,
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) colgroup {
  display: none;
}

#poView .po-records-card .table-wrap:has(#poTable) th,
#poView .po-records-card .table-wrap:has(#poTable) td,
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) th,
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) td,
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) th,
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) td,
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) th,
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) td {
  padding: 14px 20px !important;
  vertical-align: middle;
  white-space: normal !important;
  overflow: visible !important;
  border-bottom: 1px solid #edf0f5;
}

#poView .po-records-card .table-wrap:has(#poTable) th,
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) th,
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) th,
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) th {
  color: #8b94a7;
  background: #fbfbfd;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#poView .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(1),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(1),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(1),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(1) {
  width: 31%;
}

#poView .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(2),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(2),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(2),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(2) {
  width: 14%;
}

#poView .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(3),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(3),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(3),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(3) {
  width: 16%;
}

#poView .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(4),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(4),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(4),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(4) {
  width: 13%;
}

#poView .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(5),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(5),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(5),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(5) {
  width: 12%;
  text-align: right;
}

#poView .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(6),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(6),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) :is(th, td):nth-child(6),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) :is(th, td):nth-child(6) {
  width: 14%;
  min-width: 132px !important;
  text-align: right;
}

.po-compact-info,
.po-compact-date {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.po-compact-label {
  color: #8b94a7;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.po-compact-info strong,
.po-compact-date strong,
.po-compact-amount {
  color: #07142d;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 850;
}

.po-compact-muted,
.po-compact-date span {
  color: #7d879b;
  font-size: 13px;
  line-height: 1.35;
}

.linked-requisition-chip {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  border: 1px solid #cfe8d9;
  border-radius: 999px;
  padding: 3px 8px;
  color: #08783e;
  background: #eefaf3;
  box-shadow: none;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
}

.linked-requisition-chip:hover,
.linked-requisition-chip:focus-visible {
  border-color: #9ddfb6;
  color: #056236;
  background: #e2f6ec;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
  transform: none;
}

.linked-requisition-chip svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  stroke-width: 2.2;
}

#poDetailModal .approval-detail-grid strong .linked-requisition-chip {
  margin-top: 2px;
}

.po-linked-request-cell {
  text-align: left !important;
}

.po-compact-empty {
  font-style: italic;
}

.pending-users-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #d8ecdf;
  border-radius: 10px;
  background: #f2fbf5;
}

.pending-users-section div {
  display: grid;
  gap: 3px;
}

.pending-users-section span {
  color: #08783e;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pending-users-section strong {
  color: #07142d;
  font-size: 14px;
  font-weight: 850;
}

.pending-users-section p {
  margin: 0;
  color: #66716b;
  font-size: 13px;
  line-height: 1.35;
}

.notification-sound-settings {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto auto;
  align-items: end;
  gap: 12px;
  width: min(100%, 720px);
  padding: 16px;
  border: 1px solid #d8ecdf;
  border-radius: 10px;
  background: #f7fbf8;
}

.notification-sound-select {
  min-width: 0;
}

.notification-sound-settings button {
  min-height: 40px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .notification-sound-settings {
    grid-template-columns: 1fr;
  }
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row:is(.po-status-row-received, .po-status-row-pending, .po-status-row-approved, .po-status-row-cancelled) td {
  background: var(--po-status-row-bg);
  transition: background-color .16s ease;
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row:is(.po-status-row-received, .po-status-row-pending, .po-status-row-approved, .po-status-row-cancelled) td:first-child {
  border-left: 4px solid var(--po-status-row-border);
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-received {
  --po-status-row-bg: #F1FAF4;
  --po-status-row-border: #16A34A;
  --po-status-row-hover: #e8f7ee;
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-pending {
  --po-status-row-bg: #FFF7E6;
  --po-status-row-border: #F97316;
  --po-status-row-hover: #ffefd1;
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-approved {
  --po-status-row-bg: #EFF6FF;
  --po-status-row-border: #2563EB;
  --po-status-row-hover: #e4f0ff;
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-cancelled {
  --po-status-row-bg: #FEF2F2;
  --po-status-row-border: #DC2626;
  --po-status-row-hover: #fee7e7;
}

:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row:is(.po-status-row-received, .po-status-row-pending, .po-status-row-approved, .po-status-row-cancelled):hover td,
:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row:is(.po-status-row-received, .po-status-row-pending, .po-status-row-approved, .po-status-row-cancelled):focus-visible td,
:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row:is(.po-status-row-received, .po-status-row-pending, .po-status-row-approved, .po-status-row-cancelled).selected td,
:is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row:is(.po-status-row-received, .po-status-row-pending, .po-status-row-approved, .po-status-row-cancelled).active td {
  background: var(--po-status-row-hover);
}

body[data-theme="dark"] :is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-received {
  --po-status-row-bg: rgba(22, 163, 74, .14);
  --po-status-row-hover: rgba(22, 163, 74, .22);
}

body[data-theme="dark"] :is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-pending {
  --po-status-row-bg: rgba(249, 115, 22, .15);
  --po-status-row-hover: rgba(249, 115, 22, .23);
}

body[data-theme="dark"] :is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-approved {
  --po-status-row-bg: rgba(37, 99, 235, .16);
  --po-status-row-hover: rgba(37, 99, 235, .24);
}

body[data-theme="dark"] :is(#poView, #servicePoView, #procurementPoPanel, #procurementServicePoPanel) .po-records-card tbody tr.po-clickable-row.po-status-row-cancelled {
  --po-status-row-bg: rgba(220, 38, 38, .15);
  --po-status-row-hover: rgba(220, 38, 38, .23);
}

#poView .po-status-select,
#servicePoView .po-status-select,
#procurementPoPanel .po-status-select,
#procurementServicePoPanel .po-status-select {
  width: fit-content;
  min-width: 0 !important;
  min-height: 26px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0 !important;
  border-radius: 999px;
  padding: 0 10px !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}

#poView .po-status-select::before,
#servicePoView .po-status-select::before,
#procurementPoPanel .po-status-select::before,
#procurementServicePoPanel .po-status-select::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

#poView .po-status-select.status-neutral,
#servicePoView .po-status-select.status-neutral,
#procurementPoPanel .po-status-select.status-neutral,
#procurementServicePoPanel .po-status-select.status-neutral {
  color: #3f4658;
  background: #eceff4;
}

#poView .po-status-select.status-success,
#servicePoView .po-status-select.status-success,
#procurementPoPanel .po-status-select.status-success,
#procurementServicePoPanel .po-status-select.status-success {
  color: #007a59;
  background: #e2f6ec;
}

#poView .po-status-select.status-warning,
#servicePoView .po-status-select.status-warning,
#procurementPoPanel .po-status-select.status-warning,
#procurementServicePoPanel .po-status-select.status-warning {
  color: #99620a;
  background: #fff3d6;
}

#poView .po-status-select.status-danger,
#servicePoView .po-status-select.status-danger,
#procurementPoPanel .po-status-select.status-danger,
#procurementServicePoPanel .po-status-select.status-danger {
  color: #b42318;
  background: #fee4e2;
}

#poView .po-status-select svg,
#servicePoView .po-status-select svg,
#procurementPoPanel .po-status-select svg,
#procurementServicePoPanel .po-status-select svg {
  display: none;
}

#poView .po-row-actions,
#servicePoView .po-row-actions,
#procurementPoPanel .po-row-actions,
#procurementServicePoPanel .po-row-actions {
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content;
}

#poView .po-row-actions .tiny,
#servicePoView .po-row-actions .tiny,
#procurementPoPanel .po-row-actions .tiny,
#procurementServicePoPanel .po-row-actions .tiny {
  position: relative;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  color: #59647a !important;
  background: transparent !important;
}

#poView .po-row-actions .tiny > span,
#servicePoView .po-row-actions .tiny > span,
#procurementPoPanel .po-row-actions .tiny > span,
#procurementServicePoPanel .po-row-actions .tiny > span {
  position: absolute;
  top: -3px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 4px;
  color: #fff;
  background: #08783e;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
}

@media (max-width: 900px) {
  #poView .po-records-card .table-wrap:has(#poTable) table,
  #servicePoView .po-records-card .table-wrap:has(#servicePoTable) table,
  #procurementPoPanel .po-records-card .table-wrap:has(#poTable) table,
  #procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) table {
    min-width: 720px !important;
  }

  #poView .po-records-card .table-wrap:has(#poTable) th,
  #poView .po-records-card .table-wrap:has(#poTable) td,
  #servicePoView .po-records-card .table-wrap:has(#servicePoTable) th,
  #servicePoView .po-records-card .table-wrap:has(#servicePoTable) td,
  #procurementPoPanel .po-records-card .table-wrap:has(#poTable) th,
  #procurementPoPanel .po-records-card .table-wrap:has(#poTable) td,
  #procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) th,
  #procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) td {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

#poForm .po-field-error {
  position: relative;
}

#poForm .po-field-error :is(input, select, textarea) {
  border-color: #dc2626 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .14) !important;
}

#poForm .po-field-error :is(input, select, textarea):focus {
  outline: 0;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .22) !important;
}

#poForm .po-error-text {
  display: block;
  margin-top: 6px;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

#poForm .po-item-row:has(.po-field-error),
#poForm .po-item-row.po-field-error {
  border-color: #fecaca;
  background: #fffafa;
}

#approvalsView.procurement-view .inventory-module-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--lm-line, var(--line));
}

#approvalsView.procurement-view .inventory-module-tab {
  min-height: 38px;
  border: 0;
  color: var(--lm-muted, var(--muted));
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

#approvalsView.procurement-view .inventory-module-tab.active {
  color: #0f8f5d;
  font-weight: 800;
}

#approvalsView.procurement-view .inventory-module-tab.active::after {
  background: #0f8f5d;
}

#approvalsView.procurement-view .inventory-module-tab span {
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2f0;
  color: #5f6f68;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

#approvalsView.procurement-view .inventory-module-tab.active span {
  color: #0f8f5d;
  background: #c9f7d7;
}

#approvalsView.procurement-view .procurement-panel,
#approvalsView.procurement-view #approvalsBoard {
  display: block;
}

#approvalsView.procurement-view .po-records-card {
  overflow: hidden;
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 12px;
  background: var(--lm-surface, #fff);
  box-shadow: var(--lm-shadow, 0 10px 30px rgba(15, 23, 42, .08));
}

#approvalsView.procurement-view .po-records-card .table-wrap {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#approvalsView.procurement-view .po-records-card table {
  min-width: 920px !important;
  table-layout: fixed;
}

#approvalsView.procurement-view .po-records-card th,
#approvalsView.procurement-view .po-records-card td {
  padding: 13px 14px !important;
  vertical-align: middle;
}

#approvalsView.procurement-view.active {
  display: block !important;
  gap: 0 !important;
}

#approvalsView.procurement-view {
  padding-top: 22px !important;
}

#approvalsView.procurement-view .inventory-module-tabs {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

#approvalsView.procurement-view #approvalsBoard {
  margin-top: 0 !important;
}

#approvalsView.procurement-view .approval-history-filter-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

#inventoryView .issuance-history-filters {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(130px, .8fr) minmax(190px, 1.2fr) minmax(150px, .85fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

#inventoryView .issuance-history-filters:has(.temporal-filter-wrap.open) {
  margin-bottom: 196px;
}

#inventoryIssuanceHistoryPanel {
  padding-top: 18px;
}

#inventoryIssuanceHistoryPanel .po-records-head {
  margin-bottom: 18px;
}

#inventoryIssuanceHistoryPanel .po-records-head h2 {
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.2;
}

#inventoryIssuanceHistoryPanel .po-records-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

#inventoryView .issuance-history-filters .approval-history-date-filter {
  grid-column: auto;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: flex-end;
  overflow: visible;
}

#inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-wrap {
  width: 100%;
  justify-content: flex-end;
}

#inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-trigger {
  width: 100%;
  min-width: 156px;
  justify-content: center;
}

#inventoryView .issuance-history-filters .po-search-filter,
#inventoryView .issuance-history-filters .po-vendor-filter {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

#inventoryView .issuance-history-filters .po-search-filter > svg {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

#inventoryView .issuance-history-filters .po-search-filter input {
  padding-left: 38px;
  direction: ltr;
  text-align: left;
}

#inventoryView .issuance-history-filters .po-vendor-filter {
  display: grid;
  gap: 5px;
}

#inventoryView .issuance-history-filters .po-vendor-filter > span {
  font-size: 12px;
  font-weight: 750;
}

#inventoryView .issuance-history-filters :is(input, select) {
  width: 100%;
  min-height: 38px;
}

#inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-bar {
  left: auto;
  right: 0;
  width: min(460px, calc(100vw - 32px));
  min-width: min(460px, calc(100vw - 32px));
  max-width: min(460px, calc(100vw - 32px));
  margin: 0;
  white-space: normal;
  overflow: visible;
}

@media (max-width: 1100px) {
  #inventoryView .issuance-history-filters {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  #inventoryView .issuance-history-filters .approval-history-date-filter {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  #inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-wrap {
    width: auto;
    justify-content: flex-start;
  }

  #inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-trigger {
    width: auto;
  }
}

@media (max-width: 680px) {
  #inventoryView .issuance-history-filters {
    grid-template-columns: 1fr;
  }

  #inventoryView .issuance-history-filters:has(.temporal-filter-wrap.open) {
    margin-bottom: 250px;
  }

  #inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-wrap,
  #inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-trigger {
    width: 100%;
  }

  #inventoryView .issuance-history-filters .approval-history-date-filter .temporal-filter-bar {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 32px));
    min-width: 0;
    grid-template-columns: 1fr;
  }
}

#approvalsView.procurement-view .approval-type-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

#approvalsView.procurement-view .approval-history-date-filter {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  margin-left: auto;
  position: relative;
}

#approvalsView.procurement-view .approval-history-date-filter .temporal-filter-wrap {
  display: inline-grid;
  justify-items: end;
}

#approvalsView.procurement-view .approval-history-date-filter .temporal-filter-trigger {
  min-height: 38px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

#approvalsView.procurement-view .approval-history-date-filter .temporal-filter-bar {
  left: auto;
  right: 0;
  margin-bottom: 0 !important;
}

@media (max-width: 980px) {
  #approvalsView.procurement-view .approval-history-filter-panel {
    display: grid;
    gap: 12px;
  }

  #approvalsView.procurement-view .approval-history-date-filter {
    justify-content: flex-start;
    margin-left: 0;
  }

  #approvalsView.procurement-view .approval-history-date-filter .temporal-filter-wrap {
    justify-items: start;
  }

  #approvalsView.procurement-view .approval-history-date-filter .temporal-filter-bar {
    left: 0;
    right: auto;
  }
}

#approvalsView.procurement-view .approval-type-filter-chip {
  min-height: 32px;
  border: 1px solid var(--lm-line, var(--line));
  border-radius: 999px;
  padding: 0 13px;
  color: #4b5563;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

#approvalsView.procurement-view .approval-type-filter-chip:hover,
#approvalsView.procurement-view .approval-type-filter-chip.active {
  border-color: #0f8f5d;
  color: #08783e;
  background: #e8f8ef;
}

#approvalsView .approval-type-badge {
  width: fit-content;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  margin-left: 6px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

#approvalsView .approval-type-request {
  color: #1d4ed8;
  background: #dbeafe;
}

#approvalsView .approval-type-po {
  color: #047857;
  background: #d1fae5;
}

#approvalsView .approval-type-quotation {
  color: #c2410c;
  background: #ffedd5;
}

#approvalsView .approval-type-transport {
  color: #075985;
  background: #dbeafe;
}

#approvalsView.procurement-view .temporal-filter-bar {
  margin-bottom: 12px !important;
}

#approvalsView.procurement-view .po-records-card :is(th, td):last-child {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  text-align: right !important;
  background: inherit !important;
  box-shadow: none !important;
}

#approvalsView.procurement-view .button-cell {
  display: table-cell !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  text-align: right !important;
  overflow: visible !important;
}

/* Shared date/month filter popover. Keep this after dropdown overrides so the
   temporal filter is laid out as a form, not as a narrow menu. */
.temporal-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
  z-index: 420;
}

.temporal-filter-wrap.open {
  z-index: 12000;
}

.temporal-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
}

.temporal-filter-bar {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 12001 !important;
  display: none;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  align-items: end;
  gap: 14px !important;
  width: max-content;
  min-width: min(440px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 16px !important;
  overflow: visible !important;
  border-radius: 18px !important;
}

.temporal-filter-bar[hidden] {
  display: none !important;
}

.temporal-filter-wrap.open .temporal-filter-bar {
  display: grid;
}

.temporal-filter-wrap.align-end .temporal-filter-bar {
  left: auto;
  right: 0;
}

.temporal-filter-title,
.temporal-filter-mode {
  grid-column: 1 / -1;
}

.temporal-filter-title {
  padding: 0 !important;
  white-space: nowrap;
}

.temporal-filter-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--lm-line, #e1e7df);
  border-radius: 14px;
  background: var(--lm-surface-alt, #f7faf7);
}

.temporal-filter-chip,
.temporal-filter-clear,
.temporal-filter-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  line-height: 1.15;
}

.temporal-filter-chip {
  width: 100%;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
}

.temporal-filter-field {
  display: grid;
  gap: 7px;
  min-width: 0 !important;
}

.temporal-filter-field span {
  white-space: nowrap;
}

.temporal-filter-field input {
  width: 100%;
  min-width: 0;
}

.temporal-filter-clear,
.temporal-filter-apply {
  min-height: 40px !important;
  padding: 0 16px !important;
}

.temporal-filter-clear {
  grid-column: 1 / -1;
  justify-self: end;
}

#requestsView .temporal-filter-bar,
#requestsRequisitionPanel .temporal-filter-bar,
#requestsItemsPanel .temporal-filter-bar {
  width: min(100%, 560px);
  min-width: min(440px, 100%);
  max-width: 100%;
}

@media (max-width: 640px) {
  .temporal-filter-wrap,
  .temporal-filter-trigger {
    max-width: 100%;
  }

  .temporal-filter-bar {
    grid-template-columns: 1fr;
    width: min(100vw - 32px, 360px);
    min-width: 0;
    max-width: calc(100vw - 32px);
  }

  .temporal-filter-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .temporal-filter-chip {
    padding: 0 10px !important;
  }

  .temporal-filter-clear,
  .temporal-filter-apply {
    justify-self: stretch;
    width: 100%;
  }
}

#approvalsView.procurement-view .approval-view-button {
  min-width: 116px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 9px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

#approvalsView.procurement-view .approval-view-button svg {
  width: 14px !important;
  height: 14px !important;
}

.sidebar .brand {
  align-items: center !important;
  margin-bottom: 0 !important;
  padding-bottom: 16px !important;
}

.sidebar .brand-copy {
  min-width: 0;
  display: grid !important;
  gap: 2px;
}

.sidebar .brand-copy span,
.sidebar .brand-copy span::before,
.sidebar .brand-copy span::after {
  content: none !important;
  display: block !important;
}

.sidebar .brand-copy span {
  overflow: hidden;
  color: #08120d !important;
  font-size: 24px !important;
  line-height: 1.1;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .brand-copy small {
  display: block;
  color: #657068;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

.sidebar-company-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 24px;
  padding: 10px;
  border: 1px solid #e0e5dc;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(14, 28, 18, 0.04);
}

.sidebar-company-card img {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff7ed;
}

.sidebar-company-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-company-copy strong {
  overflow: hidden;
  color: #07120d;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-company-copy span {
  overflow: hidden;
  color: #647067;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-company-card + .side-nav {
  margin-top: 0 !important;
}

/* Compact ERP-style sidebar density. */
.sidebar .side-nav {
  gap: 12px !important;
}

.sidebar .nav-group {
  gap: 4px !important;
}

.sidebar .nav-label {
  padding: 0 8px !important;
  margin: 12px 0 8px !important;
}

.sidebar .nav-group .nav-section,
.sidebar .nav-section.single {
  gap: 1px !important;
}

.sidebar .nav-section-items {
  gap: 1px !important;
}

.sidebar .nav-item,
.sidebar .nav-item:not(.has-more),
.sidebar .nav-section-toggle {
  min-height: 32px !important;
  height: 32px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 0 8px !important;
}

.sidebar .nav-section-toggle {
  grid-template-columns: 24px minmax(0, 1fr) 14px !important;
}

.sidebar .nav-icon,
.sidebar .nav-section-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}

.sidebar .nav-icon svg,
.sidebar .nav-section-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.sidebar .nav-section-toggle > svg {
  width: 14px !important;
  height: 14px !important;
}

.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .sidebar-company-card {
  display: none !important;
}

/* Keep drawer and modal content outside the blurred backdrop layer. */
.stock-issue-drawer,
.stock-transfer-drawer,
.po-drawer,
.grn-drawer,
.vendor-drawer,
.team-user-drawer {
  z-index: 70 !important;
  background: transparent !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.stock-issue-drawer-card,
.stock-transfer-drawer-card,
.po-drawer-card,
.grn-drawer-card,
.vendor-drawer-card,
.team-user-drawer-card {
  position: relative;
  z-index: 2 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-backdrop {
  z-index: 10040 !important;
  isolation: isolate;
  background: rgba(24, 31, 26, .48) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-backdrop.modal-underlay {
  background: transparent !important;
  pointer-events: none;
}

.modal-backdrop.nested-confirm-modal,
#appConfirmModal {
  z-index: 10060 !important;
}

.modal-backdrop::before {
  content: none !important;
}

.modal-card {
  position: relative;
  z-index: 2 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Drawers are portaled to body so this backdrop blurs only the page below. */
body.manual-stock-issue-open::before,
body.stock-transfer-drawer-open::before,
body.po-drawer-open::before,
body.grn-drawer-open::before,
body.vendor-drawer-open::before,
body.team-user-drawer-open::before {
  filter: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body > .stock-issue-drawer,
body > .stock-transfer-drawer,
body > .po-drawer,
body > .grn-drawer,
body > .vendor-drawer,
body > .team-user-drawer {
  z-index: 100 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.quotation-module {
  position: relative;
  min-height: 640px;
  padding: 2px 0 36px;
  color: #172019;
}
.quotation-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.quotation-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #16251d;
}
.quotation-hero p {
  margin: 8px 0 0;
  color: #6a756e;
  font-size: 14px;
}
.quotation-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid #e5ebe6;
  margin-bottom: 18px;
}
.quotation-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 0 13px;
  color: #6a756e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}
.quotation-tab.active {
  color: #16251d;
}
.quotation-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #1f8f4d;
}
.quotation-section-panel {
  display: none;
}
.quotation-section-panel.active {
  display: block;
}
.quotation-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.quotation-search,
.quotation-filter {
  min-height: 42px;
  border: 1px solid #dfe7e1;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  box-shadow: 0 6px 18px rgba(20, 36, 26, 0.04);
}
.quotation-search {
  flex: 1 1 320px;
}
.quotation-search input,
.quotation-filter select {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  font: inherit;
  color: #172019;
}
.quotation-card {
  background: #fff;
  border: 1px solid #e1e8e3;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(22, 37, 29, 0.06);
  overflow: hidden;
}
.quotation-table th,
.quotation-table td {
  white-space: nowrap;
  vertical-align: middle;
}
.quotation-card .table-wrap:has(#quotationTable) {
  overflow-x: auto;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table {
  width: 100% !important;
  min-width: 680px !important;
  table-layout: fixed !important;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table th,
.quotation-card .table-wrap:has(#quotationTable) .quotation-table td {
  padding: 9px 8px;
  white-space: normal;
  line-height: 1.25;
  vertical-align: middle;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table th {
  font-size: 11px;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table :is(th, td):nth-child(1) {
  width: 18%;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table :is(th, td):nth-child(2) {
  width: 18%;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table :is(th, td):nth-child(3) {
  width: 16%;
  text-align: center;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table :is(th, td):nth-child(4) {
  width: 14%;
  text-align: center;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table :is(th, td):nth-child(5) {
  width: 16%;
  text-align: right;
}
.quotation-card .table-wrap:has(#quotationTable) .quotation-table :is(th, td):nth-child(6) {
  width: 18%;
  text-align: right;
}
.quotation-card .table-wrap:has(#quotationTable) .po-row-actions {
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.quotation-card .table-wrap:has(#quotationTable) .po-row-actions .quotation-action {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 10px;
}
.quotation-card .table-wrap:has(#quotationTable) .po-row-actions .quotation-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.quotation-card .table-wrap:has(#quotationTable) .po-row-actions .quotation-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.quotation-completed-item .quotation-inline-actions .quotation-action {
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.quotation-completed-item .quotation-inline-actions .quotation-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.quotation-completed-list {
  display: grid;
  gap: 6px;
}
.quotation-completed-list > strong {
  font-size: 12px;
}
.quotation-completed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #e1e8e3;
  border-radius: 8px;
  background: #f8faf8;
}
.quotation-completed-item > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotation-completed-item .quotation-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.quotation-card .table-wrap:has(#quotationTable) .status-badge {
  max-width: 100%;
  white-space: normal;
}
.quotation-primary-cell,
.quotation-description-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.quotation-primary-cell strong,
.quotation-description-cell strong {
  color: #101714;
  font-size: 13px;
  line-height: 1.15;
}
.quotation-primary-cell span,
.quotation-description-cell span {
  color: #3f4d44;
  font-size: 12px;
  line-height: 1.2;
}
.quotation-description-cell strong,
.quotation-description-cell span,
.quotation-primary-cell strong,
.quotation-primary-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.quotation-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 18, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.quotation-drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.quotation-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 10010;
  width: clamp(760px, 52vw, 980px);
  max-width: 100vw;
  height: 100vh;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.quotation-drawer.show {
  transform: translateX(0);
  pointer-events: auto;
}
.quotation-drawer-card {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #dfe7e1;
  border-right: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: -24px 0 48px rgba(15, 23, 18, 0.16);
}
.quotation-drawer-head,
.quotation-line-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.quotation-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 22px 24px 18px;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #e6ece8;
}
.quotation-line-head {
  align-items: center;
  margin-bottom: 14px;
}
.quotation-drawer-head h2,
.quotation-line-head h3 {
  margin: 0;
  color: #16251d;
  letter-spacing: 0;
}
.quotation-drawer-head p {
  margin: 6px 0 0;
  color: #6a756e;
}
.quotation-form-grid,
.quotation-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 24px 0;
}
.quotation-form-grid label,
.quotation-notes-grid label {
  min-width: 0;
}
.quotation-line-section {
  margin: 22px 24px 16px;
  border: 1px solid #e4ebe6;
  border-radius: 8px;
  padding: 14px;
  background: #f8faf8;
}
.quotation-line-section .table-wrap {
  overflow-x: auto;
  border: 1px solid #dfe7e1;
  border-radius: 8px;
  background: #fff;
}
.quotation-line-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.quotation-line-table th,
.quotation-line-table td {
  height: 42px;
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2ee;
}
.quotation-line-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f6f4;
  color: #3c4a42;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.quotation-line-table tbody tr:hover {
  background: #fbfcfb;
}
.quotation-line-table th:first-child,
.quotation-line-table td:first-child {
  width: 380px;
}
.quotation-line-table th:nth-child(2),
.quotation-line-table td:nth-child(2) {
  width: 120px;
}
.quotation-line-table th:nth-child(3),
.quotation-line-table td:nth-child(3) {
  width: 120px;
}
.quotation-line-table th:nth-child(4),
.quotation-line-table td:nth-child(4) {
  width: 120px;
}
.quotation-line-table th:nth-child(5),
.quotation-line-table td:nth-child(5) {
  width: 120px;
}
.quotation-line-table th:last-child,
.quotation-line-table td:last-child {
  width: 90px;
  text-align: right;
}
.quotation-line-head div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.quotation-line-table input {
  width: 100%;
  min-width: 72px;
  height: 30px;
  border: 1px solid #d8e1da;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  color: #18251d;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
}
.quotation-line-table input[readonly] {
  background: #f6f8f6;
  color: #4f5f55;
}
.quotation-line-detail {
  margin-top: 3px;
  color: #647067;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.quotation-line-description,
.quotation-line-readonly {
  display: block;
  color: #16251d;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.quotation-line-description {
  font-weight: 700;
}
.quotation-line-readonly {
  color: #425047;
}
.quotation-line-readonly.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.quotation-line-table .icon-btn {
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: 12px;
}
.quotation-request-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid #dfe7e1;
  border-radius: 8px;
  background: #fff;
}
.quotation-request-summary div {
  min-width: 0;
  padding: 9px 11px;
  border-right: 1px solid #edf2ee;
}
.quotation-request-summary div:last-child {
  border-right: 0;
}
.quotation-request-summary span {
  display: block;
  margin-bottom: 3px;
  color: #6c786f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.quotation-request-summary strong {
  display: block;
  color: #17251d;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotation-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 24px;
}
.quotation-totals div {
  border: 1px solid #e1e8e3;
  border-radius: 12px;
  padding: 12px;
  background: #f8fbf8;
}
.quotation-totals span {
  display: block;
  color: #6a756e;
  font-size: 12px;
  font-weight: 700;
}
.quotation-totals strong {
  display: block;
  margin-top: 5px;
  color: #16251d;
}
.quotation-drawer-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  margin-top: 24px;
  padding: 16px 24px;
  border-top: 1px solid #e6ece8;
  justify-content: space-between;
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.06);
}
.quotation-drawer-actions .primary {
  margin-left: auto;
}
#comparativeStatementForm .quotation-drawer-actions {
  gap: 10px;
  justify-content: flex-start;
}
#printComparativeDrawer {
  margin-left: auto;
}
#comparativeStatementForm .quotation-drawer-actions .primary {
  margin-left: 0;
}
.comparative-builder {
  display: grid;
  gap: 14px;
  padding: 20px 24px 0;
  align-content: start;
}
.comparative-drawer {
  width: min(1180px, 94vw);
}
.comparative-drawer-card {
  grid-template-rows: auto 1fr auto;
}
.comparative-meta-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.comparative-meta-form label,
.comparative-recommendation-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #3f4d44;
  font-size: 12px;
  font-weight: 800;
}
.comparative-meta-form input,
.comparative-meta-form select,
.comparative-recommendation-form select,
.comparative-recommendation-form textarea {
  min-height: 38px;
  border: 1px solid #d8e1da;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: #172019;
  font: inherit;
}
.comparative-recommendation-form {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid #e1e8e3;
  border-radius: 8px;
  background: #fff;
}
.comparative-recommendation-form textarea {
  resize: vertical;
}
.comparative-record-grid {
  display: block;
}
.comparative-record-empty {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #e1e8e3;
  border-radius: 8px;
  background: #fff;
  color: #172019;
  text-align: left;
  box-shadow: 0 10px 28px rgba(22, 37, 29, 0.05);
}
.comparative-record-empty strong {
  color: #16251d;
  font-size: 18px;
  line-height: 1.2;
}
.comparative-record-empty span {
  color: #5f6d65;
  font-size: 13px;
  line-height: 1.3;
}
.comparative-record-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e8e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 37, 29, 0.04);
}
.comparative-record-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
}
.comparative-record-table th,
.comparative-record-table td {
  padding: 13px 15px;
  border-bottom: 1px solid #e7eee9;
  color: #172019;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  vertical-align: middle;
}
.comparative-record-table th {
  background: #f6f9f6;
  color: #647269;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comparative-record-table tbody tr:last-child td {
  border-bottom: 0;
}
.comparative-record-row {
  cursor: pointer;
  transition: background 0.16s ease;
}
.comparative-record-row:hover,
.comparative-record-row:focus {
  outline: none;
  background: #f5fbf7;
}
.comparative-record-row strong,
.comparative-record-row span {
  display: block;
}
.comparative-record-row strong {
  color: #172019;
  font-weight: 900;
}
.comparative-record-row span {
  margin-top: 2px;
  color: #5f6d65;
}
.comparative-record-row .muted {
  margin-top: 0;
  color: #819087;
  font-weight: 700;
}
.comparative-record-row .comparative-status-pill {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 0;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}
.comparative-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.comparative-status-pill.status-neutral {
  color: #3f4658;
  background: #eceff4;
}
.comparative-status-pill.status-success {
  color: #007a59;
  background: #e2f6ec;
}
.comparative-status-pill.status-warning {
  color: #99620a;
  background: #fff3d6;
}
.comparative-status-pill.status-danger {
  color: #b42318;
  background: #fee4e2;
}
.comparative-linked-po-select {
  width: 100%;
  min-width: 150px;
  min-height: 36px;
  padding: 7px 30px 7px 10px;
  border: 1px solid #d9e3dc;
  border-radius: 8px;
  background-color: #fff;
  color: #172019;
  font-size: 12px;
  font-weight: 750;
}

.comparative-linked-po-select:disabled {
  color: #819087;
  background-color: #f6f9f6;
  cursor: wait;
}
.comparative-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e1e8e3;
  border-radius: 8px;
  background: #fff;
  align-self: start;
}
.comparative-builder-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 150px;
  color: #3f4d44;
  font-size: 12px;
  font-weight: 800;
}
.comparative-builder-toolbar select,
.comparative-builder-toolbar input,
.comparative-entry-table select,
.comparative-entry-table input {
  min-height: 34px;
  border: 1px solid #d8e1da;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  color: #172019;
  font: inherit;
}
.comparative-table-scroll {
  overflow: auto;
  border: 1px solid #dfe7e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(22, 37, 29, 0.06);
  max-height: calc(100vh - 320px);
}
.comparative-entry-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.comparative-entry-table th,
.comparative-entry-table td {
  padding: 10px;
  border-right: 1px solid #e7ede8;
  border-bottom: 1px solid #e7ede8;
  vertical-align: top;
}
.comparative-entry-table th {
  background: #f4f7f5;
  color: #27362d;
  font-size: 12px;
  text-align: left;
}
.comparative-entry-table thead th:first-child,
.comparative-entry-table tbody td:first-child,
.comparative-entry-table tfoot th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 340px;
  background: #fff;
}
.comparative-entry-table thead th:first-child,
.comparative-entry-table tfoot th:first-child {
  background: #f4f7f5;
}
.comparative-entry-table thead th:not(:first-child) {
  width: 220px;
}
.comparative-entry-table thead th span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}
.comparative-item-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: start;
}
.comparative-item-fields,
.quotation-item-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.comparative-item-fields input:nth-child(2),
.quotation-item-fields input:nth-child(2) {
  grid-column: 1 / -1;
}
.comparative-delete-item {
  width: 34px;
  height: 34px;
  color: #9a2f2f;
  background: #fff5f5;
  border-color: #f0cccc;
}
.comparative-delete-item:hover {
  color: #7a1717;
  background: #ffe8e8;
}
.comparative-entry-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.comparative-entry-fields label {
  display: grid;
  gap: 4px;
  color: #637069;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.comparative-entry-fields strong {
  grid-column: 1 / -1;
  display: block;
  padding: 8px;
  border-radius: 6px;
  background: #f7faf8;
  color: #16251d;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.quotation-line-table td:first-child input,
.quotation-line-table td:nth-child(2) input {
  text-align: left;
}
.comparative-entry-table tfoot th {
  color: #0f3f2a;
  background: #edf8f1;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.comparative-statement-card {
  max-width: 720px;
  overflow: hidden;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: #fff;
  color: #171717;
  font-family: var(--app-font);
  box-shadow: none;
}
.comparative-canvas-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 20px 24px 30px;
  border-bottom: 1px solid #d8d8d8;
}
.comparative-canvas-header h1 {
  margin: 0 0 2px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
}
.comparative-canvas-header p {
  margin: 0;
  color: #2d2d2d;
  font-size: 14px;
  line-height: 1.35;
}
.comparative-canvas-header dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
  color: #686868;
  font-size: 13px;
  text-align: right;
}
.comparative-canvas-header dt,
.comparative-canvas-header dd {
  margin: 0;
  display: inline;
}
.comparative-canvas-header div + dl dt {
  font-weight: 700;
}
.comparative-canvas-header div + dl dd {
  color: #1f1f1f;
}
.comparative-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding: 12px 24px;
  border-bottom: 1px solid #d8d8d8;
  color: #666;
  font-size: 13px;
}
.comparative-meta-grid strong {
  color: #1f1f1f;
}
.comparative-meta-grid .link-like {
  color: #1f6fd6;
}
.comparative-meta-grid .status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f0f0f0;
}
.comparative-table-wrap {
  overflow-x: auto;
  padding: 20px 24px;
}
.comparative-canvas-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 14px;
}
.comparative-canvas-table th,
.comparative-canvas-table td {
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  border-left: 1px solid #e1e1e1;
  padding: 10px;
  vertical-align: middle;
  text-align: left;
}
.comparative-canvas-table th:first-child,
.comparative-canvas-table td:first-child {
  border-left: 0;
}
.comparative-canvas-table th {
  color: #3b3b3b;
  font-weight: 500;
}
.comparative-canvas-table th small {
  display: block;
  margin-top: 6px;
  color: #6c6c6c;
  font-size: 14px;
  font-weight: 600;
}
.comparative-canvas-table .numeric {
  width: 54px;
  text-align: right;
}
.comparative-canvas-table td strong {
  display: block;
}
.comparative-canvas-table td span {
  display: block;
  margin-top: 2px;
}
.comparative-canvas-table .selected-vendor {
  background: #e8f1de;
}
.comparative-canvas-table th.selected-vendor {
  color: #26712d;
  font-weight: 700;
}
.comparative-total-row td {
  border-bottom: 0;
  font-weight: 700;
}
.comparative-selection-fields {
  display: grid;
  gap: 16px;
  padding: 18px 24px 24px;
  border-top: 1px solid #d8d8d8;
}
.comparative-selection-fields label {
  display: grid;
  gap: 6px;
  color: #242424;
  font-size: 14px;
}
.comparative-selection-fields select,
.comparative-selection-fields textarea {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: #fff;
  color: #171717;
  font: inherit;
}
.comparative-selection-fields select {
  min-height: 36px;
  padding: 6px 12px;
}
.comparative-selection-fields textarea {
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}
@media (max-width: 680px) {
  .comparative-canvas-header {
    grid-template-columns: 1fr;
  }
  .comparative-canvas-header dl {
    justify-content: start;
    text-align: left;
  }
  .comparative-meta-grid {
    gap: 12px;
  }
}
.procurement-setup-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.procurement-setup-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.procurement-setup-card {
  width: min(640px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 8px;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.24);
}
.procurement-setup-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #e2e2e2;
}
.procurement-setup-head h2 {
  margin: 0;
  color: #111;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}
.procurement-setup-head p {
  margin: 4px 0 0;
  color: #1f2933;
  font-size: 14px;
  line-height: 1.35;
}
.procurement-setup-head .icon-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #cfd4d8;
  border-radius: 8px;
  color: #222;
  background: #fff;
}
.procurement-setup-body {
  overflow-y: auto;
  padding: 24px;
}
.procurement-setup-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.procurement-setup-summary article {
  min-width: 0;
  min-height: 62px;
  padding: 12px;
  border-radius: 8px;
  background: #f2f1ec;
}
.procurement-setup-summary span,
.procurement-setup-policy span {
  display: block;
  margin-bottom: 4px;
  color: #3f4650;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0;
}
.procurement-setup-summary strong,
.procurement-setup-policy strong {
  display: block;
  min-width: 0;
  color: #111;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.procurement-setup-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.procurement-setup-fields label {
  min-width: 0;
  color: #30343a;
  font-size: 14px;
  font-weight: 700;
}
.procurement-setup-fields input,
.procurement-setup-fields select {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  border: 1px solid #d6dbe0;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-size: 16px;
  line-height: 1.2;
}
.procurement-setup-fields input {
  padding: 0 12px;
}
.procurement-setup-fields select {
  padding: 0 10px;
}
.procurement-setup-policy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  background: #d6e8fb;
}
.procurement-setup-policy span {
  color: #2e65ad;
}
.procurement-setup-policy strong {
  color: #245da4;
}
.procurement-setup-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid #e2e2e2;
  background: #fff;
}
.procurement-setup-actions .secondary,
.procurement-setup-actions .primary {
  min-height: 36px;
  border-radius: 8px;
}
.procurement-setup-actions .primary {
  margin-left: auto;
}
@media (max-width: 900px) {
  .quotation-drawer {
    width: 100vw;
  }
}
@media (max-width: 760px) {
  .quotation-hero,
  .quotation-drawer-head,
  .quotation-line-head {
    flex-direction: column;
  }
  .quotation-tabs {
    gap: 16px;
    overflow-x: auto;
  }
  .quotation-form-grid,
  .quotation-notes-grid,
  .quotation-totals {
    grid-template-columns: 1fr;
  }
  .quotation-drawer-card {
    border-radius: 0;
  }
  .quotation-line-section {
    margin-inline: 18px;
  }
  .quotation-line-section .table-wrap {
    overflow-x: auto;
  }
  .quotation-request-summary {
    grid-template-columns: 1fr;
  }
  .quotation-request-summary div {
    border-right: 0;
    border-bottom: 1px solid #edf2ee;
  }
  .quotation-request-summary div:last-child {
    border-bottom: 0;
  }
  .procurement-setup-modal {
    padding: 14px;
  }
  .procurement-setup-card {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
  }
  .procurement-setup-head,
  .procurement-setup-body,
  .procurement-setup-actions {
    padding-inline: 18px;
  }
  .procurement-setup-summary,
  .procurement-setup-fields,
  .procurement-setup-policy {
    grid-template-columns: 1fr;
  }
}

/* Reports reference-layout overrides (kept last for cascade priority). */
#reportsView{background:#fff!important;color:#171717}
#reportsView .reports-page{width:min(1180px,100%);margin:0 auto;padding:22px 18px 34px;display:grid;gap:16px}
#reportsView .reports-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
#reportsView .reports-page-header h1{margin:0 0 3px;color:#171717;font-size:30px;line-height:1}
#reportsView .reports-page-header p,#reportsView .reports-page-header>span{margin:0;color:#525252;font-size:12px}
#reportsView .report-category-tabs{display:flex;gap:2px;padding:0;border-bottom:1px solid #d9d9d9;overflow-x:auto}
#reportsView .report-category-tab{position:relative;padding:10px 14px 11px;border:0;border-radius:0;background:transparent;color:#303030;font-size:12px;font-weight:600}
#reportsView .report-category-tab.active{background:transparent;color:#111}
#reportsView .report-category-tab.active:after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:#171717}
#reportsView .report-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#reportsView .report-card{min-height:108px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:15px;border:1px solid #d7d7d7;border-radius:9px;background:#fff;color:#171717;box-shadow:none;text-align:left}
#reportsView .report-card.active{border-color:#3182f6;background:#eaf3ff;box-shadow:none}
#reportsView .report-card>span{width:18px;height:18px;display:grid;place-items:center;background:transparent;color:#3b3b3b}
#reportsView .report-card.active>span{color:#2674d9}
#reportsView .report-card strong{font-size:13px}#reportsView .report-card small{color:#3f3f3f;font-size:11px;line-height:1.35}
#reportsView .report-workspace{padding:18px;border:1px solid #d7d7d7;border-radius:9px;background:#fff;box-shadow:none}
#reportsView .report-workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:12px}
#reportsView .report-workspace-head h2{margin:0 0 2px;font-size:15px}#reportsView .report-workspace-head p{margin:0;font-size:11px}
#reportsView .report-export-actions{display:flex;gap:8px}
#reportsView .report-export-actions .secondary,#reportsView .report-search-row .secondary{min-height:31px;padding:6px 13px;border:1px solid #bdbdbd;border-radius:7px;background:#fff;color:#171717;box-shadow:none;font-size:12px}
#reportsView .report-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 9px}
#reportsView .report-filters label{display:grid;gap:5px;font-size:10px}
#reportsView .report-filters input,#reportsView .report-filters select{width:100%;height:32px;padding:5px 10px;border:1px solid #d1d1d1;border-radius:6px;background:#fff;color:#171717;font-size:12px}
#reportsView .report-apply-filter{display:none}
#reportsView .report-search-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:11px}
#reportsView .report-search{min-height:32px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #d1d1d1;border-radius:6px;background:#fff}
#reportsView .report-search input{height:30px;padding:0;border:0;outline:0;font-size:12px}
#reportsView .report-table-wrap{overflow-x:auto;border:0;border-top:1px solid #d9d9d9;border-radius:0;box-shadow:none}
#reportsView .report-table{width:100%;min-width:650px;border-collapse:collapse}
#reportsView .report-table th,#reportsView .report-table td{padding:8px 10px;border:0;border-bottom:1px solid #dedede;background:#fff;color:#171717;font-size:10.5px;line-height:1.3;text-align:left;white-space:normal}
#reportsView .report-table th{color:#404040;font-size:10px;font-weight:600}
#reportsView .report-pagination{justify-content:flex-start;margin-top:8px;font-size:10px}#reportsView .report-pagination .page-btn{display:none}
@media(max-width:760px){#reportsView .report-library{grid-template-columns:1fr}#reportsView .report-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#reportsView .report-workspace-head,#reportsView .reports-page-header{flex-direction:column}}

/* Reports fill the complete portal content area. */
#reportsView .reports-page{
  width:100%;
  max-width:none;
  margin:0;
  padding:20px 28px 34px;
}
#reportsView .reports-page-header{
  min-height:18px;
  justify-content:flex-end;
}
#reportsView .reports-page-header>span{
  padding-top:0;
}
#reportsView .report-library,
#reportsView .report-workspace{
  width:100%;
  max-width:none;
}

/* Blend report navigation into the portal page heading. */
#reportsView .reports-page{
  padding-top:16px;
  gap:16px;
}
#reportsView .report-tabs-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid #d9d9d9;
}
#reportsView .report-tabs-row .report-category-tabs{
  flex:1;
  border-bottom:0;
}
#reportsView .report-tabs-row #reportLastRefreshed{
  flex:0 0 auto;
  padding:0 0 11px;
  color:#525252;
  font-size:12px;
  white-space:nowrap;
}
#reportsView .reports-page-header{
  display:none;
}
@media(max-width:700px){
  #reportsView .report-tabs-row{
    align-items:flex-start;
    flex-direction:column-reverse;
    gap:0;
  }
  #reportsView .report-tabs-row #reportLastRefreshed{
    align-self:flex-end;
    padding-bottom:5px;
  }
  #reportsView .report-tabs-row .report-category-tabs{
    width:100%;
  }
}

/* Unified procurement document family: PO and GRN are the visual source of truth. */
#poDetailModal {
  --proc-doc-border: #e1e7df;
  --proc-doc-line: #edf1ea;
  --proc-doc-ink: #17221d;
  --proc-doc-muted: #66716b;
  --proc-doc-soft: #f8fbf6;
  --proc-doc-green: #08783e;
  --proc-doc-radius: 10px;
  --proc-doc-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

#poDetailModal .document-preview-shell {
  width: 210mm;
  max-width: 100%;
  min-height: auto;
  display: block;
  margin: 0 auto;
  padding: 4mm;
  box-sizing: border-box;
  background: #fff;
}

#poDetailModal .po-sheet.quotation-history-preview:not(.official-document),
#poDetailModal .po-sheet.single-quotation-preview:not(.official-document),
#poDetailModal .po-sheet.comparative-statement-card:not(.official-document) {
  width: min(900px, 100%);
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 26px;
  overflow: visible;
  border: 1px solid #d1d5db;
  border-radius: 0;
  background: #fff;
  color: var(--proc-doc-ink);
  box-shadow: var(--proc-doc-shadow);
  font-family: inherit;
  font-size: 12px;
}

#poDetailModal .po-sheet.official-document {
  width: 202mm;
  max-width: 100%;
  min-height: auto;
  margin: 0 auto;
  padding: 2.5mm;
  overflow: visible;
  border: 1px solid #111;
  border-radius: 0;
  background: #fff;
  color: #111;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.32;
}

#poDetailModal .po-sheet.official-document.po-form-document {
  width: 210mm;
  min-height: 297mm;
  max-width: none;
  padding: 3mm;
  font-size: 9.6px;
  line-height: 1.22;
}

#poDetailModal .ims-document-header {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--proc-doc-border);
  border-top: 5px solid var(--proc-doc-green);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal .ims-document-brand {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--proc-doc-border);
}

#poDetailModal .ims-document-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
}

#poDetailModal .ims-document-brand > div {
  display: grid;
  gap: 2px;
}

#poDetailModal .ims-document-brand strong {
  color: var(--proc-doc-green);
  font-size: 15px;
  font-weight: 850;
}

#poDetailModal .ims-document-brand span {
  color: var(--proc-doc-muted);
  font-size: 11px;
  line-height: 1.3;
}

#poDetailModal .ims-document-heading {
  padding: 16px;
  border-bottom: 1px solid var(--proc-doc-border);
  background: var(--proc-doc-soft);
  text-align: center;
}

#poDetailModal .ims-document-heading p {
  margin: 0 0 4px;
  color: var(--proc-doc-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#poDetailModal .ims-document-heading h1 {
  margin: 0;
  color: var(--proc-doc-ink);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

#poDetailModal .ims-document-heading > span {
  display: block;
  margin-top: 5px;
  color: var(--proc-doc-muted);
  font-size: 12px;
}

#poDetailModal .ims-document-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

#poDetailModal .ims-document-meta > div {
  min-height: 58px;
  padding: 10px 12px;
  border-right: 1px solid var(--proc-doc-line);
  border-bottom: 1px solid var(--proc-doc-line);
}

#poDetailModal .ims-document-meta > div:nth-child(3n) {
  border-right: 0;
}

#poDetailModal .ims-document-meta > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

#poDetailModal .ims-document-meta dt {
  margin: 0 0 5px;
  color: var(--proc-doc-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poDetailModal .ims-document-meta dd {
  margin: 0;
  color: var(--proc-doc-ink);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

#poDetailModal :is(.badge, .ims-print-status, .status-chip) {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid #dbe2dc;
  border-radius: 7px;
  color: #526058;
  background: #f1f4f1;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

#poDetailModal :is(.badge, .ims-print-status, .status-chip)::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: currentColor;
}

#poDetailModal :is(.approved, .received, .converted, .converted-to-po) {
  border-color: #cce5d4;
  color: #08783e;
  background: #eaf7ee;
}

#poDetailModal :is(.pending, .pending-approval, .sent, .open) {
  border-color: #ead9ac;
  color: #8a5a00;
  background: #fff7df;
}

#poDetailModal :is(.rejected, .cancelled, .deleted) {
  border-color: #efcfc9;
  color: #b23a2b;
  background: #fff0ed;
}

#poDetailModal .quotation-history-header {
  min-height: 68px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal .quotation-history-header h1 {
  color: var(--proc-doc-ink);
  font-size: 20px;
  font-weight: 850;
}

#poDetailModal .quotation-history-header p {
  color: var(--proc-doc-muted);
  font-size: 12px;
}

#poDetailModal :is(.quotation-history-summary, .single-quotation-summary) {
  gap: 16px;
  margin-bottom: 28px;
}

#poDetailModal :is(.quotation-history-summary, .single-quotation-summary) article {
  min-height: 86px;
  display: grid;
  align-content: center;
  padding: 16px 18px;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal :is(.quotation-history-summary, .single-quotation-summary) span {
  margin-bottom: 5px;
  color: var(--proc-doc-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poDetailModal :is(.quotation-history-summary, .single-quotation-summary) strong {
  color: var(--proc-doc-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

#poDetailModal .single-quotation-summary .single-quotation-total strong {
  color: var(--proc-doc-green);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

#poDetailModal :is(.quotation-history-section, .single-quotation-section) {
  margin-top: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal :is(.quotation-history-section, .single-quotation-section) > h2,
#poDetailModal .quotation-history-link-card > h2 {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--proc-doc-border);
  color: var(--proc-doc-ink) !important;
  background: var(--proc-doc-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#poDetailModal .quotation-history-list {
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#poDetailModal .quotation-history-table-head {
  grid-template-columns: minmax(92px, .8fr) minmax(160px, 1.5fr) minmax(118px, .9fr) minmax(126px, 1fr) minmax(102px, .8fr) minmax(74px, auto);
  gap: 18px;
  min-height: 46px;
  padding: 0 18px;
}

#poDetailModal .quotation-history-table-head.comparative-head {
  grid-template-columns: minmax(92px, .8fr) minmax(200px, 1.7fr) minmax(118px, .9fr) minmax(150px, 1fr) minmax(74px, auto);
}

#poDetailModal .quotation-history-row {
  grid-template-columns: minmax(92px, .8fr) minmax(160px, 1.5fr) minmax(118px, .9fr) minmax(126px, 1fr) minmax(102px, .8fr) minmax(74px, auto);
  gap: 18px;
  min-height: 64px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--proc-doc-line);
  border-radius: 0;
  background: #fff;
}

#poDetailModal .quotation-history-row.comparative-row {
  grid-template-columns: minmax(92px, .8fr) minmax(200px, 1.7fr) minmax(118px, .9fr) minmax(150px, 1fr) minmax(74px, auto);
}

#poDetailModal .quotation-history-row:last-child {
  border-bottom: 0;
}

#poDetailModal .quotation-history-row:hover {
  background: var(--proc-doc-soft);
}

#poDetailModal .quotation-history-row strong {
  color: var(--proc-doc-ink);
  font-weight: 850;
}

#poDetailModal .quotation-history-vendor {
  color: var(--proc-doc-ink);
  font-weight: 700;
}

#poDetailModal .quotation-history-row b,
#poDetailModal .quotation-history-row time {
  color: var(--proc-doc-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#poDetailModal .quotation-history-row b {
  font-weight: 850;
}

#poDetailModal .quotation-history-row time {
  color: var(--proc-doc-muted);
  font-weight: 700;
}

#poDetailModal .quotation-history-view {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d8dfd9;
  border-radius: 7px;
  color: var(--proc-doc-ink);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

#poDetailModal .quotation-history-view:hover {
  border-color: #b9cbbf;
  background: var(--proc-doc-soft);
}

#poDetailModal .quotation-history-links {
  align-items: stretch;
  gap: 12px;
}

#poDetailModal .quotation-history-link-card {
  min-height: 150px;
  display: grid;
  grid-template-rows: 42px minmax(44px, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal .quotation-history-link-card > strong {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px;
  color: var(--proc-doc-ink);
  font-size: 13px;
  font-weight: 800;
}

#poDetailModal .quotation-history-link-card > div {
  min-height: 46px;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--proc-doc-line);
}

#poDetailModal .quotation-history-link-card > .quotation-history-view {
  position: static;
  justify-self: end;
  margin: 10px 14px 12px;
}

#poDetailModal .single-quotation-section .table-wrap,
#poDetailModal .comparative-table-wrap {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
}

#poDetailModal .single-quotation-lines,
#poDetailModal .comparative-canvas-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  background: #fff;
  font-size: 12px;
}

#poDetailModal :is(.single-quotation-lines, .comparative-canvas-table) th {
  height: 44px;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--proc-doc-line);
  border-bottom: 1px solid var(--proc-doc-border);
  color: var(--proc-doc-muted);
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poDetailModal :is(.single-quotation-lines, .comparative-canvas-table) td {
  min-height: 58px;
  padding: 12px;
  border: 0;
  border-right: 1px solid var(--proc-doc-line);
  border-bottom: 1px solid var(--proc-doc-line);
  color: var(--proc-doc-ink);
  vertical-align: middle;
}

#poDetailModal :is(.single-quotation-lines, .comparative-canvas-table) :is(th, td):last-child {
  border-right: 0;
}

#poDetailModal :is(.single-quotation-lines, .comparative-canvas-table) tbody tr:last-child td {
  border-bottom: 0;
}

#poDetailModal .single-quotation-lines :is(th, td):not(:first-child),
#poDetailModal .single-quotation-lines .numeric,
#poDetailModal .comparative-canvas-table .numeric,
#poDetailModal .comparative-canvas-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#poDetailModal .single-quotation-lines th:first-child {
  width: 34%;
}

#poDetailModal .single-quotation-item-cell strong,
#poDetailModal .single-quotation-item-cell span {
  display: block;
}

#poDetailModal .single-quotation-item-cell strong {
  color: var(--proc-doc-ink);
  font-weight: 850;
}

#poDetailModal .single-quotation-item-cell span {
  margin-top: 5px;
  color: var(--proc-doc-muted);
  font-size: 11px;
  line-height: 1.35;
}

#poDetailModal .single-quotation-term-grid {
  gap: 0;
}

#poDetailModal .single-quotation-term-grid article {
  min-height: 82px;
  padding: 13px 14px;
  border-right: 1px solid var(--proc-doc-line);
  border-bottom: 1px solid var(--proc-doc-line);
  border-radius: 0;
  background: #fff;
}

#poDetailModal .single-quotation-term-grid article:nth-child(2n) {
  border-right: 0;
}

#poDetailModal .single-quotation-term-grid article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

#poDetailModal .single-quotation-term-grid span {
  color: var(--proc-doc-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poDetailModal .comparative-statement-card {
  max-width: 900px;
}

#poDetailModal .comparative-meta-grid {
  gap: 0;
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal .comparative-meta-grid > span {
  min-height: 54px;
  flex: 1 1 180px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid var(--proc-doc-line);
  color: var(--proc-doc-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poDetailModal .comparative-meta-grid > span:last-child {
  border-right: 0;
}

#poDetailModal .comparative-meta-grid strong {
  color: var(--proc-doc-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

#poDetailModal .comparative-meta-grid .link-like {
  color: var(--proc-doc-ink);
}

#poDetailModal .comparative-table-wrap {
  padding: 0;
  overflow: auto;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
}

#poDetailModal .comparative-canvas-table .selected-vendor {
  background: #eef8f0;
}

#poDetailModal .comparative-canvas-table th.selected-vendor {
  color: var(--proc-doc-green);
}

#poDetailModal .comparative-selection-fields {
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
}

#poDetailModal .comparative-selection-fields label {
  color: var(--proc-doc-muted);
  font-size: 11px;
  font-weight: 850;
}

#poDetailModal .comparative-selection-fields :is(select, textarea) {
  border: 1px solid #d8dfd9;
  border-radius: 8px;
  background: #fff;
}

#poDetailModal .ims-approval-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

#poDetailModal .ims-approval-footer > div {
  min-height: 110px;
  padding: 14px;
  border: 1px solid var(--proc-doc-border);
  border-radius: var(--proc-doc-radius);
  background: #fff;
  text-align: center;
}

#poDetailModal .ims-approval-footer span,
#poDetailModal .ims-approval-footer strong,
#poDetailModal .ims-approval-footer small {
  display: block;
}

#poDetailModal .ims-approval-footer span {
  color: var(--proc-doc-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#poDetailModal .ims-approval-footer strong {
  min-height: 18px;
  margin-top: 8px;
  color: var(--proc-doc-ink);
}

#poDetailModal .ims-approval-footer i {
  display: block;
  height: 34px;
  margin: 4px 0 7px;
  border-bottom: 1px solid #aeb8b0;
}

#poDetailModal .ims-approval-footer small {
  color: var(--proc-doc-muted);
  font-size: 10px;
}

#poDetailModal .po-form-document .ims-approval-footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 4px;
  border: 1px solid #111;
}

#poDetailModal .po-form-document .ims-approval-footer > div {
  min-height: 18mm;
  display: block;
  padding: 4px 7px 5px;
  border: 0;
  border-right: 1px solid #111;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

#poDetailModal .po-form-document .ims-approval-footer > div:last-child {
  border-right: 0;
}

#poDetailModal .po-form-document .ims-approval-footer span,
#poDetailModal .po-form-document .ims-approval-footer strong,
#poDetailModal .po-form-document .ims-approval-footer small {
  display: block;
  line-height: 1.25;
}

#poDetailModal .po-form-document .ims-approval-footer span {
  color: #017100;
  font-weight: 900;
  text-transform: uppercase;
}

#poDetailModal .po-form-document .ims-approval-footer strong {
  min-height: 0;
  margin-top: 2px;
  color: #000;
  font-size: 8px;
  font-weight: 800;
}

#poDetailModal .po-form-document .ims-approval-footer i {
  margin: 12mm 0 3px;
  border-bottom: 1px solid #111;
}

/* Quotation entry drawer follows the same PO/GRN drawer surface. */
.quotation-drawer-card {
  border: 1px solid #dfe7e1;
  border-radius: 12px 0 0 12px;
  background: #fff;
  box-shadow: -24px 0 48px rgba(15, 23, 18, .16);
}

.quotation-drawer-head,
.quotation-drawer-actions {
  background: #fff;
  border-color: #e1e7df;
}

.quotation-line-section,
.quotation-request-summary,
.quotation-totals > div {
  border: 1px solid #e1e7df;
  border-radius: 10px;
  background: #f8fbf6;
}

.quotation-line-section .table-wrap {
  border: 1px solid #e1e7df;
  border-radius: 10px;
}

.quotation-line-table th {
  color: #66716b;
  background: #fff;
}

.quotation-line-table td {
  background: #fff;
}

@media (max-width: 720px) {
  #poDetailModal .po-sheet.quotation-history-preview,
  #poDetailModal .po-sheet.single-quotation-preview,
  #poDetailModal .po-sheet.comparative-statement-card {
    padding: 14px;
  }

  #poDetailModal .ims-document-meta,
  #poDetailModal .ims-approval-footer,
  #poDetailModal :is(.quotation-history-summary, .single-quotation-summary),
  #poDetailModal .quotation-history-links,
  #poDetailModal .single-quotation-term-grid {
    grid-template-columns: 1fr;
  }

  #poDetailModal .ims-document-meta > div,
  #poDetailModal .single-quotation-term-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--proc-doc-line);
  }

  #poDetailModal .ims-document-meta > div:last-child,
  #poDetailModal .single-quotation-term-grid article:last-child {
    border-bottom: 0;
  }

  #poDetailModal .quotation-history-row,
  #poDetailModal .quotation-history-row.comparative-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #poDetailModal .quotation-history-table-head {
    display: none;
  }

  #poDetailModal .po-form-document .ims-approval-footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Consistent, unobtrusive scrollbars across pages and scroll containers. */
:root {
  --scrollbar-thumb: rgba(32, 49, 58, .24);
  --scrollbar-thumb-hover: rgba(32, 49, 58, .38);
}

body[data-theme="dark"] {
  --scrollbar-thumb: rgba(232, 238, 242, .24);
  --scrollbar-thumb-hover: rgba(232, 238, 242, .4);
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Graphical reports dashboard */
#reportsView{background:#f5f8f6!important}
#reportsView .reports-page{width:100%;max-width:none;padding:26px 28px 42px;gap:20px}
.analytics-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.analytics-heading h1{margin:0 0 7px;font-size:30px;letter-spacing:-.035em;color:#153326}
.analytics-heading p,.analytics-heading>span{margin:0;color:#66756d;font-size:12px}
.analytics-heading-actions{display:flex;align-items:end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.analytics-heading-actions>span{align-self:center;color:#7b8981;font-size:10px;white-space:nowrap}
.analytics-date-filter{display:flex;align-items:end;gap:7px}
.analytics-date-filter label{display:grid;gap:4px;color:#66756d;font-size:9px;font-weight:700}
.analytics-date-filter input{width:128px;height:34px;padding:5px 8px;border:1px solid #d7e1db;border-radius:8px;background:#fff;color:#20372b;font-size:10px}
.analytics-date-filter .icon-btn{width:34px;height:34px}
.analytics-filter-card{display:flex;align-items:end;gap:12px;padding:15px;border:1px solid #dbe6df;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(20,54,37,.05)}
.analytics-filters{display:grid;grid-template-columns:repeat(6,minmax(125px,1fr));gap:10px;flex:1}
.analytics-filters label{display:grid;gap:5px;color:#526159;font-size:10px;font-weight:700}
.analytics-filters input,.analytics-filters select{width:100%;height:36px;padding:6px 10px;border:1px solid #d7e1db;border-radius:9px;background:#fbfdfc;color:#20372b;font-size:11px}
.analytics-filter-card>.secondary{height:36px;white-space:nowrap}

.report-export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.csv-download-button,
button.csv-download-button {
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #dfe7de;
  border-radius: 9px;
  background: #fff;
  color: #151a17;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.csv-download-button svg,
button.csv-download-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.po-records-head .csv-download-button,
.quotation-hero .csv-download-button,
.section-title .csv-download-button {
  align-self: flex-start;
}

.grn-records-toolbar .csv-download-button,
.vendors-records-toolbar .csv-download-button {
  margin-left: auto;
  flex: 0 0 auto;
}

#vendorsView .vendors-records-toolbar,
#procurementVendorsPanel .vendors-records-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#vendorsView .vendors-search-filter,
#procurementVendorsPanel .vendors-search-filter {
  grid-column: 1;
  width: 100%;
}

#vendorsView .vendors-records-toolbar .csv-download-button,
#procurementVendorsPanel .vendors-records-toolbar .csv-download-button {
  grid-column: 2;
  justify-self: end;
  margin-left: 0;
}

@media (max-width: 760px) {
  .report-export-actions,
  .grn-records-toolbar .csv-download-button,
  .vendors-records-toolbar .csv-download-button {
    margin-left: 0;
  }

  .csv-download-button,
  button.csv-download-button {
    width: 100%;
    justify-content: center;
  }
}
.analytics-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.analytics-kpi{min-height:122px;display:flex;gap:12px;padding:16px;border:1px solid #dbe6df;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(20,54,37,.055)}
.analytics-kpi>span{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#e6f3eb;color:#08783d}
.analytics-kpi svg{width:18px;height:18px}.analytics-kpi div{min-width:0}
.analytics-kpi small{display:block;color:#647269;font-size:10px;font-weight:700}.analytics-kpi strong{display:block;margin-top:7px;color:#173a29;font-size:20px;line-height:1.05;overflow-wrap:anywhere}
.analytics-kpi p{margin:7px 0 0;color:#87938c;font-size:9px;line-height:1.35}
.analytics-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.analytics-chart-card{min-width:0;padding:18px;border:1px solid #dbe6df;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(20,54,37,.05)}
.analytics-chart-card.wide{grid-column:1/-1}.analytics-card-head{margin-bottom:12px}
.analytics-card-head h2{margin:0;color:#20372b;font-size:14px}.analytics-card-head p{margin:4px 0 0;color:#7b8981;font-size:10px}
.analytics-canvas-wrap{position:relative;height:300px;min-height:300px}.analytics-chart-card.wide .analytics-canvas-wrap{height:350px;min-height:350px}
.analytics-canvas-wrap canvas{display:block;width:100%!important;height:100%!important}
.analytics-canvas-wrap canvas[hidden]{display:none!important}
.analytics-chart-empty,.analytics-empty{height:100%;display:grid;place-items:center;align-content:center;gap:7px;color:#839087;text-align:center;font-size:11px}
.analytics-chart-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.analytics-chart-summary>div{display:grid;grid-template-columns:8px 1fr;column-gap:7px;align-items:center;padding:9px;border:1px solid #e1e8e4;border-radius:9px;background:#fafcfb}
.analytics-chart-summary span{width:8px;height:8px;border-radius:50%;background:var(--summary-color)}
.analytics-chart-summary strong,.analytics-chart-summary small{grid-column:2;display:block}.analytics-chart-summary strong{color:#34453c;font-size:9px}.analytics-chart-summary small{margin-top:2px;color:#75827b;font-size:9px}
.analytics-chart-empty[hidden]{display:none}.analytics-empty{grid-column:1/-1;min-height:240px;border:1px dashed #cbd9d0;border-radius:14px;background:#fff}
.analytics-empty svg{color:#08783d}.analytics-empty strong{color:#294537}.analytics-empty p{margin:0}
.analytics-skeleton{overflow:hidden;position:relative;background:#eef3f0}
.analytics-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:analytics-shimmer 1.4s infinite}
@keyframes analytics-shimmer{to{transform:translateX(100%)}}
#reportsView .analytics-downloads{padding:20px;border:1px solid #dbe6df;border-radius:15px;box-shadow:0 8px 24px rgba(20,54,37,.05)}
#reportsView .analytics-downloads .report-library{margin:12px 0 18px;grid-template-columns:repeat(5,minmax(0,1fr))}
#reportsView .analytics-downloads .report-card{min-height:92px;border-color:#dde6e0;border-radius:11px}
#reportsView .analytics-downloads .report-card.active{border-color:#08783d;background:#edf7f1}
.report-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-top:17px;border-top:1px solid #e4ebe7;margin-bottom:12px}
.report-detail-head h3{margin:0;color:#20372b;font-size:14px}.report-detail-head p{margin:4px 0 0;color:#718078;font-size:10px}
#reportsView .legacy-reports-section{display:grid;gap:16px;padding:20px;border:1px solid #dbe6df;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(20,54,37,.05)}
#reportsView .legacy-report-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
#reportsView .legacy-report-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#reportsView .legacy-report-filters label{display:grid;gap:5px;color:#526159;font-size:10px;font-weight:700}
#reportsView .legacy-report-filters input,#reportsView .legacy-report-filters select{width:100%;height:36px;padding:6px 10px;border:1px solid #d7e1db;border-radius:9px;background:#fbfdfc;color:#20372b;font-size:11px}
#reportsView .legacy-report-filters .span-2{grid-column:span 2}
#reportsView .legacy-report-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#reportsView .legacy-report-details{border:1px solid #e1e8e4;border-radius:12px;background:#fafcfb;overflow:hidden}
#reportsView .legacy-report-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 14px;color:#20372b;font-size:12px;font-weight:700;cursor:pointer;list-style:none}
#reportsView .legacy-report-details summary::-webkit-details-marker{display:none}
#reportsView .legacy-report-details summary::after{content:"+";display:grid;place-items:center;width:22px;height:22px;border:1px solid #cbd9d0;border-radius:50%;color:#08783d;background:#fff;font-size:14px;line-height:1}
#reportsView .legacy-report-details[open] summary::after{content:"-"}
#reportsView .legacy-report-details summary small{margin-left:auto;color:#7b8981;font-size:10px;font-weight:600}
#reportsView .legacy-report-details .legacy-report-table-wrap{border-top:1px solid #e1e8e4;background:#fff}
#reportsView .legacy-report-table{min-width:940px}
#reportsView .legacy-report-actions{display:flex;gap:6px}
#reportsView .legacy-report-actions .tiny{width:28px;height:28px;display:inline-grid;place-items:center;padding:0;border:1px solid #d1d1d1;border-radius:6px;background:#fff;color:#171717}
#reportsView .legacy-report-actions svg{width:13px;height:13px}
@media(max-width:1200px){.analytics-kpis{grid-template-columns:repeat(3,1fr)}.analytics-filters{grid-template-columns:repeat(3,1fr)}#reportsView .analytics-downloads .report-library{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1200px){#reportsView .legacy-report-kpis{grid-template-columns:repeat(3,1fr)}#reportsView .legacy-report-filters{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){#reportsView .reports-page{padding:18px 14px 30px}.analytics-heading,.analytics-filter-card,.report-detail-head{flex-direction:column}.analytics-heading-actions{justify-content:flex-start}.analytics-filter-card{align-items:stretch}.analytics-filters{grid-template-columns:repeat(2,1fr)}.analytics-kpis{grid-template-columns:repeat(2,1fr)}.analytics-chart-grid,#reportsView .legacy-report-chart-grid{grid-template-columns:1fr}.analytics-chart-card.wide{grid-column:auto}.analytics-canvas-wrap,.analytics-chart-card.wide .analytics-canvas-wrap{height:300px}#reportsView .legacy-report-filters{grid-template-columns:repeat(2,1fr)}#reportsView .legacy-report-kpis{grid-template-columns:repeat(2,1fr)}#reportsView .analytics-downloads .report-library{grid-template-columns:1fr}}
@media(max-width:470px){.analytics-filters,.analytics-kpis{grid-template-columns:1fr}}
#reportsView .report-pagination .table-pagination .page-btn {
  display: inline-flex !important;
}

.table-wrap table.actions-column-removed,
.requests-scroll table.actions-column-removed,
#grnView .table-wrap table.actions-column-removed,
#poView .table-wrap table.actions-column-removed,
#servicePoView .table-wrap table.actions-column-removed,
#approvalsView .table-wrap table.actions-column-removed,
#vendorsView .table-wrap table.actions-column-removed,
.quotation-card .table-wrap table.actions-column-removed {
  width: 100% !important;
  table-layout: fixed !important;
}

.table-wrap table.actions-column-removed th,
.table-wrap table.actions-column-removed td,
.requests-scroll table.actions-column-removed th,
.requests-scroll table.actions-column-removed td {
  width: auto !important;
}

.table-wrap table.actions-column-removed th:last-child,
.table-wrap table.actions-column-removed td:last-child,
.requests-scroll table.actions-column-removed th:last-child,
.requests-scroll table.actions-column-removed td:last-child,
#grnView .table-wrap table.actions-column-removed th:last-child,
#grnView .table-wrap table.actions-column-removed td:last-child,
#approvalsView .table-wrap table.actions-column-removed th:last-child,
#approvalsView .table-wrap table.actions-column-removed td:last-child,
#vendorsView .table-wrap table.actions-column-removed th:last-child,
#vendorsView .table-wrap table.actions-column-removed td:last-child,
.quotation-card .table-wrap table.actions-column-removed th:last-child,
.quotation-card .table-wrap table.actions-column-removed td:last-child {
  min-width: 0 !important;
  width: auto !important;
}

/* Definitive post-Actions table layout cleanup. This intentionally sits at EOF
   so earlier table-specific action widths cannot reserve empty space. */
:is(.table-wrap, .requests-scroll, .dashboard-scroll, .report-table-wrap) > table.actions-column-removed,
:is(.table-wrap, .requests-scroll, .dashboard-scroll, .report-table-wrap) table.actions-column-removed,
#requestView table.actions-column-removed,
#myRequestsView table.actions-column-removed,
#approvalsView table.actions-column-removed,
#transportView table.actions-column-removed,
#inventoryView table.actions-column-removed,
#issueView table.actions-column-removed,
#poView table.actions-column-removed,
#servicePoView table.actions-column-removed,
#procurementPoPanel table.actions-column-removed,
#procurementServicePoPanel table.actions-column-removed,
#procurementArchivesPanel table.actions-column-removed,
#grnView table.actions-column-removed,
#vendorsView table.actions-column-removed,
#reportsView table.actions-column-removed {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}

:is(.table-wrap, .requests-scroll, .dashboard-scroll, .report-table-wrap) table.actions-column-removed colgroup {
  display: none !important;
}

:is(.table-wrap, .requests-scroll, .dashboard-scroll, .report-table-wrap) table.actions-column-removed :is(th, td),
#requestView table.actions-column-removed :is(th, td),
#myRequestsView table.actions-column-removed :is(th, td),
#approvalsView table.actions-column-removed :is(th, td),
#transportView table.actions-column-removed :is(th, td),
#inventoryView table.actions-column-removed :is(th, td),
#issueView table.actions-column-removed :is(th, td),
#poView table.actions-column-removed :is(th, td),
#servicePoView table.actions-column-removed :is(th, td),
#procurementPoPanel table.actions-column-removed :is(th, td),
#procurementServicePoPanel table.actions-column-removed :is(th, td),
#procurementArchivesPanel table.actions-column-removed :is(th, td),
#grnView table.actions-column-removed :is(th, td),
#vendorsView table.actions-column-removed :is(th, td),
#reportsView table.actions-column-removed :is(th, td) {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
}

#poView .po-records-card .table-wrap:has(#poTable) table.actions-column-removed :is(th, td):nth-child(1),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) table.actions-column-removed :is(th, td):nth-child(1),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) table.actions-column-removed :is(th, td):nth-child(1),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) table.actions-column-removed :is(th, td):nth-child(1) {
  width: 36% !important;
}

#poView .po-records-card .table-wrap:has(#poTable) table.actions-column-removed :is(th, td):nth-child(5),
#servicePoView .po-records-card .table-wrap:has(#servicePoTable) table.actions-column-removed :is(th, td):nth-child(5),
#procurementPoPanel .po-records-card .table-wrap:has(#poTable) table.actions-column-removed :is(th, td):nth-child(5),
#procurementServicePoPanel .po-records-card .table-wrap:has(#servicePoTable) table.actions-column-removed :is(th, td):nth-child(5) {
  text-align: right !important;
}

#vendorsView .vendors-records-card .table-wrap {
  overflow-x: hidden !important;
}

#vendorsView .vendors-records-card table.actions-column-removed {
  table-layout: fixed !important;
}

#vendorsView .vendors-records-card table.actions-column-removed :is(th, td) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

#vendorsView .vendors-records-card table.actions-column-removed :is(th, td):first-child,
#vendorsView .vendors-records-card table.actions-column-removed :is(th, td):nth-child(10) {
  width: 16% !important;
}

#procurementArchivesPanel .legacy-archive-card .table-wrap {
  overflow-x: hidden !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table :is(th, td) {
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table :is(th, td):last-child {
  text-align: left !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="type"] {
  width: 6% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="reference"] {
  width: 12% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="vendor"] {
  width: 10% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="date"] {
  width: 13% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="amount"] {
  width: 10% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="status"] {
  width: 11% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="file"] {
  width: 24% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="imported"] {
  width: 14% !important;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="imported"] span,
#procurementArchivesPanel .legacy-archive-card .legacy-archive-table [data-legacy-column="imported"] small,
#procurementArchivesPanel .legacy-archive-card .legacy-archive-table .legacy-file-cell {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table .legacy-file-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

#procurementArchivesPanel .legacy-archive-card .legacy-archive-table .legacy-file-cell svg {
  flex: 0 0 auto;
}

/* IIMS responsive foundation
   Breakpoints: desktop 1024px+, tablet 768-1023px, mobile <768px, small mobile <480px. */
html {
  overflow-x: hidden;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

.responsive-page,
.view.active,
.main-content,
.card,
.form-card,
.table-card,
.po-records-card,
.legacy-archive-card,
.approval-detail-card,
.po-detail-card {
  min-width: 0;
  max-width: 100%;
}

.responsive-grid,
.dashboard-stats,
.summary-kpis,
.inventory-kpi-grid,
.inventory-items-grid,
.warehouse-grid,
.category-grid,
.finance-budget-grid,
.budget-lines-grid,
.donor-grid,
.analytics-kpis,
.analytics-chart-grid,
#reportsView .report-library,
#reportsView .legacy-report-kpis,
#reportsView .legacy-report-chart-grid {
  min-width: 0;
}

.responsive-table-wrapper,
.table-wrap,
.requests-scroll,
.dashboard-scroll,
.report-table-wrap,
.legacy-report-table-wrap,
.comparative-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.responsive-table-wrapper > table,
.table-wrap > table,
.requests-scroll > table,
.dashboard-scroll > table,
.report-table-wrap > table {
  max-width: none;
}

.mobile-card-list {
  display: grid;
  gap: 12px;
}

.responsive-tabs,
.inventory-module-tabs,
.settings-tabs,
.report-category-tabs,
.notification-tabs,
.legacy-archive-tabs,
.quotation-workflow-tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.responsive-tabs > *,
.inventory-module-tabs > *,
.settings-tabs > *,
.report-category-tabs > *,
.notification-tabs > *,
.legacy-archive-tabs > *,
.quotation-workflow-tabs > * {
  flex: 0 0 auto;
}

.responsive-filters,
.temporal-filter-bar,
.report-filters,
.legacy-report-filters,
.analytics-filters,
.po-records-toolbar,
.grn-records-toolbar,
.vendors-records-toolbar,
.inventory-filters,
.archive-filters,
.request-filters,
.approval-filters {
  min-width: 0;
  max-width: 100%;
}

.mobile-full-width-actions,
.form-actions,
.report-export-actions,
.po-row-actions,
.grn-row-actions,
.legacy-report-actions,
.record-preview-actions,
.quotation-drawer-actions,
.modal-head-actions {
  min-width: 0;
  flex-wrap: wrap;
}

.topbar-sidebar-toggle {
  display: none;
  flex: 0 0 38px;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
.primary,
.secondary,
.danger-btn,
.tiny,
.page-btn,
.inventory-module-tab,
.status-badge,
.chip {
  max-width: 100%;
}

h1,
h2,
h3,
p,
span,
strong,
small,
td,
th,
label,
button {
  overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .app-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  .view {
    padding: 20px 18px;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding-inline: 18px !important;
  }

  .topbar-sidebar-toggle {
    display: inline-grid !important;
  }

  .topbar-breadcrumb {
    min-width: 0;
  }

  .search {
    width: min(360px, 38vw) !important;
    min-width: 160px;
  }

  .dashboard-stats,
  .summary-kpis,
  .inventory-kpi-grid,
  .inventory-items-grid,
  .warehouse-grid,
  .category-grid,
  .finance-budget-grid,
  .budget-lines-grid,
  .donor-grid,
  .analytics-kpis,
  #reportsView .legacy-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .form-grid,
  .po-entry-columns,
  .po-amount-grid,
  .inventory-item-modal-grid,
  .budget-line-edit-body,
  .quotation-drawer-grid,
  .comparative-drawer-grid,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .span-2,
  .po-amount-grid .span-2,
  #reportsView .legacy-report-filters .span-2 {
    grid-column: auto !important;
  }

  .modal-card,
  .po-modal-card,
  .po-detail-card,
  .approval-detail-card,
  .inventory-detail-card,
  .budget-line-history-card,
  .budget-line-edit-card {
    width: min(100%, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .stock-issue-drawer,
  .stock-transfer-drawer,
  .po-drawer,
  .grn-drawer,
  .vendor-drawer,
  .team-user-drawer,
  .quotation-drawer,
  .comparative-drawer {
    width: min(720px, 100vw) !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 767px) {
  body:has(.app-shell.sidebar-open) {
    overflow: hidden;
  }

  .app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(16, 24, 20, .36);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  .app-shell.sidebar-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar,
  .app-shell:not(.sidebar-collapsed) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1100 !important;
    width: min(86vw, 318px) !important;
    min-width: 0 !important;
    max-width: 318px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 18px 16px !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: 24px 0 48px rgba(20, 35, 45, .18) !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    visibility: visible !important;
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .app-shell.sidebar-collapsed .sidebar * {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app-shell.sidebar-collapsed .brand-copy,
  .app-shell.sidebar-collapsed .sidebar-company-card,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-item > span:last-child,
  .app-shell.sidebar-collapsed .sidebar-footer {
    display: flex !important;
  }

  .app-shell.sidebar-collapsed .nav-item,
  .app-shell.sidebar-collapsed .nav-item:not(.has-more),
  .sidebar .nav-item,
  .sidebar .nav-section-toggle {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    justify-items: start !important;
  }

  .sidebar .nav-section-toggle {
    grid-template-columns: 28px minmax(0, 1fr) 14px !important;
  }

  .side-nav {
    margin-top: 22px !important;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 700;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding: 10px 12px !important;
    min-height: auto !important;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
  }

  .topbar-breadcrumb {
    overflow: hidden;
  }

  .topbar-breadcrumb span {
    display: none;
  }

  .top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    order: 4;
  }

  .page-head,
  .inventory-page-header,
  .reports-page-header,
  .analytics-heading,
  .po-records-head,
  .quotation-hero,
  .section-title:has(button),
  .report-detail-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .page-title,
  .inventory-page-header > div,
  .section-title {
    min-width: 0;
  }

  .page-title h1,
  .inventory-page-header h1,
  .reports-page-header h1,
  .analytics-heading h1 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.15 !important;
  }

  .view,
  .view.active#dashboardView,
  #reportsView .reports-page {
    padding: 16px 12px 28px !important;
  }

  .card,
  .form-card,
  .table-card,
  .po-records-card,
  .legacy-archive-card,
  .analytics-chart-card,
  #reportsView .legacy-reports-section,
  #reportsView .analytics-downloads {
    border-radius: 10px;
    padding: 14px !important;
  }

  .dashboard-stats,
  .summary-kpis,
  .procurement-kpis,
  .inventory-kpi-grid,
  .inventory-items-grid,
  .warehouse-grid,
  .category-grid,
  .finance-budget-grid,
  .budget-lines-grid,
  .donor-grid,
  .tile-row,
  .metric-grid,
  .analytics-kpis,
  .analytics-chart-grid,
  .analytics-chart-summary,
  #reportsView .report-library,
  #reportsView .legacy-report-kpis,
  #reportsView .legacy-report-chart-grid,
  #reportsView .analytics-downloads .report-library {
    grid-template-columns: 1fr !important;
  }

  .form-grid,
  .line-row,
  .item-type-row,
  .po-item-row,
  .budget-line-edit-grid,
  .legacy-report-filters,
  .analytics-filters,
  #reportsView .report-filters,
  #reportsView .legacy-report-filters,
  .report-search-row,
  #vendorsView .vendors-records-toolbar,
  #procurementVendorsPanel .vendors-records-toolbar {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  .primary,
  .secondary,
  .danger-btn,
  .page-btn,
  .csv-download-button,
  button.csv-download-button {
    min-height: 42px;
  }

  .form-actions,
  .inventory-item-modal-actions,
  .quotation-drawer-actions,
  .report-export-actions,
  .requisition-actions,
  .analytics-heading-actions,
  .po-items-toolbar,
  .pagination {
    width: 100%;
    justify-content: stretch !important;
  }

  .form-actions > button,
  .inventory-item-modal-actions > button,
  .quotation-drawer-actions > button,
  .report-export-actions > button,
  .requisition-actions > button,
  .po-items-toolbar > button,
  .analytics-heading-actions > button {
    width: 100% !important;
    justify-content: center !important;
  }

  .responsive-tabs,
  .inventory-module-tabs,
  .settings-tabs,
  .report-category-tabs,
  .notification-tabs,
  .legacy-archive-tabs,
  .quotation-workflow-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 4px;
  }

  .inventory-module-tab,
  .report-category-tab,
  .settings-tab,
  .legacy-archive-tab,
  .notification-tab {
    min-width: max-content;
    white-space: nowrap;
  }

  .temporal-filter-bar {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    box-shadow: none !important;
  }

  .temporal-filter-wrap:not(.open) .temporal-filter-bar {
    display: none !important;
  }

  .table-wrap,
  .requests-scroll,
  .dashboard-scroll,
  .report-table-wrap,
  .legacy-report-table-wrap {
    margin-inline: -2px;
    padding-bottom: 4px;
  }

  .table-wrap table,
  .requests-scroll table,
  .report-table-wrap table,
  #reportsView .report-table,
  #reportsView .legacy-report-table,
  .legacy-archive-table,
  .quotation-line-table,
  .comparative-record-table,
  .comparative-canvas-table {
    width: max-content !important;
    min-width: min(720px, calc(100vw + 220px)) !important;
    table-layout: auto !important;
  }

  .table-wrap table.actions-column-removed,
  .requests-scroll table.actions-column-removed,
  .report-table-wrap table.actions-column-removed {
    width: max-content !important;
    min-width: min(680px, calc(100vw + 180px)) !important;
  }

  .table-wrap :is(th, td),
  .requests-scroll :is(th, td),
  .report-table-wrap :is(th, td) {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .po-row-actions,
  .grn-row-actions,
  .legacy-report-actions,
  .record-preview-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }

  .po-row-actions > *,
  .grn-row-actions > *,
  .legacy-report-actions > *,
  .record-preview-actions > * {
    flex: 1 1 auto;
  }

  .notification-center {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal-backdrop {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .modal-card,
  .po-modal-card,
  .po-detail-card,
  .approval-detail-card,
  .inventory-detail-card,
  .budget-line-history-card,
  .budget-line-edit-card,
  .record-preview-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }

  .stock-issue-drawer,
  .stock-transfer-drawer,
  .po-drawer,
  .grn-drawer,
  .vendor-drawer,
  .team-user-drawer,
  .quotation-drawer,
  .comparative-drawer {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    transform: translateY(100%) !important;
  }

  .stock-issue-drawer.show,
  .stock-transfer-drawer.show,
  .po-drawer.show,
  .grn-drawer.show,
  .vendor-drawer.show,
  .team-user-drawer.show,
  .quotation-drawer.show,
  .comparative-drawer.show {
    transform: translateY(0) !important;
  }

  .stock-issue-drawer-card,
  .stock-transfer-drawer-card,
  .po-drawer-card,
  .grn-drawer-card,
  .vendor-drawer-card,
  .team-user-drawer-card,
  .quotation-drawer-card,
  .comparative-drawer-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }

  .po-preview-wrap,
  .record-preview-body,
  .legacy-record-preview-body,
  #approvalDetailContent,
  #poDetailContent,
  #inventoryDetailBody {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 479px) {
  .topbar {
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  .topbar-breadcrumb {
    font-size: 11px !important;
  }

  .top-actions .icon-btn,
  .topbar-sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .view,
  .view.active#dashboardView,
  #reportsView .reports-page {
    padding-inline: 10px !important;
  }

  .card,
  .form-card,
  .table-card,
  .po-records-card,
  .legacy-archive-card,
  .analytics-chart-card,
  #reportsView .legacy-reports-section,
  #reportsView .analytics-downloads {
    padding: 12px !important;
  }

  .section-title {
    margin-bottom: 14px;
  }

  .table-wrap table,
  .requests-scroll table,
  .report-table-wrap table,
  #reportsView .report-table,
  #reportsView .legacy-report-table,
  .legacy-archive-table {
    min-width: 620px !important;
  }

  .pagination {
    gap: 8px;
  }

  .pagination span,
  .page-btn {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
}
/* Individually traceable assets */
.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: rgba(15, 118, 110, 0.06);
}

.asset-records-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(6, minmax(135px, 1fr)) auto;
  align-items: center;
  gap: 10px;
}

#inventoryAssetsPanel .po-search-filter {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  color: #7b8780;
  background: #fff;
}

#inventoryAssetsPanel .po-search-filter svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

#inventoryAssetsPanel .po-search-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #17221d;
  background: transparent;
  font-size: 13px;
}

#inventoryAssetsPanel .po-vendor-filter {
  min-width: 0;
}

#inventoryAssetsPanel .po-vendor-filter input,
#inventoryAssetsPanel .po-vendor-filter select {
  width: 100%;
  height: 38px;
  border: 1px solid #e1e7df;
  border-radius: 10px;
  padding: 0 12px;
  color: #66716b;
  background: #fff;
  outline: 0;
  font-size: 13px;
}

#inventoryAssetsPanel #clearAssetFilters {
  min-height: 38px;
  border-radius: 10px;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .asset-records-toolbar {
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .asset-records-toolbar {
    grid-template-columns: 1fr;
  }
}

.asset-detail-drawer .warehouse-detail-panel {
  max-width: 720px;
  overflow-y: auto;
}

.asset-detail-section {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 14px 0;
}

.asset-detail-section h3 {
  font-size: 0.92rem;
  margin: 0 0 10px;
}

.asset-detail-section dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
}

.asset-detail-section dt {
  color: var(--muted, #64748b);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.asset-detail-section dd {
  margin: 2px 0 0;
  font-weight: 700;
}

.asset-history-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.asset-history-list li {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

.asset-history-list span,
.asset-history-list small {
  color: var(--muted, #64748b);
  display: block;
}

.grn-asset-fields,
.legacy-asset-fields {
  display: grid;
  gap: 12px;
  padding: 10px;
}

.grn-asset-unit {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  padding: 10px;
}

.grn-asset-unit > strong {
  display: block;
  margin-bottom: 8px;
}
.batch-allocation-list {
  border: 1px solid var(--border-color, #d9e2dc);
  border-radius: 12px;
  background: var(--surface-subtle, #f8faf9);
  max-height: 240px;
  overflow: auto;
}

.batch-allocation-list > p {
  margin: 0;
  padding: 14px;
  color: var(--muted, #66736b);
}

.batch-allocation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.batch-allocation-table th,
.batch-allocation-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-color, #e2e8e4);
  text-align: left;
  white-space: nowrap;
}

.batch-allocation-table input[type="number"] {
  min-width: 90px;
  width: 100%;
}

.batch-allocation-list[data-mode="fifo"] .batch-manual-control {
  display: none;
}

.multi-item-lines {
  display: grid;
  gap: 12px;
}

.multi-item-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color, #d9e2dc);
  border-radius: 14px;
  background: var(--surface-subtle, #f8faf9);
}

.multi-item-line-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.multi-item-line .batch-allocation-list {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .multi-item-line {
    grid-template-columns: 1fr;
  }
}

/* Inventory item detail — compact reference layout */
.inventory-detail-card {
  width: min(865px, calc(100vw - 24px));
  max-height: min(790px, calc(100vh - 24px));
  border: 1px solid #dbe3ed;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(30, 45, 70, .14);
}

.inventory-detail-card .modal-head {
  min-height: 92px;
  padding: 22px 27px;
  align-items: flex-start;
  background: #fff;
}

.inventory-detail-card .modal-head .section-title {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
}

.inventory-detail-card .modal-head .section-title h2 {
  margin: 0;
  color: #07142d;
  font-size: 21px;
  line-height: 1.2;
}

.inventory-detail-card .modal-head .section-title p {
  margin: 0;
  color: #61708a;
  font-size: 13px;
}

.inventory-detail-card .modal-head-actions {
  gap: 10px;
}

.inventory-detail-card .modal-head-actions .icon-btn {
  color: #687994;
  background: transparent;
  border-color: transparent;
}

.inventory-detail-body {
  padding: 0;
  background: #fff;
}

.inventory-detail-summary {
  display: block;
  padding: 20px 27px;
  border-bottom: 1px solid #dbe3ed;
}

.inventory-detail-facts {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr 1.15fr;
  gap: 0;
}

.inventory-detail-facts div {
  min-height: 58px;
  padding: 0 23px;
  border: 0;
  border-right: 1px solid #dbe3ed;
  border-radius: 0;
  background: transparent;
}

.inventory-detail-facts div:first-child {
  padding-left: 0;
}

.inventory-detail-facts div:last-child {
  padding-right: 0;
  border-right: 0;
}

.inventory-detail-facts span {
  color: #5e6d86;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.inventory-detail-facts strong {
  color: #07142d;
  font-size: 16px;
  line-height: 1.25;
}

.inventory-detail-facts .inventory-detail-value {
  color: #07883f;
}

.inventory-detail-types,
.inventory-detail-stock {
  margin: 0;
  padding: 24px 27px 28px;
  border-bottom: 1px solid #dbe3ed;
}

.inventory-detail-section-head h3,
.inventory-detail-stock > h3 {
  margin: 0 0 16px;
  color: #07142d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.inventory-add-type-link,
.inventory-inline-action,
.inventory-delete-link {
  border: 0;
  padding: 0;
  color: #07883f;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.inventory-add-type-link {
  font-size: 13px;
}

.inventory-add-type-link:hover,
.inventory-add-type-link:focus-visible,
.inventory-inline-action.save:hover,
.inventory-inline-action.save:focus-visible {
  color: #056b31;
}

.inventory-detail-type-table {
  margin: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
}

.inventory-detail-type-table th,
.inventory-detail-type-table td {
  padding: 13px 10px;
  border-bottom: 1px solid #dbe3ed;
}

.inventory-detail-type-table th:first-child,
.inventory-detail-type-table td:first-child {
  padding-left: 0;
}

.inventory-detail-type-table th {
  color: #5e6d86;
  font-size: 11px;
  letter-spacing: .03em;
}

.inventory-detail-type-table td {
  color: #07142d;
  font-size: 14px;
}

.inventory-detail-type-table code {
  color: #65718a;
  background: transparent;
}

.inventory-type-status {
  min-height: 24px;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
}

.inventory-type-status::before,
.inventory-detail-stock-row small::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.inventory-cost-cell {
  min-width: 205px;
}

.inventory-cost-control {
  gap: 13px;
}

.inventory-cost-cell input {
  width: 74px;
  min-height: 34px;
  text-align: center;
}

.inventory-inline-action {
  font-size: 13px;
}

.inventory-inline-action.delete,
.inventory-delete-link {
  color: #ef3434;
}

.inventory-detail-stock > h3 {
  margin-bottom: 4px;
}

.inventory-detail-type-stock {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.inventory-detail-type-stock + .inventory-detail-type-stock {
  margin-top: 25px;
}

.inventory-detail-type-stock summary {
  padding: 0 0 12px;
  cursor: default;
}

.inventory-detail-type-stock summary::marker {
  display: none;
  content: "";
}

.inventory-detail-type-stock summary span {
  color: #07142d;
}

.inventory-detail-type-stock summary strong {
  color: #65718a;
  font-size: 13px;
  font-weight: 500;
}

.inventory-detail-stock-columns,
.inventory-detail-stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 150px;
  align-items: center;
  gap: 14px;
}

.inventory-detail-stock-columns {
  min-height: 34px;
  border-bottom: 1px solid #dbe3ed;
  color: #5e6d86;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.inventory-detail-stock-row {
  min-height: 61px;
  border-top: 0;
  border-bottom: 1px solid #dbe3ed;
}

.inventory-detail-stock-row > span {
  color: #07142d;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.inventory-detail-stock-row input {
  width: 74px;
  height: 34px;
  justify-self: start;
  text-align: right;
}

.inventory-detail-stock-row small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inventory-detail-card .inventory-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 27px;
  background: #f7f9fc;
}

.inventory-detail-footer > div {
  display: flex;
  gap: 12px;
}

.inventory-detail-footer .primary,
.inventory-detail-footer .primary:hover,
.inventory-detail-footer .primary:focus,
.inventory-detail-footer .primary:active {
  color: #fff;
  background: #07883f;
  border-color: #07883f;
}

.inventory-detail-footer .primary:hover {
  background: #067536;
  border-color: #067536;
}

.inventory-detail-footer .primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(7, 136, 63, .2);
}

@media (max-width: 720px) {
  .inventory-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .inventory-detail-facts div:nth-child(2) {
    border-right: 0;
  }

  .inventory-detail-stock-columns,
  .inventory-detail-stock-row {
    grid-template-columns: minmax(0, 1fr) 82px 105px;
  }
}