/* ==========================================================================
   CPS Live - Custom Theme 2026 (NetTalk 14 & jQuery UI 1.13.2)
   Structure:
   1. CONFIGURATION & CSS VARIABLES
   2. JQUERY UI CORE OVERRIDES
   3. JQUERY UI COMPONENTS & NETTALK BROWSES
   4. BUTTON SYSTEM
   5. LAYOUT & STRUCTURAL COMPONENTS
   6. THIRD-PARTY INTEGRATIONS (Redactor/CKEditor)
   7. BRANDING & IDENTITY
   8. FEATURE SPECIFIC COMPONENTS
   9. UTILITY CLASSES
   10. GLOBAL RESPONSIVE & ANIMATIONS
   ========================================================================== */

/* ==========================================================================
   1. CONFIGURATION (Variables & Base)
   ========================================================================== */
:root {
  /* --- Color Palette Primitives --- */
  --color-blue: #0f2dff;
  --color-light-blue: #1D7480;
  --color-red: #C84838;
  --color-pink: #C83870;
  --color-beige: #C89038;
  --color-green: #008000;
  --color-light-green: #38C848;
  --color-light-grey: #d3d3d3;
  --color-purple: #9038C8;
  --color-light-purple: #C838B8;
  --color-dark-purple: #4838C8;
  --color-black: #383838;
  --color-grey: #707070;
  --color-silver: #C0C0C0;
  --color-dark-blue-border: #3B63ED;

  /* --- Semantic Colors --- */
  --color-primary-ui: var(--color-blue);
  --color-secondary-ui: var(--color-light-blue);
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-text-default: var(--color-black);
  --color-text-light: #ffffff;
  --color-text-highlight: #2A7B7B;

  /* --- Data Grid & Input Tokens --- */
  --entry-background: #ffffff;
  --browse-empty-border: 1px solid var(--color-silver);
  --browse-greenbar2-background: #e6fce2;
  --browse-mouseover-background: #8fe07f;
  --browse-mouseover-text: #383838;
  --browse-row-selected-background: #76ce64;
  --browse-row-selected-text: #383838;

  /* --- Spacing & Layout Metrics --- */
  --spacing-1x: 0.25rem;
  --spacing-2x: 0.5rem;
  --browse-grid-cell-padding: 0.5rem;
  --entry-radius: 0.5rem;
  --radius-full: 2rem;
  --font-weight-bold: bold;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: #f0f2f5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333333;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   2. JQUERY UI CORE OVERRIDES (Global Fixes)
   ========================================================================== */
.ui-widget-content,
.ui-widget-header,
.ui-state-default,
.ui-state-hover,
.ui-state-active {
  background-image: none !important;
}

.ui-button,
.ui-state-default,
.nt-button {
  background: var(--color-light-grey) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-silver) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.ui-button:hover,
.ui-state-hover,
.ui-state-default:hover,
.nt-button:hover {
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
  border-color: var(--color-dark-blue-border) !important;
}

.ui-button:active,
.ui-state-active,
.ui-state-default:active,
.nt-button:active {
  background: var(--color-dark-purple) !important;
  color: #ffffff !important;
}

:is(input[type="text"], input[type="password"], textarea, .ui-selectmenu-button) {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  border: 1px solid var(--color-silver);
}

:is(input[type="text"], input[type="password"], textarea, .ui-selectmenu-button):focus {
  border-color: var(--color-primary-ui) !important;
  outline: 2px solid var(--color-primary-ui);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(15, 45, 255, 0.2);
  background: #ffffff !important;
}

/* ==========================================================================
   3. JQUERY UI COMPONENTS & NETTALK BROWSES
   ========================================================================== */
/* --- Dialogs & Overlays --- */
/* Strict hidden enforcement for inactive dialogs */
.ui-dialog[style*="display: none"],
.ui-dialog[style*="display:none"],
.ui-dialog.ui-helper-hidden,
.ui-dialog.nt-hidden,
.ui-dialog[hidden] {
  display: none !important;
}

.ui-dialog {
  padding: 0;
  overflow: visible !important;
  border: 1px solid var(--color-silver) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}   

#ui-datepicker-div {
  z-index: 10060 !important;
}

/* Baseline overlay elevation without !important so multiple overlays can stack */
.ui-widget-overlay {
  background: rgba(15, 45, 255, 0.15) !important;
  backdrop-filter: blur(4px);
  opacity: 1 !important;
  z-index: 1000;
}

/* Dynamic Flexbox Dialog Height (Active/Open dialogs only) 
   z-index: 1001 without !important allows jQuery UI to increment inline z-indexes for child popups */
.ui-dialog.ui-widget:not([style*="display: none"]):not([style*="display:none"]):not(.ui-helper-hidden):not(.nt-hidden):not([hidden]) {
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
  z-index: 1001;
}

.ui-dialog .ui-dialog-content {
  flex: 1 1 auto !important;
  max-height: calc(92vh - 4.5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
}

.ui-dialog .ui-dialog-titlebar {
  flex: 0 0 auto !important;
  background: var(--color-primary-ui);
  color: #ffffff;
  border: none;
  border-radius: 2rem;
  padding: 1rem 1.5rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-dialog .ui-dialog-title {
  min-height: 1.5rem;
  line-height: 1.5rem;
}

.ui-dialog .ui-dialog-titlebar-close {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  margin: 0;
  transition: background 0.2s ease;
  inset-inline-end: 0.75rem;
  top: 0.75rem;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background: var(--color-danger) !important;
}

.ui-dialog-titlebar-closehide {
  display: none;
}

/* --- SelectMenu & Droplist Popup Engine --- */
.ui-selectmenu-menu {
  z-index: 999;
  max-height: min(40vh, 280px) !important;
  overflow: hidden;
}

.ui-dialog .ui-selectmenu-menu,
.ui-dialog ~ .ui-selectmenu-menu {
  z-index: 10050 !important;
}

.ui-selectmenu-menu .ui-menu {
  background: #ffffff !important;
  border: 2px solid var(--color-primary-ui) !important;
  border-radius: 0.5rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  max-height: min(40vh, 280px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.ui-selectmenu-menu .ui-menu-item-wrapper {
  padding: 0.75rem 1rem;
  color: var(--color-black) !important;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu-item-wrapper:hover {
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
  border: none !important;
  margin: 0 !important;
}

/* --- NetTalk 14 Browse Table & Greenbar Enhancements --- */
:is(.nt-browse-table, .PackingBrowseTable) {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-silver, #C8C8C8) !important;
  border-radius: var(--entry-radius, 0.5rem);
  overflow: hidden;
  margin: 0 auto;
}

:is(.nt-browse-table, .PackingBrowseTable) tr:nth-child(odd) {
  background: #ffffff !important;
}

:is(.nt-browse-table, .PackingBrowseTable) tr:nth-child(even) {
  background: var(--browse-greenbar2-background) !important;
}

:is(.nt-browse-table, .PackingBrowseTable) tr {
  transition: background 0.2s ease, transform 0.1s ease;
}

:is(.nt-browse-table, .PackingBrowseTable) tr:hover {
  background: var(--browse-mouseover-background) !important;
  color: var(--browse-mouseover-text) !important;
}

:is(.nt-browse-table, .PackingBrowseTable) tr.nt-browse-grid-row-selected,
:is(.nt-browse-table, .PackingBrowseTable) tr.ui-state-active {
  background: var(--browse-row-selected-background) !important;
  color: var(--browse-row-selected-text) !important;
  font-weight: var(--font-weight-bold, bold);
}

:is(.nt-browse-table, .PackingBrowseTable) td {
  padding: var(--browse-grid-cell-padding, 0.5rem 0.75rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- Accordions & Group Fields --- */
.ui-accordion .ui-accordion-content {
  padding: 0;
}   

.ui-accordion .ui-accordion-header {
  border-top-left-radius: 2rem;  
  border-top-right-radius: 2rem;
} 

.ui-accordion-content {
  max-height: 310px;
}

.nt-export-button {
  font-size: 0.75rem;
}

.nt-plain-legend {
  font-size: 1.25em;
  font-weight: normal;
  color: #ffffff;
  background: darkblue !important;
  border: none;
}

.nt-plain-fieldset {
  padding: 0.25rem;
}

/* ==========================================================================
   4. THE BUTTON SYSTEM (Modular)
   ========================================================================== */
:is(.btn-base, .Next-button, .Quantity-button, .Post-button,
[class*="menu-button-"], .btn-phonebase, .holdbutton, .extramenu-button) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  text-decoration: none;
  font-family: inherit;
  border: none;
  gap: 0.35rem;
  transition: transform 0.1s ease, filter 0.2s, background 0.2s;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
}

:is(.btn-base, .Next-button, .Quantity-button, .Post-button,
[class*="menu-button-"], .btn-phonebase, .holdbutton, .extramenu-button):active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

:is(.btn-base, .Next-button, .Quantity-button, .Post-button,
[class*="menu-button-"], .btn-phonebase, .holdbutton, .extramenu-button):focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

:is([class*="menu-button-"], .extramenu-button) {
  min-width: 3rem;
}

.Next-button {
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
  flex-grow: 1;
  max-width: 12rem;
  padding: 0.8rem 1rem;
}

.Post-button {
  background: var(--color-success) !important;
  color: #ffffff !important;
  font-weight: bold;
  flex-grow: 1;
  max-width: 18.75rem;
  padding: 1rem;
}

.holdbutton {
  background: var(--color-danger) !important;
  color: #ffffff !important;
  flex-grow: 1;
  max-width: 10rem;
  font-size: 1.25rem;
}

.Quantity-button {
  background: var(--color-secondary-ui) !important;
  color: #ffffff !important;
  width: 9.4rem;
  padding: 1rem 1.5rem;
}

.menu-button-large {
  background: var(--color-dark-purple) !important;
  width: 12rem;
  min-height: 6rem;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #ffffff !important;
}

:is(.menu-button-small, .menu-button-xsmall) {
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
  width: 100%;
  padding: 1rem 1.5rem;
  margin-bottom: 0.5rem;
}

:is(.cps-mobilemenu-button, .cps-menu-button) {
  width: 100% !important;
  min-height: 3rem;
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
  padding-inline-start: 1.5rem;
  border-radius: 1rem;
  font-weight: 300;
}

.ui-checkboxradio-icon {
  display: none !important;
}

.ui-checkboxradio-label.ui-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-light-grey) !important;
  border: 1px solid var(--color-silver) !important;
  color: var(--color-black) !important;
  padding: 0.5rem 1.5rem;
  min-height: 2.25rem;
  border-radius: var(--entry-radius);
  font-weight: 500;
}

.ui-checkboxradio-label.ui-button:hover {
  background: #f0f0f0 !important;
  border-color: var(--color-primary-ui) !important;
}

.ui-checkboxradio-label.ui-checkboxradio-checked.ui-state-active {
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
  border-color: var(--color-dark-blue-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-phonebase {
  background: var(--color-silver) !important;
  color: #1a1a1a !important;
  flex-shrink: 0;
}

.btn-phone {
  width: 9rem;
  height: 6rem;
  font-size: 0.75rem !important;
}

.btn-phonesmall {
  width: 8rem;
  height: 4.5rem;
  font-size: 0.75rem !important;
}

/* Fluid responsive toolbar button sizing (Option 2) */
.btn-phoneextrasmall, .extramenu-button {
  width: clamp(4.5rem, 14vw, 5.5rem);
  height: 3.5rem;
  padding: 0.4rem 0.35rem;
  font-size: clamp(0.75rem, 2vw, 0.85rem);
  font-weight: 300;
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   5. LAYOUT & STRUCTURAL COMPONENTS
   ========================================================================== */
.cps-site-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding-inline: 1.5rem;
  width: 100%;
  height: 4.5rem;
  background: rgb(0 0 0 / 20%);
  box-sizing: border-box;
}

.nt-responsive-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2x);
  width: 100%;
}

.nt-responsive-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2x);
  background: transparent;
  padding: var(--spacing-2x);
  width: 100%;
}

.nt-responsive-flex-grid > * {
  flex: 1 1 150px;
  max-width: 100%;
}

.nt-radio-div-buttons-hor {
  display: flex;
  flex-direction: row;
  color: var(--color-blue);
  border: 3px groove var(--color-blue) !important;
  border-radius: var(--entry-radius);
  padding: var(--spacing-1x);
  background: #ffffff !important;
  padding-top: 1rem;
}

.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: var(--entry-radius);
  box-sizing: border-box;
}

.PackingBrowseTable {
  width: 100% !important;
  border-collapse: collapse;
  font-size: clamp(0.9rem, 2vw, 1.5rem);
}

.RestockBrowseTable {
  font-size: 1.75rem;
}

.scroll-container {
  width: 100%;
  max-width: 22rem;
  height: 12.5rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  border: 1px solid var(--color-silver);
}

/* ==========================================================================
   6. REDACTOR / CKEDITOR (Self-Contained)
   ========================================================================== */
.redactor-box.redactor-styles-on .redactor-in {
  background: #ffffff;
}

.hideredactortools .redactor-toolbar a.re-button-icon {
  display: none;
}

@media (min-width: 961px) {
  .setredactorbig > .redactor-box.redactor-styles-on .redactor-in {
    width: 50rem;
    height: 21.25rem;
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    padding: 1.5rem;
    border-radius: 4px;
  }
}

@media (max-width: 960px) and (min-width: 481px) {
  .setredactorbig > .redactor-box.redactor-styles-on .redactor-in,
  .setredactorsmall > .redactor-box.redactor-styles-on .redactor-in {
    width: 90vw;
    height: 15rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .setredactorsmall > .redactor-box.redactor-styles-on .redactor-in {
    width: 100%;
    max-width: 100vw;
    height: 12rem;
    font-size: clamp(0.75rem, 4vw, 0.85rem);
    padding: 0.8rem;
  }

  .redactor-toolbar {
    background: var(--color-light-grey);
    padding: 2px !important;
  }
}

/* ==========================================================================
   7. BRANDING & IDENTITY
   ========================================================================== */
.logo-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-inline-end: 0.5rem;
}

.logo-name, .logo-wpname {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
}

.logo-name {
  color: var(--color-blue);
}

.logo-wpname {
  color: var(--color-black);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 0.5rem;
}

.logout-btn {
  background: var(--color-danger) !important;
  color: #ffffff !important;
  padding: 0.6rem 1.25rem;
  border-radius: 2rem;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border: none;
}

.logout-btn:hover {
  background: #a82e20 !important;
}

/* ==========================================================================
   8. FEATURE SPECIFIC COMPONENTS (DropPart, Forms, Dashboard)
   ========================================================================== */
.nt-label-gauge {
  border: none;
  padding: 0;
  margin-bottom: 0;
  border-radius: var(--entry-radius);
}

.nt-browse-empty {
  padding: 1em;
  color: #ffffff;
  background: #005bbf !important;
  border: var(--browse-empty-border);
}

.dashboardline {
  max-height: 3.5rem;
  color: var(--color-blue);
  border: 3px groove var(--color-blue) !important;
  border-radius: var(--entry-radius);
  padding: var(--spacing-1x);
  background: #f0f0f0 !important;
  padding-top: 1rem;
  display: flex;
  align-items: flex-end;
}

.dashboardtext {
  display: inline-block;
  width: 14rem;
  min-height: 6rem;
  padding: 1rem 0.5rem 0.5rem 1rem;
  box-sizing: border-box;
  color: var(--color-blue);
  border: 3px groove var(--color-blue) !important;
  border-radius: var(--entry-radius);
  background: #ffffff !important;
}

.dashboardtextwide {
  display: inline-block;
  max-width: min(100%, 29rem);
  min-height: 6rem;
  padding: 1rem 0.5rem 0.5rem 1rem;
  box-sizing: border-box;
  color: var(--color-blue);
  border: 3px groove var(--color-blue) !important;
  border-radius: var(--entry-radius);
  background: #ffffff !important;
}

/* ==========================================================================
   Base Dropdown Containers
   ========================================================================== */
:is(.cpsdroppart-dropdown, .cpsdroppart-dropdownsmall, .cpsdroppart-dropdownwide, 
    .cpsentrypart-dropdown, .cpsentrypart-dropdownsmall, .cpsentrypart-dropdownwide) {
  min-width: 8rem;
  background: #ffffff !important;
  text-align: start;
  white-space: nowrap;
  border: 4px solid var(--color-primary-ui) !important;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  padding: 0;
  box-sizing: border-box;
  z-index: 999;
  position: relative;
  overflow: visible !important;
  margin-top: 0.75rem;
}

/* Scoped elevation when dropdowns are opened inside a modal dialog */
.ui-dialog :is(.cpsdroppart-dropdown, .cpsdroppart-dropdownsmall, .cpsdroppart-dropdownwide, 
               .cpsentrypart-dropdown, .cpsentrypart-dropdownsmall, .cpsentrypart-dropdownwide) {
  z-index: 10050 !important;
}

/* ==========================================================================
   Floating Border Label (Shared Engine + Distinct Content)
   ========================================================================== */
:is([class*="cpsentrypart-dropdown"])::before {
  position: absolute;
  top: 0;
  left: 0.75rem;
  transform: translateY(-50%);
  background: #ffffff;
  padding: 0 0.35rem;
  color: var(--color-primary-ui);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
}

:is(.cpsentrypart-dropdownbrand, .cpsentrypart-dropdown.brand)::before     { content: "Select Brand"; }
:is(.cpsentrypart-dropdownproduct, .cpsentrypart-dropdown.product)::before { content: "Select Product"; }
:is(.cpsentrypart-dropdownoption, .cpsentrypart-dropdown.option)::before   { content: "Select Option"; }

/* ==========================================================================
   Scrolling & Item List
   ========================================================================== */
:is(.cpsdroppart-dropdown, .cpsentrypart-dropdown) > :is(ul, .inner-scroll) {
  max-height: min(40vh, 280px);
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
}

:is(.cpsdroppart-dropdown, .cpsentrypart-dropdown) :is(a, li, .ui-menu-item-wrapper) {
  display: block;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: var(--color-text-default);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

:is(.cpsdroppart-dropdown, .cpsentrypart-dropdown) :is(a, li, .ui-menu-item-wrapper):hover,
:is(.cpsdroppart-dropdown, .cpsentrypart-dropdown) :is(a, li, .ui-menu-item-wrapper):focus,
:is(.cpsdroppart-dropdown, .cpsentrypart-dropdown) :is(a, li, .ui-menu-item-wrapper).ui-state-focus {
  background: var(--color-primary-ui) !important;
  color: #ffffff !important;
}

/* Width Variants */
:is(.cpsdroppart-dropdown, .cpsentrypart-dropdown)           { min-width: 100%; }
:is(.cpsdroppart-dropdownsmall, .cpsentrypart-dropdownsmall) { max-width: 100%; }
:is(.cpsdroppart-dropdownwide, .cpsentrypart-dropdownwide)   { width: 100%; max-width: 30rem; }


.ui-selectmenu-button.ui-button {
  background: var(--entry-background) !important;
  border: 1px solid var(--color-silver) !important;
  border-radius: var(--entry-radius);
  padding: 0.5rem 1rem;
}

.ui-selectmenu-button.ui-button:hover {
  background: #f0f0f0 !important;
  border-color: var(--color-primary-ui) !important;
}

:is(.allocatependingpayment, .entrydroplist) > .ui-selectmenu-button.ui-button {
  background: var(--color-light-grey) !important;
  border: 1px solid var(--color-silver);
}

.allocatependingpayment > .ui-selectmenu-button.ui-button {
  width: 6.25rem;
  text-align: right;
}

.cpspasswordbutton {
  position: relative;
  right: 6rem;
  background: var(--color-secondary-ui) !important;
  min-width: 0.5rem;
  padding-inline-start: 1rem;
}

.EntryBoxOption {
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  min-width: 15em;
  background: var(--color-light-grey) !important;
  color: var(--color-blue);
  border-radius: var(--entry-radius);
  font-weight: 500;
}

.browseentry {
  display: block;
  width: 100%;
  padding: 1rem;
  min-height: 6rem;
  text-align: center;
  background: #ffffff !important;
  border: 1px solid var(--color-silver);
  color: var(--color-text-highlight);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.orderqtyentry {
  min-width: 8rem !important;
  border: 2px solid var(--color-dark-blue-border) !important;
  border-radius: var(--entry-radius) !important;
  text-align: right !important;
  padding-inline-end: 0.5rem !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.orderqtyentry > .ui-selectmenu-button.ui-button {
  display: inline-flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  width: 95% !important;
  border: none !important;
  font-size: medium;
  max-height: 2.5rem;
}

.orderqtyentry:focus,
.orderqtyentry:focus-visible,
.orderqtyentry > .ui-selectmenu-button.ui-button:focus {
  background: #ffffff !important;
  color: var(--color-primary-ui) !important;
  outline: 3px solid var(--color-primary-ui) !important;
  outline-offset: 2px;
}

.cpsyoutube {
  width: 100%;
  max-width: 43.75rem;
  min-height: 25rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--entry-radius);
}

.cpsperformance {
  background: var(--color-primary-ui) !important;
  color: var(--color-text-light);
  text-align: right;
  padding: 0.5rem 1rem;
  font-weight: var(--font-weight-bold);
}

.cpsemoji {
  margin-inline-end: 0;
  padding: 0.25rem 0 0 0;
}

/* ==========================================================================
   9. UTILITY CLASSES
   ========================================================================== */
.colourblue {
  background: var(--color-blue) !important;
  color: #ffffff !important;
}

.colourpink {
  background: var(--color-pink) !important;
  color: #ffffff !important;
}

.colourgrey {
  background: var(--color-grey);
  color: #ffffff;
}

.coloursuccess {
  background: var(--color-success) !important;
  color: #ffffff !important;
}

.colourbeige {
  background: var(--color-beige);
  color: #ffffff;
}

.colourpurple {
  background: var(--color-purple);
  color: #ffffff;
}

.cpstextgreen {
  color: var(--color-success);
  font-weight: bold;
}

.cpshighlight {
  background: var(--color-primary-ui);
  color: #ffffff;
}

.cps-messageby {
  font-size: 0.75rem;
  opacity: 0.8;
}

.cpsemailfont {
  font-size: 0.8rem;
}

.Reset-button {
  color: var(--color-text-highlight);
}

.update-announcement,
.wreck-card,
.product-card,
.about-conquest {
  background: #ffffff !important;
  padding: 30px;
  border-radius: 12px;
  max-width: 800px;
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.update-announcement h2,
.wreck-card h2,
.product-card h1,
.about-conquest h2 {
  color: #1a365d;
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.update-announcement h3,
.wreck-card h3,
.product-card h3,
.about-conquest h3 {
  color: #2b6cb0;
  font-size: 1.3rem;
  margin-top: 25px;
  margin-bottom: 10px;
}

.update-announcement ol,
.update-announcement ul,
.wreck-card ul,
.product-card ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.update-announcement li,
.wreck-card li,
.product-card li {
  margin-bottom: 8px;
}

.title-bar {
  color: #1a365d;
  font-size: 1.5rem;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 3px solid #2b6cb0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.phonepicklocation {
  font-size: clamp(1.25rem, 4.5vw, 2.25rem);
  font-weight: 500;
  color: var(--color-primary-ui);
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  word-break: break-word;
}

.noofitemstext {
  display: flex;
  align-items: center;          /* Vertical centering */
  justify-content: center;       /* Horizontal centering */
  text-align: center;
  height: 10rem;
  min-height: 10rem;
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(2.5rem, 5vw, 6rem);
  line-height: 1;                /* Prevents tall line-height from skewing vertical center */
  color: var(--color-primary-ui);
  font-weight: 600;
  padding: 0;
  margin: 0;
}

.TrackingNumber {
  font-size: clamp(1.25rem, 5vw, 2rem);
  font-weight: bold;
}

.pendingamount {
  background: var(--color-primary-ui);
  color: #ffffff;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.MOBBrowseEntry {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.cpssmallbutton {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  margin: 0 0.25rem;
}

.cpssmallmenubutton { width: 6rem; font-size: 0.75em; }
.phoneplannerbutton { width: 5rem; font-size: 0.75rem; }
.cpswidth5em { width: 5rem !important; }
.cpswidth10em { width: 10rem !important; }
.cpsphotowidth { width: 100%; max-width: 25rem !important; }

:is(.cps-layout-tight, .cps-layout-flush) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

:is(.cps-layout-tight, .cps-layout-flush) > * {
  margin: 0 !important;
}

.cps-layout-tight {
  gap: 0.1rem;
  padding: 0.1rem !important;
}

.cps-layout-flush {
  gap: 0;
  padding: 0.1rem !important;
}

.cps-smallform-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2x);
}

.cps-smallform-prompt {
  flex: 0 0 8rem;
  max-width: 100%;
}

.cps-smallform-cell > :not(.cps-smallform-prompt) {
  flex: 1 1 10rem;
}

/* ==========================================================================
   10. GLOBAL RESPONSIVE, SHORT-VIEWPORT & ANIMATIONS
   ========================================================================== */
.cps-loader {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid var(--color-silver);
  border-bottom-color: var(--color-blue);
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nt-hide-desktop {
  display: block;
}

.nt-button-mobile-full {
  width: 100%;
  margin-bottom: 0.5rem;
}

.cpsmobileform, .cpsplusmenu {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Mobile Base Defaults (< 600px) */
html { 
  font-size: clamp(0.75rem, 0.5vw + 0.65rem, 0.85rem); 
}

body { padding: 0 !important; }
.logo-name, .logo-wpname { display: none; }
.logout-btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
:is(.nt-browse-table, .PackingBrowseTable) { width: 100% !important; }

/* Mobile Breakpoints */
@media (max-width: 480px) {
  .phonepicklocation, .phonepickitem, .DeliveryAddress {
    max-width: 100%;
    min-height: 4rem;
  }
}

@media (max-width: 400px) {
  .cps-site-header { padding-inline: 0.75rem; }
  .logo-image { width: 40px; height: 40px; }
}

/* Desktop & Responsive Min-Width Steps */
@media (min-width: 601px) {
  html { font-size: clamp(0.75rem, 0.5vw + 0.65rem, 0.9rem); }
  body { padding: 10px !important; }
  .logo-name, .logo-wpname { display: inline-block; }
}

@media (min-width: 768px) {
  html { font-size: clamp(0.8rem, 0.4vw + 0.7rem, 0.95rem); }
  body { padding: 20px !important; }
  .nt-responsive-stack { flex-direction: row; gap: 1.5rem; }
  .menu-button-small { max-width: 40rem; }
  .menu-button-xsmall { max-width: 25rem; }
}

@media (min-width: 961px) {
  html { font-size: clamp(0.85rem, 0.3vw + 0.75rem, 1rem); }
  .nt-hide-desktop { display: none !important; }
}

@media (min-width: 1601px) {
  html { font-size: 1rem; }
}      

/* Special Short-Viewport Height Overrides */
@media (max-height: 600px) {
  .ui-dialog.ui-widget:not([style*="display: none"]):not([style*="display:none"]):not(.ui-helper-hidden):not(.nt-hidden):not([hidden]) {
    max-height: 96vh !important;
  }   
  
/* Compact the title bar so it uses less vertical space */
  .ui-dialog .ui-dialog-titlebar {
    padding: 0.5rem 1rem !important;
  } 
  
/* Allow content to take up 100% of the remaining flex space cleanly */
  .ui-dialog .ui-dialog-content {
    max-height: calc(96vh - 3rem) !important;
    padding: 0.75rem 1rem !important;
  }

  .ui-selectmenu-menu,
  .ui-selectmenu-menu .ui-menu,
  :is(.cpsdroppart-dropdown, .cpsdroppart-dropdownsmall, .cpsdroppart-dropdownwide, .cpsentrypart-dropdown) {
    max-height: 30vh !important;
  }
}

/* ==========================================================================
   Warehouse Scanner / Mobile Viewport Max Height (Samsung A52 & similar)
   ========================================================================== */
@media (max-width: 480px) and (max-height: 850px) {
  /* Expand outer dialog to full usable viewport */
  .ui-dialog.ui-widget:not([style*="display: none"]):not([style*="display:none"]):not(.ui-helper-hidden):not(.nt-hidden):not([hidden]) {
    max-height: 98dvh !important;
    max-height: 98vh !important; /* Fallback for older web engines */
    width: 98vw !important;
    max-width: 98vw !important;
    margin: 1dvh auto !important;
    border-radius: 0.35rem !important;
  }   
  
  /* Ultra-compact title bar */
  .ui-dialog .ui-dialog-titlebar {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.35rem 0.35rem 0 0 !important;
  }

  .ui-dialog .ui-dialog-title {
    min-height: 1.25rem !important;
    line-height: 1.25rem !important;
  }

  .ui-dialog .ui-dialog-titlebar-close {
    width: 1.5rem !important;
    height: 1.5rem !important;
    top: 0.25rem !important;
    inset-inline-end: 0.5rem !important;
  }
  
  /* Maximize scrollable content area */
  .ui-dialog .ui-dialog-content {
    max-height: calc(98dvh - 2.25rem) !important;
    max-height: calc(98vh - 2.25rem) !important;
    padding: 0.5rem 0.5rem !important; /* Tighten side/top padding for picking lists */
  }

  /* Compact header bar if present inside the dialog */
  .cps-site-header {
    height: 3.25rem !important;
    padding-inline: 0.5rem !important;
  }

  /* Increase dropdown menu visibility so pickers don't scroll tiny menus */
  .ui-selectmenu-menu,
  .ui-selectmenu-menu .ui-menu,
  :is(.cpsdroppart-dropdown, .cpsdroppart-dropdownsmall, .cpsdroppart-dropdownwide, .cpsentrypart-dropdown) {
    max-height: 45dvh !important;
    max-height: 45vh !important;
  }
}