body { background: #f5f6fa; }
.navbar-brand { font-weight: 700; }
.card { border: 0; }
.table th { white-space: nowrap; }
.form-label { font-weight: 600; }
body{
    background:#f5f6fa;
}

.card{
    margin-top:20px;
    box-shadow:0 0 8px rgba(0,0,0,.15);
}

footer{
    margin-top:60px;
}

h2{
    margin-bottom:25px;
}
.picklist-dialog {
    width: min(32rem, calc(100vw - 2rem));
    border: 0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.picklist-dialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.generated-description-panel {
  border: 1px solid #dfe3e8;
  border-radius: .5rem;
  background: #f8f9fa;
  padding: 1rem;
}
.picklist-dialog {
  width: min(30rem, calc(100vw - 2rem));
  border: 0;
  border-radius: .75rem;
  padding: 1.25rem;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
}
.picklist-dialog::backdrop { background: rgba(0,0,0,.35); }

.pos-workspace .form-control-lg { min-height: 3.5rem; font-size: 1.35rem; }
.pos-total-card { border-top: .3rem solid var(--bs-success); }
.pos-total-card .display-6 { font-size: 2rem; }
@media (min-width: 1200px) {
  .pos-workspace .table { font-size: 1.05rem; }
}

.inventory-result-card { transition: transform .12s ease, box-shadow .12s ease; }
.inventory-result-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12); }
.inventory-timeline { border-left: 2px solid #dfe3e8; margin-left: .5rem; padding-left: 1.25rem; }
.inventory-timeline-event { position: relative; padding: 0 0 1.5rem .25rem; }
.inventory-timeline-event::before { content: ""; position: absolute; width: .75rem; height: .75rem; border-radius: 50%; background: var(--bs-primary); left: -1.7rem; top: .3rem; }


/* Canonical contextual navigation. */
.cn-breadcrumbs .breadcrumb { font-size: .9rem; }
.cn-breadcrumbs a { text-decoration: none; }
.cn-breadcrumbs a:hover { text-decoration: underline; }


/*
 * Compact workstation layout.
 *
 * On short laptop screens, preserve full-size controls but remove excess
 * vertical chrome and keep the primary form-completion action reachable.
 */
@media (min-width: 992px) and (max-height: 800px) {
  main.container {
    padding-top: .75rem !important;
    padding-bottom: 1rem !important;
  }

  main.container > h1,
  main.container > .d-flex:first-child h1 {
    margin-bottom: .25rem;
  }

  #receive-item-form,
  .cn-consignor-form {
    margin-top: .5rem;
  }

  #receive-item-form .card-body,
  .cn-consignor-form .card-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  #receive-item-form .row.g-3,
  .cn-consignor-form .row.g-3 {
    --bs-gutter-y: .75rem;
  }

  .cn-primary-action {
    position: sticky;
    bottom: .5rem;
    z-index: 4;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-body-bg-rgb), .96);
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .08);
  }

  .cn-primary-action .btn-primary {
    width: 100%;
  }
}

/* CN-3033: keep high-frequency POS actions visible on desktop. */
.pos-basket-count {
  min-width: 7rem;
}

.pos-basket-count-number {
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-variant-numeric: tabular-nums;
}

.pos-sale-adjustments > summary {
  cursor: pointer;
  list-style: none;
}

.pos-sale-adjustments > summary::-webkit-details-marker {
  display: none;
}

.pos-sale-adjustments > summary::before {
  content: "▸";
  margin-right: .4rem;
}

.pos-sale-adjustments[open] > summary::before {
  content: "▾";
}

@media (min-width: 1200px) {
  .pos-checkout-card {
    top: .75rem !important;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .pos-checkout-card .card-body {
    padding-bottom: .75rem;
  }

  .pos-checkout-actions {
    position: sticky;
    bottom: -.75rem;
    z-index: 3;
    margin-left: -.25rem;
    margin-right: -.25rem;
    padding: .75rem .25rem .75rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
  }
}

/* CN-3033: selected Find Item action stays visible without page scrolling. */
@media (min-width: 992px) {
  .pos-item-detail-card {
    height: min(26rem, calc(100vh - 19rem));
    min-height: 18rem;
    overflow: hidden;
  }

  .pos-item-detail-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .pos-selected-item-actions {
    position: sticky;
    bottom: -.5rem;
    z-index: 2;
    margin-left: -.25rem;
    margin-right: -.25rem;
    padding: .5rem .25rem .5rem;
    background: var(--bs-tertiary-bg);
  }
}


/* CN-3044: laptop-first workstation shell and reusable density primitives. */
.cn-workstation-nav {
  min-height: 3.25rem;
}

.cn-workstation-nav .navbar-brand {
  margin-right: 1.25rem;
}

.cn-workstation-nav .nav-link {
  white-space: nowrap;
}

.cn-nav-tools {
  flex-shrink: 0;
}

.cn-print-destination {
  width: auto;
  max-width: 10rem;
}

.cn-page-header {
  margin-bottom: 1rem;
}

.cn-page-header h1 {
  margin-bottom: .125rem;
}

.cn-filter-bar {
  margin-bottom: 1rem;
}

.cn-metric-strip .card-body {
  padding: 1rem;
}

.cn-compact-card .card-body {
  padding: 1rem;
}

.cn-compact-table > :not(caption) > * > * {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

@media (min-width: 992px) {
  main.container {
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }

  .cn-workstation-nav .navbar-nav .nav-link {
    padding-left: .55rem;
    padding-right: .55rem;
  }

  .cn-workstation-nav .dropdown-menu {
    margin-top: .35rem;
  }

  footer.container {
    margin-top: 1.5rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

@media (min-width: 992px) and (max-height: 800px) {
  .cn-page-header {
    margin-bottom: .75rem;
  }

  .cn-page-header p,
  .cn-page-header .text-muted {
    line-height: 1.25;
  }

  .cn-compact-card {
    margin-top: .75rem;
  }
}


/* CN-3044 POS: keep the sale path stable inside a short laptop viewport. */
@media (min-width: 1200px) {
  .pos-workspace .cn-pos-basket-scroll {
    max-height: clamp(12rem, 35vh, 22rem);
    overflow-y: auto;
  }

  .pos-workspace .cn-pos-basket-scroll thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
  }

  .cn-pos-checkout-column .sticky-top {
    top: .75rem !important;
  }
}

@media (min-width: 992px) and (max-height: 800px) {
  .pos-workspace-subtitle {
    display: none;
  }

  .pos-workspace .card-body {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }

  .pos-workspace .form-label {
    margin-bottom: .25rem;
  }

  .pos-workspace .pos-basket-count {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
  }
}


/* CN-3044 Receiving: favor current item entry over surrounding context. */
@media (min-width: 992px) and (max-height: 800px) {
  .cn-receive-item-card .card-body {
    padding: .85rem 1rem;
  }

  .cn-receive-item-card .form-label {
    margin-bottom: .25rem;
  }

  .cn-receive-item-card .generated-description-panel {
    padding: .65rem;
  }

  #multi-row-receiving .card-body {
    padding: .75rem 1rem;
  }
}


/* CN-3044 visual review: reclaim POS height without shrinking safeguards. */
@media (min-width: 992px) and (max-height: 800px) {
  .pos-workspace > .alert {
    padding-top: .55rem;
    padding-bottom: .55rem;
    margin-bottom: .65rem;
  }

  .cn-pos-header {
    min-height: 3.1rem;
  }

  .cn-pos-header .btn {
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  .pos-workspace .pos-basket-count-number {
    line-height: .95;
  }
}


.cn-inventory-scope {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 15.5rem;
  max-width: none;
  padding-right: 2.5rem;
}

#inventory-search {
  min-width: 8rem;
}

@media (max-width: 767.98px) {
  .cn-inventory-scope {
    min-width: 11rem;
  }
}

@media (min-width: 992px) and (max-height: 800px) {
  .cn-metric-strip .card-body {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .breadcrumb {
    margin-bottom: .65rem;
  }
}


.cn-app-footer {
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-top: 1rem;
  font-size: .75rem;
  opacity: .7;
}

@media (min-width: 992px) {
  footer.cn-app-footer {
    margin-top: .75rem;
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
  }
}


.cn-nav-search-form {
  width: min(16rem, 24vw);
  min-width: 10rem;
}

.cn-nav-search-input {
  min-width: 0;
}

@media (max-width: 1199.98px) {
  .cn-nav-search-form {
    width: 11rem;
  }
}

@media (max-width: 991.98px) {
  .cn-nav-search-form {
    width: 100%;
  }
}


/* CN-3044 Labels: operational work first, configuration as a compact secondary strip. */
.cn-label-work-row .card {
  margin-top: 0;
}

.cn-label-rules-strip {
  margin-top: 1rem;
}

.cn-label-work-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 16rem;
}

.cn-label-work-card .btn {
  width: 100%;
}

.cn-label-work-status {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: .75rem 0;
}

.cn-label-status-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.cn-label-queue-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.cn-label-queue-summary > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .65rem .35rem;
  border-right: 1px solid var(--bs-border-color);
}

.cn-label-queue-summary > div:last-child {
  border-right: 0;
}

.cn-label-queue-summary strong {
  font-size: 1.35rem;
}

.cn-label-queue-summary span {
  color: var(--bs-secondary-color);
  font-size: .8rem;
  text-align: center;
}

.cn-label-rules-strip .card-body {
  display: grid;
  grid-template-columns: minmax(15rem, 1.2fr) minmax(24rem, 2fr) auto;
  align-items: center;
  gap: 1.5rem;
}

.cn-label-rules-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.cn-label-rules-list > div {
  border-left: 1px solid var(--bs-border-color);
  padding-left: .75rem;
}

.cn-label-rules-list dt {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
}

.cn-label-rules-list dd {
  margin: .1rem 0 0;
  font-weight: 600;
}

.cn-label-rules-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .cn-label-work-card .card-body {
    min-height: 0;
  }

  .cn-label-rules-strip .card-body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cn-label-rules-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .cn-label-queue-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .cn-label-queue-summary > div:nth-child(2) {
    border-right: 0;
  }

  .cn-label-queue-summary > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--bs-border-color);
  }

  .cn-label-rules-list {
    grid-template-columns: 1fr;
  }
}


/* Wide operational workspaces grow with the workstation display. */
.cn-workspace-container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: clamp(.75rem, 1.5vw, 2rem);
}

.cn-receiving-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
  gap: 1rem;
  align-items: start;
}

.cn-receiving-main {
  min-width: 0;
}

.cn-receiving-sidebar {
  min-width: 0;
}

@media (min-width: 1600px) {
  .cn-workspace-container {
    max-width: 2200px;
  }

  .cn-receiving-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

@media (max-width: 1199.98px) {
  .cn-receiving-layout {
    grid-template-columns: 1fr;
  }
}