:root{
  --sidebar-w: 300px;
  --topbar-h: 64px;
}
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
/* Keep shared actions compact while retaining a comfortable touch target. */
.btn:not(.btn-sm):not(.p-0){ padding: .4rem .78rem; font-size: .9rem; line-height: 1.35; }
.btn.btn-lg{ padding: .47rem .9rem; font-size: .96rem; }
.brand-circle { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #4f46e5, #22c55e); }
.nav-link { border-radius: 10px; padding: .6rem .75rem; overflow-wrap: anywhere; }
.nav-link:hover { background: rgba(37, 99, 235, .08); color: #1d4ed8 !important; }

.app-topbar{ min-height: var(--topbar-h); }
.app-burger{ border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: .55rem .6rem; }
.app-page-title{ font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.app-page-subtitle{ font-size: .85rem; line-height: 1.1; }
.app-user-dot{ width: 8px; height: 8px; border-radius: 99px; background: #22c55e; display:inline-block; }

.sidebar-desktop{
  width: var(--sidebar-w);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1030;
}
.app-sidebar-light{
  background: #fbfaf7;
  color: #243042;
  border-right: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .06);
}
.app-sidebar-light,
.app-sidebar-light .fw-semibold,
.app-sidebar-light .offcanvas-title{
  color: #243042 !important;
}
.app-sidebar-light .text-muted{
  color: #64748b !important;
}

.sidebar-offcanvas{
  width: min(86vw, var(--sidebar-w));
}
.sidebar-nav{
  width: 100%;
  flex-wrap: nowrap !important;
  flex-direction: column !important;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 190px);
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.sidebar-nav > .sidebar-link{
  width: 100%;
  flex-basis: auto;
}
.sidebar-nav > .sidebar-subnav{
  width: 100%;
  flex: 0 0 auto;
}

.app-shell{
  height: 100vh;
  overflow: hidden;
}
.app-main{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app-content-scroll{
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

@media (min-width: 992px){
  .app-main{ margin-left: var(--sidebar-w); }
}

.sidebar-link{
  color: #475569 !important;
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  transition: background-color .15s ease, color .15s ease;
}
.app-sidebar-light .sidebar-link,
.app-sidebar-light .sidebar-link span,
.app-sidebar-light .sidebar-link i{
  color: #475569 !important;
}
.app-sidebar-light .sidebar-link:hover,
.app-sidebar-light .sidebar-link:hover span,
.app-sidebar-light .sidebar-link:hover i,
.app-sidebar-light .sidebar-link.active,
.app-sidebar-light .sidebar-link.active span,
.app-sidebar-light .sidebar-link.active i{
  color: #1d4ed8 !important;
}
.sidebar-link span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-link i{ opacity: .9; flex: 0 0 auto; }
.sidebar-link:hover{ background: rgba(37, 99, 235, .08); color: #1d4ed8 !important; }
.sidebar-link.active{
  background: #eaf2ff;
  color: #1d4ed8 !important;
  box-shadow: inset 3px 0 0 #2563eb;
}
.sidebar-collapse-toggle{
  border: 0;
  background: transparent;
  padding: .6rem .75rem;
  text-align: left;
  justify-content: space-between;
  font: inherit;
}
.sidebar-collapse-toggle[aria-expanded] .bi-chevron-down{
  transition: transform .1s ease;
}
.sidebar-collapse-toggle[aria-expanded="true"] .bi-chevron-down{
  transform: rotate(180deg);
}
.sidebar-subnav{
  overflow: hidden;
  will-change: height;
}
.sidebar-subnav.collapsing{
  transition: height .1s ease-out !important;
}

.hover-card{ transition: transform .12s ease, box-shadow .12s ease; }
.hover-card:hover{ transform: translateY(-1px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important; }
.widget-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.2rem;
  opacity: .95;
}
.stock-widget-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 1rem;
}
.master-suggestions{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 1050;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 14px;
}
.table-address-snippet{}
.upload-thumb{
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}
.document-preview-image{
  max-height: 78vh;
}
.document-preview-frame{
  width: 100%;
  min-height: 78vh;
}

/* Shared ERP table styling */
.table-responsive{
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-responsive::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
.table-responsive > .table{
  margin-bottom: 0;
  color: #172033;
}
.table-responsive > .table thead th{
  background: #f8fafc;
  color: #0f172a;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #dbe3ef;
}
.table-responsive > .table thead th[data-sort-index]{
  cursor: pointer;
  user-select: none;
}
.table-responsive > .table thead th[data-sort-index]:hover{
  color: #1d4ed8;
  background: #eef5ff;
}
.table-responsive > .table thead th[data-sort-index]::after{
  content: " \2195";
  color: #94a3b8;
  font-size: .78em;
}
.table-responsive > .table thead th[data-sort-dir="asc"]::after{
  content: " \2191";
  color: #2563eb;
}
.table-responsive > .table thead th[data-sort-dir="desc"]::after{
  content: " \2193";
  color: #2563eb;
}
.table-responsive > .table tbody td{
  vertical-align: middle;
  border-color: #e5eaf1;
}
.table-responsive > .table th.table-date-cell,
.table-responsive > .table td.table-date-cell,
.table-responsive > .table th.table-time-cell,
.table-responsive > .table td.table-time-cell{
  min-width: 9.5rem;
  white-space: nowrap;
}
.table-responsive > .report-table{
  min-width: 1080px;
  table-layout: auto;
}
.table-responsive > .report-table thead th,
.table-responsive > .report-table tbody td{
  min-width: 8rem;
  white-space: nowrap;
}
.table-responsive > .report-table thead th:first-child,
.table-responsive > .report-table tbody td:first-child{
  padding-left: 1rem;
}
.table-responsive > .report-table thead th:last-child,
.table-responsive > .report-table tbody td:last-child{
  padding-right: 1rem;
}
.table-responsive > .report-table td{
  max-width: 18rem;
}
.table-responsive > .table.small thead th{
  font-size: .84rem;
}
.table-responsive > .table.small tbody td{
  font-size: .9rem;
  line-height: 1.35;
}
.table-responsive > .table:not(.table-sm) > :not(caption) > * > *{
  padding: .72rem .85rem;
}
.table-responsive > .table.table-sm > :not(caption) > * > *{
  padding: .48rem .55rem;
}
.table-responsive > .table tbody tr:hover > *{
  background-color: rgba(37, 99, 235, .035);
}
.table-responsive > .table .badge{
  font-weight: 700;
}
.table-ellipsis{}
.table-ellipsis-sm{}
.table-stack{
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.table-stack .subtext{
  color: #64748b;
  font-size: .79rem;
  line-height: 1.25;
}
.table-pagination{
  border-radius: 0 0 1rem 1rem;
  border-top: 1px solid #e5eaf1;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.table-pagination .btn-group{
  gap: .25rem;
}
.table-pagination .btn{
  border-radius: 999px !important;
  min-width: 2.15rem;
  min-height: 2.15rem;
  padding: .35rem .72rem;
  font-weight: 600;
  box-shadow: none !important;
}
.table-pagination .btn.btn-outline-primary,
.table-pagination .btn.btn-outline-secondary{
  background: #fff;
  border-color: #d7e0ee;
  color: #334155;
}
.table-pagination .btn.btn-outline-primary:hover,
.table-pagination .btn.btn-outline-secondary:hover{
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.table-pagination .btn.btn-primary{
  background: #2563eb;
  border-color: #2563eb;
}
.table-pagination strong{
  color: #0f172a;
}
.table-pagination-summary{
  font-size: .86rem;
  color: #64748b;
}

/* Better small-screen spacing */
@media (max-width: 576px){
  .card .card-body{ padding: 1.25rem !important; }
  .app-page-title{ font-size: 1rem; }
  .table-responsive > .table.small thead th{
    font-size: .8rem;
  }
  .table-responsive > .table.small tbody td{
    font-size: .84rem;
    line-height: 1.28;
  }
  .table-responsive > .table.table-sm > :not(caption) > * > *{
    padding: .42rem .48rem;
  }
  .table-ellipsis{}
  .table-pagination{
    gap: .75rem !important;
  }
  .table-pagination-summary{
    width: 100%;
    text-align: center;
  }
  .table-pagination .btn-group{
    justify-content: center;
  }
}
input[type="number"],
input.form-control[type="number"] {
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input.form-control[type="number"]::-webkit-outer-spin-button,
input.form-control[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  margin: 0 !important;
}

.table-responsive > .production-history-table{
  min-width: 940px;
  table-layout: auto;
}
.table-responsive > .production-history-table th,
.table-responsive > .production-history-table td{
  white-space: nowrap;
}