html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6a6a8a; }

.sidebar-item { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.sidebar-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.25s; }
.sidebar-item:hover { background: rgba(99, 102, 241, 0.1); }
.sidebar-item:hover::before { background: #818cf8; }
.sidebar-item.active { background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), transparent); }
.sidebar-item.active::before { background: #6366f1; }

.glass-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(10px); contain: content; }
.btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); transition: all 0.2s; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); transition: all 0.2s; }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4); }
.btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-csv { background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(251,191,36,0.14)); border: 1px solid rgba(251,191,36,0.28); color: #fde68a; font-weight: 700; letter-spacing: 0.02em; transition: all 0.2s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.btn-csv:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(249,115,22,0.24), rgba(251,191,36,0.18)); box-shadow: 0 10px 24px rgba(249,115,22,0.16); }

.form-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; transition: all 0.2s; }
.form-input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.form-input::placeholder { color: #64748b; }

.table-row { transition: background 0.15s; }
.table-row:hover { background: rgba(99, 102, 241, 0.05); }

.modal-overlay { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); animation: fadeIn 0.2s; }
.modal-content { animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.tooltip-wrap { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.tooltip-anchor { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; cursor: pointer; }
.tooltip-anchor-text {
  min-width: 0;
  max-width: 100%;
  text-decoration: underline dotted rgba(165,180,252,0.24);
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.tooltip-wrap:hover .tooltip-anchor-text {
  color: #c7d2fe;
  text-decoration-color: rgba(165,180,252,0.62);
}
.tooltip-wrap .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 999999;
  left: var(--ims-tooltip-left, -9999px);
  top: var(--ims-tooltip-top, -9999px);
  bottom: auto;
  transform: translate3d(0, 8px, 0) scale(0.985);
  width: max-content;
  min-width: 220px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(17,24,39,0.98), rgba(30,27,75,0.98));
  border: 1px solid rgba(129,140,248,0.26);
  box-shadow: 0 18px 45px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  pointer-events: none;
  overflow: visible;
  transform-origin: top center;
  backdrop-filter: blur(14px);
}
.tooltip-wrap .tooltip-text::after {
  content: '';
  position: absolute;
  left: var(--ims-tooltip-arrow-left, 50%);
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(30, 27, 75, 0.98);
  border-right: 1px solid rgba(129,140,248,0.26);
  border-bottom: 1px solid rgba(129,140,248,0.26);
  transform: translateX(-50%) rotate(45deg);
}
.tooltip-wrap[data-tooltip-placement="bottom"] .tooltip-text::after {
  top: -7px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(129,140,248,0.26);
  border-top: 1px solid rgba(129,140,248,0.26);
}
.tooltip-wrap.is-tooltip-active .tooltip-text,
.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus-within .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.tooltip-cell, .item-code-cell, .item-name-cell { overflow: visible !important; }
.tooltip-card-title {
  padding: 9px 12px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tooltip-card-body {
  padding: 10px 12px 12px;
  color: #e0e7ff;
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
}

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.badge-danger { background: rgba(239,68,68,0.15); color: #fca5a5; }
.badge-success { background: rgba(34,197,94,0.15); color: #86efac; }
.badge-warning { background: rgba(245,158,11,0.15); color: #fcd34d; }

.calendar-container { background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; }
.cal-day { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.cal-day:hover { background: rgba(99,102,241,0.2); }
.cal-day.in-range { background: rgba(99,102,241,0.15); }
.cal-day.range-start, .cal-day.range-end { background: #6366f1; color: white; font-weight: 600; }
.cal-day.other-month { color: #4a5568; }
.cal-day.today { border: 1px solid #6366f1; }

.dropdown-list { max-height: 180px; overflow-y: auto; background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
.dropdown-item { padding: 8px 12px; cursor: pointer; transition: background 0.15s; font-size: 13px; }
.dropdown-item:hover { background: rgba(99,102,241,0.15); }

.raw-material-row { background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.1); border-radius: 8px; padding: 10px; margin-bottom: 6px; animation: slideUp 0.2s; }

.stat-card { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.05)); border: 1px solid rgba(99,102,241,0.15); }

.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.export-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 6px 14px; border-radius: 8px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; cursor: pointer; color: #cbd5e1; }
.export-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }

.checkbox-custom { appearance: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.2); border-radius: 4px; background: transparent; cursor: pointer; transition: all 0.15s; position: relative; }
.checkbox-custom:checked { background: #6366f1; border-color: #6366f1; }
.checkbox-custom:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 12px; font-weight: bold; }


.ultra-table-shell {
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.ultra-table-head-wrap,
.ultra-table-body-wrap {
  overflow-x: auto;
}
.ultra-table-head {
  border-bottom: 1px solid rgba(99,102,241,0.22);
  box-shadow: inset 0 -1px 0 rgba(99,102,241,0.15);
}
.ultra-table-body-wrap {
  max-height: calc(52px * 7);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  background: rgba(6,10,24,0.18);
  contain: layout paint style;
  will-change: scroll-position;
}
.ultra-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.ultra-table th,
.ultra-table td {
  vertical-align: middle;
}
.ultra-table th {
  font-weight: 700;
}
.ultra-table td {
  line-height: 1.15;
}
.ultra-table thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ultra-table tbody tr.data-row td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
}
.ultra-table tbody tr.data-row:hover td {
  background: rgba(99,102,241,0.05);
}
.ultra-table tbody tr.details-row td {
  white-space: normal;
  padding-top: 0;
}
.ultra-table tbody tr.details-row > td > div {
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.ultra-table .actions-cell {
  text-align: right;
}
.ultra-table .numeric-cell,
.ultra-table .mono-cell {
  font-variant-numeric: tabular-nums;
}
.ultra-table-head thead th {
  background: #0d0d1f;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}
.table-empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== PERFECT ZEBRA ROWS ===== */
.ultra-table tbody tr.data-row:nth-of-type(4n+1) td,
.ultra-table tbody tr.data-row:nth-of-type(4n+2) td {
  background: rgba(255,255,255,0.018);
}
.ultra-table tbody tr.data-row:nth-of-type(4n+3) td,
.ultra-table tbody tr.data-row:nth-of-type(4n+4) td {
  background: rgba(255,255,255,0.038);
}
.ultra-table tbody tr.data-row:hover td {
  background: rgba(99,102,241,0.10) !important;
}
.ultra-table tbody tr.data-row:nth-of-type(4n+1) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+1) td.sticky-col-2,
.ultra-table tbody tr.data-row:nth-of-type(4n+2) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+2) td.sticky-col-2 {
  background: rgba(18, 22, 38, 0.99);
}
.ultra-table tbody tr.data-row:nth-of-type(4n+3) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+3) td.sticky-col-2,
.ultra-table tbody tr.data-row:nth-of-type(4n+4) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+4) td.sticky-col-2 {
  background: rgba(24, 29, 48, 0.99);
}
.ultra-table tbody tr.data-row:hover td.sticky-col-1,
.ultra-table tbody tr.data-row:hover td.sticky-col-2 {
  background: rgba(40,48,88,0.99) !important;
}


/* ===== ITEM VIEW PRO MAX ===== */
.ultra-table .item-name-cell {
  white-space: normal !important;
  word-break: break-word;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.35;
}
.ultra-table tbody tr.data-row.has-item-wrap td {
  height: auto;
  min-height: 40px;
}
.ultra-table .item-name-inner {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ultra-table .item-name-plain {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.ultra-table .item-name-tooltip {
  max-width: 420px;
}


.lucide { display:inline-block; vertical-align:middle; }

/* ===== ICON SYSTEM PRO MAX ===== */
.lucide {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-btn i,
button i,
.sidebar-item i,
header i,
footer i {
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
}
button:hover i,
.icon-btn:hover i {
  transform: translateY(-1px) scale(1.03);
}
.sidebar-item:hover i {
  transform: scale(1.05);
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-edit i { color: #818cf8; }
.icon-delete i { color: #f87171; }
.icon-print i { color: #22d3ee; }
.icon-csv i { color: #fcd34d; }
.icon-add i { color: #ffffff; }


/* ===== ACTIONS PRO MAX++ ===== */
.action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: 10px;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid transparent;
}
.action-btn:hover {
  transform: translateY(-1px) scale(1.03);
}
.action-btn:active {
  transform: translateY(0) scale(.98);
}
.action-btn:focus-visible {
  outline: none;
  border-color: rgba(129,140,248,.55);
  box-shadow: 0 0 0 3px rgba(99,102,241,.20);
}
.action-btn.is-busy {
  opacity: .7;
  pointer-events: none;
}

/* ===== INWARD / OUTWARD PRO MAX TABLE UX ===== */
.ledger-mode-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:9999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:#c7d2fe;
  background:linear-gradient(135deg, rgba(79,70,229,.18), rgba(59,130,246,.10));
  border:1px solid rgba(99,102,241,.25);
}
.ledger-mode-chip .dot {
  width:8px;
  height:8px;
  border-radius:9999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.ledger-mode-btn {
  cursor:pointer;
  user-select:none;
  outline:none;
  font-family:inherit;
}
.ledger-mode-btn:hover {
  transform:translateY(-1px);
  border-color:rgba(34,197,94,.45);
  background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(99,102,241,.16));
}
.ledger-mode-btn:active {
  transform:translateY(0);
}
.ultra-table tbody tr.ledger-row-fresh td {
  background:rgba(34,197,94,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.12), inset 0 -1px 0 rgba(134,239,172,0.12);
}
.ultra-table tbody tr.ledger-row-fresh td.sticky-col-1,
.ultra-table tbody tr.ledger-row-fresh td.sticky-col-2 {
  background:rgba(19,78,74,0.92) !important;
}
.jump-latest-btn {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  transition:all .2s ease;
}
.jump-latest-btn:hover {
  background:rgba(34,197,94,0.10);
  border-color:rgba(34,197,94,0.25);
  transform:translateY(-1px);
}


.best-grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1rem; }
.kpi-card { background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(15,23,42,0.78)); border: 1px solid rgba(148,163,184,0.12); border-radius: 1rem; padding: 1rem; }
.kpi-value { font-size: 1.75rem; line-height: 1; font-weight: 800; color: #f8fafc; }
.kpi-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.kpi-sub { font-size: .78rem; color: #cbd5e1; }
.panel-card { background: rgba(15,23,42,0.58); border: 1px solid rgba(148,163,184,0.12); border-radius: 1rem; }
.quick-action-btn { display:inline-flex; align-items:center; gap:.55rem; padding:.7rem .95rem; border-radius:.8rem; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:#e2e8f0; transition:all .18s ease; }
.quick-action-btn:hover { background: rgba(99,102,241,0.14); transform: translateY(-1px); }
.activity-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .55rem; border-radius:999px; font-size:11px; font-weight:700; }
.activity-inward { background: rgba(34,197,94,0.14); color:#86efac; }
.activity-outward { background: rgba(249,115,22,0.14); color:#fdba74; }
.activity-neutral { background: rgba(148,163,184,0.14); color:#cbd5e1; }
@media (max-width: 1024px) { .best-grid { grid-template-columns: 1fr; } }

body { box-sizing: border-box; }

/* Print-window template CSS removed from global stylesheet.
   Print layouts are generated inside assets/app.js dialogs, so keeping this
   block globally caused invalid CSS and table/body style bleed. */
/* =========================================================
   TABLE PRO MAX++ — clean borderless enterprise table system
   - Removes table body borders
   - Keeps premium zebra surface and sticky columns
   - Adds compact density, soft hover glow, clean header
   ========================================================= */
.ultra-table-shell {
  border: 0 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top left, rgba(99,102,241,0.16), transparent 32%),
    linear-gradient(180deg, rgba(15,23,42,0.88), rgba(2,6,23,0.72)) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.ultra-table,
.ultra-table * {
  border-color: transparent !important;
}

.ultra-table tbody,
.ultra-table tbody tr,
.ultra-table tbody td {
  border: 0 !important;
  outline: 0 !important;
}

.ultra-table-head {
  border-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(15,23,42,0.86)) !important;
  box-shadow: 0 1px 0 rgba(129,140,248,0.18), 0 10px 24px rgba(0,0,0,0.18) !important;
}

.ultra-table-head thead th {
  background: transparent !important;
  color: #a5b4fc !important;
  height: 42px !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 10.5px !important;
  letter-spacing: .105em !important;
}

.ultra-table-body-wrap {
  max-height: calc(48px * 8) !important;
  background:
    linear-gradient(180deg, rgba(2,6,23,0.16), rgba(15,23,42,0.20)) !important;
  border: 0 !important;
}

.ultra-table tbody tr.data-row {
  transform: translateZ(0);
}

.ultra-table tbody tr.data-row td {
  height: 48px !important;
  padding-top: 0.58rem !important;
  padding-bottom: 0.58rem !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #dbeafe;
}

.ultra-table tbody tr.data-row:nth-of-type(4n+1) td,
.ultra-table tbody tr.data-row:nth-of-type(4n+2) td {
  background: rgba(255,255,255,0.018) !important;
}

.ultra-table tbody tr.data-row:nth-of-type(4n+3) td,
.ultra-table tbody tr.data-row:nth-of-type(4n+4) td {
  background: rgba(99,102,241,0.045) !important;
}

.ultra-table tbody tr.data-row:hover td {
  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(14,165,233,0.08)) !important;
  color: #f8fafc !important;
  box-shadow: inset 3px 0 0 rgba(129,140,248,0.85) !important;
}

.ultra-table tbody tr.data-row:nth-of-type(4n+1) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+1) td.sticky-col-2,
.ultra-table tbody tr.data-row:nth-of-type(4n+2) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+2) td.sticky-col-2 {
  background: rgba(15,23,42,0.98) !important;
}

.ultra-table tbody tr.data-row:nth-of-type(4n+3) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+3) td.sticky-col-2,
.ultra-table tbody tr.data-row:nth-of-type(4n+4) td.sticky-col-1,
.ultra-table tbody tr.data-row:nth-of-type(4n+4) td.sticky-col-2 {
  background: rgba(23,27,53,0.98) !important;
}

.ultra-table tbody tr.data-row:hover td.sticky-col-1,
.ultra-table tbody tr.data-row:hover td.sticky-col-2 {
  background: rgba(39,47,94,0.99) !important;
}

.ultra-table .actions-cell {
  text-align: right !important;
}

.action-btn {
  min-width: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.action-btn:hover {
  background: rgba(99,102,241,0.18) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.checkbox-custom {
  border-color: rgba(129,140,248,0.36) !important;
  background: rgba(15,23,42,0.42) !important;
}

.checkbox-custom:checked {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border-color: transparent !important;
}

.table-empty {
  border: 0 !important;
  color: #94a3b8 !important;
}

/* ===== TABLE PRO MAX++ COMPACT BODY ALIGNMENT ===== */
.ultra-table tbody tr.data-row td {
  height: 40px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  vertical-align: middle !important;
}
.ultra-table tbody tr.data-row {
  height: 40px !important;
}
.ultra-table td.col-stock,
.ultra-table td.col-min-stock,
.ultra-table td.col-max-stock,
.ultra-table td.col-status {
  text-align: center !important;
  vertical-align: middle !important;
}
.ultra-table td.col-status .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
}

/* ===== DATE PICKER STRUCTURE PERFECT - COMPACT PRO MAX++ ===== */
.date-filter-wrap{position:relative}
.date-range-trigger{min-width:210px;height:34px;justify-content:space-between;padding:7px 10px!important;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(255,255,255,.04));border:1px solid rgba(129,140,248,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.date-range-trigger:hover{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(255,255,255,.06));border-color:rgba(129,140,248,.35)}
.calendar-panel-pro{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:338px;max-width:calc(100vw - 28px)}
.calendar-container{background:linear-gradient(145deg,rgba(17,24,39,.98),rgba(24,24,55,.98))!important;border:1px solid rgba(129,140,248,.22)!important;border-radius:16px!important;box-shadow:0 20px 55px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;backdrop-filter:blur(18px)}
.calendar-topbar{padding:9px 12px;background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.10));border-bottom:1px solid rgba(255,255,255,.08)}
.calendar-month-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);transition:all .18s ease}
.calendar-month-btn:hover{background:rgba(129,140,248,.18);border-color:rgba(129,140,248,.32);transform:translateY(-1px)}
.calendar-range-box{margin:9px 12px 8px;padding:7px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.calendar-range-date{min-height:28px;display:flex;align-items:center;justify-content:center;padding:5px 7px;border-radius:9px;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.08);font-family:'Space Mono',monospace;font-size:11px;color:#c7d2fe;line-height:1.1}
.calendar-range-date.is-empty{color:#64748b}
.calendar-week-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calendar-week-row{padding:0 12px 6px}
.calendar-weekday{text-align:center;font-size:9px;font-weight:800;letter-spacing:.08em;color:#64748b;text-transform:uppercase;line-height:1}
.calendar-grid{padding:0 12px 12px}
.calendar-grid .cal-day{width:100%;height:30px;border-radius:10px;font-size:12px;font-weight:700;border:1px solid transparent;display:flex;align-items:center;justify-content:center;line-height:1}
.calendar-grid .cal-day:hover{background:rgba(99,102,241,.18);border-color:rgba(129,140,248,.25);color:#fff;transform:translateY(-1px)}
.calendar-grid .cal-day.in-range{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.10);color:#e0e7ff}
.calendar-grid .cal-day.range-start,.calendar-grid .cal-day.range-end{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;font-weight:800;box-shadow:0 7px 15px rgba(99,102,241,.25)}
.calendar-grid .cal-day.other-month{color:#475569;cursor:default;pointer-events:none}
.calendar-grid .cal-day.today{border-color:rgba(34,211,238,.65);color:#a5f3fc}
.calendar-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.07);background:rgba(2,6,23,.20)}
.calendar-actions .btn-ghost,.calendar-actions .btn-primary{height:32px;padding:7px 10px!important;border-radius:10px!important}
@media(max-width:720px){.calendar-panel-pro{left:0;right:auto;width:min(338px,calc(100vw - 24px))}.date-range-trigger{min-width:100%}}

/* =========================================================
   FINAL TABLE HEADER HEIGHT FIX — 45PX PIXEL PERFECT
   Works after publish by overriding Tailwind px/py classes.
   ========================================================= */
.ultra-table-head-wrap .ultra-table thead tr,
.ultra-table thead tr {
  height: 45px !important;
}

.ultra-table-head-wrap .ultra-table thead th,
.ultra-table thead th,
table thead th {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  line-height: 45px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.ultra-table-head-wrap .ultra-table thead th input.checkbox-custom,
.ultra-table thead th input.checkbox-custom {
  vertical-align: middle !important;
}

/* =========================================================
   FINAL EXCEL-STYLE GRID FIX
   - Header locked to 45px
   - Body rows locked to 40px
   - Perfect cell borders
   - Publish-safe override
   ========================================================= */
.ultra-table-shell {
  border: 1px solid rgba(120, 140, 210, 0.28) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.ultra-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

.ultra-table-head {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  border-bottom: 1px solid rgba(120, 140, 210, 0.38) !important;
}

.ultra-table thead,
.ultra-table thead tr,
.ultra-table thead th,
.table thead,
.table thead tr,
.table thead th,
table thead,
table thead tr,
table thead th {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}

.ultra-table thead th,
table thead th {
  padding: 0 12px !important;
  line-height: 45px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  border-right: 1px solid rgba(120, 140, 210, 0.22) !important;
  border-bottom: 1px solid rgba(120, 140, 210, 0.36) !important;
  overflow: hidden !important;
}

.ultra-table thead th:last-child,
table thead th:last-child {
  border-right: 0 !important;
}

.ultra-table-body-wrap {
  max-height: calc(40px * 9) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(8, 12, 28, 0.42) !important;
}

.ultra-table tbody tr.data-row,
.ultra-table tbody tr.ledger-row-fresh,
table tbody tr {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.ultra-table tbody tr.data-row td,
.ultra-table tbody tr.ledger-row-fresh td,
table tbody td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  line-height: 40px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  border-right: 1px solid rgba(120, 140, 210, 0.18) !important;
  border-bottom: 1px solid rgba(120, 140, 210, 0.18) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ultra-table tbody tr.data-row td:last-child,
.ultra-table tbody tr.ledger-row-fresh td:last-child,
table tbody td:last-child {
  border-right: 0 !important;
}

.ultra-table tbody tr.data-row:last-child td,
.ultra-table tbody tr.ledger-row-fresh:last-child td,
table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.ultra-table tbody tr.data-row:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.018) !important;
}

.ultra-table tbody tr.data-row:nth-child(even) td {
  background: rgba(255, 255, 255, 0.038) !important;
}

.ultra-table tbody tr.data-row:hover td,
table tbody tr:hover td {
  background: rgba(99, 102, 241, 0.12) !important;
}

.ultra-table .actions-cell,
.ultra-table .numeric-cell,
.ultra-table .mono-cell,
.ultra-table td.center,
table td.center {
  text-align: center !important;
}

.ultra-table .checkbox-custom,
.ultra-table input[type="checkbox"],
table input[type="checkbox"] {
  margin: 0 auto !important;
  vertical-align: middle !important;
  transform: translateY(-1px) !important;
}

.ultra-table .item-name-cell,
.ultra-table .item-name-plain,
.ultra-table .item-name-inner {
  line-height: 40px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* FINAL OVERRIDE v3 — WORKING EXCEL GRID */
.ultra-table-shell{border:1px solid rgba(148,163,184,.30)!important;border-radius:14px!important;overflow:hidden!important;background:rgba(10,15,35,.78)!important;}
.ultra-table-head-wrap,.ultra-table-head{height:45px!important;min-height:45px!important;max-height:45px!important;overflow:hidden!important;padding:0!important;margin:0!important;display:block!important;border-bottom:1px solid rgba(148,163,184,.35)!important;box-shadow:none!important;}
.ultra-table{width:100%!important;border-collapse:collapse!important;border-spacing:0!important;table-layout:fixed!important;margin:0!important;}
.ultra-table thead,.ultra-table thead tr{height:45px!important;min-height:45px!important;max-height:45px!important;padding:0!important;margin:0!important;}
.ultra-table thead th,.ultra-table th.excel-cell,.ultra-table th[class*="py-"]{height:45px!important;min-height:45px!important;max-height:45px!important;padding:0 12px!important;line-height:45px!important;box-sizing:border-box!important;vertical-align:middle!important;border-right:1px solid rgba(148,163,184,.22)!important;border-bottom:1px solid rgba(148,163,184,.35)!important;background:rgba(15,23,42,.96)!important;color:#c7d2fe!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.ultra-table thead th:last-child{border-right:0!important;}
.ultra-table-body-wrap{max-height:360px!important;overflow-y:auto!important;overflow-x:hidden!important;background:rgba(5,10,25,.48)!important;}
.ultra-table tbody tr.data-row,.ultra-table tbody tr.table-row{height:40px!important;min-height:40px!important;max-height:40px!important;padding:0!important;margin:0!important;border:0!important;}
.ultra-table tbody td,.ultra-table td.excel-cell,.ultra-table td[class*="py-"]{height:40px!important;min-height:40px!important;max-height:40px!important;padding:0 12px!important;line-height:40px!important;box-sizing:border-box!important;vertical-align:middle!important;border-right:1px solid rgba(148,163,184,.18)!important;border-bottom:1px solid rgba(148,163,184,.18)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.ultra-table tbody td:last-child{border-right:0!important;}
.ultra-table tbody tr:last-child td{border-bottom:0!important;}
.ultra-table tbody tr.data-row:nth-child(odd) td{background:rgba(255,255,255,.018)!important;}
.ultra-table tbody tr.data-row:nth-child(even) td{background:rgba(99,102,241,.035)!important;}
.ultra-table tbody tr.data-row:hover td{background:rgba(99,102,241,.12)!important;}
.ultra-table .actions-cell{text-align:center!important;}
.ultra-table .numeric-cell,.ultra-table .mono-cell,.ultra-table .col-stock,.ultra-table .col-min-stock,.ultra-table .col-max-stock,.ultra-table .col-status{text-align:center!important;}
.ultra-table .item-name-cell,.ultra-table .item-name-inner,.ultra-table .item-name-plain{height:40px!important;line-height:40px!important;display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.ultra-table .checkbox-custom,.ultra-table input[type="checkbox"]{width:18px!important;height:18px!important;margin:0 auto!important;display:inline-block!important;vertical-align:middle!important;transform:translateY(-1px)!important;}
.action-btn{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}

/* =========================================================
   SAAS DASHBOARD + ULTRA FAST VIRTUAL TABLE OVERRIDE
   Build: PRO MAX++ SaaS Analytics / 40px Excel Grid
   ========================================================= */
:root{
  --saas-bg:#080b18;
  --saas-panel:rgba(15,23,42,.76);
  --saas-panel-2:rgba(17,24,39,.88);
  --saas-line:rgba(148,163,184,.15);
  --saas-line-strong:rgba(148,163,184,.24);
  --saas-text:#e5e7eb;
  --saas-muted:#94a3b8;
  --saas-accent:#38bdf8;
  --saas-purple:#a78bfa;
  --saas-green:#22c55e;
  --saas-orange:#fb923c;
  --saas-red:#f87171;
  --saas-glow:0 18px 55px rgba(2,8,23,.58), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.06);
}
#main-content{background:
  radial-gradient(circle at 18% 5%, rgba(56,189,248,.12), transparent 28%),
  radial-gradient(circle at 82% 0%, rgba(167,139,250,.13), transparent 30%),
  linear-gradient(180deg,#0b1022 0%,#080b18 100%) !important;}
.saas-dashboard{display:flex;flex-direction:column;gap:18px;}
.saas-hero{display:flex;justify-content:space-between;gap:18px;align-items:stretch;padding:20px;border:1px solid var(--saas-line);border-radius:24px;background:linear-gradient(135deg,rgba(15,23,42,.88),rgba(30,41,59,.48));box-shadow:var(--saas-glow);position:relative;overflow:hidden;}
.saas-hero:before{content:"";position:absolute;inset:-80px -120px auto auto;width:330px;height:330px;background:radial-gradient(circle,rgba(56,189,248,.20),transparent 66%);pointer-events:none;}
.saas-title{font-size:26px;font-weight:800;letter-spacing:-.04em;color:#f8fafc;margin:0;}
.saas-subtitle{font-size:13px;color:var(--saas-muted);max-width:720px;margin-top:6px;line-height:1.55;}
.saas-live-pill{height:34px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:0 12px;border:1px solid rgba(34,197,94,.22);background:rgba(34,197,94,.09);color:#bbf7d0;font-size:12px;font-weight:700;white-space:nowrap;}
.saas-live-pill .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 14px #22c55e;}
.saas-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;position:relative;z-index:1;}
.saas-action{height:38px;display:inline-flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--saas-line);background:rgba(15,23,42,.7);border-radius:13px;color:#dbeafe;font-size:12px;font-weight:700;transition:.18s ease;}
.saas-action:hover{transform:translateY(-1px);border-color:rgba(56,189,248,.42);box-shadow:0 0 26px rgba(56,189,248,.12);}
.saas-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.saas-kpi{border:1px solid var(--saas-line);background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(15,23,42,.58));border-radius:20px;padding:16px;box-shadow:var(--saas-glow);min-height:136px;position:relative;overflow:hidden;}
.saas-kpi:after{content:"";position:absolute;right:-42px;top:-42px;width:110px;height:110px;border-radius:999px;background:var(--kpi-glow,rgba(56,189,248,.11));filter:blur(2px);}
.saas-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1;}
.saas-kpi-icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--saas-line);}
.saas-kpi-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--saas-muted);font-weight:800;}
.saas-kpi-value{font-size:31px;font-weight:850;color:#f8fafc;letter-spacing:-.04em;margin-top:14px;position:relative;z-index:1;}
.saas-kpi-sub{font-size:12px;color:var(--saas-muted);margin-top:4px;position:relative;z-index:1;}
.saas-kpi-meter{height:5px;margin-top:14px;border-radius:999px;background:rgba(148,163,184,.12);overflow:hidden;position:relative;z-index:1;}
.saas-kpi-meter span{display:block;height:100%;width:var(--meter,50%);border-radius:inherit;background:linear-gradient(90deg,var(--meter-a,#38bdf8),var(--meter-b,#a78bfa));}
.saas-analytics-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;}
.saas-panel{border:1px solid var(--saas-line);background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(15,23,42,.64));border-radius:22px;padding:16px;box-shadow:var(--saas-glow);overflow:hidden;}
.saas-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.saas-panel-title{font-size:15px;font-weight:800;color:#f8fafc;}
.saas-panel-sub{font-size:12px;color:var(--saas-muted);margin-top:3px;}
.saas-chart{height:245px;display:flex;align-items:end;gap:10px;padding:18px 6px 6px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.055);}
.saas-bar-wrap{flex:1;min-width:28px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;}
.saas-bar{width:100%;max-width:44px;height:var(--h,20%);min-height:6px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#38bdf8,#6366f1);box-shadow:0 0 18px rgba(56,189,248,.22);transition:.2s ease;}
.saas-bar-wrap:hover .saas-bar{filter:brightness(1.18);transform:translateY(-2px);}
.saas-bar-label{font-size:10px;color:#94a3b8;font-family:'Space Mono',monospace;}
.saas-donut-wrap{display:grid;grid-template-columns:158px 1fr;gap:16px;align-items:center;min-height:245px;}
.saas-donut{width:158px;height:158px;border-radius:50%;background:conic-gradient(#22c55e 0 var(--ok,65%),#f87171 var(--ok,65%) var(--bad,80%),#38bdf8 var(--bad,80%) 100%);box-shadow:inset 0 0 0 22px rgba(15,23,42,.92),0 0 34px rgba(56,189,248,.12);display:grid;place-items:center;}
.saas-donut strong{font-size:24px;color:#f8fafc;}
.saas-legend{display:flex;flex-direction:column;gap:10px;}
.saas-legend-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--saas-line);background:rgba(255,255,255,.035);border-radius:14px;padding:10px 12px;font-size:12px;color:#cbd5e1;}
.saas-legend-row i{width:9px;height:9px;border-radius:999px;display:inline-block;margin-right:8px;}
.saas-recent-wrap{max-height:330px;overflow:auto;border:1px solid var(--saas-line);border-radius:17px;}
.saas-recent-table{width:100%;border-collapse:separate;border-spacing:0;}
.saas-recent-table thead th{height:45px!important;position:sticky;top:0;z-index:2;background:linear-gradient(180deg,#111827,#0f172a)!important;border-bottom:1px solid var(--saas-line-strong)!important;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;font-size:11px;padding:0 12px!important;}
.saas-recent-table tbody td{height:40px!important;padding:0 12px!important;border-bottom:1px solid rgba(148,163,184,.12);font-size:12px;vertical-align:middle;}
.saas-recent-table tbody tr:hover{background:rgba(56,189,248,.06);}
.saas-chip{display:inline-flex;align-items:center;height:24px;border-radius:999px;padding:0 9px;font-size:11px;font-weight:800;border:1px solid transparent;}
.saas-chip.in{background:rgba(34,197,94,.10);color:#86efac;border-color:rgba(34,197,94,.18);}
.saas-chip.out{background:rgba(251,146,60,.10);color:#fdba74;border-color:rgba(251,146,60,.18);}
.ultra-table-shell{border-radius:18px!important;border:1px solid var(--saas-line-strong)!important;background:rgba(15,23,42,.72)!important;box-shadow:var(--saas-glow)!important;overflow:hidden!important;}
.ultra-table-head-wrap{height:45px!important;min-height:45px!important;max-height:45px!important;overflow:hidden!important;border-bottom:1px solid var(--saas-line-strong)!important;}
.ultra-table thead th{height:45px!important;min-height:45px!important;max-height:45px!important;line-height:45px!important;padding:0 12px!important;background:linear-gradient(180deg,#182238,#101827)!important;border-right:1px solid rgba(148,163,184,.16)!important;border-bottom:0!important;text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:#cbd5e1;white-space:nowrap;vertical-align:middle!important;}
.ultra-table tbody tr.data-row{height:40px!important;min-height:40px!important;max-height:40px!important;}
.ultra-table tbody td,.ultra-table .excel-cell{height:40px!important;min-height:40px!important;max-height:40px!important;padding:0 12px!important;border-right:1px solid rgba(148,163,184,.13)!important;border-bottom:1px solid rgba(148,163,184,.12)!important;vertical-align:middle!important;box-sizing:border-box!important;}
.ultra-table tbody tr:nth-child(even){background:rgba(255,255,255,.018)!important;}
.ultra-table tbody tr:hover{background:rgba(56,189,248,.065)!important;}
.virtual-table-spacer{position:relative;width:100%;}
.virtual-table-window{position:absolute;left:0;right:0;top:0;}
.virtual-mode-badge{display:inline-flex;align-items:center;gap:7px;height:24px;border-radius:999px;padding:0 9px;background:rgba(56,189,248,.09);border:1px solid rgba(56,189,248,.20);color:#bae6fd;font-size:11px;font-weight:800;}
.virtual-mode-badge .dot{width:6px;height:6px;border-radius:50%;background:#38bdf8;box-shadow:0 0 12px #38bdf8;}
@media(max-width:1100px){.saas-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.saas-analytics-grid{grid-template-columns:1fr;}.saas-donut-wrap{grid-template-columns:1fr;justify-items:center}.saas-hero{flex-direction:column}.saas-actions{justify-content:flex-start}}
@media(max-width:640px){.saas-kpi-grid{grid-template-columns:1fr}.saas-title{font-size:21px}.saas-chart{gap:5px}.saas-bar-label{font-size:9px}}

/* =========================================================
   FINAL FIX: TABLE BODY GRID MISMATCH
   - Header and body use the exact same usable width
   - Body scrollbar space is reserved, so vertical grid lines stay aligned
   - Locked 45px header + 40px rows with Excel-style borders
   ========================================================= */
.ultra-table-shell {
  --ims-table-scrollbar: 6px;
  border: 1px solid rgba(148,163,184,.30) !important;
  overflow: hidden !important;
}

.ultra-table-head-wrap,
.ultra-table-head {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Match body viewport width when body has a vertical scrollbar */
.ultra-table-head-wrap {
  padding-right: var(--ims-table-scrollbar) !important;
  background: linear-gradient(180deg,#182238,#101827) !important;
}

.ultra-table-body-wrap {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  box-sizing: border-box !important;
}

.ultra-table-head-wrap .ultra-table,
.ultra-table-body-wrap > .ultra-table,
.virtual-table-window .ultra-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.ultra-table colgroup col {
  box-sizing: border-box !important;
}

.ultra-table thead tr,
.ultra-table thead th {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}

.ultra-table thead th {
  padding: 0 10px !important;
  line-height: 45px !important;
  vertical-align: middle !important;
  border-right: 1px solid rgba(148,163,184,.18) !important;
  border-bottom: 1px solid rgba(148,163,184,.28) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ultra-table thead th:last-child {
  border-right: 0 !important;
}

.ultra-table tbody tr.data-row,
.ultra-table tbody tr.table-row {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.ultra-table tbody tr.data-row > td,
.ultra-table tbody tr.table-row > td,
.ultra-table td.excel-cell {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 10px !important;
  line-height: 40px !important;
  vertical-align: middle !important;
  border-right: 1px solid rgba(148,163,184,.15) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ultra-table tbody tr > td:last-child {
  border-right: 0 !important;
}

.ultra-table .item-name-cell,
.ultra-table .item-name-inner,
.ultra-table .item-name-plain,
.ultra-table .tooltip-anchor,
.ultra-table .tooltip-anchor-text {
  height: 40px !important;
  line-height: 40px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.ultra-table .checkbox-custom,
.ultra-table input[type="checkbox"] {
  display: block !important;
  margin: 0 auto !important;
}

.ultra-table .actions-cell,
.ultra-table .numeric-cell,
.ultra-table .mono-cell,
.ultra-table .col-stock,
.ultra-table .col-min-stock,
.ultra-table .col-max-stock,
.ultra-table .col-status {
  text-align: center !important;
}

.virtual-table-window {
  width: 100% !important;
}

/* =========================================================
   FINAL CENTER ALIGNMENT PATCH — PRO MAX++
   Required columns: Stock QTY, Min Stock, Max Stock, Status, Actions
   ========================================================= */
.ultra-table th.col-stock,
.ultra-table th.col-min-stock,
.ultra-table th.col-max-stock,
.ultra-table th.col-status,
.ultra-table th.actions-cell,
.ultra-table td.col-stock,
.ultra-table td.col-min-stock,
.ultra-table td.col-max-stock,
.ultra-table td.col-status,
.ultra-table td.actions-cell,
.ultra-table .numeric-cell,
.ultra-table .mono-cell.col-stock,
.ultra-table .mono-cell.col-min-stock,
.ultra-table .mono-cell.col-max-stock {
  text-align: center !important;
  vertical-align: middle !important;
}
.ultra-table thead th:nth-child(4),
.ultra-table thead th:nth-child(5),
.ultra-table thead th:nth-child(6),
.ultra-table thead th:nth-child(7),
.ultra-table thead th:nth-child(8),
.ultra-table tbody tr.data-row > td:nth-child(4),
.ultra-table tbody tr.data-row > td:nth-child(5),
.ultra-table tbody tr.data-row > td:nth-child(6),
.ultra-table tbody tr.data-row > td:nth-child(7),
.ultra-table tbody tr.data-row > td:nth-child(8),
.ultra-table tbody tr.table-row > td:nth-child(4),
.ultra-table tbody tr.table-row > td:nth-child(5),
.ultra-table tbody tr.table-row > td:nth-child(6),
.ultra-table tbody tr.table-row > td:nth-child(7),
.ultra-table tbody tr.table-row > td:nth-child(8) {
  text-align: center !important;
  vertical-align: middle !important;
}
.ultra-table td.col-status,
.ultra-table td.col-status .badge { line-height: normal !important; }
.ultra-table td.col-status { display: table-cell !important; }
.ultra-table td.col-status .badge,
.ultra-table .badge-success,
.ultra-table .badge-warning,
.ultra-table .badge-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
  min-width: 72px !important;
  height: 30px !important;
  line-height: 30px !important;
}
.ultra-table td.actions-cell {
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.ultra-table td.actions-cell > div,
.ultra-table .actions-cell .flex {
  width: 100% !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
}
.ultra-table td.actions-cell .action-btn,
.ultra-table .action-btn {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


.bulk-action-wrap { position: relative; display: inline-flex; }
.bulk-action-trigger { min-height: 38px; border-color: rgba(139,92,246,0.22); background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.06)); }
.bulk-action-trigger:hover { border-color: rgba(167,139,250,0.38); background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(59,130,246,0.1)); }
.bulk-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 120;
  min-width: 230px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(17,24,39,0.98), rgba(30,27,75,0.98));
  border: 1px solid rgba(139,92,246,0.25);
  box-shadow: 0 18px 45px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
}
.bulk-action-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: rgba(17,24,39,0.98);
  border-left: 1px solid rgba(139,92,246,0.25);
  border-top: 1px solid rgba(139,92,246,0.25);
  transform: rotate(45deg);
}
.bulk-action-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  color: #e5e7eb;
  text-align: left;
  transition: background 0.18s ease, transform 0.18s ease;
}
.bulk-action-item:hover { background: rgba(255,255,255,0.07); transform: translateX(2px); }
.bulk-action-item strong { display: block; font-size: 13px; line-height: 1.1; }
.bulk-action-item small { display: block; margin-top: 3px; color: #94a3b8; font-size: 11px; line-height: 1.2; }

/* ===== LARGE IMPORT TABLE BODY FIX ===== */
.ultra-table-shell .ultra-table {
  table-layout: fixed !important;
  width: 100% !important;
}
.ultra-table-shell .ultra-table-body-wrap {
  min-height: 360px !important;
  max-height: calc(100vh - 285px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.ultra-table-shell .ultra-table tbody tr.data-row,
.ultra-table-shell .ultra-table tbody tr.data-row td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  vertical-align: middle !important;
}
.ultra-table-shell .ultra-table td.excel-cell,
.ultra-table-shell .ultra-table th.excel-cell {
  text-align: center;
  vertical-align: middle !important;
}
#section-pager-mount .glass-card {
  margin-top: 12px !important;
}

/* PRO MAX++ LARGE IMPORT TABLE UPGRADE */
.pro-table-pager{background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(17,24,39,.82))!important;border:1px solid rgba(99,102,241,.22)!important;box-shadow:0 18px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)!important}
.pro-table-badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px;border-radius:999px;background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(56,189,248,.10));border:1px solid rgba(99,102,241,.28);color:#c7d2fe;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pro-table-badge .dot{width:7px;height:7px;border-radius:999px;background:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.9)}
.pro-page-size{height:32px;border-radius:10px;padding:0 32px 0 10px;background:rgba(15,23,42,.88)!important;color:#e2e8f0!important;border:1px solid rgba(148,163,184,.22)!important;outline:none!important;font-size:12px;font-weight:800;letter-spacing:.02em}
.pro-page-size:focus{border-color:rgba(99,102,241,.65)!important;box-shadow:0 0 0 3px rgba(99,102,241,.16)!important}
.ultra-table-body-wrap{contain:layout paint;will-change:scroll-position}
.ultra-table tbody tr.data-row{transform:translateZ(0)}

/* =========================================================
   FINAL USER REQUEST: SHOW ONLY 9 TABLE BODY ROWS + SCROLL
   Applies to Product Stock, Raw Stock and all PRO MAX tables
   ========================================================= */
:root{
  --ims-table-row-height:40px;
  --ims-table-visible-rows:9;
}
.ultra-table-body-wrap,
.table-body-wrap,
.table-wrapper,
.pro-table-body,
div[class*="table-body"]{
  height: calc(var(--ims-table-row-height) * var(--ims-table-visible-rows)) !important;
  max-height: calc(var(--ims-table-row-height) * var(--ims-table-visible-rows)) !important;
  min-height: calc(var(--ims-table-row-height) * var(--ims-table-visible-rows)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
.ultra-table tbody tr.data-row,
.ultra-table tbody tr.table-row,
.ultra-table tbody tr,
table tbody tr{
  height: var(--ims-table-row-height) !important;
  min-height: var(--ims-table-row-height) !important;
  max-height: var(--ims-table-row-height) !important;
}
.ultra-table tbody tr.data-row td,
.ultra-table tbody tr.table-row td,
.ultra-table tbody td,
table tbody td{
  height: var(--ims-table-row-height) !important;
  min-height: var(--ims-table-row-height) !important;
  max-height: var(--ims-table-row-height) !important;
  line-height: var(--ims-table-row-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}


/* =========================================================
   ULTRA THEME PRO MAX++ : Primary White / Secondary Dark
   Footer button controls full app theme with localStorage.
   ========================================================= */
:root,
body.theme-light {
  --theme-bg: #ffffff;
  --theme-bg-2: #f8fafc;
  --theme-surface: #ffffff;
  --theme-surface-2: #f1f5f9;
  --theme-panel: #ffffff;
  --theme-text: #111827;
  --theme-text-strong: #020617;
  --theme-muted: #475569;
  --theme-border: rgba(15, 23, 42, .14);
  --theme-border-strong: rgba(15, 23, 42, .24);
  --theme-header: linear-gradient(90deg, #ffffff, #f8fafc, #ffffff);
  --theme-footer: #ffffff;
  --theme-sidebar: #ffffff;
  --theme-input: #ffffff;
  --theme-hover: rgba(37, 99, 235, .08);
  --theme-shadow: 0 16px 42px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06);
}

body.theme-dark {
  --theme-bg: #080b18;
  --theme-bg-2: #0f0f23;
  --theme-surface: rgba(15, 23, 42, .86);
  --theme-surface-2: #0d0d1f;
  --theme-panel: rgba(17, 24, 39, .88);
  --theme-text: #e5e7eb;
  --theme-text-strong: #f8fafc;
  --theme-muted: #94a3b8;
  --theme-border: rgba(148, 163, 184, .18);
  --theme-border-strong: rgba(148, 163, 184, .32);
  --theme-header: linear-gradient(90deg, #0f0f23, #1a1a3e, #0f0f23);
  --theme-footer: #0a0a1a;
  --theme-sidebar: #0d0d1f;
  --theme-input: rgba(255,255,255,.055);
  --theme-hover: rgba(99,102,241,.10);
  --theme-shadow: 0 18px 55px rgba(2,8,23,.58), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.06);
  background: var(--theme-bg-2) !important;
  color: var(--theme-text) !important;
}
body.theme-light {
  background: #ffffff !important;
  color: #111827 !important;
}

body.theme-light #main-app,
body.theme-light main,
body.theme-light #main-content { background: #ffffff !important; color: #111827 !important; }
body.theme-dark #main-app,
body.theme-dark main,
body.theme-dark #main-content { background: var(--theme-bg) !important; color: var(--theme-text) !important; }

#app-header { background: var(--theme-header) !important; border-color: var(--theme-border) !important; }
#app-footer { background: var(--theme-footer) !important; border-color: var(--theme-border) !important; color: var(--theme-muted) !important; }
aside { background: var(--theme-sidebar) !important; border-color: var(--theme-border) !important; }

.theme-toggle-btn {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--theme-border-strong);
  background: var(--theme-surface-2);
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.theme-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99,102,241,.18); }
.theme-toggle-btn:active { transform: translateY(0); }
.theme-toggle-btn .theme-toggle-icon { color: currentColor !important; }
body.theme-light .theme-toggle-btn { background: #111827; color: #ffffff; border-color: #111827; }
body.theme-dark .theme-toggle-btn { background: #ffffff; color: #111827; border-color: rgba(255,255,255,.7); }

body.theme-light .glass-card,
body.theme-light .modal-content,
body.theme-light .saas-panel,
body.theme-light .saas-kpi,
body.theme-light .ultra-table-shell,
body.theme-light #section-pager-mount .glass-card,
body.theme-light .stat-card,
body.theme-light .raw-material-row {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow) !important;
}
body.theme-dark .glass-card,
body.theme-dark .modal-content,
body.theme-dark .saas-panel,
body.theme-dark .saas-kpi,
body.theme-dark .ultra-table-shell { box-shadow: var(--theme-shadow) !important; }

body.theme-light .text-gray-100,
body.theme-light .text-gray-200,
body.theme-light .text-gray-300,
body.theme-light .text-gray-400,
body.theme-light .text-gray-500,
body.theme-light .saas-title,
body.theme-light .saas-panel-title,
body.theme-light .saas-kpi-value,
body.theme-light .saas-donut strong { color: #111827 !important; }
body.theme-light .saas-subtitle,
body.theme-light .saas-panel-sub,
body.theme-light .saas-kpi-sub,
body.theme-light .saas-kpi-label,
body.theme-light .saas-bar-label,
body.theme-light .saas-legend-row { color: #475569 !important; }
body.theme-light .font-mono { color: #334155; }

body.theme-light .sidebar-item { color: #111827 !important; }
body.theme-light .sidebar-item:hover,
body.theme-light .sidebar-item.active { background: rgba(37,99,235,.08) !important; color: #0f172a !important; }
body.theme-light .sidebar-item.active::before,
body.theme-light .sidebar-item:hover::before { background: #2563eb !important; }

body.theme-light .form-input,
body.theme-light input,
body.theme-light select,
body.theme-light textarea,
body.theme-light .dropdown-list {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: var(--theme-border-strong) !important;
}
body.theme-light .form-input::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: #64748b !important; }
body.theme-light .dropdown-item:hover { background: rgba(37,99,235,.08) !important; }

body.theme-light .ultra-table-body-wrap,
body.theme-light .ultra-table-head-wrap,
body.theme-light .saas-recent-wrap { background: #ffffff !important; border-color: var(--theme-border) !important; }
body.theme-light .ultra-table thead th,
body.theme-light .ultra-table-head thead th,
body.theme-light .ultra-table th.excel-cell,
body.theme-light .ultra-table th[class*="py-"],
body.theme-light .saas-recent-table thead th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-right-color: var(--theme-border) !important;
  border-bottom-color: var(--theme-border-strong) !important;
}
body.theme-light .ultra-table tbody td,
body.theme-light .ultra-table td.excel-cell,
body.theme-light .ultra-table td[class*="py-"],
body.theme-light .saas-recent-table tbody td {
  background: #ffffff !important;
  color: #111827 !important;
  border-right-color: var(--theme-border) !important;
  border-bottom-color: var(--theme-border) !important;
}
body.theme-light .ultra-table tbody tr.data-row:hover td,
body.theme-light .saas-recent-table tbody tr:hover { background: #f8fafc !important; }
body.theme-light .ultra-table tbody tr.details-row > td > div { background: #f8fafc !important; border-color: var(--theme-border) !important; }

body.theme-light .export-btn,
body.theme-light .saas-action,
body.theme-light .btn-ghost {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: var(--theme-border-strong) !important;
}
body.theme-light .checkbox-custom { border-color: rgba(15,23,42,.28) !important; }

body.theme-light ::-webkit-scrollbar-track { background: #f1f5f9; }
body.theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
body.theme-dark ::-webkit-scrollbar-track { background: #1a1a2e; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #4a4a6a; }

body.theme-light #login-page { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #ffffff 100%) !important; }
body.theme-light #login-page .glass-card { background: #ffffff !important; }

/* =========================================================
   ULTRA THEME PRO MAX++ FINAL: MAIN CONTENT TOP COMPACT FIX
   Reduces empty height from top while keeping left/right spacing.
   ========================================================= */
#main-content{
  padding-top:8px!important;
  padding-left:20px!important;
  padding-right:20px!important;
  padding-bottom:20px!important;
}
#main-content > *:first-child{
  margin-top:0!important;
}
.saas-dashboard{
  gap:14px!important;
}
.saas-hero{
  margin-top:0!important;
  padding-top:16px!important;
  padding-bottom:16px!important;
}
@media (max-width:768px){
  #main-content{
    padding-top:6px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    padding-bottom:14px!important;
  }
}

/* =========================================================
   WHITE THEME TABLE BODY FINAL FIX — PRO MAX++
   Makes every table row value readable and correctly centered
   in white theme, including Tailwind text utility classes inside TD.
   ========================================================= */
body.theme-light .ultra-table-shell,
body.theme-light .ultra-table-body-wrap {
  background: #ffffff !important;
}

body.theme-light .ultra-table tbody tr.data-row > td,
body.theme-light .ultra-table tbody tr.table-row > td,
body.theme-light .ultra-table tbody td,
body.theme-light table tbody td {
  background: #ffffff !important;
  color: #111827 !important;
  border-right-color: rgba(15, 23, 42, .14) !important;
  border-bottom-color: rgba(15, 23, 42, .14) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.theme-light .ultra-table tbody tr.data-row:nth-child(even) > td,
body.theme-light .ultra-table tbody tr.table-row:nth-child(even) > td {
  background: #f8fafc !important;
}

body.theme-light .ultra-table tbody tr.data-row:hover > td,
body.theme-light .ultra-table tbody tr.table-row:hover > td,
body.theme-light table tbody tr:hover > td {
  background: #eef2ff !important;
  color: #0f172a !important;
}

body.theme-light .ultra-table tbody td .text-white,
body.theme-light .ultra-table tbody td .text-gray-100,
body.theme-light .ultra-table tbody td .text-gray-200,
body.theme-light .ultra-table tbody td .text-gray-300,
body.theme-light .ultra-table tbody td .text-slate-100,
body.theme-light .ultra-table tbody td .text-slate-200,
body.theme-light .ultra-table tbody td .text-slate-300,
body.theme-light .ultra-table tbody td.text-white,
body.theme-light .ultra-table tbody td.text-gray-100,
body.theme-light .ultra-table tbody td.text-gray-200,
body.theme-light .ultra-table tbody td.text-gray-300,
body.theme-light .ultra-table tbody td.text-slate-100,
body.theme-light .ultra-table tbody td.text-slate-200,
body.theme-light .ultra-table tbody td.text-slate-300 {
  color: #111827 !important;
}

body.theme-light .ultra-table tbody td .text-gray-400,
body.theme-light .ultra-table tbody td .text-gray-500,
body.theme-light .ultra-table tbody td .text-slate-400,
body.theme-light .ultra-table tbody td .text-slate-500,
body.theme-light .ultra-table tbody td.text-gray-400,
body.theme-light .ultra-table tbody td.text-gray-500,
body.theme-light .ultra-table tbody td.text-slate-400,
body.theme-light .ultra-table tbody td.text-slate-500,
body.theme-light .ultra-table tbody td .font-mono,
body.theme-light .ultra-table tbody td.font-mono {
  color: #334155 !important;
}

body.theme-light .ultra-table .item-name-cell,
body.theme-light .ultra-table .item-name-inner,
body.theme-light .ultra-table .item-name-plain,
body.theme-light .ultra-table .tooltip-anchor,
body.theme-light .ultra-table .tooltip-anchor-text {
  color: #111827 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.theme-light .ultra-table td.col-stock span:not(.text-red-500):not(.text-orange-400),
body.theme-light .ultra-table td.col-min-stock,
body.theme-light .ultra-table td.col-max-stock,
body.theme-light .ultra-table td.mono-cell:not(.col-status) {
  color: #0f172a !important;
}

body.theme-light .ultra-table .badge,
body.theme-light .ultra-table .badge-success,
body.theme-light .ultra-table .badge-warning,
body.theme-light .ultra-table .badge-danger {
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 28px !important;
}

body.theme-light .ultra-table .badge-success { background: rgba(22, 163, 74, .12) !important; color: #166534 !important; border-color: rgba(22, 163, 74, .28) !important; }
body.theme-light .ultra-table .badge-warning { background: rgba(217, 119, 6, .13) !important; color: #92400e !important; border-color: rgba(217, 119, 6, .30) !important; }
body.theme-light .ultra-table .badge-danger { background: rgba(220, 38, 38, .12) !important; color: #991b1b !important; border-color: rgba(220, 38, 38, .30) !important; }

body.theme-light .ultra-table td.actions-cell .action-btn,
body.theme-light .ultra-table .action-btn {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  color: #111827 !important;
}

/* =========================================================
   FINAL GAP FIX — reduce space between search/action bar and table body
   ========================================================= */
#main-content > div.mb-5,
#main-content > div.mb-4,
#main-content > div.mb-3,
#main-content > div.mb-2 {
  margin-bottom: 6px !important;
}
#main-content .flex.items-center.gap-3.flex-wrap {
  margin-bottom: 6px !important;
}
#main-content .ultra-table-shell {
  margin-top: 0 !important;
}

/* EXCEL-STYLE AUTO ROW RESIZE - PRO MAX++ FINAL PATCH */
:root{--ims-row-min:40px;--ims-wrap-line:18px;--ims-wrap-pad-y:7px;}
.ultra-table tbody tr.data-row,.ultra-table tbody tr.table-row{height:auto!important;min-height:var(--ims-row-min)!important;max-height:none!important;}
.ultra-table tbody tr.data-row>td,.ultra-table tbody tr.table-row>td,.ultra-table td.excel-cell{height:auto!important;min-height:var(--ims-row-min)!important;max-height:none!important;}
.ultra-table tbody tr.data-row>td:not(.item-code-cell):not(.item-name-cell),.ultra-table tbody tr.table-row>td:not(.item-code-cell):not(.item-name-cell){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:var(--ims-row-min)!important;padding-top:0!important;padding-bottom:0!important;vertical-align:middle!important;}
.ultra-table tbody tr.data-row>td.item-code-cell,.ultra-table tbody tr.data-row>td.item-name-cell,.ultra-table tbody tr.table-row>td.item-code-cell,.ultra-table tbody tr.table-row>td.item-name-cell{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word!important;overflow-wrap:anywhere!important;line-height:var(--ims-wrap-line)!important;padding-top:var(--ims-wrap-pad-y)!important;padding-bottom:var(--ims-wrap-pad-y)!important;vertical-align:middle!important;}
.ultra-table td.item-code-cell .tooltip-wrap,.ultra-table td.item-code-cell .tooltip-anchor,.ultra-table td.item-code-cell .tooltip-anchor-text,.ultra-table td.item-code-cell .item-name-plain,.ultra-table td.item-name-cell .item-name-inner,.ultra-table td.item-name-cell .tooltip-wrap,.ultra-table td.item-name-cell .tooltip-anchor,.ultra-table td.item-name-cell .tooltip-anchor-text,.ultra-table td.item-name-cell .item-name-plain{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;line-height:var(--ims-wrap-line)!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
.ultra-table td.actions-cell>div,.ultra-table .actions-cell .flex{min-height:var(--ims-row-min)!important;height:100%!important;align-items:center!important;}

/* =========================================================
   FINAL PRO MAX++ FIX: Excel-style AUTO ROW HEIGHT
   Only Item Code + Item Name records wrap and expand row height.
   Other columns remain compact/single-line.
   ========================================================= */
.ultra-table tbody tr.data-row,
.ultra-table tbody tr.table-row,
.ultra-table tbody tr,
table tbody tr {
  height: auto !important;
  min-height: var(--ims-table-row-height, 40px) !important;
  max-height: none !important;
}

.ultra-table tbody tr.data-row > td,
.ultra-table tbody tr.table-row > td,
.ultra-table tbody td,
table tbody td {
  height: auto !important;
  min-height: var(--ims-table-row-height, 40px) !important;
  max-height: none !important;
  vertical-align: middle !important;
}

/* Keep normal columns single line */
.ultra-table tbody tr.data-row > td:not(.item-code-cell):not(.item-name-cell),
.ultra-table tbody tr.table-row > td:not(.item-code-cell):not(.item-name-cell) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: var(--ims-table-row-height, 40px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Item Code: Arial + wrap + auto height */
.ultra-table tbody td.item-code-cell,
.ultra-table thead th.item-code-cell {
  font-family: Arial, Helvetica, sans-serif !important;
}

.ultra-table tbody td.item-code-cell {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 18px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Item Name: wrap + auto height */
.ultra-table tbody td.item-name-cell,
.ultra-table tbody td.item-name-cell .item-name-inner,
.ultra-table tbody td.item-name-cell .item-name-plain,
.ultra-table tbody td.item-name-cell .tooltip-wrap,
.ultra-table tbody td.item-name-cell span,
.ultra-table tbody td.item-name-cell div {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 18px !important;
}

.ultra-table tbody td.item-name-cell {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Prevent fixed 40px row-lock rules from hiding wrapped text */
.ultra-table tbody td.item-code-cell *,
.ultra-table tbody td.item-name-cell * {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}


/* ITEM CODE FINAL STYLE (PRO MAX++) */
table tbody td:nth-child(4),
table thead th:nth-child(4) {
    font-family: Arial, sans-serif;
    font-weight: bold;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

/* FINAL FIX: Recent Inward / Outward Activity table header/body alignment */
.recent-activity-table thead th,
.recent-activity-table tbody td,
.saas-recent-table thead th,
.saas-recent-table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

.recent-activity-table .activity-pill,
.saas-recent-table .saas-chip {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* LOGIN PASSWORD VISIBILITY CONTROL: clean icon-only eye inside input */
#login-page .relative { position: relative; }
#login-password { padding-right: 3.45rem !important; }
#login-toggle-password.login-eye-btn,
#login-toggle-password {
  right: 10px !important;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  z-index: 50;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, background-color .16s ease, transform .12s ease;
}
#login-toggle-password:hover {
  color: #c7d2fe;
  background: rgba(99,102,241,0.12);
}
#login-toggle-password:active { transform: translateY(-50%) scale(.94); }
#login-toggle-password:focus-visible {
  outline: 2px solid rgba(129,140,248,.9);
  outline-offset: 2px;
  background: rgba(99,102,241,0.12);
}
#login-toggle-password svg,
#login-toggle-password i {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.15;
  pointer-events: none;
}
body.theme-light #login-toggle-password { color: #64748b !important; }
body.theme-light #login-toggle-password:hover,
body.theme-light #login-toggle-password:focus-visible {
  color: #4f46e5 !important;
  background: #eef2ff;
}

/* === PRO MAX++ Description Tooltip for Item Code + Item Name === */
.tooltip-wrap.is-tooltip-active .tooltip-text {
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: var(--tooltip-x, 50vw) !important;
  top: var(--tooltip-y, 20vh) !important;
  bottom: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}
.tooltip-wrap.is-tooltip-active .tooltip-text::after {
  left: var(--tooltip-arrow-left, 50%) !important;
}
.tooltip-wrap[data-tooltip-placement="bottom"] .tooltip-text::after,
.tooltip-wrap[data-tooltip-placement="bottom"].is-tooltip-active .tooltip-text::after {
  top: -7px !important;
  bottom: auto !important;
  transform: translateX(-50%) rotate(225deg) !important;
}
.recent-activity-table td.item-code-cell,
.recent-activity-table td.item-name-cell,
.saas-recent-table td.item-code-cell,
.saas-recent-table td.item-name-cell {
  overflow: visible !important;
}
.recent-activity-table .tooltip-wrap,
.saas-recent-table .tooltip-wrap {
  width: 100%;
  max-width: 100%;
}
.recent-activity-table .tooltip-anchor,
.saas-recent-table .tooltip-anchor,
.recent-activity-table .tooltip-anchor-text,
.saas-recent-table .tooltip-anchor-text {
  max-width: 100%;
}


/* Removed incomplete legacy toast CSS block after no-toast rebuild. */
/* =========================================================
   CSV BUTTON THEME FIX - PRO MAX++
   Keeps CSV export button visible after Dark/White theme change.
   ========================================================= */
:root {
  --csv-btn-bg: linear-gradient(135deg, rgba(249,115,22,0.22), rgba(251,191,36,0.18));
  --csv-btn-bg-hover: linear-gradient(135deg, rgba(249,115,22,0.32), rgba(251,191,36,0.24));
  --csv-btn-text: #fde68a;
  --csv-btn-border: rgba(251,191,36,0.42);
  --csv-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(249,115,22,0.12);
}

body.theme-light {
  --csv-btn-bg: linear-gradient(135deg, #fff7ed, #fef3c7);
  --csv-btn-bg-hover: linear-gradient(135deg, #ffedd5, #fde68a);
  --csv-btn-text: #7c2d12;
  --csv-btn-border: rgba(234,88,12,0.42);
  --csv-btn-shadow: 0 8px 20px rgba(234,88,12,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
}

body.theme-dark {
  --csv-btn-bg: linear-gradient(135deg, rgba(249,115,22,0.22), rgba(251,191,36,0.18));
  --csv-btn-bg-hover: linear-gradient(135deg, rgba(249,115,22,0.32), rgba(251,191,36,0.24));
  --csv-btn-text: #fde68a;
  --csv-btn-border: rgba(251,191,36,0.42);
  --csv-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(249,115,22,0.12);
}

.btn-csv,
body.theme-light .btn-csv,
body.theme-dark .btn-csv {
  background: var(--csv-btn-bg) !important;
  color: var(--csv-btn-text) !important;
  border: 1px solid var(--csv-btn-border) !important;
  box-shadow: var(--csv-btn-shadow) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.btn-csv:hover,
body.theme-light .btn-csv:hover,
body.theme-dark .btn-csv:hover {
  background: var(--csv-btn-bg-hover) !important;
  color: var(--csv-btn-text) !important;
  transform: translateY(-1px);
}

.btn-csv i,
.btn-csv svg,
.icon-csv i,
.icon-csv svg,
body.theme-light .btn-csv i,
body.theme-light .btn-csv svg,
body.theme-light .icon-csv i,
body.theme-light .icon-csv svg,
body.theme-dark .btn-csv i,
body.theme-dark .btn-csv svg,
body.theme-dark .icon-csv i,
body.theme-dark .icon-csv svg {
  color: var(--csv-btn-text) !important;
  stroke: var(--csv-btn-text) !important;
  opacity: 1 !important;
}

.btn-csv span,
body.theme-light .btn-csv span,
body.theme-dark .btn-csv span {
  color: var(--csv-btn-text) !important;
}

/* =========================================================
   FINAL FIX: SaaS Hero / Dashboard Top Section Theme Safe
   Fixes header dashboard card after switching Light/Dark theme
   ========================================================= */
body.theme-light .saas-hero {
  background:
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, .16), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .10), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef6ff 100%) !important;
  border-color: rgba(15, 23, 42, .14) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.theme-light .saas-hero::before {
  background: radial-gradient(circle, rgba(14, 165, 233, .18), transparent 66%) !important;
}
body.theme-light .saas-title {
  color: #0f172a !important;
  text-shadow: none !important;
}
body.theme-light .saas-subtitle {
  color: #475569 !important;
}
body.theme-light .saas-live-pill {
  background: rgba(16, 185, 129, .10) !important;
  color: #065f46 !important;
  border-color: rgba(16, 185, 129, .28) !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, .10) !important;
}
body.theme-light .saas-action {
  background: #ffffff !important;
  color: #020617 !important;
  border-color: rgba(15, 23, 42, .18) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
}
body.theme-light .saas-action:hover {
  background: #f8fafc !important;
  border-color: rgba(37, 99, 235, .38) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .12) !important;
}
body.theme-light .saas-action span,
body.theme-light .saas-action svg {
  opacity: 1 !important;
}
body.theme-dark .saas-hero {
  background: linear-gradient(135deg,rgba(15,23,42,.88),rgba(30,41,59,.48)) !important;
  border-color: var(--saas-line) !important;
  box-shadow: var(--saas-glow) !important;
}
body.theme-dark .saas-title { color: #f8fafc !important; }
body.theme-dark .saas-subtitle { color: var(--saas-muted) !important; }
body.theme-dark .saas-action {
  background: rgba(15,23,42,.70) !important;
  color: #dbeafe !important;
  border-color: var(--saas-line) !important;
}

/* ========== PRO MAX++ Activate / Deactivate Form Status ========== */
.active-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .34);
}
.active-toggle-title { color: #e5e7eb; letter-spacing: .02em; }
.active-toggle-sub { margin-top: 3px; font-size: 11px; line-height: 1.35; color: rgba(148, 163, 184, .92); }
.active-toggle-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.status-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(148, 163, 184, .28);
  color: rgba(226, 232, 240, .78);
  background: rgba(15, 23, 42, .48);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.status-toggle-btn:hover { transform: translateY(-1px); color: #fff; border-color: rgba(148, 163, 184, .45); }
.status-toggle-btn.is-active:not(.danger) {
  color: #bbf7d0;
  background: linear-gradient(135deg, rgba(22, 163, 74, .24), rgba(34, 197, 94, .13));
  border-color: rgba(34, 197, 94, .48);
  box-shadow: 0 10px 25px rgba(34, 197, 94, .12);
}
.status-toggle-btn.danger.is-active {
  color: #fecaca;
  background: linear-gradient(135deg, rgba(220, 38, 38, .25), rgba(248, 113, 113, .12));
  border-color: rgba(248, 113, 113, .48);
  box-shadow: 0 10px 25px rgba(248, 113, 113, .12);
}
.badge-muted {
  background: rgba(100, 116, 139, .18);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, .28);
}
body.theme-light .active-toggle-card {
  background: rgba(248, 250, 252, .88);
  border-color: rgba(15, 23, 42, .12);
}
body.theme-light .active-toggle-title { color: #0f172a; }
body.theme-light .active-toggle-sub { color: rgba(71, 85, 105, .88); }
body.theme-light .status-toggle-btn {
  background: #fff;
  color: #334155;
  border-color: rgba(15, 23, 42, .14);
}
body.theme-light .status-toggle-btn.is-active:not(.danger) {
  color: #166534;
  background: rgba(220, 252, 231, .92);
  border-color: rgba(22, 163, 74, .30);
}
body.theme-light .status-toggle-btn.danger.is-active {
  color: #991b1b;
  background: rgba(254, 226, 226, .95);
  border-color: rgba(220, 38, 38, .28);
}
body.theme-light .badge-muted {
  background: rgba(100, 116, 139, .12) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, .25) !important;
}
@media (max-width: 640px) {
  .active-toggle-card { align-items: flex-start; flex-direction: column; }
  .active-toggle-actions { width: 100%; justify-content: stretch; }
  .status-toggle-btn { flex: 1; }
}

/* =========================================================
   FINAL FIX: DATE PICKER THEME VISIBILITY PRO MAX++
   Fixes calendar popup after Dark/White theme switch.
   - Separate light/dark calendar colors
   - Strong z-index so popup stays above tables/cards
   - Button/text visibility corrected after global theme overrides
   ========================================================= */
.date-filter-wrap{
  position: relative !important;
  z-index: 5000 !important;
}
.date-filter-wrap:has(.calendar-panel-pro[style*="block"]){
  z-index: 99999 !important;
}
.calendar-panel-pro{
  z-index: 99999 !important;
  isolation: isolate !important;
}
.calendar-container,
.calendar-container *{
  box-sizing: border-box !important;
}
.calendar-container{
  color: #e5e7eb !important;
}
.calendar-container button{
  cursor: pointer !important;
}
.calendar-grid .cal-day{
  background: rgba(255,255,255,.035) !important;
  color: #cbd5e1 !important;
}
.calendar-grid .cal-day.other-month{
  background: transparent !important;
  color: #475569 !important;
}
.calendar-grid .cal-day.today{
  color: #a5f3fc !important;
}
.calendar-actions .btn-ghost{
  color: #cbd5e1 !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(148,163,184,.20) !important;
}
.calendar-actions .btn-primary{
  color: #ffffff !important;
}

body.theme-light .date-range-trigger{
  background: linear-gradient(135deg,#ffffff,#f8fafc) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
}
body.theme-light .date-range-trigger:hover{
  background: linear-gradient(135deg,#f8fafc,#eef2ff) !important;
  border-color: rgba(37,99,235,.34) !important;
}
body.theme-light #date-range-label,
body.theme-light .date-range-trigger span,
body.theme-light .date-range-trigger i{
  color: #0f172a !important;
}
body.theme-light .calendar-container{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  color: #0f172a !important;
  box-shadow: 0 26px 70px rgba(15,23,42,.20), 0 0 0 1px rgba(15,23,42,.04) !important;
}
body.theme-light .calendar-topbar{
  background: linear-gradient(135deg,#f8fafc,#eef2ff) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}
body.theme-light .calendar-topbar .text-gray-100,
body.theme-light .calendar-topbar .text-gray-300,
body.theme-light .calendar-topbar .text-gray-400,
body.theme-light .calendar-topbar i{
  color: #0f172a !important;
}
body.theme-light .calendar-month-btn{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: #0f172a !important;
}
body.theme-light .calendar-month-btn:hover{
  background: #eef2ff !important;
  border-color: rgba(37,99,235,.28) !important;
}
body.theme-light .calendar-range-box{
  background: #f8fafc !important;
  border-color: rgba(15,23,42,.10) !important;
}
body.theme-light .calendar-range-box .text-gray-500,
body.theme-light .calendar-range-box .text-gray-600,
body.theme-light .calendar-weekday{
  color: #475569 !important;
}
body.theme-light .calendar-range-date{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: #1d4ed8 !important;
}
body.theme-light .calendar-range-date.is-empty{
  color: #94a3b8 !important;
}
body.theme-light .calendar-grid .cal-day{
  background: #ffffff !important;
  border-color: rgba(15,23,42,.08) !important;
  color: #0f172a !important;
}
body.theme-light .calendar-grid .cal-day:hover{
  background: #eef2ff !important;
  border-color: rgba(37,99,235,.28) !important;
  color: #1d4ed8 !important;
}
body.theme-light .calendar-grid .cal-day.in-range{
  background: #dbeafe !important;
  border-color: rgba(37,99,235,.14) !important;
  color: #1e40af !important;
}
body.theme-light .calendar-grid .cal-day.range-start,
body.theme-light .calendar-grid .cal-day.range-end{
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.24) !important;
}
body.theme-light .calendar-grid .cal-day.today{
  border-color: rgba(14,165,233,.65) !important;
  color: #0369a1 !important;
}
body.theme-light .calendar-grid .cal-day.range-start.today,
body.theme-light .calendar-grid .cal-day.range-end.today{
  color: #ffffff !important;
}
body.theme-light .calendar-grid .cal-day.other-month{
  background: transparent !important;
  color: #cbd5e1 !important;
}
body.theme-light .calendar-actions{
  background: #f8fafc !important;
  border-top: 1px solid rgba(15,23,42,.10) !important;
}
body.theme-light .calendar-actions .btn-ghost{
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.18) !important;
}
body.theme-light .calendar-actions .btn-primary{
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body.theme-dark .date-range-trigger,
body.theme-dark .calendar-container{
  color: #e5e7eb !important;
}
body.theme-dark #date-range-label{
  color: #cbd5e1 !important;
}
@media(max-width:720px){
  .calendar-panel-pro{
    right: auto !important;
    left: 0 !important;
    width: min(338px, calc(100vw - 24px)) !important;
  }
}

/* ===== BULK ACTION THEME VISIBILITY FIX ===== */
/* Keeps Bulk Action readable after switching between dark and white themes. */
.bulk-action-wrap{
  position: relative !important;
  display: inline-flex !important;
  z-index: 300 !important;
  overflow: visible !important;
}
.bulk-action-trigger{
  min-height: 38px !important;
  border: 1px solid rgba(139,92,246,.28) !important;
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(59,130,246,.08)) !important;
  color: #e5e7eb !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
}
.bulk-action-trigger span,
.bulk-action-trigger i{
  position: relative !important;
  z-index: 1 !important;
}
.bulk-action-menu{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 9999 !important;
  min-width: 250px !important;
  padding: 9px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(15,23,42,.99), rgba(30,27,75,.99)) !important;
  border: 1px solid rgba(139,92,246,.34) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) !important;
  overflow: visible !important;
}
.bulk-action-menu::before{
  background: rgba(15,23,42,.99) !important;
  border-left-color: rgba(139,92,246,.34) !important;
  border-top-color: rgba(139,92,246,.34) !important;
}
.bulk-action-item{
  background: transparent !important;
  border: 0 !important;
  color: #e5e7eb !important;
}
.bulk-action-item strong{
  color: #f8fafc !important;
  font-weight: 800 !important;
}
.bulk-action-item small{
  color: #94a3b8 !important;
}
.bulk-action-item:hover{
  background: rgba(255,255,255,.085) !important;
  color: #ffffff !important;
}

body.theme-light .bulk-action-trigger{
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border-color: rgba(37,99,235,.24) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
}
body.theme-light .bulk-action-trigger span,
body.theme-light .bulk-action-trigger .text-gray-300{
  color: #0f172a !important;
}
body.theme-light .bulk-action-trigger .text-gray-500{
  color: #475569 !important;
}
body.theme-light .bulk-action-trigger:hover{
  background: linear-gradient(135deg, #eff6ff, #f5f3ff) !important;
  border-color: rgba(37,99,235,.42) !important;
}
body.theme-light .bulk-action-menu{
  background: #ffffff !important;
  border-color: rgba(37,99,235,.20) !important;
  box-shadow: 0 22px 55px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.theme-light .bulk-action-menu::before{
  background: #ffffff !important;
  border-left-color: rgba(37,99,235,.20) !important;
  border-top-color: rgba(37,99,235,.20) !important;
}
body.theme-light .bulk-action-item{
  color: #0f172a !important;
}
body.theme-light .bulk-action-item strong{
  color: #111827 !important;
}
body.theme-light .bulk-action-item small{
  color: #64748b !important;
}
body.theme-light .bulk-action-item:hover{
  background: #eff6ff !important;
  color: #0f172a !important;
}
body.theme-light .bulk-action-item:hover strong{
  color: #1d4ed8 !important;
}

body.theme-dark .bulk-action-trigger span,
body.theme-dark .bulk-action-trigger .text-gray-300{
  color: #e5e7eb !important;
}
body.theme-dark .bulk-action-trigger .text-gray-500{
  color: #94a3b8 !important;
}

/* =========================================================
   ITEM NAME DESCRIPTION TOOLTIP — FINAL PRO MAX++
   Shows Description on mouseover in Item Name column.
   Theme-safe for Dark + White theme and table overflow safe.
   ========================================================= */
.ultra-table td.item-name-cell {
  overflow: visible !important;
  position: relative !important;
}
.ultra-table td.item-name-cell .tooltip-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  cursor: help !important;
}
.ultra-table td.item-name-cell .tooltip-anchor,
.ultra-table td.item-name-cell .tooltip-anchor-text,
.ultra-table td.item-name-cell .item-name-plain {
  width: 100% !important;
  max-width: 100% !important;
  cursor: help !important;
}
.ultra-table td.item-name-cell .tooltip-anchor-text {
  text-decoration: underline dotted rgba(129,140,248,0.65) !important;
  text-underline-offset: 4px !important;
}
.ultra-table td.item-name-cell .tooltip-wrap:hover .tooltip-anchor-text,
.ultra-table td.item-name-cell .tooltip-wrap:focus-within .tooltip-anchor-text {
  color: #c7d2fe !important;
  text-decoration-color: rgba(199,210,254,0.95) !important;
}
.ultra-table td.item-name-cell .tooltip-text {
  min-width: 220px !important;
  max-width: min(380px, 88vw) !important;
  background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,41,59,0.98)) !important;
  border: 1px solid rgba(129,140,248,0.45) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
  z-index: 999999 !important;
}
.ultra-table td.item-name-cell .tooltip-card-title {
  color: #c7d2fe !important;
  background: rgba(99,102,241,0.16) !important;
  border-bottom: 1px solid rgba(129,140,248,0.28) !important;
}
.ultra-table td.item-name-cell .tooltip-card-body {
  color: #eef2ff !important;
  background: rgba(15,23,42,0.16) !important;
}
body.theme-light .ultra-table td.item-name-cell .tooltip-wrap:hover .tooltip-anchor-text,
body.theme-light .ultra-table td.item-name-cell .tooltip-wrap:focus-within .tooltip-anchor-text {
  color: #4338ca !important;
  text-decoration-color: rgba(67,56,202,0.95) !important;
}
body.theme-light .ultra-table td.item-name-cell .tooltip-text {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(79,70,229,0.35) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,0.20), 0 0 0 1px rgba(255,255,255,0.80) inset !important;
}
body.theme-light .ultra-table td.item-name-cell .tooltip-text::after {
  background: #ffffff !important;
  border-right-color: rgba(79,70,229,0.35) !important;
  border-bottom-color: rgba(79,70,229,0.35) !important;
}
body.theme-light .ultra-table td.item-name-cell .tooltip-card-title {
  color: #3730a3 !important;
  background: #eef2ff !important;
  border-bottom: 1px solid rgba(79,70,229,0.18) !important;
}
body.theme-light .ultra-table td.item-name-cell .tooltip-card-body {
  color: #0f172a !important;
  background: #ffffff !important;
}

/* =========================================================
   FINAL THEME TOGGLE OVERRIDE - stable light/dark visual swap
   ========================================================= */
html.theme-light, body.theme-light, html[data-theme="light"], body[data-theme="light"] {
  background: #ffffff !important;
  color: #111827 !important;
}
html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"] {
  background: #0f0f23 !important;
  color: #e2e8f0 !important;
}

body.theme-light #app,
body.theme-light #main-app,
body.theme-light main,
body.theme-light #main-content {
  background: #ffffff !important;
  color: #111827 !important;
}
body.theme-dark #app,
body.theme-dark #main-app,
body.theme-dark main,
body.theme-dark #main-content {
  background: #0f0f23 !important;
  color: #e2e8f0 !important;
}

body.theme-light #app-header { background: linear-gradient(90deg, #ffffff, #f8fafc, #ffffff) !important; border-color: rgba(15,23,42,.14) !important; }
body.theme-light aside { background: #ffffff !important; border-color: rgba(15,23,42,.14) !important; }
body.theme-light #app-footer { background: #ffffff !important; border-color: rgba(15,23,42,.14) !important; color: #334155 !important; }

body.theme-dark #app-header { background: linear-gradient(90deg, #0f0f23, #1a1a3e, #0f0f23) !important; border-color: rgba(255,255,255,.05) !important; }
body.theme-dark aside { background: #0d0d1f !important; border-color: rgba(255,255,255,.05) !important; }
body.theme-dark #app-footer { background: #0a0a1a !important; border-color: rgba(255,255,255,.05) !important; color: #94a3b8 !important; }

body.theme-light .glass-card,
body.theme-light .modal-content,
body.theme-light .saas-panel,
body.theme-light .saas-kpi,
body.theme-light .stat-card,
body.theme-light .ultra-table-shell,
body.theme-light .excel-table,
body.theme-light .table-container,
body.theme-light .raw-material-row,
body.theme-light .bulk-action-menu,
body.theme-light .calendar-popover,
body.theme-light .dropdown-menu {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.06) !important;
}
body.theme-light .excel-table thead,
body.theme-light .excel-table th,
body.theme-light .excel-cell,
body.theme-light td,
body.theme-light th {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.14) !important;
}
body.theme-light .excel-table tbody tr:hover td { background-color: #f8fafc !important; }
body.theme-light .form-input,
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.22) !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: #64748b !important; }
body.theme-light .sidebar-item,
body.theme-light .text-gray-100,
body.theme-light .text-gray-200,
body.theme-light .text-gray-300,
body.theme-light .text-gray-400,
body.theme-light .text-gray-500,
body.theme-light .font-mono,
body.theme-light label,
body.theme-light p,
body.theme-light span:not(.text-transparent) {
  color: #111827 !important;
}
body.theme-light .text-gray-600,
body.theme-light .text-gray-700 { color: #475569 !important; }
body.theme-light .sidebar-item:hover,
body.theme-light .sidebar-item.active { background: rgba(37,99,235,.08) !important; color: #0f172a !important; }
body.theme-light .theme-toggle-btn { background: #111827 !important; color: #ffffff !important; border-color: #111827 !important; }
body.theme-dark .theme-toggle-btn { background: #ffffff !important; color: #111827 !important; border-color: rgba(255,255,255,.7) !important; }
.theme-toggle-btn[aria-busy="true"] { opacity: .75; pointer-events: none; }


/* FINAL FIX: theme button label contrast */
#theme-toggle-label { font-weight: 800 !important; }
body.theme-light #theme-toggle-btn, html.theme-light #theme-toggle-btn {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
}
body.theme-light #theme-toggle-label, html.theme-light #theme-toggle-label,
body.theme-light #theme-toggle-btn .theme-toggle-icon, html.theme-light #theme-toggle-btn .theme-toggle-icon {
  color: #ffffff !important;
}
body.theme-dark #theme-toggle-btn, html.theme-dark #theme-toggle-btn {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,.7) !important;
}
body.theme-dark #theme-toggle-label, html.theme-dark #theme-toggle-label,
body.theme-dark #theme-toggle-btn .theme-toggle-icon, html.theme-dark #theme-toggle-btn .theme-toggle-icon {
  color: #111827 !important;
}


/* PERSISTED THEME OPEN FIX: works even before body class is fully initialized */
html.theme-light, html[data-theme="light"] { background:#ffffff !important; color:#111827 !important; }
html.theme-light body, html[data-theme="light"] body { background:#ffffff !important; color:#111827 !important; }
html.theme-dark, html[data-theme="dark"] { background:#0f0f23 !important; color:#e2e8f0 !important; }
html.theme-dark body, html[data-theme="dark"] body { background:#0f0f23 !important; color:#e2e8f0 !important; }
html.theme-light #app, html[data-theme="light"] #app,
html.theme-light #main-app, html[data-theme="light"] #main-app,
html.theme-light main, html[data-theme="light"] main,
html.theme-light #main-content, html[data-theme="light"] #main-content { background:#ffffff !important; color:#111827 !important; }
html.theme-light #login-page, html[data-theme="light"] #login-page { background:linear-gradient(135deg,#ffffff 0%,#f1f5f9 50%,#ffffff 100%) !important; }

/* =========================================================
   BULK ADD ITEMS THEME FIX — PRO MAX++
   Keeps Bulk Action dropdown + Import Preview modal readable
   after switching between dark and white themes.
   ========================================================= */
.bulk-action-wrap,
.bulk-action-menu,
.bulk-action-item { box-sizing: border-box !important; }

.bulk-action-trigger,
body.theme-light .bulk-action-trigger,
body.theme-dark .bulk-action-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  white-space: nowrap !important;
}
.bulk-action-trigger span,
.bulk-action-trigger i { color: inherit !important; }

body.theme-dark .bulk-action-trigger {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.06)) !important;
  color: #e5e7eb !important;
  border-color: rgba(139,92,246,0.22) !important;
}
body.theme-light .bulk-action-trigger {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15,23,42,.24) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.07) !important;
}
body.theme-light .bulk-action-trigger:hover {
  background: #f8fafc !important;
  border-color: rgba(37,99,235,.35) !important;
}

body.theme-light .bulk-action-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.75) !important;
  color: #111827 !important;
}
body.theme-light .bulk-action-menu::before {
  background: #ffffff !important;
  border-left-color: rgba(15,23,42,.16) !important;
  border-top-color: rgba(15,23,42,.16) !important;
}
body.theme-light .bulk-action-item {
  color: #111827 !important;
  background: transparent !important;
}
body.theme-light .bulk-action-item:hover {
  background: rgba(37,99,235,.08) !important;
}
body.theme-light .bulk-action-item strong { color: #0f172a !important; }
body.theme-light .bulk-action-item small { color: #475569 !important; }
body.theme-light .bulk-action-item i { color: #2563eb !important; }

body.theme-dark .bulk-action-menu {
  background: linear-gradient(135deg, rgba(17,24,39,0.98), rgba(30,27,75,0.98)) !important;
  border-color: rgba(139,92,246,0.25) !important;
  color: #e5e7eb !important;
}
body.theme-dark .bulk-action-item { color: #e5e7eb !important; }
body.theme-dark .bulk-action-item small { color: #94a3b8 !important; }

/* Import preview modal generated by Bulk Add Items */
body.theme-light .modal-content.glass-card,
body.theme-light #modal-container .modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.18) !important;
}
body.theme-light #modal-container h3,
body.theme-light #modal-container .text-gray-100,
body.theme-light #modal-container .text-gray-200,
body.theme-light #modal-container .text-gray-300,
body.theme-light #modal-container .font-mono {
  color: #111827 !important;
}
body.theme-light #modal-container .text-gray-400,
body.theme-light #modal-container .text-gray-500 {
  color: #475569 !important;
}
body.theme-light #modal-container .bg-blue-500\/10 {
  background: #eff6ff !important;
}
body.theme-light #modal-container .border-blue-500\/20 {
  border-color: #bfdbfe !important;
}
body.theme-light #modal-container .text-blue-300,
body.theme-light #modal-container .text-blue-400 {
  color: #2563eb !important;
}
body.theme-light #modal-container .bg-white\/3,
body.theme-light #modal-container .bg-white\/5,
body.theme-light #modal-container .bg-white\/10 {
  background: #f8fafc !important;
}
body.theme-light #modal-container .border-white\/5,
body.theme-light #modal-container .border-white\/10,
body.theme-light #modal-container .border-white\/20 {
  border-color: rgba(15,23,42,.12) !important;
}
body.theme-light #bulk-import-progress-wrap .bg-white\/10 {
  background: #e2e8f0 !important;
}
body.theme-light #modal-container .btn-ghost {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.22) !important;
}
body.theme-light #modal-container .btn-ghost:hover {
  background: #f8fafc !important;
}

body.theme-dark #modal-container .modal-content {
  background: #16162e !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* BULK SYSTEM PRO MAX++ FINAL */
.bulk-import-modal{background:var(--bulk-modal-bg,#16162e)!important;border:1px solid var(--bulk-modal-border,rgba(255,255,255,.10))!important;color:var(--bulk-modal-text,#f8fafc)!important;box-shadow:0 24px 80px rgba(0,0,0,.45)!important;}
body.theme-light .bulk-import-modal, html.theme-light .bulk-import-modal{--bulk-modal-bg:#ffffff;--bulk-modal-border:#dbe4f0;--bulk-modal-text:#0f172a;}
.bulk-import-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--bulk-modal-border,rgba(255,255,255,.10));background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(14,165,233,.08));}
.bulk-import-body{padding:18px 22px;overflow:auto;max-height:calc(92vh - 150px);}
.bulk-import-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--bulk-modal-border,rgba(255,255,255,.10));background:rgba(15,23,42,.12);}
body.theme-light .bulk-import-foot, html.theme-light .bulk-import-foot{background:#f8fafc;}
.bulk-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.bulk-stat-card{border:1px solid rgba(148,163,184,.22);border-radius:14px;padding:14px;background:rgba(255,255,255,.05);display:flex;flex-direction:column;gap:2px;}
body.theme-light .bulk-stat-card, html.theme-light .bulk-stat-card{background:#f8fafc;border-color:#dbe4f0;}
.bulk-stat-card strong{font-size:22px;line-height:1;font-weight:800;}
.bulk-stat-card span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.7;}
.bulk-stat-card.success strong{color:#22c55e}.bulk-stat-card.warning strong{color:#f59e0b}.bulk-stat-card.danger strong{color:#ef4444}
.bulk-help-box{padding:10px 12px;border-radius:12px;background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.22);font-size:12px;margin-bottom:14px;color:#93c5fd;}
body.theme-light .bulk-help-box, html.theme-light .bulk-help-box{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe;}
.bulk-preview-table-wrap{border:1px solid var(--bulk-modal-border,rgba(255,255,255,.10));border-radius:14px;overflow:auto;max-height:430px;background:rgba(2,6,23,.16);}
body.theme-light .bulk-preview-table-wrap, html.theme-light .bulk-preview-table-wrap{background:#ffffff;border-color:#dbe4f0;}
.bulk-preview-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:850px;}
.bulk-preview-table th{position:sticky;top:0;z-index:1;background:#111827;color:#e5e7eb;text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left;}
body.theme-light .bulk-preview-table th, html.theme-light .bulk-preview-table th{background:#eaf0f8;color:#0f172a;border-bottom-color:#cbd5e1;}
.bulk-preview-table td{padding:10px;border-bottom:1px solid rgba(148,163,184,.18);color:inherit;vertical-align:top;}
.bulk-row-invalid{background:rgba(239,68,68,.12)!important;}.bulk-row-invalid td:last-child{color:#f87171;font-weight:700;}
.bulk-row-duplicate{background:rgba(245,158,11,.12)!important;}.bulk-row-duplicate td:last-child{color:#fbbf24;font-weight:700;}
.bulk-row-valid{background:rgba(34,197,94,.06)!important;}.bulk-row-valid td:last-child{color:#22c55e;font-weight:700;}
body.theme-light .bulk-row-invalid td:last-child, html.theme-light .bulk-row-invalid td:last-child{color:#dc2626;}
body.theme-light .bulk-row-duplicate td:last-child, html.theme-light .bulk-row-duplicate td:last-child{color:#b45309;}
body.theme-light .bulk-row-valid td:last-child, html.theme-light .bulk-row-valid td:last-child{color:#15803d;}
.bulk-preview-more{text-align:center;padding:10px;font-size:12px;opacity:.7;}
.bulk-progress-track{height:8px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden;}
.bulk-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#6366f1,#06b6d4);transition:width .15s ease;}
.bulk-paste-textarea{width:100%;height:420px;resize:vertical;border-radius:14px;border:1px solid var(--bulk-modal-border,rgba(255,255,255,.10));background:rgba(2,6,23,.35);color:inherit;font-family:Consolas,Monaco,monospace;font-size:13px;padding:14px;outline:none;}
body.theme-light .bulk-paste-textarea, html.theme-light .bulk-paste-textarea{background:#ffffff;border-color:#cbd5e1;color:#0f172a;}
@media (max-width: 780px){.bulk-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.bulk-import-foot{flex-wrap:wrap}.bulk-import-foot button{flex:1 1 auto}}

/* =========================================================
   ENTERPRISE CSS BUG FIX PACK v2 — 6 confirmed UI fixes
   1) Theme text contrast
   2) Theme toggle contrast
   3) Bulk action dropdown/import contrast
   4) Date picker contrast/z-index
   5) Table header/body alignment + row display
   6) Form input/number controls stability
   ========================================================= */

/* 1) Theme text contrast: stop white text disappearing in light theme */
html.theme-light body,
body.theme-light,
body.theme-light #app,
body.theme-light #main-content,
body.theme-light .glass-card,
body.theme-light .modal-content {
  background-color: #ffffff !important;
  color: #111827 !important;
}
body.theme-light .text-white,
body.theme-light .text-gray-50,
body.theme-light .text-gray-100,
body.theme-light .text-gray-200,
body.theme-light .text-gray-300,
body.theme-light .text-gray-400,
body.theme-light .font-mono,
body.theme-light label,
body.theme-light p,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
  color: #111827 !important;
}
body.theme-light .text-gray-500,
body.theme-light .text-gray-600,
body.theme-light small {
  color: #475569 !important;
}
body.theme-light .text-transparent {
  color: transparent !important;
}

/* 2) Theme toggle contrast: button label must never match button background */
#theme-toggle-btn,
.theme-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  white-space: nowrap !important;
}
body.theme-light #theme-toggle-btn,
html.theme-light #theme-toggle-btn,
body.theme-light .theme-toggle-btn {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
}
body.theme-light #theme-toggle-btn *,
html.theme-light #theme-toggle-btn *,
body.theme-light .theme-toggle-btn * {
  color: #ffffff !important;
  stroke: currentColor !important;
}
body.theme-dark #theme-toggle-btn,
html.theme-dark #theme-toggle-btn,
body.theme-dark .theme-toggle-btn {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,.72) !important;
}
body.theme-dark #theme-toggle-btn *,
html.theme-dark #theme-toggle-btn *,
body.theme-dark .theme-toggle-btn * {
  color: #111827 !important;
  stroke: currentColor !important;
}

/* 3) Bulk action: dropdown, preview and buttons stay readable after theme switch */
.bulk-action-wrap {
  position: relative !important;
  overflow: visible !important;
  z-index: 500 !important;
}
.bulk-action-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10000 !important;
  min-width: 250px !important;
  overflow: visible !important;
}
body.theme-light .bulk-action-menu,
html.theme-light .bulk-action-menu,
body.theme-light .bulk-import-modal,
html.theme-light .bulk-import-modal,
body.theme-light #modal-container .modal-content,
html.theme-light #modal-container .modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.16) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.18) !important;
}
body.theme-light .bulk-action-item,
html.theme-light .bulk-action-item,
body.theme-light .bulk-import-modal *,
html.theme-light .bulk-import-modal * {
  color: inherit;
}
body.theme-light .bulk-action-item:hover,
html.theme-light .bulk-action-item:hover {
  background: #eff6ff !important;
  color: #0f172a !important;
}
body.theme-dark .bulk-action-menu,
html.theme-dark .bulk-action-menu,
body.theme-dark .bulk-import-modal,
html.theme-dark .bulk-import-modal,
body.theme-dark #modal-container .modal-content,
html.theme-dark #modal-container .modal-content {
  background: #16162e !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* 4) Date picker: white theme and dark theme visibility + correct overlay layer */
.calendar-panel-pro,
.calendar-container {
  z-index: 10000 !important;
}
body.theme-light .date-range-trigger,
html.theme-light .date-range-trigger,
body.theme-light .calendar-container,
html.theme-light .calendar-container {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.16) !important;
  box-shadow: 0 22px 55px rgba(15,23,42,.16) !important;
}
body.theme-light .calendar-topbar,
html.theme-light .calendar-topbar,
body.theme-light .calendar-actions,
html.theme-light .calendar-actions,
body.theme-light .calendar-range-box,
html.theme-light .calendar-range-box {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.10) !important;
}
body.theme-light .calendar-grid .cal-day,
html.theme-light .calendar-grid .cal-day,
body.theme-light .calendar-weekday,
html.theme-light .calendar-weekday,
body.theme-light #date-range-label,
html.theme-light #date-range-label {
  color: #111827 !important;
}
body.theme-light .calendar-grid .cal-day.range-start,
body.theme-light .calendar-grid .cal-day.range-end,
html.theme-light .calendar-grid .cal-day.range-start,
html.theme-light .calendar-grid .cal-day.range-end {
  color: #ffffff !important;
}
body.theme-dark .date-range-trigger,
html.theme-dark .date-range-trigger,
body.theme-dark .calendar-container,
html.theme-dark .calendar-container {
  background: linear-gradient(145deg,rgba(17,24,39,.98),rgba(24,24,55,.98)) !important;
  color: #e5e7eb !important;
}

/* 5) Table body: header/body grid alignment, 9-row scroll, wrapping only Item Code/Name */
.ultra-table-shell,
.ultra-table-head-wrap,
.ultra-table-body-wrap {
  width: 100% !important;
  max-width: 100% !important;
}
.ultra-table-head-wrap,
.ultra-table-body-wrap {
  overflow-x: hidden !important;
}
.ultra-table-body-wrap {
  max-height: calc(40px * 9) !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}
.ultra-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.ultra-table thead th {
  height: 45px !important;
  line-height: 45px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.ultra-table tbody tr.data-row td {
  min-height: 40px !important;
  height: auto !important;
  line-height: 1.25 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  vertical-align: middle !important;
}
.ultra-table td.item-code-cell,
.ultra-table td.item-name-cell,
.ultra-table td.col-item-code,
.ultra-table td.col-item-name,
.ultra-table td[data-col="item_code"],
.ultra-table td[data-col="item_name"] {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.ultra-table td.col-stock,
.ultra-table td.col-min-stock,
.ultra-table td.col-max-stock,
.ultra-table td.col-status,
.ultra-table td.numeric-cell,
.ultra-table th.col-stock,
.ultra-table th.col-min-stock,
.ultra-table th.col-max-stock,
.ultra-table th.col-status {
  text-align: center !important;
}
.ultra-table .actions-cell {
  text-align: center !important;
  white-space: nowrap !important;
}
body.theme-light .ultra-table tbody td,
html.theme-light .ultra-table tbody td {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.12) !important;
}
body.theme-light .ultra-table thead th,
html.theme-light .ultra-table thead th {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.16) !important;
}

/* 6) Form fields: stable compact layout and no mouse-wheel number changes */
.form-input,
input,
select,
textarea {
  box-sizing: border-box !important;
}
.form-grid,
.form-row,
.compact-form-row,
.enterprise-form-row {
  align-items: end !important;
}
input[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
body.theme-light .form-input,
html.theme-light .form-input,
body.theme-light input,
html.theme-light input,
body.theme-light select,
html.theme-light select,
body.theme-light textarea,
html.theme-light textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.22) !important;
}
body.theme-dark .form-input,
html.theme-dark .form-input,
body.theme-dark input,
html.theme-dark input,
body.theme-dark select,
html.theme-dark select,
body.theme-dark textarea,
html.theme-dark textarea {
  background: rgba(255,255,255,.05) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* =========================================================
   FINAL FIX: Recent Inward / Outward Activity theme styling
   - Dark/Light theme-safe SaaS activity panel
   - Matching header/body grid, borders, text, chips and hover
   ========================================================= */
.saas-panel:has(.saas-recent-wrap),
.recent-activity-card,
.recent-activity-panel {
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease !important;
}

.saas-panel:has(.saas-recent-wrap) {
  background:
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.70)) !important;
  border-color: rgba(148,163,184,.18) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.saas-panel:has(.saas-recent-wrap) .saas-panel-title {
  color: #f8fafc !important;
}

.saas-panel:has(.saas-recent-wrap) .saas-panel-sub {
  color: #94a3b8 !important;
}

.saas-recent-wrap,
.recent-activity-table-wrap {
  background: linear-gradient(180deg, rgba(2,6,23,.34), rgba(15,23,42,.20)) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow: auto !important;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.saas-recent-table,
.recent-activity-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.saas-recent-table thead th,
.recent-activity-table thead th {
  background: linear-gradient(180deg, #172033, #0f172a) !important;
  color: #cbd5e1 !important;
  border-right: 1px solid rgba(148,163,184,.16) !important;
  border-bottom: 1px solid rgba(148,163,184,.26) !important;
  height: 45px !important;
  line-height: 45px !important;
  padding: 0 12px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.saas-recent-table thead th:last-child,
.recent-activity-table thead th:last-child,
.saas-recent-table tbody td:last-child,
.recent-activity-table tbody td:last-child {
  border-right: 0 !important;
}

.saas-recent-table tbody td,
.recent-activity-table tbody td {
  background: rgba(15,23,42,.24) !important;
  color: #e5e7eb !important;
  border-right: 1px solid rgba(148,163,184,.12) !important;
  border-bottom: 1px solid rgba(148,163,184,.11) !important;
  height: 40px !important;
  padding: 0 12px !important;
  vertical-align: middle !important;
  font-size: 12px !important;
}

.saas-recent-table tbody tr:nth-child(even) td,
.recent-activity-table tbody tr:nth-child(even) td {
  background: rgba(30,41,59,.24) !important;
}

.saas-recent-table tbody tr:hover td,
.recent-activity-table tbody tr:hover td {
  background: rgba(56,189,248,.09) !important;
}

.saas-recent-table .font-mono,
.recent-activity-table .font-mono,
.saas-recent-table .item-code-cell,
.recent-activity-table .item-code-cell {
  color: #dbeafe !important;
  font-weight: 800 !important;
}

.saas-recent-table .item-name-cell,
.recent-activity-table .item-name-cell {
  color: #f8fafc !important;
  font-weight: 700 !important;
}

.saas-chip.in,
.recent-activity-table .activity-pill.in,
.recent-activity-table .activity-pill.inward {
  background: rgba(34,197,94,.13) !important;
  color: #bbf7d0 !important;
  border-color: rgba(34,197,94,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.saas-chip.out,
.recent-activity-table .activity-pill.out,
.recent-activity-table .activity-pill.outward {
  background: rgba(251,146,60,.13) !important;
  color: #fed7aa !important;
  border-color: rgba(251,146,60,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.theme-light .saas-panel:has(.saas-recent-wrap),
body.theme-light .recent-activity-card,
body.theme-light .recent-activity-panel {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-color: #dbe4ef !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

body.theme-light .saas-panel:has(.saas-recent-wrap) .saas-panel-title {
  color: #0f172a !important;
}

body.theme-light .saas-panel:has(.saas-recent-wrap) .saas-panel-sub {
  color: #475569 !important;
}

body.theme-light .saas-recent-wrap,
body.theme-light .recent-activity-table-wrap {
  background: #ffffff !important;
  border-color: #dbe4ef !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.theme-light .saas-recent-table thead th,
body.theme-light .recent-activity-table thead th {
  background: linear-gradient(180deg, #f8fafc, #eaf0f7) !important;
  color: #0f172a !important;
  border-right-color: #dbe4ef !important;
  border-bottom-color: #cbd5e1 !important;
}

body.theme-light .saas-recent-table tbody td,
body.theme-light .recent-activity-table tbody td {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-right-color: #e2e8f0 !important;
  border-bottom-color: #e2e8f0 !important;
}

body.theme-light .saas-recent-table tbody tr:nth-child(even) td,
body.theme-light .recent-activity-table tbody tr:nth-child(even) td {
  background: #f8fafc !important;
}

body.theme-light .saas-recent-table tbody tr:hover td,
body.theme-light .recent-activity-table tbody tr:hover td {
  background: #eef6ff !important;
}

body.theme-light .saas-recent-table .font-mono,
body.theme-light .recent-activity-table .font-mono,
body.theme-light .saas-recent-table .item-code-cell,
body.theme-light .recent-activity-table .item-code-cell {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

body.theme-light .saas-recent-table .item-name-cell,
body.theme-light .recent-activity-table .item-name-cell {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.theme-light .saas-chip.in,
body.theme-light .recent-activity-table .activity-pill.in,
body.theme-light .recent-activity-table .activity-pill.inward {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}

body.theme-light .saas-chip.out,
body.theme-light .recent-activity-table .activity-pill.out,
body.theme-light .recent-activity-table .activity-pill.outward {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border-color: #fdba74 !important;
}


/* ===== Silent Live Sync Indicator (V5) ===== */
#ims-live-sync-panel{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:99999;
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.78);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
#ims-live-sync-panel .ims-live-sync-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.13);
}
#ims-live-sync-panel.ok .ims-live-sync-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15)}
#ims-live-sync-panel.bad .ims-live-sync-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.17)}
#ims-live-sync-panel.syncing .ims-live-sync-dot{background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.15);animation:imsLivePulse 1s infinite}
#ims-live-sync-panel .ims-live-sync-text,
#ims-live-sync-title,
#ims-live-sync-subtitle,
#ims-live-sync-refresh{display:none!important;}
.theme-light #ims-live-sync-panel{background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.18);box-shadow:0 10px 28px rgba(15,23,42,.12)}
@keyframes imsLivePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media(max-width:640px){#ims-live-sync-panel{right:10px;bottom:10px;width:16px;height:16px;min-width:16px}#ims-live-sync-panel .ims-live-sync-dot{width:7px;height:7px}}
#ims-live-sync-subtitle{max-width:130px}


/* PRO MAX++ PERFECT DESCRIPTION TOOLTIP POSITION FIX
   Tooltip now stays attached to the hovered Item Code / Item Name instead of jumping to the table center. */
.tooltip-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.tooltip-wrap .tooltip-text {
  position: absolute !important;
  z-index: 999999 !important;
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 14px) !important;
  bottom: auto !important;
  transform: translate3d(calc(-50% + var(--tooltip-shift-x, 0px)), 8px, 0) scale(0.985) !important;
  min-width: 240px !important;
  width: max-content !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  pointer-events: none !important;
}
.tooltip-wrap[data-tooltip-placement="top"] .tooltip-text {
  top: auto !important;
  bottom: calc(100% + 14px) !important;
  transform: translate3d(calc(-50% + var(--tooltip-shift-x, 0px)), -8px, 0) scale(0.985) !important;
}
.tooltip-wrap.is-tooltip-active .tooltip-text,
.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus-within .tooltip-text {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(calc(-50% + var(--tooltip-shift-x, 0px)), 0, 0) scale(1) !important;
}
.tooltip-wrap[data-tooltip-placement="top"].is-tooltip-active .tooltip-text,
.tooltip-wrap[data-tooltip-placement="top"]:hover .tooltip-text,
.tooltip-wrap[data-tooltip-placement="top"]:focus-within .tooltip-text {
  transform: translate3d(calc(-50% + var(--tooltip-shift-x, 0px)), 0, 0) scale(1) !important;
}
.tooltip-wrap .tooltip-text::after {
  left: calc(50% + var(--tooltip-arrow-shift-x, 0px)) !important;
  top: -7px !important;
  bottom: auto !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 1px solid rgba(129,140,248,0.26) !important;
  border-top: 1px solid rgba(129,140,248,0.26) !important;
}
.tooltip-wrap[data-tooltip-placement="top"] .tooltip-text::after {
  top: auto !important;
  bottom: -7px !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-right: 1px solid rgba(129,140,248,0.26) !important;
  border-bottom: 1px solid rgba(129,140,248,0.26) !important;
}
.excel-cell.tooltip-cell,
.item-code-cell,
.item-name-cell,
.item-name-inner,
.excel-table,
.table-shell,
.table-container {
  overflow: visible !important;
}

/* ===== DESCRIPTION TOOLTIP ONLY FIX - TABLE GRID/STYLES UNCHANGED ===== */
.tooltip-wrap {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.tooltip-anchor {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  cursor: help;
}
.tooltip-anchor-text {
  min-width: 0;
  max-width: 100%;
  text-decoration: underline dotted rgba(165,180,252,.32);
  text-underline-offset: 3px;
}
.tooltip-wrap .tooltip-text {
  position: fixed !important;
  left: var(--ims-tooltip-left, -9999px) !important;
  top: var(--ims-tooltip-top, -9999px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate3d(0, 8px, 0) scale(.985) !important;
  visibility: hidden;
  opacity: 0;
  z-index: 999999 !important;
  width: max-content;
  min-width: 220px;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.tooltip-wrap.is-tooltip-active .tooltip-text,
.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus-within .tooltip-text {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}
.tooltip-wrap .tooltip-text::after {
  left: var(--ims-tooltip-arrow-left, 50%) !important;
}
.tooltip-wrap[data-tooltip-placement="bottom"] .tooltip-text::after {
  top: -7px !important;
  bottom: auto !important;
}
.tooltip-wrap[data-tooltip-placement="top"] .tooltip-text::after {
  top: auto !important;
  bottom: -7px !important;
}
body.theme-light .tooltip-wrap .tooltip-text {
  background: rgba(255,255,255,.98);
  color: #111827;
}


/* =========================================================
   TOOLTIP CONTENT FIX ONLY — DOES NOT CHANGE TABLE GRID/STYLES
   ========================================================= */
.ims-desc-tooltip-source {
  cursor: help !important;
  text-decoration: underline dotted rgba(129,140,248,.65) !important;
  text-underline-offset: 3px !important;
}
#ims-description-tooltip-fixed {
  position: fixed !important;
  z-index: 2147483647 !important;
  width: max-content !important;
  min-width: 220px !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(30,41,59,.98)) !important;
  color: #eef2ff !important;
  border: 1px solid rgba(129,140,248,.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) scale(.985) !important;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
}
#ims-description-tooltip-fixed.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}
#ims-description-tooltip-fixed::after {
  content: "" !important;
  position: absolute !important;
  left: var(--ims-tooltip-arrow-left, 50%) !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(15,23,42,.98) !important;
  border: 1px solid rgba(129,140,248,.45) !important;
  transform: translateX(-50%) rotate(45deg) !important;
}
#ims-description-tooltip-fixed[data-placement="top"]::after {
  bottom: -7px !important;
  border-left: 0 !important;
  border-top: 0 !important;
}
#ims-description-tooltip-fixed[data-placement="bottom"]::after {
  top: -7px !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}
#ims-description-tooltip-fixed .ims-tooltip-title {
  padding: 8px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #c7d2fe !important;
  background: rgba(99,102,241,.16) !important;
  border-bottom: 1px solid rgba(129,140,248,.28) !important;
}
#ims-description-tooltip-fixed .ims-tooltip-body {
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
body.theme-light #ims-description-tooltip-fixed {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  color: #0f172a !important;
  border-color: rgba(79,70,229,.35) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.20) !important;
}
body.theme-light #ims-description-tooltip-fixed::after {
  background: #ffffff !important;
  border-color: rgba(79,70,229,.35) !important;
}
body.theme-light #ims-description-tooltip-fixed .ims-tooltip-title {
  color: #3730a3 !important;
  background: #eef2ff !important;
  border-bottom-color: rgba(79,70,229,.18) !important;
}

/* Removed incomplete legacy notification stack CSS; log/status CSS below handles current UI. */
.ims-inline-message-disabled,.ims-form-popup-message,#form-popup-message,.form-popup-message,.form-message,.popup-message,[data-form-message],#formMessage,#popupMessage{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}




/* IMS STATUS LOG PRO MAX++ */
#ims-activity-log .ims-log-item{opacity:0;transform:translateY(-10px);transition:opacity .4s ease,transform .4s ease}
#ims-activity-log .ims-log-item.show{opacity:1;transform:translateY(0)}
#ims-activity-log .ims-log-item.hide{opacity:0;transform:translateY(-10px)}


/* LOG SYSTEM */
.log-container{position:fixed;top:15px;right:15px;width:320px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.log-item{background:rgba(20,20,20,0.95);color:#fff;padding:12px 14px;border-radius:8px;font-size:13px;font-family:Arial;box-shadow:0 4px 12px rgba(0,0,0,0.35);display:flex;justify-content:space-between;align-items:center;}
.log-success{border-left:4px solid #28a745;}
.log-error{border-left:4px solid #dc3545;}
.log-warning{border-left:4px solid #ffc107;}
.log-info{border-left:4px solid #17a2b8;}
.log-close{cursor:pointer;margin-left:10px;font-weight:bold;}



/* ===== IMS GOD MODE LOG SYSTEM - TOP RIGHT ===== */
.log-container{
  position:fixed;
  top:16px;
  right:16px;
  width:min(360px, calc(100vw - 32px));
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.log-item{
  pointer-events:auto;
  background:rgba(18,22,32,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-left:5px solid #38bdf8;
  padding:12px 14px;
  border-radius:14px;
  font:600 13px/1.35 Arial, sans-serif;
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  animation:imsLogSlideIn .22s ease-out;
  backdrop-filter:blur(10px);
}
.log-item span:first-child{overflow-wrap:anywhere;}
.log-success{border-left-color:#22c55e;}
.log-error{border-left-color:#ef4444;}
.log-warning{border-left-color:#f59e0b;}
.log-info{border-left-color:#38bdf8;}
.log-close{
  cursor:pointer;
  border:0;
  background:rgba(255,255,255,.10);
  color:#fff;
  width:22px;
  height:22px;
  border-radius:999px;
  line-height:20px;
  text-align:center;
  font-weight:900;
  flex:0 0 auto;
}
.log-close:hover{background:rgba(255,255,255,.20);}
.ims-log-panel{
  position:fixed;
  top:76px;
  right:16px;
  width:min(420px, calc(100vw - 32px));
  max-height:70vh;
  z-index:100000;
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.ims-log-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.ims-log-panel-close{
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  width:26px;
  height:26px;
  border-radius:999px;
  cursor:pointer;
}
.ims-log-panel-body{
  max-height:calc(70vh - 52px);
  overflow:auto;
  padding:10px;
}
.ims-log-row{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:9px 4px;
  font:500 12px/1.35 Arial,sans-serif;
}
.ims-log-row small{display:block;opacity:.7;margin-top:3px;}
@keyframes imsLogSlideIn{
  from{transform:translateX(18px);opacity:0}
  to{transform:translateX(0);opacity:1}
}



/* ===== IMS FINAL: SYNC UI COMPLETELY HIDDEN, BACKGROUND SYNC ONLY ===== */
#ims-live-sync-panel, #imsSyncPill {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ===== IMS ULTRA FINAL LOG MESSAGE STYLE =====
   All logs/messages use one top-right dark stacked design.
   Inline popups and bottom activity-log UI stay hidden. */
#ims-activity-log,
#ims-sync-dot,
#ims-status-bar,
#ims-status-progress{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.log-container{
  position:fixed !important;
  top:36px !important;
  right:18px !important;
  width:min(450px, calc(100vw - 36px)) !important;
  z-index:2147483647 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  pointer-events:none !important;
}
.log-item{
  pointer-events:auto !important;
  min-height:58px !important;
  padding:16px 16px 16px 20px !important;
  border-radius:16px !important;
  background:#151a24 !important;
  color:#e5e7eb !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-left:5px solid #ef4444 !important;
  box-shadow:0 22px 60px rgba(15,23,42,.30), 0 0 0 1px rgba(255,255,255,.03) inset !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  font:700 14px/1.35 Arial, system-ui, sans-serif !important;
  letter-spacing:.01em !important;
  backdrop-filter:blur(14px) !important;
  animation:imsLogSlideIn .22s ease-out !important;
}
.log-item span:first-child{
  color:#dbe3f3 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
.log-error{border-left-color:#ef4444 !important;}
.log-success{border-left-color:#22c55e !important;}
.log-warning{border-left-color:#f59e0b !important;}
.log-info{border-left-color:#8b5cf6 !important;}
.log-close{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:999px !important;
  border:0 !important;
  cursor:pointer !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:1 !important;
  background:#303746 !important;
  color:#ffffff !important;
  font:900 20px/1 Arial, system-ui, sans-serif !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.log-close:hover{background:#424b5f !important; transform:scale(1.04);}
@media(max-width:700px){
  .log-container{top:18px !important;right:10px !important;width:calc(100vw - 20px) !important;}
  .log-item{min-height:54px !important;font-size:13px !important;padding:14px 14px 14px 16px !important;}
}

/* ===== IMS FINAL FIX: TOP-RIGHT LOG THEME SYNC =====
   Fix: showStatus()/IMSLog messages now follow Dark/White theme changes.
   Existing visible logs also update immediately because colors use theme variables. */
:root,
body.theme-dark,
html.theme-dark {
  --ims-log-bg: #151a24;
  --ims-log-text: #dbe3f3;
  --ims-log-border: rgba(255,255,255,.08);
  --ims-log-close-bg: #303746;
  --ims-log-close-hover-bg: #424b5f;
  --ims-log-close-text: #ffffff;
  --ims-log-shadow: 0 22px 60px rgba(15,23,42,.30), 0 0 0 1px rgba(255,255,255,.03) inset;
  --ims-log-panel-bg: #111827;
  --ims-log-panel-text: #ffffff;
  --ims-log-row-border: rgba(255,255,255,.08);
}
body.theme-light,
html.theme-light {
  --ims-log-bg: #ffffff;
  --ims-log-text: #111827;
  --ims-log-border: rgba(15,23,42,.14);
  --ims-log-close-bg: #e2e8f0;
  --ims-log-close-hover-bg: #cbd5e1;
  --ims-log-close-text: #0f172a;
  --ims-log-shadow: 0 18px 42px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.04) inset;
  --ims-log-panel-bg: #ffffff;
  --ims-log-panel-text: #111827;
  --ims-log-row-border: rgba(15,23,42,.10);
}
.log-item{
  background: var(--ims-log-bg) !important;
  color: var(--ims-log-text) !important;
  border-color: var(--ims-log-border) !important;
  box-shadow: var(--ims-log-shadow) !important;
}
.log-item span:first-child{
  color: var(--ims-log-text) !important;
}
.log-close{
  background: var(--ims-log-close-bg) !important;
  color: var(--ims-log-close-text) !important;
}
.log-close:hover{
  background: var(--ims-log-close-hover-bg) !important;
}
.ims-log-panel{
  background: var(--ims-log-panel-bg) !important;
  color: var(--ims-log-panel-text) !important;
  border-color: var(--ims-log-border) !important;
  box-shadow: var(--ims-log-shadow) !important;
}
.ims-log-row{
  border-bottom-color: var(--ims-log-row-border) !important;
  color: var(--ims-log-panel-text) !important;
}

/* =========================================================
   MAIN CONTENT SCROLLBAR REMOVE FIX
   Removes the visible scrollbar from the main content area only.
   Table body / dropdown / modal scrollbars remain active.
   ========================================================= */
#main-content{
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#main-content::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* =========================================================
   DASHBOARD MAIN CONTENT SCROLLBAR FIX
   Main scrollbar remains hidden in all sections, but Dashboard
   can scroll vertically when dashboard cards/activity exceed height.
   ========================================================= */
#main-content.dashboard-scroll-enabled{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
}
#main-content.dashboard-scroll-enabled::-webkit-scrollbar{
  width: 8px !important;
  height: 8px !important;
  display: block !important;
}
#main-content.dashboard-scroll-enabled::-webkit-scrollbar-track{
  background: var(--theme-panel, #f1f5f9) !important;
}
#main-content.dashboard-scroll-enabled::-webkit-scrollbar-thumb{
  background: rgba(148, 163, 184, .75) !important;
  border-radius: 999px !important;
}
#main-content.dashboard-scroll-enabled::-webkit-scrollbar-thumb:hover{
  background: rgba(100, 116, 139, .9) !important;
}


/* FINAL FIX: Dashboard Recent Inward / Outward Activity shows 11 body rows */
.saas-recent-wrap,
.recent-activity-table-wrap {
  max-height: 486px !important; /* 45px header + 11 x 40px body rows + border allowance */
  overflow-y: auto !important;
  overflow-x: auto !important;
}
.saas-recent-table tbody tr,
.recent-activity-table tbody tr {
  height: 40px !important;
  min-height: 40px !important;
}
.saas-recent-table tbody td,
.recent-activity-table tbody td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

/* =========================================================
   FINAL FIX: PERFECT TABLE BODY WRAP FOR ITEM CODE / ITEM NAME
   Keeps Excel grid, but allows clean multi-line text without clipping.
   ========================================================= */
.ultra-table tbody tr.data-row.has-item-wrap,
.ultra-table tbody tr.table-row.has-item-wrap,
.ultra-table tbody tr.data-row:has(.item-code-cell),
.ultra-table tbody tr.data-row:has(.item-name-cell) {
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
}

.ultra-table tbody tr.data-row > td.item-code-cell,
.ultra-table tbody tr.data-row > td.item-name-cell,
.ultra-table tbody tr.table-row > td.item-code-cell,
.ultra-table tbody tr.table-row > td.item-name-cell,
.ultra-table td.excel-cell.item-code-cell,
.ultra-table td.excel-cell.item-name-cell {
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  padding: 5px 10px !important;
  line-height: 17px !important;
  vertical-align: middle !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

.ultra-table .item-code-cell .tooltip-wrap,
.ultra-table .item-name-cell .tooltip-wrap,
.ultra-table .item-code-cell .tooltip-anchor,
.ultra-table .item-name-cell .tooltip-anchor,
.ultra-table .item-code-cell .tooltip-anchor-text,
.ultra-table .item-name-cell .tooltip-anchor-text,
.ultra-table .item-name-inner,
.ultra-table .item-name-plain {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 17px !important;
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.ultra-table tbody tr.data-row > td:not(.item-code-cell):not(.item-name-cell),
.ultra-table tbody tr.table-row > td:not(.item-code-cell):not(.item-name-cell) {
  vertical-align: middle !important;
}

.saas-recent-table td.item-code-cell,
.saas-recent-table td.item-name-cell,
.recent-activity-table td.item-code-cell,
.recent-activity-table td.item-name-cell {
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  padding: 5px 10px !important;
  line-height: 17px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Bulk upload editable preview patch */
.bulk-edit-help{
  margin:0 0 10px 0;
  padding:10px 12px;
  border:1px solid rgba(59,130,246,.22);
  border-radius:12px;
  background:rgba(59,130,246,.08);
  font-size:12px;
  line-height:1.4;
}
.bulk-preview-editable-wrap{max-height:430px;}
.bulk-preview-editable-table td{padding:6px 10px;vertical-align:middle;}
.bulk-edit-input{
  width:100%;
  min-height:34px;
  border:1px solid transparent;
  border-radius:8px;
  padding:7px 9px;
  background:rgba(255,255,255,.04);
  color:inherit;
  font:inherit;
  outline:none;
}
.bulk-edit-input:focus{
  border-color:rgba(37,99,235,.75);
  background:rgba(37,99,235,.08);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.bulk-edit-code{font-family:Arial, sans-serif;font-weight:700;}
.bulk-edit-name{min-width:360px;}
.bulk-edit-number{max-width:130px;font-weight:700;}
.bulk-row-status{font-weight:700;}
body.theme-light .bulk-edit-input, html.theme-light .bulk-edit-input{
  background:#ffffff;
  border-color:#dbe4f0;
  color:#0f172a;
}
body.theme-light .bulk-edit-input:focus, html.theme-light .bulk-edit-input:focus{
  border-color:#2563eb;
  background:#eff6ff;
}
body.theme-light .bulk-edit-help, html.theme-light .bulk-edit-help{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#0f172a;
}


/* Smooth MySQL table loading: no harsh "Loading records" row flicker */
.ultra-table-shell, .table-wrap, .excel-table-wrap { position: relative; }
.smooth-table-loader{
  position: sticky;
  top: 0;
  z-index: 25;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 0 8px auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  color: #e5f0ff;
  box-shadow: 0 14px 40px rgba(15,23,42,.18);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.smooth-table-loader.is-visible{opacity:1;transform:translateY(0) scale(1);}
.smooth-table-loader.hidden{display:none!important;}

/* Table-body loader: the requested circle loader appears inside tbody, not over the full app */
.smooth-table-loader-row td,
.continuous-scroll-loader-row td{
  height:70px!important;
  text-align:center!important;
  vertical-align:middle!important;
}
.smooth-table-loader-cell{
  padding:14px 16px!important;
}
.smooth-table-loader-inbody{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#00fbff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
.continuous-scroll-loader-row .loader-circle-50,
.smooth-table-loader-inbody .loader-circle-50{
  color:#00fbff;
}
body.theme-light .smooth-table-loader-inbody,
html.theme-light .smooth-table-loader-inbody,
body.theme-light .continuous-scroll-loader-row td,
html.theme-light .continuous-scroll-loader-row td{
  color:#0891b2!important;
}
.smooth-table-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-block;
  position:relative;
}
.smooth-table-spinner:before,
.smooth-table-spinner:after{
  content:"";
  width:100%;
  height:100%;
  border-radius:50%;
  background-color:currentColor;
  opacity:.55;
  position:absolute;
  inset:0;
  animation: loader-circle-50-bounce 2.0s infinite ease-in-out;
}
.smooth-table-spinner:after{animation-delay:-1.0s;}
.table-soft-loading tbody tr.data-row{
  opacity: .72;
  transition: opacity .18s ease;
}
.smooth-skeleton-row td{height:40px!important;animation:smoothRowFade .20s ease both;}
@keyframes smoothRowFade{from{opacity:.28;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.smooth-skeleton{
  display:block;
  height: 12px;
  width: 72%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148,163,184,.14), rgba(148,163,184,.30), rgba(148,163,184,.14));
  background-size: 220% 100%;
  animation: smoothSkeleton 1.05s ease-in-out infinite;
}
.smooth-skeleton.short{width:26px;}
.smooth-skeleton.long{width:92%;}
@keyframes smoothSkeleton{0%{background-position:220% 0}100%{background-position:-220% 0}}
body.theme-light .smooth-table-loader, html.theme-light .smooth-table-loader{
  background: rgba(255,255,255,.94);
  color: #0f172a;
  border-color: rgba(37,99,235,.20);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
}
body.theme-light .smooth-skeleton, html.theme-light .smooth-skeleton{
  background: linear-gradient(90deg, rgba(100,116,139,.10), rgba(100,116,139,.22), rgba(100,116,139,.10));
  background-size: 220% 100%;
}

/* =========================================================
   INSTANT TABLE GRID PAINT FIX — PRO MAX++
   Fixes delayed/late grid-line paint during MySQL table render,
   search, pagination, scroll and selected-row highlight.
   ========================================================= */
.ultra-table-body-wrap{
  contain: none !important;
  will-change: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  isolation: auto !important;
}
.ultra-table,
.ultra-table tbody,
.ultra-table tr,
.ultra-table td,
.ultra-table th{
  content-visibility: visible !important;
  contain: none !important;
  will-change: auto !important;
}
.ultra-table tbody tr.data-row,
.ultra-table tbody tr.table-row,
.ultra-table tbody tr.ledger-row-fresh{
  transform: none !important;
  transition: background-color .08s ease !important;
}
.ultra-table tbody td,
.ultra-table td.excel-cell,
.ultra-table td[class*="py-"],
.ultra-table thead th,
.ultra-table th.excel-cell{
  border-right: 1px solid rgba(100,116,139,.22) !important;
  border-bottom: 1px solid rgba(100,116,139,.22) !important;
  box-shadow:
    inset -1px 0 0 rgba(100,116,139,.22),
    inset 0 -1px 0 rgba(100,116,139,.22) !important;
  background-clip: padding-box !important;
  transition: background-color .08s ease, color .08s ease !important;
}
.ultra-table thead th{
  border-bottom-color: rgba(100,116,139,.36) !important;
  box-shadow:
    inset -1px 0 0 rgba(100,116,139,.26),
    inset 0 -1px 0 rgba(100,116,139,.36) !important;
}
.ultra-table tbody td:last-child,
.ultra-table thead th:last-child{
  border-right: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(100,116,139,.22) !important;
}
.ultra-table tbody tr:last-child td{
  border-bottom: 1px solid rgba(100,116,139,.22) !important;
}
body.theme-light .ultra-table tbody td,
body.theme-light .ultra-table td.excel-cell,
body.theme-light .ultra-table td[class*="py-"],
body.theme-light .ultra-table thead th,
body.theme-light .ultra-table th.excel-cell{
  border-right: 1px solid rgba(15,23,42,.16) !important;
  border-bottom: 1px solid rgba(15,23,42,.16) !important;
  box-shadow:
    inset -1px 0 0 rgba(15,23,42,.16),
    inset 0 -1px 0 rgba(15,23,42,.16) !important;
}
body.theme-light .ultra-table thead th{
  border-bottom-color: rgba(15,23,42,.24) !important;
  box-shadow:
    inset -1px 0 0 rgba(15,23,42,.18),
    inset 0 -1px 0 rgba(15,23,42,.24) !important;
}
body.theme-light .ultra-table tbody td:last-child,
body.theme-light .ultra-table thead th:last-child{
  border-right: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(15,23,42,.16) !important;
}
.ultra-table tbody tr.data-row:hover td,
.ultra-table tbody tr.table-row:hover td{
  box-shadow:
    inset 3px 0 0 rgba(99,102,241,.85),
    inset -1px 0 0 rgba(100,116,139,.22),
    inset 0 -1px 0 rgba(100,116,139,.22) !important;
}
body.theme-light .ultra-table tbody tr.data-row:hover td,
body.theme-light .ultra-table tbody tr.table-row:hover td{
  box-shadow:
    inset 3px 0 0 rgba(99,102,241,.85),
    inset -1px 0 0 rgba(15,23,42,.16),
    inset 0 -1px 0 rgba(15,23,42,.16) !important;
}

/* Bulk upload row cancel action */
.bulk-preview-editable-table{min-width:1040px;}
.bulk-row-status{font-weight:800!important;white-space:nowrap;}
.bulk-row-invalid .bulk-row-status{color:#f87171!important;}
.bulk-row-duplicate .bulk-row-status{color:#fbbf24!important;}
.bulk-row-valid .bulk-row-status{color:#22c55e!important;}
body.theme-light .bulk-row-invalid .bulk-row-status, html.theme-light .bulk-row-invalid .bulk-row-status{color:#dc2626!important;}
body.theme-light .bulk-row-duplicate .bulk-row-status, html.theme-light .bulk-row-duplicate .bulk-row-status{color:#b45309!important;}
body.theme-light .bulk-row-valid .bulk-row-status, html.theme-light .bulk-row-valid .bulk-row-status{color:#15803d!important;}
.bulk-row-action{width:110px;min-width:110px;text-align:center;color:inherit!important;white-space:nowrap;}
.bulk-row-cancel-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:7px 10px;border:1px solid rgba(239,68,68,.28);border-radius:10px;background:rgba(239,68,68,.10);color:#ef4444!important;font-size:12px;font-weight:800;line-height:1;cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s ease;}
.bulk-row-cancel-btn:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45);transform:translateY(-1px);}
.bulk-row-cancel-btn svg{flex:0 0 auto;}
.bulk-row-cancel-btn.icon-only{width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:999px;gap:0;}
.bulk-row-cancel-btn.icon-only svg{width:16px;height:16px;}

body.theme-light .bulk-row-cancel-btn, html.theme-light .bulk-row-cancel-btn{background:#fff1f2;border-color:#fecdd3;color:#dc2626!important;}
body.theme-light .bulk-row-cancel-btn:hover, html.theme-light .bulk-row-cancel-btn:hover{background:#ffe4e6;border-color:#fda4af;}


/* Bulk upload editable table: compact Action column */
.bulk-preview-editable-table{table-layout:fixed;}
.bulk-preview-editable-table .bulk-col-row{width:66px;}
.bulk-preview-editable-table .bulk-col-code{width:230px;}
.bulk-preview-editable-table .bulk-col-name{width:auto;}
.bulk-preview-editable-table .bulk-col-stock{width:160px;}
.bulk-preview-editable-table .bulk-col-min{width:145px;}
.bulk-preview-editable-table .bulk-col-max{width:145px;}
.bulk-preview-editable-table .bulk-col-status{width:96px;}
.bulk-preview-editable-table .bulk-col-action{width:58px;}
.bulk-preview-editable-table th:nth-child(8),
.bulk-preview-editable-table td:nth-child(8),
.bulk-preview-editable-table .bulk-row-action{
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  text-align:center !important;
  padding-left:4px !important;
  padding-right:4px !important;
}
.bulk-preview-editable-table .bulk-row-cancel-btn.icon-only{
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
}

/* ===== DATE RANGE PRESET DROPDOWN OPTIONS — FINAL PRO FIX ===== */
.calendar-panel-pro{
  width: 398px !important;
}
.date-preset-list{
  max-height: 374px !important;
  overflow-y: auto !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(15,23,42,.72) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148,163,184,.65) transparent !important;
}
.date-preset-list::-webkit-scrollbar{ width: 8px !important; }
.date-preset-list::-webkit-scrollbar-track{ background: transparent !important; }
.date-preset-list::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.65) !important; border-radius: 999px !important; }
.date-preset-item{
  width: 100% !important;
  min-height: 45px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-align: left !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}
.date-preset-item:hover,
.date-preset-item.active{
  background: linear-gradient(135deg, rgba(99,102,241,.26), rgba(14,165,233,.13)) !important;
  color: #fff !important;
}
.calendar-custom-area{
  border-top: 1px solid rgba(129,140,248,.12) !important;
}
body.theme-light .date-preset-list,
html.theme-light .date-preset-list{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
  scrollbar-color: rgba(100,116,139,.85) transparent !important;
}
body.theme-light .date-preset-item,
html.theme-light .date-preset-item{
  background: #ffffff !important;
  color: #334155 !important;
  border-bottom: 1px solid rgba(15,23,42,.11) !important;
}
body.theme-light .date-preset-item:hover,
body.theme-light .date-preset-item.active,
html.theme-light .date-preset-item:hover,
html.theme-light .date-preset-item.active{
  background: #2563eb !important;
  color: #ffffff !important;
}
body.theme-light .calendar-custom-area,
html.theme-light .calendar-custom-area{
  border-top: 1px solid rgba(15,23,42,.12) !important;
}
@media(max-width:720px){
  .calendar-panel-pro{ width:min(398px,calc(100vw - 24px)) !important; }
}

/* ===== CUSTOM DATE PICKER OPEN ON CUSTOM OPTION — FINAL FIX ===== */
.calendar-container.is-custom-open .date-preset-list{
  display:none !important;
}
.calendar-container:not(.is-custom-open) .calendar-custom-area{
  display:none !important;
}
.calendar-container.is-custom-open .calendar-custom-area{
  display:block !important;
  border-top:0 !important;
}
.calendar-custom-header{
  height:44px !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(14,165,233,.10)) !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
}
.calendar-back-btn{
  height:30px !important;
  padding:0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  border-radius:10px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:rgba(15,23,42,.38) !important;
  color:#cbd5e1 !important;
  font-size:12px !important;
  font-weight:700 !important;
}
.calendar-back-btn:hover{
  background:rgba(99,102,241,.24) !important;
  color:#ffffff !important;
}
.calendar-custom-title{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#e0e7ff !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}
body.theme-light .calendar-custom-header,
html.theme-light .calendar-custom-header{
  background:linear-gradient(135deg,#eff6ff,#f8fafc) !important;
  border-bottom:1px solid rgba(15,23,42,.12) !important;
}
body.theme-light .calendar-back-btn,
html.theme-light .calendar-back-btn{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.14) !important;
  color:#334155 !important;
}
body.theme-light .calendar-back-btn:hover,
html.theme-light .calendar-back-btn:hover{
  background:#2563eb !important;
  color:#ffffff !important;
}
body.theme-light .calendar-custom-title,
html.theme-light .calendar-custom-title{
  color:#1e3a8a !important;
}

/* ===== LOW STOCK ALERTS TABLE - PERFECT BODY GRID FINAL ===== */
.low-stock-table-wrap {
  background: rgba(255,255,255,0.025) !important;
  border-radius: 14px !important;
  overflow: auto !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.14) !important;
}
.low-stock-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  border-spacing: 0 !important;
}
.low-stock-table .low-col-check { width: 54px; }
.low-stock-table .low-col-section { width: 13%; }
.low-stock-table .low-col-code { width: 13%; }
.low-stock-table .low-col-name { width: 18%; }
.low-stock-table .low-col-qty { width: 11%; }
.low-stock-table .low-col-min { width: 11%; }
.low-stock-table .low-col-max { width: 11%; }
.low-stock-table .low-col-shortage { width: 11%; }
.low-stock-table .low-col-status { width: 12%; }
.low-stock-table th,
.low-stock-table td {
  border: 1px solid rgba(148,163,184,.26) !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
.low-stock-table th {
  height: 45px !important;
  padding: 0 14px !important;
  background: rgba(15,23,42,.74) !important;
  color: #e5e7eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.low-stock-table td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 14px !important;
  background: rgba(15,23,42,.30) !important;
  color: #e5e7eb !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.low-stock-table tbody tr {
  height: 40px !important;
}
.low-stock-table tbody tr:hover td {
  background: rgba(56,189,248,.08) !important;
}
.low-stock-table .item-code-cell,
.low-stock-table .item-name-cell {
  text-align: left !important;
}
.low-stock-table td:nth-child(5),
.low-stock-table td:nth-child(6),
.low-stock-table td:nth-child(7),
.low-stock-table td:nth-child(8) {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
.low-check-cell {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding: 0 !important;
  text-align: center !important;
  background-clip: padding-box !important;
}
.low-check-cell input,
.low-check-head input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 auto !important;
  display: block !important;
  cursor: pointer !important;
}
.low-check-head {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding: 0 !important;
  text-align: center !important;
}
.low-section-cell {
  text-align: left !important;
}
.low-stock-select-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  cursor: pointer !important;
}
.low-stock-select-label input {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}
.low-stock-select-label span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.low-status-cell {
  text-align: center !important;
  padding: 0 10px !important;
}
.low-stock-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-width: 68px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
}
.low-stock-status-low {
  color: #fed7aa !important;
  background: rgba(249,115,22,.16) !important;
  border: 1px solid rgba(251,146,60,.42) !important;
}
.low-stock-status-critical {
  color: #fecaca !important;
  background: rgba(239,68,68,.18) !important;
  border: 1px solid rgba(248,113,113,.45) !important;
}
body.theme-light .low-stock-table-wrap {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.14) !important;
}
body.theme-light .low-stock-table th {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.14) !important;
}
body.theme-light .low-stock-table td {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.14) !important;
}
body.theme-light .low-stock-table tbody tr:hover td {
  background: #f8fafc !important;
}


/* =========================================================
   LOW STOCK ALERTS = RAW STOCK TABLE BODY STYLE + GRID
   Uses the same ultra-table shell/head/body structure as Raw Stock.
   FINAL WIDTH FIX: fixed table width so numeric/status columns do not stretch.
   ========================================================= */
.low-stock-raw-style-shell {
  border: 1px solid rgba(148,163,184,.30) !important;
  border-radius: 14px !important;
  overflow: auto !important;
  background: rgba(10,15,35,.78) !important;
}
.low-stock-raw-style-shell .low-stock-table {
  width: 1081px !important;
  min-width: 1081px !important;
  max-width: 1081px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.low-stock-raw-style-shell .low-stock-table-head-wrap,
.low-stock-raw-style-shell .ultra-table-head {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(148,163,184,.35) !important;
}
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  height: calc(40px * 9) !important;
  max-height: calc(40px * 9) !important;
  min-height: calc(40px * 9) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(5,10,25,.48) !important;
  scrollbar-gutter: stable !important;
}
.low-stock-raw-style-shell .low-stock-table thead th {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  padding: 0 12px !important;
  line-height: 45px !important;
  background: rgba(15,23,42,.96) !important;
  color: #c7d2fe !important;
  border-right: 1px solid rgba(148,163,184,.22) !important;
  border-bottom: 1px solid rgba(148,163,184,.35) !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.low-stock-raw-style-shell .low-stock-table thead th:last-child { border-right: 0 !important; }
.low-stock-raw-style-shell .low-stock-table tbody tr.data-row,
.low-stock-raw-style-shell .low-stock-table tbody tr.low-stock-alert-row {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}
.low-stock-raw-style-shell .low-stock-table tbody td,
.low-stock-raw-style-shell .low-stock-table td.excel-cell {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  line-height: 40px !important;
  vertical-align: middle !important;
  border-right: 1px solid rgba(148,163,184,.18) !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.low-stock-raw-style-shell .low-stock-table tbody td:last-child { border-right: 0 !important; }
.low-stock-raw-style-shell .low-stock-table tbody tr:last-child td { border-bottom: 0 !important; }
.low-stock-raw-style-shell .low-stock-table tbody tr.data-row:nth-child(odd) td { background: rgba(255,255,255,.018) !important; }
.low-stock-raw-style-shell .low-stock-table tbody tr.data-row:nth-child(even) td { background: rgba(99,102,241,.035) !important; }
.low-stock-raw-style-shell .low-stock-table tbody tr.data-row:hover td { background: rgba(99,102,241,.12) !important; }
.low-stock-raw-style-shell .low-check-head,
.low-stock-raw-style-shell .low-check-cell {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  text-align: center !important;
}
.low-stock-raw-style-shell .low-check-head,
.low-stock-raw-style-shell .low-stock-table thead th:nth-child(5),
.low-stock-raw-style-shell .low-stock-table thead th:nth-child(6),
.low-stock-raw-style-shell .low-stock-table thead th:nth-child(7),
.low-stock-raw-style-shell .low-stock-table thead th:nth-child(8),
.low-stock-raw-style-shell .low-stock-table thead th:nth-child(9) { text-align: center !important; }
.low-stock-raw-style-shell .low-stock-table .col-stock,
.low-stock-raw-style-shell .low-stock-table .col-min-stock,
.low-stock-raw-style-shell .low-stock-table .col-max-stock,
.low-stock-raw-style-shell .low-stock-table .col-shortage,
.low-stock-raw-style-shell .low-stock-table .col-status { text-align: center !important; }
.low-stock-raw-style-shell .low-stock-table .item-name-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-inner,
.low-stock-raw-style-shell .low-stock-table .item-name-plain {
  height: 40px !important;
  line-height: 40px !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.theme-light .low-stock-raw-style-shell {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.16) !important;
}
body.theme-light .low-stock-raw-style-shell .low-stock-table thead th {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(15,23,42,.14) !important;
}
body.theme-light .low-stock-raw-style-shell .low-stock-table tbody td {
  color: #111827 !important;
  border-color: rgba(15,23,42,.12) !important;
}
body.theme-light .low-stock-raw-style-shell .low-stock-table tbody tr.data-row:nth-child(odd) td { background: #ffffff !important; }
body.theme-light .low-stock-raw-style-shell .low-stock-table tbody tr.data-row:nth-child(even) td { background: #f8fafc !important; }
body.theme-light .low-stock-raw-style-shell .low-stock-table tbody tr.data-row:hover td { background: #eef2ff !important; }


/* LOW STOCK ALERTS — REMOVE EXTRA COLUMN WIDTH FINAL PATCH */
.low-stock-raw-style-shell .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-head-wrap .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-body-wrap .low-stock-table {
  width: 1081px !important;
  min-width: 1081px !important;
  max-width: 1081px !important;
}
.low-stock-raw-style-shell .low-stock-table th:nth-child(1),
.low-stock-raw-style-shell .low-stock-table td:nth-child(1) { width:44px !important; min-width:44px !important; max-width:44px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(2),
.low-stock-raw-style-shell .low-stock-table td:nth-child(2) { width:72px !important; min-width:72px !important; max-width:72px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(3),
.low-stock-raw-style-shell .low-stock-table td:nth-child(3) { width:145px !important; min-width:145px !important; max-width:145px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(4),
.low-stock-raw-style-shell .low-stock-table td:nth-child(4) { width:275px !important; min-width:275px !important; max-width:275px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(5),
.low-stock-raw-style-shell .low-stock-table td:nth-child(5),
.low-stock-raw-style-shell .low-stock-table th:nth-child(6),
.low-stock-raw-style-shell .low-stock-table td:nth-child(6),
.low-stock-raw-style-shell .low-stock-table th:nth-child(7),
.low-stock-raw-style-shell .low-stock-table td:nth-child(7) { width:105px !important; min-width:105px !important; max-width:105px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(8),
.low-stock-raw-style-shell .low-stock-table td:nth-child(8) { width:120px !important; min-width:120px !important; max-width:120px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(9),
.low-stock-raw-style-shell .low-stock-table td:nth-child(9) { width:110px !important; min-width:110px !important; max-width:110px !important; }
.low-stock-raw-style-shell .low-stock-table-head-wrap,
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  overflow-x: hidden !important;
}


/* LOW STOCK ALERTS — WIDE FIRST COLUMNS + CENTER ALIGN FINAL PATCH */
.low-stock-raw-style-shell .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-head-wrap .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-body-wrap .low-stock-table {
  width: 1233px !important;
  min-width: 1233px !important;
  max-width: 1233px !important;
  table-layout: fixed !important;
}
.low-stock-raw-style-shell .low-stock-table th,
.low-stock-raw-style-shell .low-stock-table td,
.low-stock-raw-style-shell .low-stock-table .low-section-cell,
.low-stock-raw-style-shell .low-stock-table .item-code-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-inner {
  text-align: center !important;
}
.low-stock-raw-style-shell .low-stock-table th:nth-child(1),
.low-stock-raw-style-shell .low-stock-table td:nth-child(1) { width:44px !important; min-width:44px !important; max-width:44px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(2),
.low-stock-raw-style-shell .low-stock-table td:nth-child(2) { width:120px !important; min-width:120px !important; max-width:120px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(3),
.low-stock-raw-style-shell .low-stock-table td:nth-child(3) { width:180px !important; min-width:180px !important; max-width:180px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(4),
.low-stock-raw-style-shell .low-stock-table td:nth-child(4) { width:344px !important; min-width:344px !important; max-width:344px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(5),
.low-stock-raw-style-shell .low-stock-table td:nth-child(5),
.low-stock-raw-style-shell .low-stock-table th:nth-child(6),
.low-stock-raw-style-shell .low-stock-table td:nth-child(6),
.low-stock-raw-style-shell .low-stock-table th:nth-child(7),
.low-stock-raw-style-shell .low-stock-table td:nth-child(7) { width:105px !important; min-width:105px !important; max-width:105px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(8),
.low-stock-raw-style-shell .low-stock-table td:nth-child(8) { width:120px !important; min-width:120px !important; max-width:120px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(9),
.low-stock-raw-style-shell .low-stock-table td:nth-child(9) { width:110px !important; min-width:110px !important; max-width:110px !important; }
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  overflow-x: hidden !important;
}
.low-stock-raw-style-shell .low-stock-table tbody td {
  display: table-cell !important;
  vertical-align: middle !important;
}

/* LOW STOCK ALERTS — ITEM NAME EXTRA WIDTH FINAL PATCH */
.low-stock-raw-style-shell .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-head-wrap .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-body-wrap .low-stock-table {
  width: 1329px !important;
  min-width: 1329px !important;
  max-width: 1329px !important;
  table-layout: fixed !important;
}
.low-stock-raw-style-shell .low-stock-table th:nth-child(4),
.low-stock-raw-style-shell .low-stock-table td:nth-child(4) {
  width: 440px !important;
  min-width: 440px !important;
  max-width: 440px !important;
  text-align: center !important;
}
.low-stock-raw-style-shell .low-stock-table .item-name-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-inner,
.low-stock-raw-style-shell .low-stock-table .item-name-plain {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}


/* =========================================================
   LOW STOCK ALERTS — PERFECT HEADER/BODY GRID ALIGNMENT PATCH
   Fixes: header columns and body records not matching in Low Stock Alerts.
   The header table and body table now use the exact same fixed column map.
   ========================================================= */
.low-stock-raw-style-shell {
  overflow: auto !important;
}
.low-stock-raw-style-shell .low-stock-table-head-wrap,
.low-stock-raw-style-shell .ultra-table-head.low-stock-table-head-wrap {
  padding-right: 0 !important;
  overflow: hidden !important;
}
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}
.low-stock-raw-style-shell .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-head-wrap .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-body-wrap .low-stock-table {
  width: 1329px !important;
  min-width: 1329px !important;
  max-width: 1329px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.low-stock-raw-style-shell .low-stock-table th,
.low-stock-raw-style-shell .low-stock-table td {
  box-sizing: border-box !important;
  display: table-cell !important;
  vertical-align: middle !important;
  text-align: center !important;
}
.low-stock-raw-style-shell .low-stock-table th:nth-child(1),
.low-stock-raw-style-shell .low-stock-table td:nth-child(1) { width:44px !important; min-width:44px !important; max-width:44px !important; padding-left:0 !important; padding-right:0 !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(2),
.low-stock-raw-style-shell .low-stock-table td:nth-child(2) { width:120px !important; min-width:120px !important; max-width:120px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(3),
.low-stock-raw-style-shell .low-stock-table td:nth-child(3) { width:180px !important; min-width:180px !important; max-width:180px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(4),
.low-stock-raw-style-shell .low-stock-table td:nth-child(4) { width:440px !important; min-width:440px !important; max-width:440px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(5),
.low-stock-raw-style-shell .low-stock-table td:nth-child(5),
.low-stock-raw-style-shell .low-stock-table th:nth-child(6),
.low-stock-raw-style-shell .low-stock-table td:nth-child(6),
.low-stock-raw-style-shell .low-stock-table th:nth-child(7),
.low-stock-raw-style-shell .low-stock-table td:nth-child(7) { width:105px !important; min-width:105px !important; max-width:105px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(8),
.low-stock-raw-style-shell .low-stock-table td:nth-child(8) { width:120px !important; min-width:120px !important; max-width:120px !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(9),
.low-stock-raw-style-shell .low-stock-table td:nth-child(9) { width:110px !important; min-width:110px !important; max-width:110px !important; }
.low-stock-raw-style-shell .low-stock-table thead th {
  height: 45px !important;
  line-height: 45px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}
.low-stock-raw-style-shell .low-stock-table tbody tr,
.low-stock-raw-style-shell .low-stock-table tbody td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
}
.low-stock-raw-style-shell .low-stock-table .item-code-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-inner,
.low-stock-raw-style-shell .low-stock-table .item-name-plain,
.low-stock-raw-style-shell .low-stock-table .low-section-cell {
  text-align: center !important;
}
.low-stock-raw-style-shell .low-stock-table .item-name-inner {
  width: 100% !important;
  height: 40px !important;
  line-height: 40px !important;
  display: block !important;
}


/* =========================================================
   LOW STOCK ALERTS — STATUS COLUMN OVERFLOW FIX FINAL
   Fixes: STATUS column getting cut at the right side.
   Uses full available table width and same percentage column map for header/body.
   ========================================================= */
.low-stock-raw-style-shell,
.low-stock-raw-style-shell .low-stock-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.low-stock-raw-style-shell .low-stock-table-head-wrap,
.low-stock-raw-style-shell .ultra-table-head.low-stock-table-head-wrap,
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.low-stock-raw-style-shell .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-head-wrap .low-stock-table,
.low-stock-raw-style-shell .low-stock-table-body-wrap .low-stock-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(1) { width: 3.5% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(2) { width: 9.5% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(3) { width: 14% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(4) { width: 28% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(5) { width: 8.5% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(6) { width: 8.5% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(7) { width: 8.5% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(8) { width: 9.5% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(9) { width: 10% !important; min-width: 0 !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(1),
.low-stock-raw-style-shell .low-stock-table td:nth-child(1) { width: 3.5% !important; min-width: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(2),
.low-stock-raw-style-shell .low-stock-table td:nth-child(2) { width: 9.5% !important; min-width: 0 !important; max-width: none !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(3),
.low-stock-raw-style-shell .low-stock-table td:nth-child(3) { width: 14% !important; min-width: 0 !important; max-width: none !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(4),
.low-stock-raw-style-shell .low-stock-table td:nth-child(4) { width: 28% !important; min-width: 0 !important; max-width: none !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(5),
.low-stock-raw-style-shell .low-stock-table td:nth-child(5),
.low-stock-raw-style-shell .low-stock-table th:nth-child(6),
.low-stock-raw-style-shell .low-stock-table td:nth-child(6),
.low-stock-raw-style-shell .low-stock-table th:nth-child(7),
.low-stock-raw-style-shell .low-stock-table td:nth-child(7) { width: 8.5% !important; min-width: 0 !important; max-width: none !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(8),
.low-stock-raw-style-shell .low-stock-table td:nth-child(8) { width: 9.5% !important; min-width: 0 !important; max-width: none !important; }
.low-stock-raw-style-shell .low-stock-table th:nth-child(9),
.low-stock-raw-style-shell .low-stock-table td:nth-child(9) { width: 10% !important; min-width: 0 !important; max-width: none !important; }
.low-stock-raw-style-shell .low-stock-table th,
.low-stock-raw-style-shell .low-stock-table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.low-stock-raw-style-shell .low-status-cell {
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow: visible !important;
}
.low-stock-raw-style-shell .low-stock-status-pill {
  display: inline-flex !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 12px !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* =========================================================
   LOW STOCK ALERTS — SINGLE TABLE GRID LOCK FINAL
   Header and records now live in the same table, so every grid line
   uses the same colgroup and cannot shift/mismatch.
   ========================================================= */
.low-stock-raw-style-shell.low-stock-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  border-radius: 14px !important;
}
.low-stock-raw-style-shell .low-stock-single-table-scroll,
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  width: 100% !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  scrollbar-gutter: stable !important;
}
.low-stock-raw-style-shell .low-stock-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(1) { width: 3.5% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(2) { width: 9.5% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(3) { width: 14% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(4) { width: 28% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(5) { width: 8.5% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(6) { width: 8.5% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(7) { width: 8.5% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(8) { width: 9.5% !important; }
.low-stock-raw-style-shell .low-stock-fixed-cols col:nth-child(9) { width: 10% !important; }
.low-stock-raw-style-shell .low-stock-table thead th,
.low-stock-raw-style-shell .low-stock-table tbody td {
  display: table-cell !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-align: center !important;
  padding: 0 8px !important;
  border-right: 1px solid rgba(148,163,184,.22) !important;
  border-bottom: 1px solid rgba(148,163,184,.20) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 0 !important;
}
.low-stock-raw-style-shell .low-stock-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  line-height: 45px !important;
  background: rgba(15,23,42,.98) !important;
  color: #c7d2fe !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.low-stock-raw-style-shell .low-stock-table tbody tr,
.low-stock-raw-style-shell .low-stock-table tbody td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
}
.low-stock-raw-style-shell .low-check-head,
.low-stock-raw-style-shell .low-check-cell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}
.low-stock-raw-style-shell .low-stock-table .item-code-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-cell,
.low-stock-raw-style-shell .low-stock-table .item-name-inner,
.low-stock-raw-style-shell .low-stock-table .low-section-cell {
  display: table-cell !important;
  width: auto !important;
  height: 40px !important;
  line-height: 40px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.low-stock-raw-style-shell .low-stock-table .item-name-inner {
  display: block !important;
  width: 100% !important;
}
.low-stock-raw-style-shell .low-status-cell {
  overflow: hidden !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.low-stock-raw-style-shell .low-stock-status-pill {
  max-width: 100% !important;
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.theme-light .low-stock-raw-style-shell .low-stock-table thead th {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* =========================================================
   PRODUCT + RAW STOCK COLUMN WIDTH FIX — FINAL
   Stock QTY / Min / Max / Status / Actions stay compact.
   The remaining horizontal space is assigned to Item Name.
   ========================================================= */
.ultra-table col.ims-col-fill {
  width: auto !important;
  min-width: 260px !important;
}

/* Compact numeric/status cells so they do not visually stretch */
.ultra-table td.col-stock,
.ultra-table td.col-min-stock,
.ultra-table td.col-max-stock,
.ultra-table td.col-status,
.ultra-table td.actions-cell {
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: center !important;
}

.ultra-table td.col-status .badge,
.ultra-table td.col-status .low-stock-status-pill {
  max-width: 84px !important;
  min-width: 58px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.ultra-table td.item-name-cell,
.ultra-table td.item-name-cell .item-name-inner,
.ultra-table td.item-name-cell .item-name-plain {
  width: 100% !important;
}

/* =========================================================
   BOM LIST — GRID LOCK FINAL CHECK
   Keeps BOM List header/records on one fixed table grid and gives
   Product/BOM names the remaining width without stretching qty cells.
   ========================================================= */
.bom-list-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  border-radius: 14px !important;
}
.bom-list-table-wrap .bom-list-table-body-wrap {
  width: 100% !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bom-list-table-wrap .bom-list-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.bom-list-table-wrap .bom-list-table thead th,
.bom-list-table-wrap .bom-list-table tbody td {
  display: table-cell !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-align: center !important;
  padding: 0 8px !important;
  border-right: 1px solid rgba(148,163,184,.22) !important;
  border-bottom: 1px solid rgba(148,163,184,.20) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 0 !important;
}
.bom-list-table-wrap .bom-list-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  height: 45px !important;
  line-height: 45px !important;
  background: rgba(15,23,42,.98) !important;
  color: #c7d2fe !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.bom-list-table-wrap .bom-list-table tbody tr,
.bom-list-table-wrap .bom-list-table tbody td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
}
.bom-list-table-wrap .bom-check-cell,
.bom-list-table-wrap .bom-list-table th:first-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.bom-list-table-wrap .bom-list-table .item-name-cell,
.bom-list-table-wrap .bom-list-table .item-name-inner {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  line-height: 40px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.theme-light .bom-list-table-wrap .bom-list-table thead th {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* =========================================================
   BOM LIST — BODY GRID + NAME WRAP FIX (2026-05-18)
   Fixes vertical letter-by-letter wrapping in Product Name and
   BOM Item Name cells and keeps header/body widths locked.
   ========================================================= */
.bom-list-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.bom-list-table-wrap .bom-list-table {
  width: 100% !important;
  min-width: 1248px !important;
  table-layout: fixed !important;
}
.bom-list-table-wrap .bom-list-table col:nth-child(1) { width: 44px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(2) { width: 72px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(3) { width: 112px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(4) { width: 150px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(5) { width: 260px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(6) { width: 140px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(7) { width: 260px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(8) { width: 100px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(9) { width: 110px !important; }
.bom-list-table-wrap .bom-list-table thead th,
.bom-list-table-wrap .bom-list-table tbody td {
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.bom-list-table-wrap .bom-list-table tbody tr,
.bom-list-table-wrap .bom-list-table tbody td {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 44px !important;
}
.bom-list-table-wrap .bom-list-table tbody td:nth-child(5),
.bom-list-table-wrap .bom-list-table tbody td:nth-child(7) {
  text-align: center !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.bom-list-table-wrap .bom-list-table tbody td:nth-child(5) .item-name-inner,
.bom-list-table-wrap .bom-list-table tbody td:nth-child(7) .item-name-inner {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  line-height: 44px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bom-list-table-wrap .bom-list-table tbody td:nth-child(4),
.bom-list-table-wrap .bom-list-table tbody td:nth-child(6),
.bom-list-table-wrap .bom-list-table tbody td:nth-child(8),
.bom-list-table-wrap .bom-list-table tbody td:nth-child(9) {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: center !important;
}


/* =========================================================
   RESPONSIVE LAYOUT + MOBILE SIDEBAR MENU FIX (2026-05-18)
   - Makes IMS fit Chrome/Edge/Firefox/Safari and mobile widths
   - Adds off-canvas sidebar behavior for phones/tablets
   - Keeps table bodies readable by horizontal scrolling, not squashing
   ========================================================= */
.mobile-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #e5e7eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mobile-sidebar-toggle:hover { background: rgba(255,255,255,.13); border-color: rgba(165,180,252,.34); }
.mobile-sidebar-toggle:active { transform: scale(.97); }
.mobile-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(2,6,23,.56);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.app-sidebar { z-index: 80; }
#main-app > .flex.flex-1 { min-height: 0; min-width: 0; }
.app-main-panel, #main-content { min-width: 0; }
#main-content {
  width: 100%;
  max-width: 100%;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
#app-header, #app-footer { min-width: 0; }
#header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ultra-table-shell,
.bom-list-table-wrap,
.low-stock-raw-style-shell,
[class*="table-wrap"],
[class*="table-shell"] {
  max-width: 100%;
}
.ultra-table-head-wrap,
.ultra-table-body-wrap {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1180px) {
  #app-header { padding-left: 14px !important; padding-right: 14px !important; }
  #main-content { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 14px !important; }
  .app-sidebar { width: 216px !important; }
  .ultra-table { min-width: 980px; }
}

@media (max-width: 900px) {
  html, body, #app, #main-app { height: 100%; width: 100%; overflow: hidden; }
  .mobile-sidebar-toggle { display: inline-flex; }
  #app-header {
    gap: 10px;
    min-height: 58px;
    padding: 9px 12px !important;
  }
  #app-header > div:first-child { flex: 1 1 auto; min-width: 0; }
  #app-header > div:last-child { flex: 0 0 auto; min-width: 0; }
  #current-date { display: none !important; }
  #header-title { font-size: 16px !important; max-width: calc(100vw - 162px); }
  .app-logo { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .app-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(82vw, 292px) !important;
    max-width: 292px !important;
    height: 100dvh;
    border-right: 1px solid rgba(148,163,184,.22) !important;
    box-shadow: 22px 0 60px rgba(0,0,0,.42);
    transform: translateX(-104%);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  body.ims-sidebar-open .app-sidebar { transform: translateX(0); }
  body.ims-sidebar-open .mobile-sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-sidebar-backdrop { display: block; }
  body.ims-sidebar-open { overflow: hidden !important; }
  .sidebar-item { min-height: 44px; font-size: 14px !important; }
  #main-app > .flex.flex-1 { display: flex; width: 100%; min-width: 0; }
  .app-main-panel { width: 100%; min-width: 0; }
  #main-content {
    padding: 10px 10px 14px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
  #app-footer {
    padding: 7px 10px !important;
    gap: 8px;
    flex-wrap: wrap;
  }
  #app-footer .theme-toggle-btn { min-height: 34px; }
  #app-footer span { font-size: 11px; }
  .glass-card { max-width: 100%; }
  .stat-card, .rounded-2xl, .rounded-xl { max-width: 100%; }
  .ultra-table-shell, .bom-list-table-wrap, .low-stock-raw-style-shell {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ultra-table { min-width: 920px !important; }
  .bom-list-table-wrap .bom-list-table { min-width: 1120px !important; }
  .low-stock-raw-style-shell .low-stock-table { min-width: 920px !important; }
  input, select, textarea, button { font-size: 16px; }
}

@media (max-width: 560px) {
  #app-header { min-height: 54px; }
  #header-title { font-size: 14px !important; max-width: calc(100vw - 124px); }
  #app-header button[onclick="handleLogout()"] span { display: none !important; }
  #app-header button[onclick="handleLogout()"] { padding: 8px !important; }
  .app-logo { display: none !important; }
  #main-content { padding: 8px !important; }
  #app-footer { justify-content: center !important; text-align: center; }
  #app-footer > div { width: 100%; justify-content: center; flex-wrap: wrap; }
  .modal-content, .modal-overlay .glass-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
  }
  .ultra-table { min-width: 860px !important; }
  .bom-list-table-wrap .bom-list-table { min-width: 1060px !important; }
  .low-stock-raw-style-shell .low-stock-table { min-width: 860px !important; }
}

@media (min-width: 901px) {
  body.ims-sidebar-open .mobile-sidebar-backdrop { display: none !important; }
}

body.theme-light .mobile-sidebar-toggle {
  color: #0f172a;
  border-color: rgba(15,23,42,.14);
  background: rgba(15,23,42,.05);
}
body.theme-light .mobile-sidebar-toggle:hover {
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.25);
}


/* =========================================================
   HARD MOBILE LAYOUT + SLIDE SIDEBAR FIX (2026-05-18 v2)
   Fixes: mobile main scrolling + reliable sidebar drawer on phones/tablets.
   ========================================================= */
:root { --ims-mobile-header-h: 58px; --ims-mobile-footer-h: 48px; }
html, body {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 100vw !important;
}
body { overscroll-behavior: none; }
#app, #main-app {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
}
#main-app {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
#main-app > .flex.flex-1.overflow-hidden {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}
.app-main-panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}
#main-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-x pan-y !important;
}
.mobile-sidebar-toggle {
  position: relative !important;
  z-index: 250 !important;
  pointer-events: auto !important;
}
.mobile-sidebar-backdrop {
  z-index: 190 !important;
}
.app-sidebar {
  z-index: 220 !important;
}
body.ims-sidebar-open,
html.ims-sidebar-open {
  overflow: hidden !important;
}
body.ims-sidebar-open #main-content,
html.ims-sidebar-open #main-content {
  overflow: hidden !important;
}
.ultra-table-shell,
.ultra-table-head-wrap,
.ultra-table-body-wrap,
.bom-list-table-wrap,
.low-stock-raw-style-shell,
.saas-recent-wrap,
[class*="table-wrap"],
[class*="table-shell"] {
  max-width: 100% !important;
  min-width: 0 !important;
}
.ultra-table-shell,
.bom-list-table-wrap,
.low-stock-raw-style-shell,
.saas-recent-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.ultra-table-body-wrap {
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 900px) {
  html, body, #app, #main-app {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }
  #app-header {
    flex: 0 0 auto !important;
    min-height: var(--ims-mobile-header-h) !important;
    max-width: 100vw !important;
  }
  #app-footer {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    max-height: 76px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  #main-app > .flex.flex-1.overflow-hidden {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  #main-content {
    display: block !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 10px 10px 90px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }
  .mobile-sidebar-toggle { display: inline-flex !important; }
  .app-sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 304px) !important;
    max-width: 304px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translate3d(-110%, 0, 0) !important;
    transition: transform .26s cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform !important;
    pointer-events: auto !important;
  }
  body.ims-sidebar-open .app-sidebar,
  html.ims-sidebar-open .app-sidebar,
  #main-app.ims-sidebar-open .app-sidebar {
    transform: translate3d(0, 0, 0) !important;
  }
  .mobile-sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.ims-sidebar-open .mobile-sidebar-backdrop,
  html.ims-sidebar-open .mobile-sidebar-backdrop,
  #main-app.ims-sidebar-open .mobile-sidebar-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .glass-card,
  .saas-panel,
  .saas-hero,
  .section-card,
  .rounded-2xl,
  .rounded-xl {
    max-width: 100% !important;
  }
  .saas-hero,
  .dashboard-grid,
  .stats-grid,
  .grid {
    min-width: 0 !important;
  }
  .ultra-table,
  .saas-recent-table,
  table {
    width: max-content !important;
    min-width: 900px !important;
  }
  .bom-list-table { min-width: 1080px !important; }
  .low-stock-table { min-width: 900px !important; }
}

@media (max-width: 560px) {
  #main-content { padding: 8px 8px 96px !important; }
  #header-title { max-width: calc(100vw - 112px) !important; }
  .ultra-table, .saas-recent-table, table { min-width: 840px !important; }
  .bom-list-table { min-width: 1020px !important; }
}

@media (min-width: 901px) {
  .mobile-sidebar-toggle { display: none !important; }
  .app-sidebar { transform: none !important; position: relative !important; }
  .mobile-sidebar-backdrop { display: none !important; }
}

/* ==========================================================
   MOBILE TABLE BODY HORIZONTAL SCROLL FIX — 2026-05-18
   Keeps page width fixed and gives each table body its own
   smooth left/right scroll on mobile/tablet.
   ========================================================== */
@media (max-width: 900px) {
  #main-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .ultra-table-shell,
  .bom-list-table-wrap,
  .low-stock-table-wrap,
  .low-stock-raw-style-shell,
  .saas-recent-wrap,
  [class*="table-wrap"],
  [class*="table-shell"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .ultra-table-head-wrap,
  .ultra-table-head {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .ultra-table-body-wrap,
  .bom-list-table-body-wrap,
  .low-stock-table-body-wrap,
  .low-stock-single-table-scroll,
  .saas-recent-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges !important;
  }

  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap .ultra-table,
  .saas-recent-table,
  .bom-list-table,
  .low-stock-table {
    width: 1040px !important;
    min-width: 1040px !important;
    max-width: none !important;
    table-layout: fixed !important;
    flex: 0 0 auto !important;
  }

  .bom-list-table,
  .bom-list-table-body-wrap .ultra-table {
    width: 1120px !important;
    min-width: 1120px !important;
  }

  .low-stock-table,
  .low-stock-table-body-wrap .ultra-table {
    width: 1040px !important;
    min-width: 1040px !important;
  }

  .saas-recent-table {
    width: 920px !important;
    min-width: 920px !important;
  }

  .ultra-table-body-wrap::-webkit-scrollbar,
  .bom-list-table-body-wrap::-webkit-scrollbar,
  .low-stock-table-body-wrap::-webkit-scrollbar,
  .saas-recent-wrap::-webkit-scrollbar {
    height: 10px !important;
    width: 10px !important;
  }

  .ultra-table-body-wrap::-webkit-scrollbar-thumb,
  .bom-list-table-body-wrap::-webkit-scrollbar-thumb,
  .low-stock-table-body-wrap::-webkit-scrollbar-thumb,
  .saas-recent-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .55) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(15, 23, 42, .92) !important;
  }

  .ultra-table-body-wrap::-webkit-scrollbar-track,
  .bom-list-table-body-wrap::-webkit-scrollbar-track,
  .low-stock-table-body-wrap::-webkit-scrollbar-track,
  .saas-recent-wrap::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .72) !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 560px) {
  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap .ultra-table,
  .low-stock-table,
  .low-stock-table-body-wrap .ultra-table {
    width: 980px !important;
    min-width: 980px !important;
  }

  .bom-list-table,
  .bom-list-table-body-wrap .ultra-table {
    width: 1100px !important;
    min-width: 1100px !important;
  }

  .saas-recent-table {
    width: 900px !important;
    min-width: 900px !important;
  }
}

/* ==========================================================
   MOBILE TABLE HORIZONTAL SCROLL HARD FIX — 2026-05-18 v4
   Real scroll host fix for rendered table body on phones/tablets.
   ========================================================== */
@media (max-width: 900px) {
  html, body, #app, #main-app, #app-body-row, .app-main-panel {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #main-content {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ultra-table-shell,
  .bom-list-table-wrap,
  .low-stock-table-wrap,
  .low-stock-raw-style-shell,
  .saas-recent-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .ultra-table-head-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .ultra-table-body-wrap,
  .bom-list-table-wrap,
  .low-stock-single-table-scroll,
  .saas-recent-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: scroll !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior: contain !important;
  }

  .ultra-table-body-wrap {
    max-height: min(58vh, 430px) !important;
    padding-bottom: 10px !important;
  }

  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap .ultra-table,
  .bom-list-table,
  .low-stock-table,
  .saas-recent-table,
  .ultra-table-shell table,
  .bom-list-table-wrap table,
  .low-stock-raw-style-shell table,
  .saas-recent-wrap table {
    display: table !important;
    width: var(--ims-mobile-table-min, 1120px) !important;
    min-width: var(--ims-mobile-table-min, 1120px) !important;
    max-width: none !important;
    table-layout: fixed !important;
    flex: none !important;
  }

  .ultra-table-body-wrap::-webkit-scrollbar,
  .bom-list-table-wrap::-webkit-scrollbar,
  .low-stock-single-table-scroll::-webkit-scrollbar,
  .saas-recent-wrap::-webkit-scrollbar {
    height: 12px !important;
    width: 10px !important;
  }

  .ultra-table-body-wrap::-webkit-scrollbar-thumb,
  .bom-list-table-wrap::-webkit-scrollbar-thumb,
  .low-stock-single-table-scroll::-webkit-scrollbar-thumb,
  .saas-recent-wrap::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, .72) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(15, 23, 42, .88) !important;
  }

  .ultra-table-body-wrap::-webkit-scrollbar-track,
  .bom-list-table-wrap::-webkit-scrollbar-track,
  .low-stock-single-table-scroll::-webkit-scrollbar-track,
  .saas-recent-wrap::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .78) !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 560px) {
  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap .ultra-table,
  .bom-list-table,
  .low-stock-table,
  .saas-recent-table,
  .ultra-table-shell table,
  .bom-list-table-wrap table,
  .low-stock-raw-style-shell table,
  .saas-recent-wrap table {
    width: var(--ims-mobile-table-min, 1080px) !important;
    min-width: var(--ims-mobile-table-min, 1080px) !important;
  }
}


/* ==========================================================
   TABLE BODY GRID PROPER FIX V5 — 2026-05-18
   Browser-safe grid alignment after mobile horizontal scroll.
   ========================================================== */
.ultra-table-shell {
  --ims-table-scrollbar: 0px;
}
.ultra-table-head-wrap {
  box-sizing: border-box !important;
  padding-right: var(--ims-table-scrollbar) !important;
}
.ultra-table-head-wrap .ultra-table,
.ultra-table-body-wrap > .ultra-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}
.ultra-table th.excel-cell,
.ultra-table td.excel-cell,
.ultra-table thead th,
.ultra-table tbody td {
  box-sizing: border-box !important;
  border-right: 1px solid rgba(148,163,184,.22) !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  background-clip: padding-box !important;
}
.ultra-table thead th:last-child,
.ultra-table tbody td:last-child {
  border-right: 0 !important;
}
.ultra-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}
.ultra-table colgroup col {
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .ultra-table-head-wrap {
    padding-right: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  .ultra-table-body-wrap,
  .bom-list-table-wrap,
  .low-stock-single-table-scroll,
  .saas-recent-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
  }
  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap > .ultra-table,
  .bom-list-table,
  .low-stock-table,
  .saas-recent-table {
    table-layout: fixed !important;
    border-collapse: collapse !important;
    width: var(--ims-mobile-table-min, 1080px) !important;
    min-width: var(--ims-mobile-table-min, 1080px) !important;
    max-width: none !important;
  }
  .ultra-table th.excel-cell,
  .ultra-table td.excel-cell,
  .ultra-table thead th,
  .ultra-table tbody td {
    min-width: 0 !important;
  }
}

@media (min-width: 901px) {
  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap > .ultra-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .ultra-table-body-wrap {
    overflow-x: hidden !important;
  }
}

/* ==========================================================
   TABLE BODY GRID BROWSER FIX V6 — 2026-05-18
   Fixes desktop/browser blank right-side gap and keeps header/body
   grids using the exact same visible table width.
   ========================================================== */
.ultra-table-shell {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.ultra-table-head-wrap,
.ultra-table-body-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.ultra-table-head-wrap .ultra-table,
.ultra-table-body-wrap > .ultra-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}
.ultra-table thead th,
.ultra-table tbody td {
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
.ultra-table thead th {
  background-clip: padding-box !important;
}

@media (min-width: 901px) {
  .ultra-table-head-wrap {
    overflow: hidden !important;
  }
  .ultra-table-body-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .ultra-table-head-wrap .ultra-table,
  .ultra-table-body-wrap > .ultra-table {
    width: var(--ims-desktop-table-width, 100%) !important;
    min-width: var(--ims-desktop-table-width, 100%) !important;
    max-width: var(--ims-desktop-table-width, 100%) !important;
  }
}

@media (max-width: 900px) {
  .ultra-table-shell {
    overflow: hidden !important;
  }
  .ultra-table-head-wrap {
    overflow: hidden !important;
    padding-right: 0 !important;
  }
  .ultra-table-body-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ==========================================================
   IMS FINAL QA PATCH V7 — icon fallback + final responsive table polish
   ========================================================== */
.ims-icon-fallback{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:1em!important;height:1em!important;line-height:1!important;font-size:1em!important;
  font-family:Arial,"Segoe UI Symbol",sans-serif!important;font-weight:700!important;
}
[data-lucide]:empty::before{content:'•';display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-weight:700;}
@media (max-width:900px){
  #main-content{overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y!important;}
  .ultra-table-shell{overflow:hidden!important;width:100%!important;max-width:100%!important;}
  .ultra-table-head-wrap{overflow:hidden!important;width:100%!important;max-width:100%!important;}
  .ultra-table-body-wrap{overflow-x:auto!important;overflow-y:auto!important;width:100%!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y!important;}
  .ultra-table-body-wrap::-webkit-scrollbar{height:12px!important;width:10px!important;}
  .ultra-table-body-wrap::-webkit-scrollbar-thumb{background:rgba(99,102,241,.72)!important;border-radius:999px!important;border:2px solid rgba(15,23,42,.88)!important;}
  .ultra-table-head-wrap .ultra-table,.ultra-table-body-wrap>.ultra-table{min-width:980px!important;max-width:none!important;table-layout:fixed!important;}
  .bom-list-table-wrap,.low-stock-single-table-scroll,.saas-recent-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
}
@media (min-width:901px){
  .ultra-table-shell{overflow:hidden!important;}
  .ultra-table-head-wrap{overflow:hidden!important;}
  .ultra-table-body-wrap{overflow-x:hidden!important;overflow-y:auto!important;}
}

/* =========================================================
   LOW STOCK ALERTS — 12 VISIBLE RECORD ROWS PATCH
   User requirement: Low Stock Alerts table body must show 12
   record rows, then continue with vertical scrolling.
   Header is sticky inside the same scroll table.
   45px header + (12 × 40px body rows) = 525px total scroll area.
   ========================================================= */
.low-stock-raw-style-shell .low-stock-single-table-scroll,
.low-stock-raw-style-shell .low-stock-table-body-wrap {
  max-height: 525px !important;
  height: 525px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.low-stock-raw-style-shell .low-stock-table thead th {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  line-height: 45px !important;
}

.low-stock-raw-style-shell .low-stock-table tbody tr,
.low-stock-raw-style-shell .low-stock-table tbody td,
.low-stock-raw-style-shell .low-stock-table .item-name-inner {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
}

/* =========================================================
   IMS GLOBAL FONT STYLE + TEXT SIZE PERFECT PATCH — 2026-05-29
   Applies one clean, readable typography system to every section:
   Dashboard, Parties, Product Stock, Raw Stock, Inward, Outward,
   BOM List, Low Stock Alerts and User Management.
   ========================================================= */
:root {
  --ims-font-main: 'Outfit', Arial, Helvetica, sans-serif;
  --ims-font-mono: 'Space Mono', 'Roboto Mono', Consolas, monospace;
  --ims-text-xs: 11px;
  --ims-text-sm: 12px;
  --ims-text-base: 13px;
  --ims-text-table: 13.5px;
  --ims-text-title: 20px;
  --ims-line-tight: 1.22;
  --ims-line-normal: 1.35;
}

html,
body,
#app,
#main-app,
#main-content,
.app-main-panel,
button,
input,
select,
textarea,
table,
th,
td,
label,
span,
div,
p {
  font-family: var(--ims-font-main) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}

body {
  font-size: var(--ims-text-base) !important;
  line-height: var(--ims-line-normal) !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
}

/* Header, sidebar and footer typography */
#header-title {
  font-size: var(--ims-text-title) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}
#current-date,
#app-footer,
#app-footer span,
#footer-user-id {
  font-size: var(--ims-text-xs) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}
#footer-user-id,
.font-mono,
.mono-cell,
.item-code-cell,
.low-stock-raw-style-shell .low-stock-table .item-code-cell {
  font-family: var(--ims-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}
.sidebar-item {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
}
.sidebar-item span,
#sidebar-nav span {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Section titles, subtitles, KPI cards */
#main-content h1,
#main-content h2,
#main-content h3,
.saas-hero h1,
.saas-panel h2,
.section-title {
  font-family: var(--ims-font-main) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.16 !important;
}
#main-content h1,
.saas-hero h1 { font-size: 22px !important; }
#main-content h2,
.saas-panel h2 { font-size: 18px !important; }
#main-content h3 { font-size: 15px !important; }
#main-content p,
.section-subtitle,
.text-gray-400,
.text-gray-500 {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
.kpi-value {
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.kpi-label,
.kpi-sub {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Forms, filters, dropdowns and buttons */
.form-input,
input,
select,
textarea,
.dropdown-item {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
}
label,
.form-label {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
button,
.btn-primary,
.btn-danger,
.btn-ghost,
.btn-csv,
.export-btn,
.theme-toggle-btn {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.badge,
.activity-pill,
.low-stock-status-pill {
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em !important;
}

/* All section tables — same clean font and perfect readable size */
.ultra-table,
.bom-list-table,
.low-stock-table,
.saas-recent-table,
.table-row,
#main-content table {
  font-family: var(--ims-font-main) !important;
  font-size: var(--ims-text-table) !important;
  line-height: var(--ims-line-tight) !important;
}
.ultra-table thead th,
.bom-list-table thead th,
.low-stock-table thead th,
.saas-recent-table thead th,
#main-content table thead th {
  font-family: var(--ims-font-main) !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.ultra-table tbody td,
.bom-list-table tbody td,
.low-stock-table tbody td,
.saas-recent-table tbody td,
#main-content table tbody td {
  font-family: var(--ims-font-main) !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0.002em !important;
}
.ultra-table .item-code-cell,
.ultra-table .item-name-cell,
.ultra-table .item-name-inner,
.ultra-table .item-name-plain,
.bom-list-table .item-code-cell,
.bom-list-table .item-name-cell,
.low-stock-table .item-code-cell,
.low-stock-table .item-name-cell,
.low-stock-table .item-name-inner,
.saas-recent-table .item-code-cell,
.saas-recent-table .item-name-cell {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.004em !important;
}
.ultra-table .numeric-cell,
.ultra-table td.col-stock,
.ultra-table td.col-min-stock,
.ultra-table td.col-max-stock,
.low-stock-table td:nth-child(5),
.low-stock-table td:nth-child(6),
.low-stock-table td:nth-child(7),
.low-stock-table td:nth-child(8) {
  font-family: var(--ims-font-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Low Stock Alerts exact typography lock with 12-row scroll patch */
.low-stock-raw-style-shell .low-stock-table thead th {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  line-height: 45px !important;
}
.low-stock-raw-style-shell .low-stock-table tbody td,
.low-stock-raw-style-shell .low-stock-table .item-name-inner {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
}
.low-stock-raw-style-shell .low-stock-status-pill {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* Mobile keeps form fields readable and tables consistent */
@media (max-width: 900px) {
  body { font-size: 13px !important; }
  #header-title { font-size: 16px !important; }
  .sidebar-item { font-size: 14px !important; }
  .ultra-table thead th,
  .bom-list-table thead th,
  .low-stock-table thead th,
  .saas-recent-table thead th { font-size: 11.5px !important; }
  .ultra-table tbody td,
  .bom-list-table tbody td,
  .low-stock-table tbody td,
  .saas-recent-table tbody td { font-size: 13px !important; }
  input,
  select,
  textarea { font-size: 16px !important; }
}

/* ==========================================================
   CONTINUOUS TABLE BODY SCROLL PATCH — 2026-05-29
   ========================================================== */
.ultra-table-body-wrap,
.bom-list-table-body-wrap,
.low-stock-table-body-wrap,
.low-stock-single-table-scroll {
  max-height: calc(100vh - 285px) !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.continuous-scroll-pager {
  padding: 9px 12px !important;
}
.continuous-scroll-loader-row td,
.continuous-scroll-end-row td {
  height: 42px !important;
  font-size: 12px !important;
  letter-spacing: .01em !important;
}
.continuous-scroll-end-row td {
  background: rgba(15, 23, 42, .36) !important;
}
@media (max-width: 900px) {
  .ultra-table-body-wrap,
  .bom-list-table-body-wrap,
  .low-stock-table-body-wrap,
  .low-stock-single-table-scroll {
    max-height: min(62vh, 520px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    touch-action: pan-x pan-y !important;
  }
  .continuous-scroll-pager {
    font-size: 11px !important;
  }
}


/* =========================================================
   IMS PAGE/API LOADER — requested circle loader integrated safely
   NOTE: The original demo body flex/background is intentionally NOT global,
   so the IMS layout, white/dark theme and table grid stay unchanged.
   ========================================================= */
.ims-page-loader{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(32,38,40,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.ims-page-loader.is-visible,
body.ims-loading .ims-page-loader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.loader-circle-50 {
  width: 70px;
  height: 70px;
  position: relative;
}
.loader-circle-50:after,
.loader-circle-50:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #00fbff;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader-circle-50-bounce 2.0s infinite ease-in-out;
}
.loader-circle-50:after {
  animation-delay: -1.0s;
}
@keyframes loader-circle-50-bounce {
  0%, 100% {
    transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
  }
}
.smooth-table-loader .loader-circle-50,
.loader-circle-50.loader-circle-50-mini{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.smooth-table-loader .loader-circle-50:before,
.smooth-table-loader .loader-circle-50:after,
.loader-circle-50.loader-circle-50-mini:before,
.loader-circle-50.loader-circle-50-mini:after{
  background-color:currentColor;
  opacity:.55;
}
body.theme-light .ims-page-loader, html.theme-light .ims-page-loader{
  background:rgba(255,255,255,.72);
}
body.theme-dark .ims-page-loader, html.theme-dark .ims-page-loader{
  background:rgba(32,38,40,.88);
}
@media (prefers-reduced-motion: reduce){
  .loader-circle-50:before,
  .loader-circle-50:after{animation:none;transform:scale(.72);}
}

/* Full-screen loader disabled: loading is shown inside table body only */
.ims-page-loader{display:none!important;}
body.ims-loading .ims-page-loader,.ims-page-loader.is-visible{display:none!important;}


/* TABLE BODY LOADER FIX — keep loader inside scroll body without adding fake table rows.
   This prevents colspan loader rows from stretching columns/row heights. */
.ultra-table-body-wrap,
.table-body-wrap,
.excel-table-wrap,
.table-wrap{position:relative!important;}
.table-body-loader-overlay,
.smooth-table-loader.table-body-loader-overlay{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) scale(.98)!important;
  z-index:40!important;
  width:auto!important;
  max-width:calc(100% - 28px)!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  pointer-events:none!important;
  white-space:nowrap!important;
  background:rgba(15,23,42,.92)!important;
  border:1px solid rgba(0,251,255,.28)!important;
  box-shadow:0 16px 38px rgba(15,23,42,.22)!important;
  color:#00fbff!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease!important;
}
.table-body-loader-overlay.is-visible,
.smooth-table-loader.table-body-loader-overlay.is-visible{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.table-body-loader-overlay.hidden,
.smooth-table-loader.table-body-loader-overlay.hidden{display:flex!important;opacity:0!important;visibility:hidden!important;}
body.theme-light .table-body-loader-overlay,
html.theme-light .table-body-loader-overlay{
  background:rgba(255,255,255,.96)!important;
  color:#0891b2!important;
  border-color:rgba(8,145,178,.28)!important;
}
/* Never let loading rows affect Excel grid geometry if old cached markup appears. */
.ultra-table tbody tr.smooth-table-loader-row,
.ultra-table tbody tr.continuous-scroll-loader-row,
.ultra-table tbody tr.continuous-scroll-end-row{display:none!important;}

/* Entry order button click fix */
.ledger-mode-btn,
.ledger-mode-btn * {
  pointer-events: auto !important;
}
.ledger-mode-btn {
  position: relative;
  z-index: 30;
  border: 1px solid rgba(99,102,241,.38);
}
.ledger-mode-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(34,197,94,.24), 0 0 0 6px rgba(99,102,241,.18);
}

/* ==========================================================
   BOM LIST CROSS-BROWSER GRID LOCK — 2026-05-30
   Keep a single sticky-header table inside one scroll body. Nested horizontal
   scrollers create different scrollbar calculations in Chrome/Edge/Firefox.
   ========================================================== */
.bom-list-table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.bom-list-table-wrap > .bom-list-table-body-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: 360px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  scrollbar-gutter: stable !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bom-list-table-wrap .bom-list-table {
  display: table !important;
  width: 1248px !important;
  min-width: 1248px !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.bom-list-table-wrap .bom-list-table col:nth-child(1) { width: 44px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(2) { width: 72px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(3) { width: 112px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(4) { width: 150px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(5) { width: 260px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(6) { width: 140px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(7) { width: 260px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(8) { width: 100px !important; }
.bom-list-table-wrap .bom-list-table col:nth-child(9) { width: 110px !important; }
.bom-list-table-wrap .bom-list-table thead th,
.bom-list-table-wrap .bom-list-table tbody td {
  display: table-cell !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bom-list-table-wrap .bom-list-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
}

/* ==========================================================
   BOM LIST DESKTOP FIT OVERRIDE — browser-independent final
   Desktop: fit all 9 columns inside the available BOM card width with
   no horizontal scrollbar. Mobile/tablet: preserve horizontal scrolling.
   ========================================================== */
@media (min-width: 901px) {
  .bom-list-table-wrap,
  .bom-list-table-wrap > .bom-list-table-body-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .bom-list-table-wrap .bom-list-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  .bom-list-table-wrap .bom-list-table col:nth-child(1) { width: 3.6% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(2) { width: 5.8% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(3) { width: 9.0% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(4) { width: 12.0% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(5) { width: 20.7% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(6) { width: 11.2% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(7) { width: 20.5% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(8) { width: 8.0% !important; }
  .bom-list-table-wrap .bom-list-table col:nth-child(9) { width: 9.2% !important; }
}
@media (max-width: 900px) {
  .bom-list-table-wrap > .bom-list-table-body-wrap { overflow-x: auto !important; }
  .bom-list-table-wrap .bom-list-table {
    width: 1248px !important;
    min-width: 1248px !important;
    max-width: none !important;
  }
}

/* ==========================================================
   ALL SECTION TABLE BODY AUTO HEIGHT — cross-browser final
   JavaScript measures the available content viewport and writes
   --ims-auto-table-body-height for each rendered table body.
   This overrides older fixed 9-row / 360px rules safely.
   ========================================================== */
.ultra-table-shell > .ultra-table-body-wrap,
.ultra-table-shell .bom-list-table-body-wrap,
.ultra-table-shell .low-stock-table-body-wrap {
  height: var(--ims-auto-table-body-height, calc(100dvh - 285px)) !important;
  min-height: var(--ims-auto-table-body-height, calc(100dvh - 285px)) !important;
  max-height: var(--ims-auto-table-body-height, calc(100dvh - 285px)) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
@supports not (height: 100dvh) {
  .ultra-table-shell > .ultra-table-body-wrap,
  .ultra-table-shell .bom-list-table-body-wrap,
  .ultra-table-shell .low-stock-table-body-wrap {
    height: var(--ims-auto-table-body-height, calc(100vh - 285px)) !important;
    min-height: var(--ims-auto-table-body-height, calc(100vh - 285px)) !important;
    max-height: var(--ims-auto-table-body-height, calc(100vh - 285px)) !important;
  }
}


/* ==========================================================
   STABLE VISIBLE-AREA TABLE BODY OVERRIDE — 2026-05-30
   Final table body dimensions are written by the stable fitter in app.js.
   Avoid smooth-scroll animation and compositor hints while dimensions change.
   ========================================================== */
.ultra-table-shell > .ultra-table-body-wrap,
.ultra-table-shell .bom-list-table-body-wrap,
.ultra-table-shell .low-stock-table-body-wrap {
  min-height: 0 !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  will-change: auto !important;
  contain: layout paint style !important;
}


/* ==========================================================
   FOOTER-SAFE MAIN VIEWPORT LOCK — 2026-05-30
   All section cards stay inside the shrinkable content viewport. The footer
   always owns its own flex row and is never covered by table bodies.
   ========================================================== */
#main-app {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#app-body-row,
.app-main-panel,
#main-content {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#app-body-row { flex: 1 1 0% !important; }
.app-main-panel { flex: 1 1 0% !important; }
#main-content { flex: 1 1 0% !important; }
#app-footer {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 80 !important;
}
.ultra-table-shell,
.ultra-table-shell > .ultra-table-body-wrap,
.ultra-table-shell .bom-list-table-body-wrap,
.ultra-table-shell .low-stock-table-body-wrap {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Preserve dashboard scrolling while table sections remain footer-safe. */
#main-content.dashboard-scroll-enabled {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#main-content:not(.dashboard-scroll-enabled) {
  overflow: hidden !important;
}

/* ==========================================================
   PERSISTENT FOOTER-SAFE MAIN AREA — 2026-05-30 v8
   Footer owns its row permanently. Table sections never scroll under it.
   ========================================================== */
#main-app,
#app-body-row,
.app-main-panel,
#main-content {
  min-height: 0 !important;
  box-sizing: border-box !important;
}
#main-app {
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
#app-header,
#app-footer { flex: 0 0 auto !important; }
#app-body-row { flex: 1 1 0% !important; overflow: hidden !important; }
.app-main-panel { flex: 1 1 0% !important; overflow: hidden !important; }
#main-content:not(.dashboard-scroll-enabled) { overflow: hidden !important; }
#main-content.dashboard-scroll-enabled { overflow-y: auto !important; overflow-x: hidden !important; }
#app-footer { position: relative !important; z-index: 100 !important; }
#main-content .ultra-table-shell { max-height: 100% !important; overflow: hidden !important; }
#main-content .ultra-table-shell > .ultra-table-body-wrap,
#main-content .ultra-table-shell .bom-list-table-body-wrap,
#main-content .ultra-table-shell .low-stock-table-body-wrap {
  min-height: 0 !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
}


/* ==========================================================
   LAZY-APPEND STABLE GRID LOCK — 2026-05-30 v9
   Keep desktop body width, 40px row grid and pager footprint unchanged while
   continuous-scroll records are appended.
   ========================================================== */
@media (min-width: 901px) {
  #main-content .ultra-table-shell > .ultra-table-body-wrap {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    scroll-behavior: auto !important;
  }
  #main-content .ultra-table-shell > .ultra-table-head-wrap,
  #main-content .ultra-table-shell > .ultra-table-body-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #section-pager-mount {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #section-pager-mount > .continuous-scroll-pager,
  #section-pager-mount > .pro-table-pager {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}
#main-content .ultra-table tbody tr.data-row,
#main-content .ultra-table tbody tr.table-row {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}
#main-content .ultra-table tbody tr.data-row > td,
#main-content .ultra-table tbody tr.table-row > td {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   UNIFIED CROSS-BROWSER VIEWABLE AREA — 2026-05-31 v10
   Pure flex sizing keeps every inventory section inside the real browser
   viewport. Header/footer stay fixed; only the rendered table body scrolls.
   ========================================================= */
html,
body {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#main-app {
  flex-direction: column !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
#app-header,
#app-footer {
  flex: 0 0 auto !important;
}
#app-body-row,
.app-main-panel,
#main-content {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#app-body-row,
.app-main-panel {
  flex: 1 1 0% !important;
}
#main-content.ims-table-viewport-mode,
#main-content:not(.dashboard-scroll-enabled) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
#main-content.dashboard-scroll-enabled {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#main-content:not(.dashboard-scroll-enabled) > *:not(.ultra-table-shell) {
  flex: 0 0 auto !important;
}
#main-content:not(.dashboard-scroll-enabled) > .ultra-table-shell,
#main-content .ims-viewport-table-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#main-content .ims-viewport-table-head,
#main-content .ultra-table-shell > .ultra-table-head-wrap {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#main-content .ims-viewport-table-body,
#main-content .ultra-table-shell > .ultra-table-body-wrap,
#main-content .ultra-table-shell .bom-list-table-body-wrap,
#main-content .ultra-table-shell .low-stock-table-body-wrap {
  flex: 1 1 0% !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  box-sizing: border-box !important;
}
@media (min-width: 901px) {
  #main-content .ims-viewport-table-body,
  #main-content .ultra-table-shell > .ultra-table-body-wrap,
  #main-content .ultra-table-shell .bom-list-table-body-wrap,
  #main-content .ultra-table-shell .low-stock-table-body-wrap {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
  }
}
@media (max-width: 900px) {
  #main-content .ims-viewport-table-body,
  #main-content .ultra-table-shell > .ultra-table-body-wrap,
  #main-content .ultra-table-shell .bom-list-table-body-wrap,
  #main-content .ultra-table-shell .low-stock-table-body-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
#section-pager-mount {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
#app-footer {
  position: relative !important;
  z-index: 120 !important;
}


/* Login visibility guard: layout rules must never expose the app before authentication. */
#main-app[style*="display:none"],
#main-app[style*="display: none"] { display: none !important; }

/* Small-screen viewable-area correction: remove legacy bottom spacer. */
@media (max-width: 900px) {
  #main-content:not(.dashboard-scroll-enabled) {
    padding: 10px !important;
  }
}


/* ==========================================================
   HIDE CONTINUOUS-SCROLL STATUS STRIP — 2026-05-31 v11
   Lazy loading remains active; the lower status card must not occupy
   visible main-area space in any browser or section.
   ========================================================== */
#section-pager-mount,
#section-pager-mount > .continuous-scroll-pager,
#section-pager-mount > .pro-table-pager {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}